/* =====================================================
   BAOIAM - UDAAN 90

   Only the bits this page adds on top of course.css:
   the programme hero, the course search bar and the
   show-one-course-at-a-time switcher.

   Everything below the search bar (course hero, module
   card, tool row) reuses the .cr-* classes from
   css/course.css so both pages stay on one design.
===================================================== */

.ud-page{
    background:#FFFFFF;
}

.ud-orange{
    color:var(--primary);
}

/* ==========================
   HERO
========================== */

/* Square graph-paper lines over the peach wash, the same trick the course
   certificate section uses — but on equal 72px pitch both ways so the cells
   read as squares rather than the certificate's wide rectangles. The two
   line layers are listed first so they paint above the gradients. */

/* position + overflow for the wave bands at its foot: they run wider than
   the section as they stretch and must not open a horizontal scrollbar. */

.ud-hero{
    position:relative;
    overflow:hidden;
    padding:var(--space-section) 0;
    text-align:center;
    /* The artwork carries what the four gradients underneath used to draw --
       the ruled grid, the warm corner wash, the peach blobs -- plus the
       spheres, the rising bars and the flag, which CSS was never going to
       produce. Shipped from a 2720x1076 export at 2200px wide in WebP: 51KB
       against 1411KB, and a tenth of what the same picture costs as a
       quantised PNG, which also bands across a wash this smooth.

       The gradient stays as the second layer. A background layer that fails
       to load is not transparent-with-a-fallback, it is simply absent, so
       without something beneath it a 404 or an ancient browser would leave
       the heading on bare white. This keeps the warm corner it always had. */
    background:
        url("/assets/images/udaan90-hero.webp") center / cover no-repeat,
        radial-gradient(circle at 6% 4%,#FFE6D4 0%,#FFFFFF 60%);
}

/* The three drifting bands along the foot are the artwork's job now -- it has
   its own line work sweeping across the bottom right. Two wave systems over
   each other read as a mistake, and the third band is near-opaque cream, so
   it would sit as a flat bar across the picture's lower edge. Hidden rather
   than deleted: the markup and its animation are untouched, so putting them
   back is this one rule. */
.ud-hero .ud-hero-waves{
    display:none;
}

/* Three bands along the foot of the hero, tinted off the brand ramp so they
   read as the hero's own wash lifting rather than as a graphic laid over it.
   Each rises a little further than the one behind it, stretches sideways and
   fades, then runs back -- alternate is the yoyo, the durations differ per
   band so the three do not move as one block, and the curve is sine.inOut
   written out as its bezier.

   transform-box:fill-box so scaleX pivots on each band's own centre rather
   than on the SVG's origin. */

.ud-hero-waves{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:clamp(120px,15vw,240px);
    z-index:0;
    pointer-events:none;
}

.ud-hero-wave{
    transform-box:fill-box;
    transform-origin:50% 100%;
    animation:udWaveDrift var(--wave-time) cubic-bezier(.37,0,.63,1) infinite alternate;
}

.ud-hero-wave-1{ --wave-time:3s; --wave-lift:-20px; fill:rgba(255,102,0,.07); }
.ud-hero-wave-2{ --wave-time:4s; --wave-lift:-10px; fill:rgba(255,102,0,.10); }
.ud-hero-wave-3{ --wave-time:5s; --wave-lift:0px;   fill:rgba(255,230,212,.85); }

@keyframes udWaveDrift{
    to{
        transform:translateY(var(--wave-lift)) scaleX(1.2);
        opacity:.4;
    }
}

@media (prefers-reduced-motion:reduce){

    .ud-hero-wave{
        animation:none;
    }

}

/* The hero's own copy sits above the bands. */

.ud-hero > .container{
    position:relative;
    z-index:1;
}

.ud-hero h1{
    max-width:1000px;
    margin-inline:auto;
    font-family:var(--font-sans);
    font-size:var(--fs-hero);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.01em;
    color:var(--ink,#111);
}

.ud-hero-sub{
    max-width:760px;
    margin:20px auto 0;
    font-family:var(--font-sans);
    font-size:var(--fs-lead);
    font-weight:400;
    line-height:1.55;
    color:#555;
}

/* Four feature chips, two per row on desktop like the Figma frame. */

.ud-hero-points{
    display:grid;
    grid-template-columns:repeat(2,auto);
    justify-content:center;
    gap:18px 56px;
    margin-top:var(--space-block);
}

.ud-point{
    display:flex;
    align-items:center;
    gap:14px;
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:700;
    color:#1a1a1a;
}

.ud-point i{
    display:grid;
    place-items:center;
    flex:none;
    width:44px;
    height:44px;
    border-radius:12px;
    background:#FFF1E6;
    color:var(--primary);
    font-size:18px;
}

/* ==========================
   SEARCH
========================== */

/* The search picks a course and the hero right below it shows that course -
   one step, not two sections. Between them sat this section's bottom padding
   and .cr-hero's top padding, both on the full section token: 176px of empty
   white on a desktop before the hero began.

   The hero gives up its top padding here only. On the six standalone course
   pages it opens the page and needs it; inside .ud-course it is the second
   half of the block above. */

.ud-search-sec{
    padding:0 0 var(--space-section-sm);
    background:#FFFFFF;
}

.ud-course .cr-hero{
    padding-top:0;
}

.ud-search{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    max-width:900px;
    margin-inline:auto;
    padding:8px 8px 8px 22px;
    border:1.5px solid rgba(255,102,0,.55);
    border-radius:999px;
    background:#fff;
    box-shadow:0 8px 24px rgba(238,126,72,.14);
    transition:box-shadow var(--dur-base,.3s) ease,border-color var(--dur-base,.3s) ease;
}

.ud-search:focus-within{
    border-color:var(--primary);
    box-shadow:0 10px 30px rgba(238,126,72,.26);
}

.ud-search > i{
    flex:none;
    color:#9a9a9a;
    font-size:17px;
}

.ud-search input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:transparent;
    font-family:var(--font-sans);
    font-size:17px;
    color:#222;
}

.ud-search input::placeholder{
    color:#9a9a9a;
}

/* Only shown once there is something to clear — js/udaan.js toggles it. */

.ud-search-clear{
    display:none;
    place-items:center;
    flex:none;
    width:26px;
    height:26px;
    border:none;
    border-radius:50%;
    background:#e9e9e9;
    color:#555;
    font-size:13px;
    cursor:pointer;
    transition:background var(--dur-base,.3s) ease;
}

.ud-search-clear.is-on{
    display:grid;
}

.ud-search-clear:hover{
    background:#d8d8d8;
}

.ud-search-go{
    display:grid;
    place-items:center;
    flex:none;
    height:46px;
    padding:0 30px;
    border:none;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:background var(--dur-base,.3s) ease,transform var(--dur-base,.3s) ease;
}

.ud-search-go:hover{
    background:var(--primary-hover,#e65c00);
    transform:scale(1.06);
}

/* Trending row */

.ud-trending{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:12px;
    max-width:900px;
    margin:22px auto 0;
}

.ud-trending-label{
    font-family:var(--font-sans);
    font-size:15px;
    font-weight:700;
    color:#333;
}

.ud-chip{
    padding:8px 20px;
    border:1.4px solid #e2e2e2;
    border-radius:999px;
    background:#fff;
    font-family:var(--font-sans);
    font-size:15px;
    color:#444;
    cursor:pointer;
    transition:
        border-color var(--dur-base,.3s) ease,
        color var(--dur-base,.3s) ease,
        background var(--dur-base,.3s) ease;
}

.ud-chip:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.ud-chip.is-active{
    border-color:var(--primary);
    background:var(--primary);
    color:#fff;
}

/* ==========================
   COURSE SWITCHER

   Every Udaan course lives on this page, but only the selected
   one is rendered — reading SEO should never scroll you into
   Graphic Designing. js/udaan.js owns which one is shown.
========================== */

.ud-course[hidden]{
    display:none;
}

/* No-result state */

.ud-empty{
    display:none;
    padding:var(--space-section) 20px;
    text-align:center;
}

.ud-empty.is-on{
    display:block;
}

.ud-empty h2{
    font-family:var(--font-sans);
    font-size:var(--fs-sub);
    font-weight:700;
    color:#222;
}

.ud-empty p{
    margin-top:12px;
    font-family:var(--font-sans);
    font-size:var(--fs-lead);
    color:#666;
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:760px){

    .ud-hero-points{
        grid-template-columns:1fr;
        gap:14px;
        justify-items:start;
        max-width:420px;
        margin-inline:auto;
    }

    .ud-search{
        padding-left:16px;
    }

    .ud-search input{
        font-size:15px;
    }

    .ud-trending{
        justify-content:flex-start;
    }

}

/* Touch targets: .ud-chip measured 56x37 on a phone, and the search field's
   own box was 19px tall inside a 64px form — tapping the padding did nothing
   because it hit the form, not the input. Cursor sizing is left alone. */

@media (hover:none){

    .ud-chip{
        min-height:44px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .ud-search input{
        min-height:44px;
    }

}

/* The course heroes carry a short tagline (.cr-hero-sub) and, under it, a
   plain description. Only this page uses the second one, so it lives here
   rather than in course.css. */

.cr-hero-desc{
    margin-top:8px;
    font-family:var(--font-sans);
    font-size:clamp(15px,1.25vw,17px);
    font-weight:300;
    line-height:1.55;
    color:var(--ink-600);
}

/* Struck-through list price beside the fee. It has to stay on the figure's
   own line — the chip is narrow enough that it otherwise drops underneath
   and reads as a second number rather than the old price — and holding it
   there makes the fee chip wide enough to push the row of four onto two,
   so the gap tightens to pay for it. */

.cr-chips{
    gap:10px;
}

/* Below this the card is narrow enough that the wider fee chip pushes the
   row of four onto two lines, so the chips give up some side padding. */

@media (max-width:1400px){

    .cr-chips{
        gap:7px;
    }

    .cr-chip{
        padding:15px 5px;
    }

}

@media (max-width:1320px){

    .cr-chips{
        gap:5px;
    }

    .cr-chip{
        /* 90px basis is what tips the four onto two rows in the narrowest
           card the two-column hero produces. */
        flex:1 1 70px;
        padding:15px 3px;
    }

    .cr-chip s{
        margin-left:2px;
        font-size:.5em;
    }

}

.cr-chip strong{
    white-space:nowrap;
}

.cr-chip s{
    margin-left:3px;
    font-size:.55em;
    font-weight:600;
    color:var(--ink-500);
}

/* The two credentials sit as a plain icon row under the description rather
   than in the bordered .cr-meta cards: duration and mode are already in the
   card's chips, so those cards only repeated what the level and certificate
   say here. */

.cr-highlights{
    margin-top:22px;
    padding:0;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:14px 28px;
}

.cr-highlights li{
    display:flex;
    align-items:center;
    gap:9px;
    font-family:var(--font-sans);
    font-size:15px;
    font-weight:700;
    color:var(--ink-900);
}

.cr-highlights i{
    color:var(--primary);
    font-size:16px;
}

/* The container's own 20px inline padding reads as flush-left on a hero
   this wide, so the copy sits in from the section edge. Scoped to the
   course blocks on this page — the six course pages keep their own. */

.ud-course .cr-hero-copy{
    padding-left:clamp(12px,2.6vw,44px);
}

/* The hero pair stretches to fill the copy column (.cr-hero-actions > a is
   flex:1 1 0), which at this column width makes two ordinary buttons run
   the best part of 600px. Here they size to their labels instead, and come
   down a step in height and type. */

.ud-course .cr-hero-actions{
    margin-top:26px;
    gap:14px;
}

.ud-course .cr-hero-actions > a{
    flex:0 0 auto;
    padding:13px 28px;
    font-size:15.5px;
}

/* The outlined one carries a 1px border the filled one does not, so its
   padding gives that back and the pair ends up the same height. */

.ud-course .cr-hero-actions > .cr-btn-outline{
    padding-block:12px;
}

@media (max-width:640px){
    .ud-course .cr-hero-actions{
        display:flex;
        flex-direction:row;
        align-items:stretch;
        justify-content:center;
        gap:10px;
        width:100%;
        margin-top:18px;
    }

    .ud-course .cr-hero-actions > a{
        flex:1 1 0;
        min-width:0;
        min-height:48px;
        padding:13px 14px;
        font-size:clamp(11.5px, 2.8vw, 13.5px);
        font-weight:700;
        text-align:center;
        justify-content:center;
        white-space:nowrap;
        border-radius:999px;
    }

    .ud-course .cr-hero-actions > .cr-btn-outline{
        padding:12px 14px;
    }
}

/* ==========================
   CURRICULUM — MONTHS x WEEKS

   Replaces the single "Learning Modules" list on the course blocks: a
   column of months on the left, and for the chosen month a row of week
   tabs with one panel of topics under it. js/udaan.js keeps .is-active in
   sync; with the script blocked the first month and week stay open, which
   is the whole content of one week rather than a dead widget.
========================== */

.u9-cur{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:minmax(0,320px) minmax(0,1fr);
    gap:32px;
    align-items:start;
}

.u9-cur-months{
    display:grid;
    gap:16px;
}

.u9-month{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:16px 18px;
    border:1px solid #E7E7EA;
    border-radius:14px;
    background:#fff;
    text-align:left;
    cursor:pointer;
    transition:
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.u9-month:hover{
    border-color:var(--primary-35);
    transform:translateY(-2px);
}

.u9-month.is-active{
    border-color:var(--primary);
    box-shadow:0 10px 24px -18px rgba(255,102,0,.8);
}

.u9-month-icon{
    flex:none;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:10px;
    background:var(--primary-10);
    color:var(--primary);
    font-size:15px;
}

.u9-month-label{
    display:block;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:500;
    color:var(--ink-600);
}

.u9-month.is-active .u9-month-label{
    color:var(--primary);
    font-weight:700;
}

.u9-month-name{
    display:block;
    margin-top:2px;
    font-family:var(--font-sans);
    font-size:17px;
    font-weight:700;
    color:var(--ink-900);
}

/* --- weeks --- */

/* One tab strip per month, since the weeks are numbered across the whole
   course — month 3 reads Week 9 to Week 12, not Week 1 to Week 4. Only the
   chosen month's strip is shown. */

.u9-weeks{
    display:none;
    border-bottom:1px solid var(--primary-25);
}

.u9-weeks.is-active{
    display:flex;
}

.u9-week{
    flex:1 1 0;
    padding:10px 8px 12px;
    border:0;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    background:none;
    font-family:var(--font-sans);
    font-size:15.5px;
    font-weight:600;
    color:var(--ink-600);
    cursor:pointer;
    transition:color var(--dur-base) var(--ease-out);
}

.u9-week:hover{
    color:var(--ink-900);
}

.u9-week.is-active{
    color:var(--primary);
    font-weight:700;
    border-bottom-color:var(--primary);
}

/* --- panel --- */

.u9-panel{
    display:none;
    margin-top:22px;
    padding:22px 24px;
    border:1px solid var(--primary-35);
    border-radius:14px;
    background:#fff;
}

.u9-panel.is-active{
    display:block;
}

.u9-panel h4{
    margin:0 0 16px;
    font-family:var(--font-sans);
    font-size:16px;
    font-weight:700;
    color:var(--primary);
}

.u9-panel ul{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:12px;
}

.u9-panel li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-family:var(--font-sans);
    font-size:15px;
    font-weight:400;
    line-height:1.45;
    color:var(--ink-800);
}

/* Inline <i> rather than a pseudo-element with a Font Awesome codepoint:
   the rest of this codebase writes its ticks that way, and it does not
   depend on the exact family name the CDN happens to register. */

.u9-panel li i{
    flex:none;
    margin-top:.28em;
    font-size:13px;
    color:var(--primary);
}

@media (max-width:900px){

    .u9-cur{
        grid-template-columns:minmax(0,1fr);
        gap:24px;
    }

    .u9-week{
        font-size:14px;
    }

}

/* ==========================
   COURSE HERO — TYPE SCALE

   The six course pages carry long sentence headlines, so --fs-hero is
   capped at 34px there. These blocks are titled with a short course name,
   which at that size reads as a subheading rather than the page's subject.
========================== */

/* Big enough that a two-word course name breaks over two lines the way
   the design does, rather than sitting on one with the spark stranded
   underneath. */

.ud-course .cr-hero-copy h1{
    font-size:clamp(32px,4.4vw,62px);
    line-height:1.06;
    letter-spacing:-.012em;
}

/* The tagline is the promise, so it carries the weight; the description
   under it stays plain. Both were the same light 300 before. */

.ud-course .cr-hero-sub{
    font-size:clamp(17px,1.45vw,20px);
    font-weight:400;
    color:var(--ink-900);
}

.ud-course .cr-hero-desc{
    margin-top:6px;
    font-size:clamp(15px,1.3vw,18px);
}

.ud-course .cr-highlights{
    margin-top:26px;
}

.ud-course .cr-highlights li{
    font-size:16px;
}

.ud-course .cr-highlights i{
    font-size:17px;
}

/* ==========================
   WHAT YOU'LL LEARN

   A plain row of outlined chips between the curriculum and the tool grid:
   the curriculum says how the twelve weeks are paced, this says what the
   learner walks away able to do. Two rows of four on desktop.
========================== */

.ud-learn{
    padding:var(--space-section) 0;
    background:#FFFFFF;
}

.ud-learn-grid{
    /* 1000 -> 1120. The rows carry a numbered badge now, so the label has
       about 40px less to work with; the extra width is what keeps the
       longest of them ("SEO audits & competitor analysis") on two lines
       rather than three. The page container is 1360 at full width, so this
       still sits inboard of it. */
    max-width:1120px;
    margin:var(--space-block) auto 0;
    padding:0;
    list-style:none;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px 28px;
    /* Numbering comes from here rather than from markup: the counter resets
       per <ul>, so each of the fifteen courses runs 01-08 on its own. */
    counter-reset:udLearn;
}

/* Fixed min-height rather than a height: the longest label ("SEO audits &
   competitor analysis") runs to two lines, and a hard height would spill
   it out of the chip the way the old hero badge did. */

/* Was a centred line of text in a plain box -- eight of them read as a grid
   of empty rectangles. Now a numbered row: badge left, label beside it,
   which is the same shape .cr-module already uses in the curriculum
   sidebar on these pages. */

.ud-learn-grid li{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:14px;
    min-height:78px;
    padding:16px 18px;
    /* Was #E3E3E3, a cold grey against this page's warm wash. */
    border:1px solid var(--cream-500);
    border-radius:12px;
    background:#fff;
    font-family:var(--font-sans);
    font-size:15px;
    font-weight:500;
    line-height:1.35;
    color:var(--ink-900);
    text-align:left;
    text-wrap:balance;
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

/* The badge is .cr-module-num's treatment at this row's scale -- same tint,
   same radius family, same orange -- so the two numbered lists on a course
   read as one component rather than two. */

.ud-learn-grid li::before{
    counter-increment:udLearn;
    content:counter(udLearn,decimal-leading-zero);
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:9px;
    background:var(--primary-10);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--primary);
}

.ud-learn-grid li:hover{
    transform:translateY(-3px);
    border-color:var(--primary);
    box-shadow:var(--glow);
}

@media (prefers-reduced-motion:reduce){

    .ud-learn-grid li:hover{
        transform:none;
    }

}

@media (max-width:900px){

    .ud-learn-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }

}

@media (max-width:520px){

    .ud-learn-grid{
        grid-template-columns:1fr;
    }

}

/* This used to halve course.css's left inset on the strip, because these
   heroes inset .cr-hero-copy as well and the two indents stacked. The
   strip is centred in its column now, so there is no inset left to halve
   and this override would only pull it back off-centre. */

/* ==========================================
   TOUCH TARGETS
   Course chips at 37px, in a wrapping row where the neighbours are close.
========================================== */

@media (max-width:768px), (hover:none){

    .ud-chip{
        min-height:44px;
    }

}
/* ==========================================
   EARLY BIRD
   The Udaan courses run at 499 against a 999 list price, so the card has
   to carry two numbers and a reason for the gap.
========================================== */

/* Both prices in one chip. The old one is smaller, struck and quiet; the
   live one keeps the chip's own weight and colour, so the eye lands on
   what is actually charged rather than on the number being crossed out. */

.cr-chip-fee strong{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:6px;
}

.cr-fee-was{
    font-size:.66em;
    font-weight:600;
    color:var(--ink-500);
    text-decoration:line-through;
    /* The default hairline all but disappears against a figure this small. */
    text-decoration-thickness:1.5px;
}

/* A sticker on the card's top corner rather than another row inside it:
   the card is already four chips, five tags and a button deep, and an
   offer that has to compete with all of that stops reading as an offer.
   It overhangs by less than the container's own 20px padding, so it can
   never push the page sideways. */

.ud-course .cr-hero-card{
    position:relative;
}

.ud-earlybird{
    position:absolute;
    top:-14px;
    right:16px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:999px;
    background:linear-gradient(135deg,#FF7A1A 0%,var(--primary) 55%,#E85800 100%);
    box-shadow:0 10px 22px -12px rgba(255,102,0,.9);
    font-family:var(--font-sans);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.03em;
    white-space:nowrap;
    color:#FFFFFF;
    animation:udEarlyBirdIn .5s var(--ease-out) both;
}

/* The dot is the whole animation. A badge that slides or bounces on a
   loop pulls the eye off the price it is meant to explain; a slow pulse
   reads as live without asking to be watched. */

.ud-earlybird-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#FFFFFF;
    animation:udEarlyBirdPulse 2.4s ease-in-out infinite;
}

@keyframes udEarlyBirdIn{
    from{ opacity:0; transform:translateY(-8px) scale(.94); }
    to{ opacity:1; transform:none; }
}

@keyframes udEarlyBirdPulse{
    0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(255,255,255,.7); }
    70%{ opacity:.55; box-shadow:0 0 0 7px rgba(255,255,255,0); }
}

@media (prefers-reduced-motion:reduce){

    .ud-earlybird{
        animation:none;
    }

    .ud-earlybird-dot{
        animation:none;
    }

}

/* Under 600px the card's own corner radius closes in and the badge would
   sit over the icon beside the title. It comes inboard and drops onto the
   card's edge instead of over it. */

@media (max-width:600px){

    .ud-earlybird{
        top:-12px;
        right:12px;
        padding:7px 13px;
        font-size:11.5px;
    }

}