/**
 * About Us hub page — component styles.
 *
 * Covers every section of template-parts/page/about.php (new hub design).
 * All spacing, colour, radius, shadow and typography values come from
 * tokens.css — no hardcoded hex, px or rem anywhere in this file.
 *
 * Section order:
 *   §1  Section nav strip   — tab-bar (nav mode) attached below the hero
 *   §2  Our Story           — 2-col text + image
 *   §3  Guiding Principles  — tab-bar (switcher mode) for Vision/Mission/Values
 *   §4  Leadership teaser   — centered header + 4-col card grid
 *   §5  CTA banner          — dark teal close strip
 *
 * The hero is now the standard page-banner component (no bespoke styles).
 * Hub grid + accreditation strip have been deleted — their navigation role
 * is now served by the §1 section nav strip.
 *
 * CSS layer: components (declared in tokens.css).
 * Breakpoints: 64em (tablet ≤1024px) · 48em (mobile ≤768px).
 *
 * @package Vimta
 */

@layer components {

/* §1 SECTION NAV STRIP — extracted to assets/css/components/about-section-nav.css
   so the strip renders consistently on every About Us sub-page (not just the
   landing). See that file for the full rule set. */


/* ════════════════════════════════════════════════════════════════════════════
   §2  OUR STORY
   2-col layout: text left, image right. Stacks on mobile.
   ════════════════════════════════════════════════════════════════════════════ */

  .about-hub-story__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--container-gap);
    align-items: center;
  }

  .about-hub-story__content {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
  }

  .about-hub-story__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--primary);
    margin: 0;
  }

  .about-hub-story__heading {
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
    margin: 0;
  }

  .about-hub-story__body {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    margin: 0;
  }

  .about-hub-story__body p {
    margin: 0;
  }

  .about-hub-story__body p + p {
    margin-block-start: var(--stack-gap);
  }

  .about-hub-story__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--primary);
    text-decoration: none;
    transition: gap var(--duration-fast) var(--ease-out);
  }

  .about-hub-story__link:hover,
  .about-hub-story__link:focus-visible {
    color: var(--primary-hover);
    gap: var(--space-xs);
  }

  .about-hub-story__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  .about-hub-story__link .icon-meta {
    inline-size: 1em;
    block-size: 1em;
  }

  /* Image column */
  .about-hub-story__media {
    border-radius: var(--card-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    position: relative;
  }

  .about-hub-story__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  @media (max-width: 64em) {
    .about-hub-story__grid {
      grid-template-columns: 1fr;
      gap: var(--container-gap);
    }

    .about-hub-story__media {
      aspect-ratio: 16 / 9;
      order: -1; /* image sits above text on narrow viewports */
    }
  }

  @media (max-width: 48em) {
    .about-hub-story__media {
      aspect-ratio: 3 / 2;
    }
  }


/* ════════════════════════════════════════════════════════════════════════════
   §3  GUIDING PRINCIPLES — moved to template-parts/components/principle-cards.php
   ─────────────────────────────────────────────────────────────────────────────
   The About Us landing calls principle-cards component directly. All CSS
   for the matched-pair mint/blush tinted cards lives in
   assets/css/components/principle-cards.css now, enqueued site-wide across
   the About Us section (landing + all sub-pages). Other pages that need
   the same pattern (Philosophy, Vision & Values) call the same component.
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   §4  LEADERSHIP TEASER
   Centered section header + 4-col card grid. Drops to 2-col and 1-col.
   ════════════════════════════════════════════════════════════════════════════ */

  .about-hub-leaders .section-header {
    margin-block-end: var(--container-gap);
  }

  .about-hub-leaders__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media (max-width: 64em) {
    .about-hub-leaders__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 36em) {
    .about-hub-leaders__grid { grid-template-columns: 1fr; }
  }


/* ════════════════════════════════════════════════════════════════════════════
   §5  CTA BANNER
   Custom two-button variant — not using cta-banner.php (single-button only).
   Primary gradient background, centred content.
   ════════════════════════════════════════════════════════════════════════════ */

  .about-hub-cta {
    background-color: var(--primary-dark);
    background-image: linear-gradient(
      135deg,
      var(--primary-dark)      0%,
      var(--primary)           65%,
      var(--primary-semi-dark) 100%
    );
    color: var(--text-on-dark);
  }

  .about-hub-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--content-gap);
    text-align: center;
    max-inline-size: var(--text-width-s);
    margin-inline: auto;
  }

  .about-hub-cta__heading {
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-on-dark);
    margin: 0;
  }

  .about-hub-cta__text {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-on-dark-secondary);
    margin: 0;
  }

  .about-hub-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap);
    justify-content: center;
    align-items: center;
  }

  /* Primary action — warm secondary (blush) on dark bg */
  .about-hub-cta__btn-primary {
    background-color: var(--secondary);
    color: var(--primary-dark);
    border: none;
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    border-radius: var(--btn-radius);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--btn-icon-gap);
    cursor: pointer;
    transition: background-color var(--btn-transition);
  }

  .about-hub-cta__btn-primary:hover,
  .about-hub-cta__btn-primary:focus-visible {
    background-color: var(--secondary-hover);
  }

  .about-hub-cta__btn-primary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Outline action — semi-transparent white border */
  .about-hub-cta__btn-outline {
    background-color: transparent;
    color: var(--white);
    border: 1.5px solid color-mix(in oklch, var(--white) 50%, transparent);
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    border-radius: var(--btn-radius);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--btn-icon-gap);
    cursor: pointer;
    transition:
      background-color var(--btn-transition),
      border-color var(--btn-transition);
  }

  .about-hub-cta__btn-outline:hover,
  .about-hub-cta__btn-outline:focus-visible {
    background-color: color-mix(in oklch, var(--white) 10%, transparent);
    border-color: color-mix(in oklch, var(--white) 75%, transparent);
  }

  .about-hub-cta__btn-outline:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  @media (max-width: 48em) {
    .about-hub-cta__actions {
      flex-direction: column;
      align-items: stretch;
    }

    .about-hub-cta__btn-primary,
    .about-hub-cta__btn-outline {
      justify-content: center;
      text-align: center;
    }
  }

} /* end @layer components */