/* ===================================================================
   SHOWCASE STYLESHEET — imagery components for marketing pages.
   Holds the building blocks for putting platform screenshots + photos
   on the homepage and program pages. Link AFTER tokens/components/shared.

   Owns:
     - .browser-frame        minimal browser window chrome (site-colored)
     - .showcase / .showcase-row   alternating screenshot <-> copy rows
     - .showcase-tabs        tabbed screenshot viewer (needs showcase tab JS)
     - .classroom-band       navy social-proof photo band
     - .program-hero--photo  photo-background hero variant (mastered/tailored)
     - .home-action / .home-strip / .division-thumb / hero --shot
                             homepage imagery variants
     - .variant-ribbon       PREVIEW-ONLY label for compare pages
   Design tokens come from css/tokens.css.
   =================================================================== */

/* ── Browser frame ──────────────────────────────────────────────────
   Wrap any <img> screenshot to read as "this is the live web app".
   Chrome uses site colors: cream/grey bar, brand-tinted traffic dots,
   a centered URL pill. Flat + soft-shadowed to match the card language. */
.browser-frame {
  width: 100%;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: calc(var(--radius-card) * 3);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.browser-frame-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--color-light);
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.10);
}
.browser-frame-dots {
  display: inline-flex;
  gap: 0.4rem;
  flex: 0 0 auto;
}
.browser-frame-dots span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
}
.browser-frame-dots span:nth-child(1) { background: var(--color-contrast); }   /* gold */
.browser-frame-dots span:nth-child(2) { background: var(--color-primary); }    /* blue */
.browser-frame-dots span:nth-child(3) { background: var(--color-dark); }       /* navy */
.browser-frame-url {
  flex: 1 1 auto;
  max-width: 22rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 1.7rem;
  padding: 0 0.9rem;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-dark-rgb), 0.10);
  border-radius: 999px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(var(--color-dark-rgb), 0.6);
}
.browser-frame-url .ph { font-size: 0.85rem; }
.browser-frame-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Showcase: alternating rows (Option A) ──────────────────────────
   Screenshot on one side, copy on the other; rows flip via --flip. */
.showcase {
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 6vw, 5rem);
  background: var(--color-bg);
  scroll-margin-top: 5rem;
}
.showcase--white { background: var(--color-white); }
.showcase-intro {
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.showcase-eyebrow {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(0.8rem, 0.7rem + 0.3vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 0.9rem;
}
.showcase-rows {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 5.5rem);
}
.showcase-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.showcase-row--flip .showcase-row-media { order: 2; }
.showcase-row--flip .showcase-row-text  { order: 1; }
.showcase-row-text { max-width: 38ch; }
.showcase-row-eyebrow {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-contrast-darker);
  margin: 0 0 0.75rem;
}
.showcase-row-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.5rem);
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.12;
  margin: 0 0 0.9rem;
}
.showcase-row-desc {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.12rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}
.showcase-row-desc b { font-weight: 600; color: var(--color-dark); }
@media (max-width: 860px) {
  .showcase-row { grid-template-columns: 1fr; gap: 1.75rem; }
  .showcase-row--flip .showcase-row-media,
  .showcase-row--flip .showcase-row-text { order: 0; }
  .showcase-row-text { max-width: 60ch; margin: 0 auto; text-align: center; }
}

/* ── Classroom social-proof band ────────────────────────────────────
   Navy band with a 4-up photo grid; adds rhythm between light sections. */
.classroom-band {
  background: var(--color-dark);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 6vw, 5rem);
  color: var(--color-text-light);
}
.classroom-band-head {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.classroom-band-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 3rem);
  line-height: 1.12;
  margin: 0 0 0.75rem;
  color: var(--color-text-light);
}
.classroom-band-sub {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  line-height: 1.55;
  margin: 0;
  color: rgba(251, 248, 244, 0.78);
}
.classroom-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
}
.classroom-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}
@media (max-width: 760px) {
  .classroom-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Photo-background hero variant (mastered H-B / tailored T-A) ─────
   Reuses .program-hero text styling; swaps in a photo + keeps the
   navy gradient, and grows taller so the photo can breathe. */
.program-hero--photo {
  min-height: clamp(340px, 46vh, 560px);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.program-hero--mastered {
  background-image: var(--gradient-hero),
                    url('../public/images/mastered/MasterED-2.png');
}
.program-hero--tailored {
  background-image: var(--gradient-hero),
                    url('../public/images/tailored-wide.png');
}

@media (max-width: 760px) {
  .program-hero--tailored {
    background-image: var(--gradient-hero),
                    url('../public/images/tailored.png');
  }
}
/* ===================================================================
   HOMEPAGE: interactive Divisions + preview
   Mobile-first stacked (row, then its image); two columns with a
   hover/tap-driven preview on tablet/laptop (>=820px).
   Replaces the old Our Divisions list + photo band.
   =================================================================== */
.divisions-showcase {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3rem);
  background: var(--color-bg);
}
.divisions-showcase-panel {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: calc(var(--radius-card) * 4);
  box-shadow: var(--shadow-soft);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}
.divisions-showcase .section-title { margin-bottom: clamp(1.75rem, 4vw, 3rem); }

/* Items — stacked by default (mobile) */
.divisions-duo { display: block; }
.division-item { display: block; }

/* Selectable row (hover/tap/focus switches the preview) */
.division-select {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  width: 100%;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.5rem, 1.5vw, 1rem);
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.15);
}
.divisions-duo .division-item:first-child .division-select {
  border-top: 1px solid rgba(var(--color-dark-rgb), 0.15);
}
.division-select-btn {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.division-icon {
  flex: 0 0 auto;
  width: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.division-icon img {
  max-height: 3rem;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.division-text { min-width: 0; display: flex; flex-direction: column; }
.division-name {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.4rem);
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.1;
  margin: 0;
}
.division-sub {
  display: block;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(0.9rem, 0.82rem + 0.35vw, 1.15rem);
  color: rgba(var(--color-dark-rgb), 0.72);
  margin: 0.35rem 0 0;
  line-height: 1.45;
}
.division-sub b { color: var(--color-dark); font-weight: 700; }
.division-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--color-dark-rgb), 0.35);
  color: var(--color-dark);
  text-decoration: none;
  font-size: 1.25rem;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.division-arrow:hover {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-text-light);
  transform: translateX(2px);
}

/* Preview image for each division */
.preview-slide {
  position: relative;
  margin: 0.75rem 0 1.75rem;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.preview-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* StandardED framed preview — whole image, whitespace padded at bottom */
.preview-frame {
  position: absolute;
  inset: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: var(--radius-card);
  box-shadow: none;
  background: #F1F6F6;
}
.preview-frame .browser-frame-fill {
  flex: 1 1 auto;
  min-height: 0;
  background: #F1F6F6;
}
.preview-frame .browser-frame-fill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  display: block;
}

/* Learn more pill — overlaid bottom-left of the preview */
.preview-learn-more {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-contrast);
  color: var(--color-dark);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  transition: background 0.2s, transform 0.2s;
}
.preview-learn-more:hover {
  background: var(--color-contrast-darker);
  transform: translateY(-1px);
}

/* ── Tablet / laptop: two columns, hover/tap-driven preview ────────── */
@media (min-width: 820px) {
  .divisions-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: stretch;
  }
  .division-item { display: contents; }
  .division-select {
    grid-column: 1;
    border-radius: var(--radius-card);
    transition: background 0.15s;
  }
  .division-item.is-active .division-select { background: rgba(var(--color-dark-rgb), 0.05); }
  .preview-slide { display: none; }
  .division-item.is-active .preview-slide {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    min-height: 0;            /* image fills via absolute positioning, so it never
                                 drives the box height — every preview is identical
                                 and matches the list height (no jump on hover) */
    aspect-ratio: auto;
    align-self: stretch;
  }
}