/* =========================================================
PROJECT: Walanda platform
FILE: bursaries.css
PATH: /src/modules/bursaries/css/bursaries.css
MODULE: bursaries
SCOPE: styling (global / component / page)
PURPOSE: reference-aligned module styling
AUTHOR: Simasiku Nasilele
STANDARD: Walanda pro ui system
VERSION: 1.0.0
LAST UPDATED: 2026
========================================================= */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}
:root{--primary:#1FA78A;--primary-hover:#168f77;--background:#F4F7F8;--card:#FFF;--text-dark:#2D3A3A;--muted:#6B7C7C;--border:#E6ECEC;--shadow-sm:0 2px 6px rgba(0,0,0,.05);--shadow-md:0 6px 18px rgba(0,0,0,.08);--radius-sm:6px;--radius-md:12px;--radius-lg:18px;--container:1200px}
html{scroll-behavior:smooth}body{font-family:Inter,"Segoe UI",sans-serif;background:var(--background);color:var(--text-dark);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit}button,input,select,textarea{font-family:inherit}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;font-size:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary)}
.container{width:min(var(--container),calc(100% - 40px));margin:0 auto}
.topnav{position:sticky;top:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:18px 40px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.logo img{height:50px}#nav-menu{display:flex;align-items:center}#nav-menu a{margin:0 15px;font-size:14px;color:var(--text-dark);transition:.2s ease}#nav-menu a:hover{color:var(--primary)}#nav-menu .login{background:var(--primary);color:#fff;padding:8px 18px;border-radius:var(--radius-sm)}#nav-menu .register{margin-left:10px;border:1px solid var(--border);padding:8px 18px;border-radius:var(--radius-sm)}#nav-menu .register:hover{background:var(--primary);color:#fff}.menu-toggle{display:none;font-size:26px;cursor:pointer}
/* Hero pattern (2026-06-05): full-bleed background image with a
   translucent green overlay, matching /become-instructor.html. The
   .hero-bg child holds the image; ::after layers the overlay; direct
   children of .hero sit above both via z-index. */
.hero,.page-hero{position:relative;color:#fff;text-align:center;padding:60px 20px 54px;overflow:hidden;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero .hero-bg,.page-hero .hero-bg{position:absolute;inset:0;z-index:0}
.hero .hero-bg img,.page-hero .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero::after,.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(47,143,131,0.88) 0%,rgba(31,167,138,0.88) 100%);z-index:1}
.hero > *:not(.hero-bg),.page-hero > *:not(.hero-bg){position:relative;z-index:2}
.hero h1,.page-hero h1{font-size:clamp(30px,4vw,42px);margin-bottom:12px}
.hero p,.page-hero p{font-size:16px;opacity:.95;max-width:740px;margin:0 auto}
.section{padding:34px 0}.section-title{font-size:28px;margin-bottom:10px}.section-sub{color:var(--muted);font-size:14px;line-height:1.6}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(31,167,138,.1);color:var(--primary);font-size:12px;font-weight:700}
.search-box{max-width:760px;margin:28px auto 0;padding:0 20px}.search-box input{border-radius:999px;padding:14px 18px;box-shadow:var(--shadow-sm)}
.filters-bar{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.two-col-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}.content-stack{display:grid;gap:22px}.sidebar-stack{display:grid;gap:20px}
.card{background:#fff;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow-sm)}.card-body{padding:20px}
.flash-ads{background:var(--primary);color:#fff;overflow:hidden;height:40px;display:flex;align-items:center}.flash-track{display:flex;gap:60px;white-space:nowrap;animation:scrollFlash 18s linear infinite}.flash-item{font-size:14px}@keyframes scrollFlash{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.announcements{display:grid;gap:12px;margin-top:20px}.announcement{background:#fff;padding:14px 18px;border-left:4px solid var(--primary);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);font-size:14px;line-height:1.6}
.bursary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.bursary-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-sm);border:1px solid var(--border);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}.bursary-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.bursary-feed-ad{grid-column:1 / -1}
.bursary-cover{height:190px;background:linear-gradient(135deg,rgba(31,167,138,.22),rgba(47,143,131,.55))}.bursary-cover img{width:100%;height:100%;object-fit:cover}.bursary-card-body{padding:20px}.bursary-topline{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-bottom:12px}.bursary-title{font-size:20px;line-height:1.35;margin-bottom:10px}
.bursary-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.meta-chip{font-size:12px;background:#f2f7f7;color:#496161;padding:8px 10px;border-radius:999px}.bursary-desc{font-size:14px;color:#596767;line-height:1.7;margin-bottom:18px}.bursary-footer{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.apply-btn,.secondary-btn,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 16px;font-size:13px;font-weight:700;border:none}.apply-btn,.btn-primary{background:var(--primary);color:#fff}.apply-btn:hover,.btn-primary:hover{background:var(--primary-hover)}.secondary-btn{background:#f3f8f7;color:var(--text-dark);border:1px solid var(--border)}
.detail-hero{background:#fff;border-radius:20px;border:1px solid var(--border);box-shadow:var(--shadow-sm);overflow:hidden}.detail-cover{height:300px}.detail-cover img{width:100%;height:100%;object-fit:cover}.detail-content{padding:26px}.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}.detail-body{display:grid;gap:20px}
.info-list{display:grid;gap:12px}.info-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid #edf1f1}.info-row:last-child{border-bottom:none}.rich-text p,.rich-text li{color:#556464;font-size:15px;line-height:1.8}.rich-text ul{padding-left:18px;display:grid;gap:8px}
.sidebar-card{background:#fff;padding:20px;border-radius:16px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}.sidebar-card h4{margin-bottom:12px;color:#2f8f83;font-size:16px}.sidebar-card ul{list-style:none;display:grid;gap:10px}.sidebar-card li{font-size:14px;color:#4d5d5d;line-height:1.5}
.provider-card{display:flex;gap:14px;align-items:center}.provider-card img{width:60px;height:60px;border-radius:14px;object-fit:cover}
.ad-slot{position:relative;background:linear-gradient(180deg,#fff 0%,#fbfdfd 100%);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}.ad-slot-shell{padding:18px}.sponsored-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}.sponsored-label i{color:var(--primary);font-size:10px}
.sponsored-card{display:block;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;transition:transform .22s ease,box-shadow .22s ease}.sponsored-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.sponsored-card img{width:100%;height:220px;object-fit:cover}.sponsored-card-body{padding:16px}.sponsored-card h3{font-size:18px;line-height:1.4;margin-bottom:10px}.sponsored-card p{color:#586868;font-size:14px;line-height:1.7;margin-bottom:12px}.sponsored-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}.sponsored-cta{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;font-size:13px;padding:10px 14px;border-radius:999px;font-weight:700}
.slot-fallback{border:1px dashed #d6e4e2;border-radius:12px;background:#fff;padding:22px 20px;text-align:center}.slot-fallback h4{margin-bottom:8px}.slot-fallback p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:14px}.inline-ad-wrap{grid-column:span 3}.sidebar-ad{display:flex;flex-direction:column;gap:var(--space-md)}.bursary-feed-summary{max-width:760px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-grid .full{grid-column:1 / -1}.helper-text{font-size:13px;color:var(--muted);line-height:1.6}
/* Admin-configurable apply form — sections, fields + document uploads */
.apply-section{padding:18px 0;border-top:1px solid var(--border)}.apply-section:first-child{border-top:0;padding-top:0}.apply-section-title{font-size:18px;margin-bottom:14px}
.apply-field{display:flex;flex-direction:column;gap:6px}.apply-field label{font-weight:600;font-size:14px}.apply-req{color:var(--primary)}
.apply-check-label{flex-direction:row;display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-weight:600}.apply-check-label input{width:auto;margin-top:4px}
.apply-doc-list{display:grid;gap:12px}
.apply-doc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;background:#fbfdfd}
.apply-doc-info{display:flex;flex-direction:column;gap:4px}.apply-doc-info strong{font-size:14px}
.apply-req-pill,.apply-opt-pill{align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 9px;border-radius:999px}
.apply-req-pill{color:var(--primary);background:rgba(31,167,138,.12)}.apply-opt-pill{color:var(--muted);background:rgba(0,0,0,.05)}
.apply-doc-control{display:flex;flex-direction:column;gap:6px}.apply-doc-input{width:100%}.apply-doc-status{min-height:18px}.apply-doc-status i{margin-right:5px}
.apply-actions{margin-top:18px}#apply-status:not(:empty){margin-top:14px}
@media (max-width:640px){.apply-doc{grid-template-columns:1fr}}
.walanda-footer{background:linear-gradient(180deg,#3AA49B,#2F8F83);color:#fff;padding:30px 0 20px;margin-top:34px}.footer-divider{height:2px;background:rgba(255,255,255,.35);width:100%;margin-bottom:25px}.footer-wrapper{max-width:1200px;margin:auto;padding:0 30px}.footer-logo{margin-bottom:20px}.footer-logo-img{height:60px}.footer-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:25px}.footer-col h4{font-size:15px;margin-bottom:12px;color:#fff}.footer-col p,.footer-col a{display:block;font-size:13px;color:#d7eeee;margin-bottom:6px}.footer-col a:hover{color:#fff}.border-left{border-left:1px solid rgba(255,255,255,.15);padding-left:18px}.social-icons{display:flex;gap:10px;margin-top:10px}.social-icons a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;color:#0c4f52;border-radius:50%;font-size:13px}.footer-bottom{text-align:right;margin-top:25px;font-size:13px;color:#cdeeee}
@media (max-width:1100px){.bursary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inline-ad-wrap{grid-column:span 2}.detail-grid,.two-col-layout{grid-template-columns:1fr}.filters-bar{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.topnav{padding:15px 24px}#nav-menu{position:absolute;top:80px;right:20px;background:#fff;flex-direction:column;display:none;padding:25px;box-shadow:0 10px 25px rgba(0,0,0,.1);width:260px;border-radius:8px}#nav-menu a{display:block;margin:12px 0}#nav-menu.active{display:flex}.menu-toggle{display:block}.sidebar-ad{position:static}}
@media (max-width:640px){.bursary-grid,.form-grid,.filters-bar{grid-template-columns:1fr}.inline-ad-wrap{grid-column:span 1}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.container{width:min(var(--container),calc(100% - 28px))}.topnav{padding:14px 16px}.footer-grid{grid-template-columns:1fr}.border-left{border-left:none;padding-left:0}.footer-bottom{text-align:left}}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}.logo-card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);padding:18px;transition:transform .22s ease,box-shadow .22s ease}.logo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.logo-card img{width:64px;height:64px;border-radius:14px;object-fit:cover;margin-bottom:12px}.logo-card h4{font-size:15px;margin-bottom:6px}.logo-card p{font-size:13px;color:var(--muted);line-height:1.6}.testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.testimonial-card{background:white;padding:22px;border-radius:16px;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:transform .22s ease,box-shadow .22s ease}.testimonial-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.testimonial-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}.testimonial-top img{width:52px;height:52px;border-radius:50%;object-fit:cover}.testimonial-card p{font-size:14px;color:#556464;line-height:1.7;margin-bottom:14px}.section-row-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.text-link-btn{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-size:13px;font-weight:700}.video-reel{position:relative;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm)}.video-reel img{width:100%;height:340px;object-fit:cover}.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.video-play span{width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.62);color:white;display:flex;align-items:center;justify-content:center;font-size:24px}@media (max-width:1100px){.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.testimonial-grid{grid-template-columns:1fr}}@media (max-width:640px){.logo-grid{grid-template-columns:1fr}.section-row-head{flex-direction:column;align-items:flex-start}.video-reel img{height:240px}}

@media (max-width: 1100px) {
    .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .logo-grid { grid-template-columns: 1fr; }
}


/* =========================================================
HOMEPAGE ROTATING SINGLE ROWS
========================================================= */
.homepage-rotating-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px;
}
#testimonialsGrid.homepage-rotating-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#testimonialsGrid .testimonial-card p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 1100px) {
    .homepage-rotating-row,
    #testimonialsGrid.homepage-rotating-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    .homepage-rotating-row,
    #testimonialsGrid.homepage-rotating-row {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
TESTIMONY VIDEO MODAL
========================================================= */
.testimonial-card {
    position: relative;
}
.testimonial-video-thumb {
    position: relative;
    margin-bottom: 14px;
    border-radius: 14px;
    overflow: hidden;
    background: #eaf3f2;
}
.testimonial-video-thumb img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}
.testimonial-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.testimonial-play-btn span {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(0,0,0,.62);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 10px 24px rgba(0,0,0,.20);
}
.video-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(11, 18, 18, 0.74);
    z-index: 3000;
}
.video-modal.active {
    display: flex;
}
.video-modal-backdrop {
    position: absolute;
    inset: 0;
}
.video-modal-dialog {
    position: relative;
    width: min(920px, 96vw);
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(0,0,0,.25);
    z-index: 1;
}
.video-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf1f1;
}
.video-modal-meta {
    min-width: 0;
}
.video-modal-meta h3 {
    font-size: 18px;
    margin-bottom: 4px;
}
.video-modal-meta p {
    font-size: 13px;
    color: var(--muted);
}
.video-modal-close {
    border: none;
    background: #eef3f2;
    color: #233;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}
.video-modal-body {
    background: #000;
}
.video-modal-body video {
    width: 100%;
    height: min(70vh, 560px);
    display: block;
    background: #000;
}
.video-modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px 18px;
    background: #fff;
}
.modal-chip-btn {
    border: 1px solid var(--border);
    background: #f5f8f8;
    color: var(--text-dark);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.modal-chip-btn.primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
@media (max-width: 640px) {
    .testimonial-video-thumb img {
        height: 150px;
    }
    .video-modal {
        padding: 14px;
    }
    .video-modal-body video {
        height: 260px;
    }
}


/* =========================================================
TESTIMONY CARD / MODAL CONTROL TWEAKS
========================================================= */
.testimonial-card {
    cursor: pointer;
}
.testimonial-card .text-link-btn {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.testimonial-card .text-link-btn:focus,
.testimonial-card .text-link-btn:active {
    outline: none !important;
    box-shadow: none !important;
}
.video-modal-range {
    appearance: none;
    -webkit-appearance: none;
    width: 140px;
    height: 6px;
    border-radius: 999px;
    background: #dbe7e5;
    border: none;
    padding: 0;
}
.video-modal-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}
.video-modal-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}
.video-modal-volume-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #f5f8f8;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 12px;
}


#moreStories.testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}



/* =========================================================
END OF FILE
FILE: bursaries.css
PATH: /src/modules/bursaries/css/bursaries.css
MODULE: bursaries
STATUS: stable
MAINTAINED BY: Walanda core system
COPYRIGHT: © 2026 Walanda Inc. Ltd. All rights reserved.
========================================================= */