/* =====================================================================
   academic-journey.css — "Academic Journey" (main academics page)
   K-12 Journey timeline slider; Extracurricular Activities cards are a
   swipeable, autoplaying slider on mobile, a 3-column grid on desktop.
   Scoped under .ac10
   ===================================================================== */

.ac10 {
  --a-maroon: var(--maroon, #8D2130);
  --a-maroon-deep: var(--maroon-900, #5F141C);
  --a-green: var(--green, #085B4A);
  --a-paper: #FBF7EF; --a-sand: #F4ECDD; --a-card: #fff;
  --a-ink: #241E1C; --a-muted: #6B655F; --a-line: #E4DCCE;
  --a-pad: clamp(58px, 7vw, 96px);
  background: var(--a-paper); color: var(--a-ink); font-family: var(--font-sans);
}
/* base.css colours all headings — let our own rules decide instead */
.ac10 :where(h1, h2, h3, h4) { color: inherit; font-family: var(--font-display); }
.ac10 .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.ac10 .eyebrow { display: inline-flex; align-items: center; gap: .7em; font-size: 11.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--a-maroon); }
.ac10 .eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--a-maroon); }
.ac10 .sec { padding-block: var(--a-pad); }

/* ---------- hero: asymmetric editorial, no image ---------- */
.ac10 .hero { padding-top: calc(var(--topbar-h, 38px) + var(--nav-h, 74px) + clamp(46px, 6vw, 84px)); }
.ac10 .hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 7vw, 88px); line-height: .98; letter-spacing: -.02em; color: var(--a-maroon-deep); margin: 20px 0 0; }
.ac10 .hero h1 em { font-style: italic; color: var(--a-maroon); }
/* inline stat row instead of boxed cards */
.ac10 .hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 64px); border-top: 1.5px solid var(--a-ink); padding-top: 24px; }
.ac10 .hstat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 42px); color: var(--a-maroon); line-height: 1; }
.ac10 .hstat span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted); font-weight: 600; }

/* ---------- section heading ---------- */
.ac10 .shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(34px, 4vw, 52px); }
.ac10 .shead h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.8vw, 44px); line-height: 1.08; color: var(--a-ink); margin: 12px 0 0;  }
.ac10 .shead h2 em { font-style: italic; color: var(--a-maroon); }
.ac10 .shead--center { flex-direction: column; align-items: center; text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: clamp(38px, 4.4vw, 56px); }
.ac10 .shead--center h2 { max-width: none; }

/* ---------- stages: connected journey timeline ----------
   6 stages — desktop shows it as an autoplaying, looping slider (4 cards
   in view at a time, JS in academic-journey.js); mobile (≤900px, below) stays
   the original static stacked list, untouched. Nav arrows live in the
   section header (not overlapping the card row) since .jn items are plain
   text with no card background to visually separate an overlaid button. */
.ac10 .journey__slider { position: relative; }
.ac10 .journey__head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.ac10 .journey__nav-group { display: flex; gap: 10px; }
.ac10 .journey__nav { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--a-line); color: var(--a-maroon-deep); cursor: pointer; box-shadow: 0 6px 16px rgba(43,36,32,.12); transition: background .2s, color .2s, box-shadow .2s; }
.ac10 .journey__nav svg { width: 18px; height: 18px; }
.ac10 .journey__nav:hover { background: var(--a-maroon); color: #fff; box-shadow: 0 8px 20px rgba(141,33,48,.3); }
.ac10 .journey { position: relative; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ac10 .journey::-webkit-scrollbar { display: none; }
/* desktop: no container-wide ::before line — a pseudo-element sized to the
   scroll container only spans the *visible* width, not the full scrollable
   track, so it broke between whichever nodes were off-screen. Each card
   draws its own connector to the next one instead, so it scrolls with the
   content and always reaches. (Mobile's vertical line is unaffected —
   re-enabled via .journey::before further down, in its own media query.) */
.ac10 .journey::before { content: none; }
.ac10 .jn:not(:last-child)::after { content: ""; position: absolute; top: 8px; left: 9px; width: calc(100% + 18px); height: 2px; background: repeating-linear-gradient(90deg, var(--a-line) 0 8px, transparent 8px 16px); }
/* card width targets ~4.15 cards in view — the sliver of a 5th card peeking
   at the right edge is a visual cue that this scrolls, so it never reads as
   "only 4 stages exist" before the autoplay has had a chance to move it. */
.ac10 .jn { position: relative; flex: 0 0 calc((100% - 3 * 18px) / 4.15); scroll-snap-align: start; padding-top: 40px; }
.ac10 .jn__node { position: absolute; z-index: 1; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--a-maroon); box-shadow: 0 0 0 5px var(--a-paper), 0 0 0 6px var(--a-line); }
.ac10 .jn__no { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--a-maroon); letter-spacing: .1em; }
.ac10 .jn__tag { display: block; margin: 10px 0 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a-muted); }
.ac10 .jn h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.15; margin: 0 0 4px; color: var(--a-ink); }
.ac10 .jn__grade { font-size: 12.5px; font-weight: 600; color: var(--a-maroon); }
.ac10 .jn p { font-size: 13.5px; line-height: 1.65; color: var(--a-muted); margin: 10px 0 0; }

/* ---------- ACTIVITIES: icon cards (grid on desktop, slider on mobile) ---------- */
.ac10 .acts__slider { position: relative; }
.ac10 .acts__nav { display: none; }   /* arrows are hidden on desktop — grid needs no nav */
.ac10 .acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ac10 .act { position: relative; overflow: hidden; background: var(--a-card); border: 1px solid var(--a-line); border-radius: 18px; padding: 28px 26px; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s; }
.ac10 .act__ghost { position: absolute; right: -14px; bottom: -20px; opacity: .06; pointer-events: none; color: var(--a-maroon); }
.ac10 .act__ghost svg { width: 150px; height: 150px; }
.ac10 .act__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--a-maroon); color: #fff; margin-bottom: 18px; transition: transform .4s; }
.ac10 .act__ic svg { width: 26px; height: 26px; }
.ac10 .act:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -30px rgba(141,33,48,.5); border-color: transparent; }
.ac10 .act:hover .act__ic { transform: rotate(-6deg) scale(1.06); }
.ac10 .act h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin: 0 0 8px; position: relative; color: var(--a-ink); }
.ac10 .act p { font-size: 14.5px; line-height: 1.7; color: var(--a-muted); margin: 0; position: relative; }

/* ---------- SPACES: dark maroon band, refined icon list ---------- */
.ac10 .band { background: var(--a-maroon-deep); color: #fff; }
.ac10 .band .eyebrow { color: #E9B9BF; }
.ac10 .band .eyebrow::before { background: #E9B9BF; }
.ac10 .band .shead h2 { color: #fff; }
.ac10 .band .shead h2 em { color: #F0C9CE; font-style: italic; }
.ac10 .spaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.16); }
.ac10 .space { display: flex; gap: 16px; align-items: flex-start; padding: 26px 22px 26px 0; border-bottom: 1px solid rgba(255,255,255,.14); border-right: 1px solid rgba(255,255,255,.14); transition: background .3s; }
.ac10 .space:nth-child(3n) { border-right: none; padding-right: 0; }
.ac10 .space { padding-left: 22px; }
.ac10 .space:nth-child(3n+1) { padding-left: 0; }
.ac10 .space__ic { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.10); color: #F0C9CE; transition: background .3s, color .3s; }
.ac10 .space__ic svg { width: 23px; height: 23px; }
.ac10 .space h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 2px 0 5px; color: #fff; }
.ac10 .space p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.7); margin: 0; }
.ac10 .space:hover .space__ic { background: #fff; color: var(--a-maroon-deep); }

/* ---------- CTA — solid maroon card, matching beyond-academics.php ---------- */
.ac10 .cta { text-align: center; }
.ac10 .cta__in { background: var(--a-maroon-deep); color: #fff; border-radius: 22px; padding: clamp(38px, 5vw, 62px) 24px; }
.ac10 .cta .eyebrow { justify-content: center; color: #EEBEC4; }
.ac10 .cta .eyebrow::before { display: block; background: #EEBEC4; }
.ac10 .cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; color: #fff; margin: 14px auto 12px; }
.ac10 .cta p { color: rgba(255,255,255,.86); font-size: 16.5px; line-height: 1.7; max-width: 52ch; margin: 0 auto; }
.ac10 .cta__btns { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ac10 .btn { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: 14px; padding: 13px 28px; border-radius: 999px; border: 1.5px solid transparent; transition: background .25s, color .25s, transform .25s; }
.ac10 .btn svg { width: 17px; height: 17px; }
.ac10 .btn--solid { background: #fff; color: var(--a-maroon-deep); }
.ac10 .btn--solid:hover { transform: translateY(-2px); }
.ac10 .btn--line { border-color: rgba(255,255,255,.55); color: #fff; }
.ac10 .btn--line:hover { background: #fff; color: var(--a-maroon-deep); }

@media (max-width: 900px) {
  .ac10 .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
  .ac10 .shead { flex-direction: column; align-items: flex-start; }
  /* undo the desktop slider entirely — static stacked list, as before */
  .ac10 .journey__head-right { align-items: flex-start; }
  .ac10 .journey__nav-group { display: none; }
  .ac10 .journey { display: block; gap: 0; overflow-x: visible; scroll-snap-type: none; }
  /* base rule disabled this (content: none) for the desktop slider — bring
     it back for mobile's original vertical connecting line. */
  .ac10 .journey::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(141,33,48,.35) 0 8px, transparent 8px 16px); }
  /* :not(:last-child) matches the base rule's specificity so this override
     actually wins the cascade — a plain .jn::after here loses to the more
     specific base selector and the horizontal connector stays visible. */
  .ac10 .jn:not(:last-child)::after { content: none; }   /* the desktop per-card horizontal connector isn't needed here */
  .ac10 .jn { flex: none; scroll-snap-align: none; padding: 4px 0 30px 40px; }
  .ac10 .jn__node { top: 4px; }
  .ac10 .acts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ac10 .act { padding: 20px 16px; }
  .ac10 .act__ic { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 14px; }
  .ac10 .act__ic svg { width: 21px; height: 21px; }
  .ac10 .act h3 { font-size: 17px; margin-bottom: 6px; }
  .ac10 .act p { font-size: 13px; }
  .ac10 .act__ghost svg { width: 100px; height: 100px; }
  .ac10 .spaces { grid-template-columns: 1fr; }
  .ac10 .space, .ac10 .space:nth-child(3n), .ac10 .space:nth-child(3n+1) { padding: 22px 0; border-right: none; }
}

/* ---- activities: swipeable autoplay slider on MOBILE only (tablet+ keeps the grid) ---- */
@media (max-width: 700px) {
  .ac10 .acts__nav {
    display: grid; place-items: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.94); border: 1px solid var(--a-line);
    color: var(--a-maroon-deep); cursor: pointer; z-index: 3;
    box-shadow: 0 6px 18px rgba(43,36,32,.2);
    transition: background .2s, color .2s;
  }
  .ac10 .acts__nav svg { width: 18px; height: 18px; }
  .ac10 .acts__nav:active { background: var(--a-maroon); color: #fff; }
  /* sit in the .wrap gutter, just outside the card — never over the icon/text */
  .ac10 .acts__nav--prev { left: -18px; }
  .ac10 .acts__nav--next { right: -18px; }

  .ac10 .acts {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 10px;
    scroll-padding-left: 4px;
    scrollbar-width: none;              /* Firefox */
  }
  .ac10 .acts::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  .ac10 .act {
    flex: 0 0 82%;                      /* one card at a time, next one peeking */
    scroll-snap-align: center;
  }
}