/* ------------------------------------------------------------------
   Responsive layout overrides for all static pages.

   The exported design tool CSS wraps every page in a .site shell with
   a fixed 1440px max-width and 128px horizontal padding. These rules
   remove that fixed-width constraint and make the shell, header, hero,
   bands, and content grids scale naturally with the viewport while
   keeping text blocks readable.
   ------------------------------------------------------------------ */

/* Full-width app shell: remove the fixed 1440px cap. */
.site {
  max-width: none !important;
  width: 100% !important;
}

/* Header, navigation, and full-bleed bands should span the viewport. */
.hdr,
.band,
.mstk {
  width: 100% !important;
  max-width: none !important;
}

/* Allow the hero text overlay to grow on larger screens while the inner
   paragraphs keep their own readability max-widths. */
.herobox {
  max-width: 1600px !important;
}

/* The Home link is only for the mobile side menu, not the desktop nav. */
.hdrnav a.home {
  display: none !important;
}

/* Logo wall: actual ACEN and AC Logistics logo images should not keep the
   dashed placeholder border from the generated CSS. */
.sprow img[alt="ACEN"],
.sprow img[alt="AC Logistics"] {
  height: 50px !important;
  width: auto !important;
  border: none !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

/* Mobile: shrink all logo-wall images so they fit better on narrow screens. */
@media (max-width: 820px) {
  .sprow img[alt] {
    height: 34px !important;
    width: auto !important;
  }
}

/* AYL Over the Years: speaker avatars should render as small circles on the
   upper left, opposite the year. The generated CSS sizes the slot but doesn't
   force the circular shape or make it a block, so the placeholder can look
   stretched and oversized. */
.ayl-about-over-the-years-style-35 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: rgba(3, 16, 58, 0.1) !important;
  flex: none !important;
  font-size: 10px !important;
  color: rgba(3, 16, 58, 0.55) !important;
}

.ayl-about-over-the-years-style-35 img,
.ayl-about-over-the-years-style-35 > * {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Milestones: on desktop the inactive carousel slides should be blurred and
   dimmed; only the active slide is fully readable. On mobile we keep all slides
   clear so the scrollable cards remain legible. The JS toggles an .active class
   on the current slide. */
@media (max-width: 820px) {
  .ayl-about-milestones-style-39,
  .msslide.ayl-about-milestones-style-39 {
    opacity: 1 !important;
    filter: none !important;
  }
}

@media (min-width: 821px) {
  .msslide.active.ayl-about-milestones-style-39,
  .msslide.active .ayl-about-milestones-style-39 {
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Milestones year navigation: highlight the active year and show a hover
   cue so users know the dates are clickable. */
.msyear,
.ayl-about-milestones-style-35 {
  transition: color .2s ease, transform .2s ease !important;
}

.msyear:hover,
.ayl-about-milestones-style-35:hover {
  color: #0320AF !important;
  transform: translateY(-1px) !important;
}

.msyear:hover .msul,
.ayl-about-milestones-style-35:hover .ayl-about-milestones-style-36 {
  opacity: 1 !important;
}

.msyear.active,
.ayl-about-milestones-style-35.active {
  color: #0320AF !important;
  font-weight: 800 !important;
}

.msyear.active .msul,
.ayl-about-milestones-style-35.active .ayl-about-milestones-style-36 {
  opacity: 1 !important;
}

/* Milestones play button: now a text pill with the icon and word Play,
   sitting just under the section title. */
.ayl-about-milestones-style-29 .msplay,
.ayl-about-milestones-style-29 .ayl-about-milestones-style-51 {
  margin-top: 20px !important;
  display: inline-flex !important;
}

.msplay,
.ayl-about-milestones-style-51 {
  width: auto !important;
  height: 40px !important;
  padding: 0 18px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  font: 700 14px 'Hanken Grotesk', sans-serif !important;
}

.msplay .msplaytxt,
.ayl-about-milestones-style-51 .msplaytxt {
  display: inline !important;
  color: #0320AF !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.msplay i,
.ayl-about-milestones-style-51 i {
  margin-left: 0 !important;
  font-size: 16px !important;
}

/* Milestones timeline: the active dot stays centered in the viewport and the
   strip slides left/right under it; the fill bar grows to the active dot and
   all dots up to and including the active one light up orange. */
.msnode,
.ayl-about-milestones-style-49 {
  transition: transform .4s ease !important;
}

.mstlwrap .mstlinner,
.ayl-about-milestones-style-45 .ayl-about-milestones-style-46,
.mstlwrap .mstlfill,
.ayl-about-milestones-style-45 .ayl-about-milestones-style-48 {
  transition: transform .4s ease, width .4s ease !important;
}

.mstick {
  transition: background .4s ease !important;
}

/* Responsive horizontal padding: keep content from touching the edges.
   The original 1440px box used a fixed 128px content padding; on a full-width
   layout we need at least that much, and we grow it on wider screens so
   the hero and content blocks feel balanced instead of hugging the edge.
   The main nav bar keeps its original --hpx fallback (72px on desktop,
   16px on mobile from the generated CSS) so it stays anchored at the top.

   Below the 820px mobile breakpoint we deliberately match the reference
   file's --px: 16px so mobile view (hamburger, stacked sections, etc.)
   renders exactly as designed. */
@media (max-width: 820px) {
  .site { --px: 16px !important; }

  /* The generated page CSS sets .hdrham to display:none via the later
     .ayl-{page}-style-17 rule, so the mobile media query's display rule
     gets overridden. Force the hamburger icon back on at mobile widths. */
  .hdrham,
  .hdrham.ayl-index-style-17,
  .hdrham[class*="ayl-"][class$="-style-17"] {
    display: inline-flex !important;
  }

  /* Mobile logo: the full two-line logo is too wide/awkward on narrow
     screens. Switch to the icon + single-line text mark instead. */
  .hdrlogo .logofull,
  .hdrlogo .logofull.ayl-index-style-5,
  .hdrlogo .logofull[class*="ayl-"][class$="-style-5"] {
    display: none !important;
  }

  .hdrlogo .logomark,
  .hdrlogo .logomark.ayl-index-style-6,
  .hdrlogo .logomark[class*="ayl-"][class$="-style-6"] {
    display: flex !important;
  }

  .hdrlogo .logomark img,
  .hdrlogo .logomark img.ayl-index-style-7,
  .hdrlogo .logomark img[class*="ayl-"][class$="-style-7"] {
    height: 34px !important;
  }

  /* Hero area: the generated mobile CSS uses generic selectors that are
     overridden by later page-specific classes. Use .site parents to raise
     specificity and restack the hero for mobile. */
  .site .heroimg {
    height: auto !important;
    min-height: 74vh !important;
  }

  .site .herobox {
    height: auto !important;
    justify-content: flex-start !important;
    padding-top: 104px !important;
    padding-bottom: 48px !important;
    align-items: stretch !important;
    text-align: center !important;
  }

  .site .herobox h1,
  .site .herobox p {
    width: auto !important;
    max-width: none !important;
  }

  .site .herobox > span {
    align-self: center !important;
    max-width: none !important;
  }

  /* Hero CTA buttons: the generated mobile CSS targets inline styles that
     no longer exist after extraction, so the buttons shrink and their labels
     can wrap. Stack them vertically and prevent flex-shrink so each pill
     keeps its designed padding, font size, and single-line label. */
  .site .herobox > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .site .herobox > div > a {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }

  /* Mobile drawer: expand the About Us dropdown by default and style the
     nav links as plain full-width text rows with a faint divider border. */

  /* The page-specific .hdrnav class (e.g. .ayl-index-style-9) carries a
     desktop gap:28px that overrides the mobile gap:0 because both use
     !important. Force the mobile drawer to have no gap between rows. */
  .hdrnav,
  .hdrnav[class*="ayl-"][class*="style-9"] {
    gap: 0 !important;
  }

  /* Show the Home link only in the mobile side menu. */
  .hdrnav a.home {
    display: block !important;
  }

  .hdrnav .ddpanel,
  .hdrnav .ddpanel[class*="ayl-"][class*="style-13"] {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hdrnav .ddcard,
  .hdrnav .ddcard[class*="ayl-"][class*="style-14"] {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
  }

  /* The scrim lives inside the sticky/blurred header, so its fixed-position
     inset is relative to the header rather than the viewport. Force it to
     cover the full viewport so tapping anywhere outside the drawer closes it. */
  #aylcnav:checked ~ .navscrim,
  #aylcnav:checked ~ .navscrim.ayl-index-style-3,
  #aylcnav:checked ~ .navscrim[class*="ayl-"][class*="style-3"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    inset: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 110 !important;
  }

  /* Top-level rows: plain links and dropdown group wrappers. */
  .hdrnav > a:not(.applymob),
  .hdrnav > a:not(.applymob)[class*="ayl-"][class*="style-16"],
  .hdrnav > div,
  .hdrnav > div[class*="ayl-"][class*="style-10"] {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(3, 16, 58, .08) !important;
    border-radius: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* Top-level links (plain + dropdown parent). Equal 36px gaps between
     top-level rows while keeping a comfortable touch target. */
  .hdrnav > a:not(.applymob),
  .hdrnav > a:not(.applymob)[class*="ayl-"][class*="style-16"],
  .hdrnav > div > a,
  .hdrnav > div[class*="ayl-"][class*="style-10"] > a[class*="ayl-"][class*="style-11"] {
    padding: 18px 2px !important;
    font: 600 18px 'Hanken Grotesk', sans-serif !important;
    color: #0a1330 !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  .hdrnav > a:not(.applymob):hover,
  .hdrnav > div > a:hover,
  .hdrnav > div > a[class*="ayl-"][class*="style-11"]:hover {
    color: #0320AF !important;
    background: none !important;
  }

  /* Dropdown parent rows: label + chevron on opposite ends. */
  .hdrnav > div > a,
  .hdrnav > div[class*="ayl-"][class*="style-10"] > a[class*="ayl-"][class*="style-11"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Nested dropdown links. */
  .hdrnav .ddcard a,
  .hdrnav .ddcard a[class*="ayl-"][class*="style-15"] {
    display: block !important;
    width: 100% !important;
    padding: 11px 2px 11px 14px !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    font: 500 15px 'Hanken Grotesk', sans-serif !important;
    color: #3c4358 !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  .hdrnav .ddcard a:hover,
  .hdrnav .ddcard a[class*="ayl-"][class*="style-15"]:hover {
    color: #0320AF !important;
    background: none !important;
  }

  /* Drawer header row (logo + close) stays separate from the link list. */
  .hdrnav .navtop {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 8px !important;
    margin: 0 0 16px !important;
    border: none !important;
    border-bottom: 1px solid rgba(3, 16, 58, .10) !important;
    background: none !important;
  }

  /* The Apply CTA is the only pill-style link in the drawer. */
  .hdrnav a.applymob,
  .hdrnav a.applymob[class*="ayl-"] {
    display: block !important;
    width: 100% !important;
    margin-top: 28px !important;
    padding: 14px 22px !important;
    border: none !important;
    border-radius: 999px !important;
    background: #FF7B00 !important;
    background-image: none !important;
    box-shadow: 0 8px 20px -6px rgba(255, 123, 0, .7) !important;
    font: 700 14px 'Hanken Grotesk', sans-serif !important;
    color: #fff !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
  }

  /* Content grids (.mstk): page-specific classes like .ayl-index-style-41
     override the generic mobile grid rule, leaving the grid as 2 squished
     columns. Force a single column in every band section. */
  .band .mstk {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 34px !important;
  }

  /* The "What is AYL" bullet list under "Not just another seminar" should
     stay left-aligned on mobile instead of inheriting the centered .mstk text. */
  .band .ayl-index-style-45,
  .band div[class*="ayl-"][class*="style-45"],
  .band .ayl-index-style-45 .ayl-index-style-46,
  .band .ayl-index-style-45 div[class*="ayl-"][class*="style-46"],
  .band .ayl-index-style-45 .ayl-index-style-49,
  .band .ayl-index-style-45 span[class*="ayl-"][class*="style-49"] {
    text-align: left !important;
  }

  .band .aboutmedia {
    position: static !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 26px !important;
  }

  .band .aboutmedia > div {
    position: static !important;
    width: 100% !important;
    height: 230px !important;
    border-width: 0 !important;
  }

  /* Carousels (.mcaro): page-specific classes override the generic mobile
     flex rule, keeping the grid layout and squishing cards. Switch to
     horizontal scroll with snap points. */
  .band .mcaro {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
  }

  .band .mcaro > * {
    flex: 0 0 84% !important;
    scroll-snap-align: center !important;
  }

  .band .mcaro::-webkit-scrollbar {
    display: none !important;
  }

  .band .gcell {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 230px !important;
  }

  .caroctl {
    display: flex !important;
  }

  /* Alumni band stays centered on mobile. */
  .band.alumni {
    text-align: center !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  .band.alumni > svg {
    display: block !important;
    margin: 0 auto !important;
  }

  .band.alumni > div {
    justify-content: center !important;
  }

  /* Alumni count: keep the number and the descriptor on separate lines
     so they don't get squished side-by-side on narrow screens. */
  .band.alumni .ayl-index-style-91,
  .band.alumni div[class*="ayl-"][class*="style-91"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Footer: stack into a single column instead of the 2-column mobile rule. */
  footer.band .mstk {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 32px !important;
  }

  footer.band .mstk > div:first-child {
    grid-column: auto !important;
  }

  footer.band div[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

@media (min-width: 821px) {
  /* About Us page: align the paragraph after "we're taking this legacy further"
     with the first paragraph's left edge and width. */
  .ayl-about-who-we-are-style-35 {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ayl-about-who-we-are-style-35 .ayl-about-who-we-are-style-36,
  .ayl-about-who-we-are-style-35 .ayl-about-who-we-are-style-37 {
    max-width: 600px !important;
  }
}

/* About Us page: the paragraph that follows "Now, we're taking this legacy further."
   needs a top margin so it reads as a continuation rather than sticking to the line above. */
.ayl-about-who-we-are-style-36 {
  margin-top: 24px !important;
}

@media (min-width: 821px) and (max-width: 1023px) {
  .site { --px: 80px !important; }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .site { --px: 128px !important; }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .site { --px: 160px !important; }
}

@media (min-width: 1920px) and (max-width: 2559px) {
  .site { --px: 192px !important; }
}

@media (min-width: 2560px) {
  .site { --px: 224px !important; }
}