/*==================================================
    GERMAINE — AI BOOTCAMP COURSES PORTAL
    Namespace: .aic-*
    Extends the AI Bootcamp design system (ai-bootcamp.css:
    --ai-navy, --ai-pink, .ai-wrap, .ai-section, .ai-eyebrow,
    .ai-btn) rather than introducing a new palette. Covers:
      1. Secondary AI Bootcamp navigation
      2. Courses hub hero
      3. Programme category pill nav
      4. Featured Programmes card grid
      5. Programme detail-page template
==================================================*/

/*==========================
    1. DEDICATED AI BOOTCAMP NAVIGATION
    Replaces (not supplements) the main site header on every AI
    Bootcamp family page. body.aic-family-page hides the sitewide
    .utility-bar and #fixedTopStack (branding bar + mega-menu nav +
    announcement bar) entirely — this .aic-nav becomes the page's
    only top navigation, so there is never a double header. See
    ai-family-nav.js for the mobile toggle + active-link logic.
==========================*/
body.aic-family-page .utility-bar,
body.aic-family-page #fixedTopStack{ display:none !important; }
body.aic-family-page .page-shell{ padding-top:0 !important; }

.aic-nav{
    position:sticky; top:0; z-index:500;
    background:linear-gradient(120deg, var(--ai-navy) 0%, #123A92 100%);
    box-shadow:0 6px 22px rgba(16,42,92,.2);
}
.aic-nav-inner{
    position:relative;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:12px 32px;
}
.aic-nav-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.aic-nav-brand img{ height:36px; width:auto; border-radius:8px; display:block; }
.aic-nav-motto{
    font-size:.74rem; font-weight:600; color:rgba(255,255,255,.78);
    letter-spacing:.01em; line-height:1.3; max-width:200px;
}
.aic-nav-links{ display:flex; align-items:center; gap:3px; flex-wrap:wrap; }
.aic-nav-link{
    position:relative; white-space:nowrap;
    padding:9px 15px; border-radius:999px;
    font-size:.83rem; font-weight:600; color:rgba(255,255,255,.75); text-decoration:none;
    background:none; border:none; cursor:pointer; font-family:inherit;
    transition:color .3s ease, background .3s ease;
}
.aic-nav-link:hover{ color:#fff; background:rgba(255,255,255,.08); }
.aic-nav-link.is-active{
    color:#fff;
    background:linear-gradient(115deg,var(--ai-pink) 0%,var(--ai-pink-2,var(--ai-pink)) 100%);
    box-shadow:0 8px 20px rgba(236,72,153,.32);
}
.aic-nav-apply{ background:rgba(255,255,255,.14); color:#fff; }
.aic-nav-apply:hover{ background:rgba(255,255,255,.22); }
.aic-nav-sep{ width:1px; height:18px; background:rgba(255,255,255,.2); margin:0 8px; flex-shrink:0; }
.aic-nav-gti, .aic-nav-earn{ font-size:.8rem; color:rgba(255,255,255,.6); }
.aic-nav-earn:hover{ color:#fff; }

.aic-nav-burger{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:34px; background:none; border:none; cursor:pointer; padding:6px; flex-shrink:0;
}
.aic-nav-burger span{ width:100%; height:2px; background:#fff; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.aic-nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.aic-nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.aic-nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:991px){
    .aic-nav-motto{ display:none; }
    .aic-nav-burger{ display:flex; }
    .aic-nav-inner{ padding:10px 20px; }
    .aic-nav-links{
        position:absolute; top:100%; left:0; right:0;
        flex-direction:column; align-items:stretch; gap:2px;
        background:var(--ai-navy); padding:0 16px; margin:0;
        max-height:0; overflow:hidden; transition:max-height .35s ease;
        box-shadow:0 14px 26px rgba(16,42,92,.24);
    }
    .aic-nav-links.is-open{ max-height:420px; padding:10px 16px 16px; }
    .aic-nav-link{ text-align:left; padding:12px 14px; }
    .aic-nav-sep{ display:none; }
}
@media (prefers-reduced-motion:reduce){
    .aic-nav-links{ transition:none; }
    .aic-nav-burger span{ transition:none; }
}

/*==========================
    2. COURSES HUB HERO
==========================*/
.aic-hero{ padding:72px 0 60px; position:relative; overflow:hidden; }
.aic-hero-grid{
    display:grid; grid-template-columns:1fr .85fr; gap:56px; align-items:center;
}
.aic-hero-text{ max-width:560px; }
.aic-hero-title{
    font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-.01em;
    font-size:clamp(2rem,3.6vw,2.85rem); line-height:1.16; color:var(--ai-navy);
    margin:0 0 18px;
}
.aic-hero-desc{
    font-size:1.02rem; line-height:1.8; color:var(--ai-navy-mut); margin:0 0 30px;
    text-align:justify; text-justify:inter-word;
}
.aic-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.aic-hero-media{ max-width:460px; margin:0 auto; }

/*==========================
    3. CATEGORY PILL NAV
==========================*/
.aic-pills-wrap{ padding:0 0 var(--ai-sec-pad); }
.aic-pills{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
}
.aic-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:999px; cursor:pointer;
    background:#fff; border:1px solid var(--ai-line); color:var(--ai-navy);
    font-family:inherit; font-weight:600; font-size:.86rem; text-decoration:none;
    box-shadow:0 6px 18px rgba(16,42,92,.06);
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.aic-pill:hover{ transform:translateY(-2px); border-color:rgba(236,72,153,.3); box-shadow:0 12px 26px rgba(236,72,153,.14); }
.aic-pill.is-active{
    background:linear-gradient(115deg,var(--ai-navy) 0%,#1B4FB8 100%); color:#fff; border-color:transparent;
    box-shadow:0 12px 28px rgba(16,42,92,.26);
}
@media (prefers-reduced-motion: reduce){
    .aic-pill:hover{ transform:none; }
}

/*==========================
    4. FEATURED PROGRAMMES GRID
==========================*/
.aic-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch;
}
.aic-card{
    position:relative; display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--ai-line); border-radius:24px;
    box-shadow:0 20px 50px rgba(16,42,92,.08);
    overflow:hidden; transition:transform .4s ease, box-shadow .4s ease;
    scroll-margin-top:170px;
}
.aic-card:hover{ transform:translateY(-8px); box-shadow:0 30px 70px rgba(236,72,153,.16); }

.aic-card-media{ position:relative; height:190px; overflow:hidden; }
.aic-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.aic-card:hover .aic-card-media img{ transform:scale(1.06); }
.aic-card-media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 60%,rgba(16,42,92,.5));
    z-index:2;
}

/* Two-image auto slideshow — subtle crossfade, confined to the
   existing fixed-height media box. Whichever image carries
   .is-active is visible; JS moves that class between the two
   images on a timer. No layout shift, no travelling-border/glow
   effects — only a plain opacity fade. */
.aic-card-media .aic-card-img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block; z-index:1; opacity:0;
    transition:opacity 1s ease;
}
.aic-card-media .aic-card-img.is-active{ opacity:1; }

.aic-card-dots{
    position:absolute; left:0; right:0; bottom:10px;
    display:flex; justify-content:center; gap:6px; z-index:3;
}
.aic-card-dots span{
    width:6px; height:6px; border-radius:50%;
    background:rgba(255,255,255,.55);
    transition:background .3s ease, transform .3s ease;
}
.aic-card-dots span.is-active{
    background:#fff; transform:scale(1.25);
}
@media(prefers-reduced-motion:reduce){
    .aic-card-media .aic-card-img{ transition:none; }
}

/* Compacted ~10-15% vs the original padding/spacing — wording,
   fields and information are unchanged, only the visual footprint
   of the text area is tightened. */
.aic-card-body{ display:flex; flex-direction:column; flex:1; padding:19px 20px 22px; position:relative; z-index:1; }
.aic-card-body h3{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:1.1rem; color:var(--ai-navy);
    margin:0 0 8px; line-height:1.3;
}
.aic-card-body p{
    font-size:.86rem; line-height:1.55; color:var(--ai-navy-mut); margin:0 0 14px;
    text-align:justify; text-justify:inter-word;
}
.aic-card-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.aic-card-price{
    display:flex; align-items:center; gap:6px; margin-bottom:13px;
    font-family:'Poppins',sans-serif; font-weight:800; font-size:.98rem; color:var(--ai-pink);
}
.aic-card-price i{ font-size:.8rem; }
.aic-meta-chip{
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px; border-radius:999px; font-size:.7rem; font-weight:600;
    background:rgba(16,42,92,.06); color:var(--ai-navy);
}
.aic-meta-chip i{ color:var(--ai-pink); font-size:.68rem; }
.aic-card-body .aic-card-cta{ margin-top:auto; }
.aic-card-cta{
    display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    font-weight:700; font-size:.88rem; color:var(--ai-navy); text-decoration:none;
    border-bottom:1px solid transparent; transition:color .3s ease, border-color .3s ease;
}
.aic-card-cta i{ font-size:.78rem; transition:transform .3s ease; }
.aic-card-cta:hover{ color:var(--ai-pink); border-color:var(--ai-pink); }
.aic-card-cta:hover i{ transform:translateX(4px); }

/*==========================
    4b. FEATURED PROGRAMMES — IMAGE FLIP CARDS
    Same interaction principle as the About page Mission/Vision/
    Core Values flip cards: front shows only the programme photo
    (+ a small subtle title bar), a hover/tap/focus flip reveals
    the description, key facts and "Explore Programme" link on
    the back. Reuses the existing .aic-card outer shell (white
    surface, radius, shadow, travelling pink border via ::after)
    — only the inner content becomes a real 3D flip.
==========================*/
.aic-flip-card{
    display:block; height:380px; padding:0; cursor:pointer;
    perspective:1300px; outline:none;
}
.aic-flip-card .aic-flip-inner{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d;
    transition:transform .8s cubic-bezier(.25,.8,.25,1);
}
.aic-flip-card:hover .aic-flip-inner,
.aic-flip-card:focus-visible .aic-flip-inner,
.aic-flip-card:focus-within .aic-flip-inner,
.aic-flip-card.is-flipped .aic-flip-inner{ transform:rotateY(180deg); }
.aic-flip-card:not(.is-flipped):hover{ transform:translateY(-8px); }

.aic-flip-face{
    position:absolute; inset:0;
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
    border-radius:inherit; overflow:hidden;
}
.aic-flip-front img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .6s ease;
}
.aic-flip-card:hover .aic-flip-front img{ transform:scale(1.05); }
.aic-flip-veil{
    position:absolute; left:0; right:0; bottom:0; height:64px; z-index:1;
    background:linear-gradient(180deg, transparent, rgba(8,27,63,.82) 78%);
}
.aic-flip-front-label{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:16px 20px 14px;
    font-family:'Poppins',sans-serif; font-weight:700; font-size:1rem; line-height:1.3;
    color:#FFFFFF;
}

.aic-flip-back{
    transform:rotateY(180deg);
    display:flex; flex-direction:column;
    padding:26px 24px 22px;
    background:linear-gradient(150deg, #081B3F 0%, #123A92 100%);
}
.aic-flip-desc{
    font-size:.86rem; line-height:1.65; color:rgba(255,255,255,.88); margin:0 0 16px;
    text-align:left;
}
.aic-flip-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.aic-flip-meta .aic-meta-chip{
    background:rgba(255,255,255,.1); color:#FFFFFF;
}
.aic-flip-meta .aic-meta-chip i{ color:#F9A8D4; }
.aic-flip-cta{
    margin-top:auto; display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    background:var(--ai-pink); color:#FFFFFF; text-decoration:none;
    font-weight:700; font-size:.86rem; padding:11px 20px; border-radius:999px;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.aic-flip-cta i{ font-size:.78rem; transition:transform .3s ease; }
.aic-flip-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(236,72,153,.4); background:#F472B6; }
.aic-flip-cta:hover i{ transform:translateX(4px); }

@media(hover:none){
    .aic-flip-card:hover .aic-flip-inner{ transform:none; }
    .aic-flip-card.is-flipped .aic-flip-inner{ transform:rotateY(180deg); }
    .aic-flip-card:hover .aic-flip-front img{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
    .aic-flip-inner{ transition:none; }
    .aic-flip-front img{ transition:none; }
}
@media(max-width:640px){
    .aic-flip-card{ height:340px; }
}

/*==========================
    5. PROGRAMME DETAIL PAGE
==========================*/
.aic-detail-hero{ padding:56px 0 44px; }
.aic-breadcrumb{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size:.82rem; color:var(--ai-navy-mut); margin-bottom:22px;
}
.aic-breadcrumb a{ color:var(--ai-navy-mut); text-decoration:none; transition:color .3s ease; }
.aic-breadcrumb a:hover{ color:var(--ai-pink); }
.aic-breadcrumb i{ font-size:.66rem; color:var(--ai-navy-mut); opacity:.6; }
.aic-breadcrumb .is-current{ color:var(--ai-navy); font-weight:600; }

.aic-detail-grid{ display:grid; grid-template-columns:1.05fr .8fr; gap:48px; align-items:center; }
.aic-detail-text{ max-width:580px; }
.aic-detail-title{
    font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-.01em;
    font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.16; color:var(--ai-navy); margin:12px 0 18px;
}
.aic-detail-lead{ font-size:1.02rem; line-height:1.8; color:var(--ai-navy-mut); margin:0 0 26px; text-align:justify; text-justify:inter-word; }
.aic-detail-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.aic-detail-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.aic-detail-media{ max-width:440px; margin:0 auto; }

.aic-detail-section{ padding:var(--ai-sec-pad) 0; position:relative; }
.aic-detail-section-tint{ background:var(--ai-tint); }
.aic-detail-section-head{ max-width:680px; margin:0 0 40px; }
.aic-detail-section-head.aic-center{ margin-left:auto; margin-right:auto; text-align:center; }
.aic-detail-section-head h2{
    font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-.01em;
    font-size:clamp(1.6rem,2.8vw,2.2rem); color:var(--ai-navy); line-height:1.2; margin:0 0 12px;
}
.aic-detail-section-head p{ font-size:1rem; line-height:1.75; color:var(--ai-navy-mut); margin:0; }

.aic-skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.aic-skill-card{
    display:flex; align-items:flex-start; gap:14px;
    background:#fff; border:1px solid var(--ai-line); border-radius:18px; padding:22px;
    box-shadow:0 10px 28px rgba(16,42,92,.06); transition:var(--ai-ease);
}
.aic-skill-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(236,72,153,.12); border-color:rgba(236,72,153,.22); }
.aic-skill-ic{
    flex-shrink:0; width:42px; height:42px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; font-size:1.05rem;
    background:rgba(236,72,153,.08); color:var(--ai-pink);
}
.aic-skill-card h4{ font-size:.96rem; font-weight:700; color:var(--ai-navy); margin:0 0 4px; }
.aic-skill-card p{ font-size:.84rem; line-height:1.55; color:var(--ai-navy-mut); margin:0; }

.aic-projects-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.aic-project-item{
    display:flex; gap:16px; background:#fff; border:1px solid var(--ai-line); border-radius:18px;
    padding:22px; box-shadow:0 10px 28px rgba(16,42,92,.06); transition:var(--ai-ease);
}
.aic-project-item:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(236,72,153,.12); }
.aic-project-num{
    flex-shrink:0; width:36px; height:36px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
    background:var(--ai-navy); color:#fff;
}
.aic-project-item h4{ font-size:.96rem; font-weight:700; color:var(--ai-navy); margin:0 0 4px; }
.aic-project-item p{ font-size:.84rem; line-height:1.6; color:var(--ai-navy-mut); margin:0; }

.aic-careers-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.aic-career-chip{
    display:inline-flex; align-items:center; gap:9px;
    padding:12px 20px; border-radius:999px; background:#fff; border:1px solid var(--ai-line);
    font-weight:700; font-size:.88rem; color:var(--ai-navy);
    box-shadow:0 8px 20px rgba(16,42,92,.06); transition:var(--ai-ease);
}
.aic-career-chip:hover{ transform:translateY(-3px); border-color:rgba(236,72,153,.3); box-shadow:0 14px 30px rgba(236,72,153,.14); }
.aic-career-chip i{ color:var(--ai-pink); }

.aic-format-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.aic-format-card{
    text-align:center; background:#fff; border:1px solid var(--ai-line); border-radius:18px;
    padding:28px 20px; box-shadow:0 10px 28px rgba(16,42,92,.06);
}
.aic-format-ic{
    width:48px; height:48px; margin:0 auto 14px; border-radius:14px;
    display:flex; align-items:center; justify-content:center; font-size:1.2rem;
    background:rgba(16,42,92,.06); color:var(--ai-navy);
}
.aic-format-card h4{ font-size:.98rem; font-weight:700; color:var(--ai-navy); margin:0 0 6px; }
.aic-format-card p{ font-size:.84rem; line-height:1.55; color:var(--ai-navy-mut); margin:0; }

.aic-detail-apply{
    text-align:center; max-width:680px; margin:0 auto;
    background:linear-gradient(120deg,var(--ai-navy) 0%,#1a3a72 100%);
    border-radius:28px; padding:48px 40px; position:relative; overflow:hidden;
}
.aic-detail-apply::before{
    content:''; position:absolute; top:-100px; right:-70px; width:260px; height:260px; border-radius:50%;
    background:radial-gradient(circle,rgba(236,72,153,.28),transparent 70%);
}
.aic-detail-apply h2{ position:relative; z-index:1; font-family:'Poppins',sans-serif; font-weight:700; font-size:1.6rem; color:#fff; margin:0 0 10px; }
.aic-detail-apply p{ position:relative; z-index:1; font-size:.94rem; color:rgba(255,255,255,.78); margin:0 0 26px; }
.aic-detail-apply .aic-detail-apply-cta{ position:relative; z-index:1; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.aic-detail-apply .ai-btn-outline{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); }
.aic-detail-apply .ai-btn-outline:hover{ background:rgba(255,255,255,.18); }

/*==========================
    RESPONSIVE
==========================*/
@media (max-width:1100px){
    .aic-grid{ grid-template-columns:repeat(2,1fr); }
    .aic-skills-grid{ grid-template-columns:repeat(2,1fr); }
    .aic-format-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
    .aic-hero-grid{ grid-template-columns:1fr; }
    .aic-hero-text{ max-width:none; text-align:center; margin:0 auto; }
    .aic-hero-cta{ justify-content:center; }
    .aic-hero-media{ order:-1; }
    .aic-detail-grid{ grid-template-columns:1fr; }
    .aic-detail-text{ max-width:none; text-align:center; margin:0 auto; }
    .aic-detail-meta,
    .aic-detail-cta{ justify-content:center; }
    .aic-detail-media{ order:-1; }
    .aic-breadcrumb{ justify-content:center; }
}
@media (max-width:760px){
    .aic-subnav-inner{ padding:12px 20px; justify-content:flex-start; }
    .aic-grid{ grid-template-columns:1fr; }
    .aic-projects-list{ grid-template-columns:1fr; }
    .aic-skills-grid{ grid-template-columns:1fr; }
    .aic-format-grid{ grid-template-columns:1fr; }
    .aic-detail-apply{ padding:38px 24px; }
}

@media (prefers-reduced-motion: reduce){
    .aic-card{ transition:none; }
    .aic-card:hover{ transform:none; }
    .aic-card::after{ animation:none; }
    .aic-card-media img{ transition:none; }
    .aic-card:hover .aic-card-media img{ transform:none; }
    .aic-skill-card:hover,
    .aic-project-item:hover,
    .aic-career-chip:hover{ transform:none; }
}