/* ===================================================================
   SHARED COMPONENTS — buttons, CTA banners, hero, section title.
   Loaded on EVERY page after tokens.css and before page-specific CSS.

   When you need a new button or banner variant, add a modifier here
   instead of creating a new ad-hoc class on a page-level stylesheet.
   =================================================================== */

/* ── Buttons ────────────────────────────────────────────────────────
   .btn               — base purple/contrast button (default size)
   .btn--hero         — bigger, heavier weight, more letter-spacing
                        (used inside .hero--full landing CTA)
   .btn--compact      — smaller, used inside the header (LOG IN)
   .btn--cta-trailing — used as the right-hand button inside .cta-banner
                        (just adds flex-shrink: 0)
   .btn--ghost        — transparent with navy border (alternative action)
   ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85em 1.6em;
  background: var(--color-contrast);
  color: var(--color-dark);
  border: none;
  border-radius: var(--radius-card);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
  background: var(--color-contrast-darker);
  color: var(--color-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.85;
  transform: none;
  box-shadow: none;
}

.btn--hero {
  padding: 0.85em 2.4em;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}

.btn--compact {
  padding: 0.4em 1.4em;
  font-size: inherit;
  font-weight: 600;
}

.btn--cta-trailing {
  flex-shrink: 0;
}

.btn--ghost {
  background: transparent;
  color: var(--color-dark);
  border: 1px solid rgba(var(--color-dark-rgb), 0.35);
}
.btn--ghost:hover {
  background: rgba(var(--color-dark-rgb), 0.06);
  color: var(--color-dark);
  border-color: var(--color-primary);
}

/* ── CTA banner ─────────────────────────────────────────────────────
   Navy band with a headline + supporting line on the left and a
   trailing button on the right. Used at the bottom of major sections.

   Modifiers:
     .cta-banner--program — used inside subpages (more vertical margin)
   ─────────────────────────────────────────────────────────────────── */
.cta-banner {
  width: 90%;
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--color-dark);
  color: var(--color-text-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  font-family: 'Montserrat', Arial, sans-serif;
  box-sizing: border-box;
}
.cta-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.cta-banner-text h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
}
.cta-banner-text p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 300;
  opacity: 0.85;
}
@media (max-width: 700px) {
  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 1.25rem;
  }
  .cta-banner .btn--cta-trailing {
    align-self: stretch;
    justify-content: center;
  }
}

.cta-banner--program {
  margin: clamp(3rem, 5vw, 5rem) auto;
}

/* ── Hero ───────────────────────────────────────────────────────────
   .program-hero      — compact (~35vh) shared hero used by every
                        subpage (mastered, tailored, standarded, team,
                        schools, contact). Has the global-hero.png
                        background + the navy gradient overlay.
                        Pair with .program-hero-text / -title /
                        -tagline / -desc.
   The homepage uses the larger .landing-title-container in App.css —
   not unified with this on purpose because the homepage hero has a
   different content structure (eyebrow headline + body + CTA stack).
   ─────────────────────────────────────────────────────────────────── */
.program-hero {
  min-height: clamp(180px, 20vh, 300px);
  display: flex;
  align-items: center;
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1.25rem, 6vw, 5rem);
  background: var(--gradient-hero),
              url('../public/images/global-hero.png') no-repeat right center;
  background-size: cover;
  color: var(--color-text-light);
  box-sizing: border-box;
}
.program-hero-text {
  max-width: min(60%, 900px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (max-width: 720px) {
  .program-hero-text { max-width: 100%; }
}
.program-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 4.5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.05;
}
.program-hero-tagline {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(1.1rem, 0.8rem + 0.8vw, 1.5rem);
  font-weight: 300;
  margin: 0;
  line-height: 1.3;
}
.program-hero-desc {
  font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.1rem);
  line-height: 1.6;
  font-weight: 300;
  max-width: 60ch;
  margin: 0;
}

/* ── Testimonial card ───────────────────────────────────────────────
   .testimonial-frame      — the white-ish card with the big quote
                              mark in the top-left corner.
   .testimonial-content    — wraps the quote text + reviewer line;
                              has the fade-swap opacity transition.
   .testimonial-text       — the quote paragraph.
   .testimonial-reviewer   — the small "Name — Title, School" line.

   The homepage uses these inside a .testimonial-row carousel (App.css);
   program pages use a single card to feature one testimonial.
   ─────────────────────────────────────────────────────────────────── */
.testimonial-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  box-sizing: border-box;
}
.testimonial-quote-mark {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  left: clamp(1rem, 2vw, 1.5rem);
  width: clamp(2rem, 3vw + 1rem, 3.25rem);
  height: auto;
  fill: none;
  stroke: rgba(var(--color-dark-rgb), 0.2);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.testimonial-content {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  transition: opacity 0.22s ease;
}
.testimonial-content.is-fading {
  opacity: 0;
}
.testimonial-text {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(1.05rem, 0.85rem + 0.55vw, 1.35rem);
  line-height: 1.55;
  color: var(--color-dark);
  font-weight: 400;
}
.testimonial-text b {
  font-weight: 700;
}
.testimonial-reviewer {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(0.9rem, 0.8rem + 0.25vw, 1rem);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

/* Carousel layout (homepage): override the centered single-card max
   width when there are multiple frames in a flex row. */
.testimonial-row .testimonial-frame {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
@media (max-width: 720px) {
  .testimonial-row .testimonial-frame {
    flex-basis: 100%;
  }
  /* Small screens: show only one testimonial at a time (hide the 2nd card).
     The carousel arrows/dots still step through all testimonials. */
  .testimonial-row .testimonial-frame:nth-child(2) {
    display: none;
  }
}

/* Mobile typography bump (≤600px) for shared components — applies on every
   page (subpages don't load App.css). Body copy → ~16px (1.45rem ≈ 16px at
   the ~11.2px mobile root). */
@media (max-width: 600px) {
  .program-hero-tagline,
  .testimonial-text,
  .program-hero-desc {
    font-size: 1.45rem;
  }
}