/* ==========================================================
   fasteiith.html — page stylesheet
   Extracted verbatim from the page's former embedded style element,
   plus `fei-` utility classes replacing the page's former inline
   style attributes. Loads after css/style.css.
   ========================================================== */

/* ==========================================================
   Institution-hosted build only: a lightweight sticky header
   (IIT Hyderabad logo + section nav) that replaces the stripped
   42 Learn site chrome. Self-contained so it works on *.iith.ac.in.
   ========================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The theme sets overflow-x:hidden on html/body, which makes body a scroll
   container and breaks position:sticky. `clip` still prevents sideways
   scroll but doesn't establish a scroll container, so the sticky header
   pins correctly. (overflow-y must be visible too, else clip→hidden.) */
html, body.faste-iith { overflow-x: clip; overflow-y: visible; }
/* The theme reserves ~74px of body padding-top for its fixed navbar, which
   we removed — zero it so the sticky header sits flush at the very top. */
body.faste-iith { padding-top: 0 !important; }
/* Hide the 42 Learn logo inside the embedded form card — page-local only
   (the shared CMS form and faste.html are unaffected). */
body.faste-iith .cms42-card-logo { display: none !important; }

.fe-topbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid #e6eef0;
}
.fe-topbar-inner {
  position: relative; max-width: 1200px; margin: 0 auto;
  padding: 10px 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 18px;
}
.fe-brand { display: inline-flex; align-items: center; }
/* Match the hero's IIT Hyderabad badge logo exactly (57px, 42px on phones). */
.fe-brand img { height: 57px; width: auto; display: block; }
@media (max-width: 575px) { .fe-brand img { height: 42px; } }
.fe-nav { display: flex; align-items: center; gap: 2px; }
.fe-nav a {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--color-dark, #1E363F); text-decoration: none;
  padding: 9px 13px; border-radius: 9px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.fe-nav a:hover { background: #eef5f7; color: var(--color-primary, #196080); }
.fe-nav a.fe-nav-cta {
  margin-left: 8px; padding: 9px 20px; font-weight: 700; color: #fff;
  background: var(--color-primary, #196080);
}
.fe-nav a.fe-nav-cta:hover { background: #14506b; color: #fff; }

.fe-nav-toggle {
  display: none; width: 44px; height: 42px; border: 1px solid #d7e3e6;
  border-radius: 9px; background: #fff; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.fe-nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--color-dark, #1E363F); }

/* Anchored sections clear the sticky bar instead of hiding under it. */
#pf-overview, #pf-syllabus, #pfImmersion, #pf-certificate, #pf-apply { scroll-margin-top: 94px; }

/* Program Partner lockup in the hero (dark background → logo on a chip). */
.fe-partner { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fe-partner-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.fe-partner-logo {
  display: inline-flex; align-items: center; background: #fff;
  padding: 10px 16px; border-radius: 12px; box-shadow: 0 8px 22px rgba(9,24,31,.22);
  transition: transform .15s ease;
}
.fe-partner-logo:hover { transform: translateY(-1px); }
.fe-partner-logo img { height: 30px; width: auto; display: block; }


@media (max-width: 860px) {
  .fe-nav-toggle { display: flex; }
  .fe-nav {
    display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; padding: 10px 16px 16px;
    border-bottom: 1px solid #e6eef0; box-shadow: 0 16px 28px rgba(9,24,31,.10);
    /* short landscape-phone viewports: keep every link (incl. Apply) reachable */
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
  }
  .fe-nav.is-open { display: flex; }
  .fe-nav a { padding: 12px 12px; }
  .fe-nav a.fe-nav-cta { margin-left: 0; margin-top: 6px; text-align: center; }
}

/* ==========================================================
   fei- utilities — one class per former inline style value
   ========================================================== */

/* Hero (stage 2) background photo. */
.fei-hero2-bg { background-image: url('https://42learn.com/assets/img/faste/iithbg-opt.jpg'); }

/* White wordmark over the dark hero photo. */
.fei-text-white { color: #fff; }

/* Spacing above the hero CTA row. */
.fei-mt-24 { margin-top: 24px; }

/* Staggered-reveal index consumed by the pf-reveal animations (--i). */
.fei-i-0 { --i: 0; }
.fei-i-1 { --i: 1; }
.fei-i-2 { --i: 2; }

/* Module energy-allocation bar segment widths (20/20/10/10 of 60 hrs). */
.fei-w-33-33 { width: 33.33%; }
.fei-w-16-67 { width: 16.67%; }

/* Allocation legend swatches. */
.fei-key-live { background: #F26A1B; }
.fei-key-selfpaced { background: #F59E0B; }
.fei-key-immersion { background: #E23A2E; }
.fei-key-project { background: #C2410C; }

/* Sun-engine ray-burst stagger (hero stage 1 SVG rays). */
.fei-ray-d1 { animation-delay: .0s; }
.fei-ray-d2 { animation-delay: .06s; }
.fei-ray-d3 { animation-delay: .12s; }
.fei-ray-d4 { animation-delay: .18s; }
.fei-ray-d5 { animation-delay: .24s; }
.fei-ray-d6 { animation-delay: .3s; }
.fei-ray-d7 { animation-delay: .36s; }
.fei-ray-d8 { animation-delay: .42s; }
.fei-ray-d9 { animation-delay: .48s; }

/* The shared sheet staggers reveals via an attribute selector on inline
   --i custom properties, which no longer matches now that the former inline
   declarations became .fei-i-* classes — re-attach the same delay here. */
html.js .pf-reveal.fei-i-0,
html.js .pf-reveal.fei-i-1,
html.js .pf-reveal.fei-i-2 { transition-delay: calc(var(--i) * 80ms); }

/* ==========================================================
   Phone-width hardening (360–430px) — overrides for the shared
   faste-iith.css, which this sheet intentionally loads after.
   ========================================================== */
@media (max-width: 575px) {
  /* The shared sheet reduces .pf-fees padding-left on phones but leaves its
     60px desktop margin-left, squeezing the fees panel to ~245px on a 360px
     screen — align it with the 22px summary gutter instead. */
  .faste-iith .pf-fees { margin-left: 22px; }

  /* Non-.pf-section bands keep their 84–96px desktop padding on phones
     (the shared sheet only trims .pf-section) — bring them in line. */
  .faste-iith .pf-hero2 { padding: 56px 0 60px; }
  .faste-iith .pf-immersion { padding: 64px 0; }
  .faste-iith .pf-cta { padding: 64px 0; }
}

/* ==================================================================
   Page footer — brand line left, site credit right. Self-contained
   (institution-hosted page); tone matches the FAST-E deep indigo.
================================================================== */
.fe-footer {
    background: #14102e;
    color: rgba(255, 255, 255, .72);
    padding: 22px 0;
    font: 500 14px/1.6 'Lato', system-ui, sans-serif;
}
.fe-footer__inner {
    width: min(1140px, calc(100% - 48px));
    margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px 24px; flex-wrap: wrap;
}
.fe-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fe-footer a:hover { opacity: .8; }
@media (max-width: 640px) {
    .fe-footer__inner { justify-content: center; text-align: center; }
}

/* ==========================================================
   Roadmap rail — exact-fit columns + snap + visible scrollbar.
   Mirrors the fix in 42learn's faste-iith.css and deliberately
   OVERRIDES the deployed copy (this sheet loads last): cards are
   sized so 4 / 3 / 2 / 1 whole cards fit per view, so the rail
   never rests with a card cut at either edge.
   ========================================================== */
.pf-roadmap-scroll {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    scrollbar-width: thin;
    scrollbar-color: #F26A1B rgba(18, 42, 107, 0.08);
}
.pf-roadmap-scroll::-webkit-scrollbar { height: 8px; }
.pf-roadmap-scroll::-webkit-scrollbar-track { background: rgba(18, 42, 107, 0.08); border-radius: 999px; }
.pf-roadmap-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #F26A1B, #F9A03F);
    border-radius: 999px;
}
.pf-roadmap {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 42px) / 4);
    min-width: 0;
}
@media (max-width: 1100px) { .pf-roadmap { grid-auto-columns: calc((100% - 28px) / 3); } }
@media (max-width: 820px)  { .pf-roadmap { grid-auto-columns: calc((100% - 14px) / 2); } }
@media (max-width: 560px)  { .pf-roadmap { grid-auto-columns: 100%; } }
.pf-roadmap .pf-node { scroll-snap-align: start; }