/* assets/css/components/about.css
 * @layer components — About page sections + Sector page layout
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     ABOUT HERO (teal gradient)
     ════════════════════════════════════════════════════════════════════ */

  .about-hero {
    position: relative;
    padding-block: var(--section-space-l) var(--section-space-m);
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
  }

  .about-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      oklch(54.8% 0.094 191.9 / 87%),
      oklch(35% 0.095 191.9 / 94%)
    );
  }

  .about-hero__stack {
    position: relative;
    z-index: 1;
  }

  .about-hero__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-l);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-on-dark);
  }

  .about-hero__subheading {
    font-size: var(--text-l);
    line-height: var(--leading-relaxed);
    color: oklch(100% 0 0 / 80%);
    max-inline-size: 42rem;
  }

  .about-hero__divider {
    width: 3.75rem;
    height: 0.1875rem;
    background: var(--secondary-dark);
    border-radius: var(--radius-xs);
  }


  /* ════════════════════════════════════════════════════════════════════
     ABOUT STORY (image + text)
     ════════════════════════════════════════════════════════════════════ */

  .about-story__grid {
    display: grid;
    grid-template-columns: var(--grid-golden-reverse);
    gap: var(--space-2xl);
    align-items: start;
  }

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

  .about-story__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-main);
  }

  .about-story__divider {
    width: 3rem;
    height: 0.1875rem;
    background: var(--secondary-dark);
    border-radius: var(--radius-xs);
  }

  .about-story__text {
    font-size: var(--text-m);
    line-height: var(--leading-loose);
    color: var(--text-body);
  }

  .about-story__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-l);
    object-fit: cover;
  }

  @media (max-width: 48em) {
    .about-story__grid {
      grid-template-columns: 1fr;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     MISSION & VISION
     ════════════════════════════════════════════════════════════════════ */

  .about-mv__grid {
    display: grid;
    grid-template-columns: var(--grid-2);
    gap: var(--grid-gap);
  }

  .about-mv-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--card-padding-spacious);
    border-radius: var(--radius-l);
  }

  .about-mv-card--mission {
    background: var(--primary-ultra-light);
  }

  .about-mv-card--vision {
    background: var(--secondary-ultra-light);
  }

  .about-mv-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-round);
  }

  .about-mv-card--mission .about-mv-card__icon-wrap {
    background-color: var(--surface-primary);
    color: var(--text-on-primary);
  }

  .about-mv-card--vision .about-mv-card__icon-wrap {
    background: var(--secondary-dark);
    color: var(--text-on-dark);
  }

  .about-mv-card__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .about-mv-card__text {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  @media (max-width: 48em) {
    .about-mv__grid {
      grid-template-columns: 1fr;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     VALUES GRID (3x2)
     ════════════════════════════════════════════════════════════════════ */

  .about-values__grid {
    display: grid;
    grid-template-columns: var(--grid-3);
    gap: var(--grid-gap);
  }

  .about-value-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--card-padding-spacious);
    background: var(--body-bg);
    border-radius: var(--radius-l);
    border: 1px solid var(--border-subtle);
  }

  .about-value-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: var(--primary-ultra-light);
    border-radius: var(--radius-m);
  }

  .about-value-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
  }

  .about-value-card__desc {
    font-size: var(--text-s);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  @media (max-width: 48em) {
    .about-values__grid {
      grid-template-columns: var(--grid-2);
    }
  }

  @media (max-width: 30em) {
    .about-values__grid {
      grid-template-columns: 1fr;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     SECTOR PAGE (two-column body + sidebar)
     ════════════════════════════════════════════════════════════════════ */

  .sector-hero {
    position: relative;
    padding-block: var(--section-space-m) var(--section-space-s);
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
  }

  .sector-hero__bg,
  .sector-hero__overlay {
    position: absolute;
    inset: 0;
  }

  .sector-hero__overlay {
    background: linear-gradient(
      to bottom,
      oklch(12% 0.007 210 / 90%),
      oklch(15% 0.03 191.9 / 60%) 40%,
      oklch(12% 0.007 210 / 87%)
    );
    z-index: 1;
  }

  .sector-hero__stack {
    position: relative;
    z-index: 2;
  }

  .sector-hero__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-l);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-on-dark);
  }

  .sector-hero__subheading {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: oklch(100% 0 0 / 80%);
    max-inline-size: 38rem;
  }

  /* ── Intro block ── */
  .sector-intro__bar {
    display: flex;
    gap: var(--space-m);
    align-items: center;
  }

  .sector-intro__accent {
    flex-shrink: 0;
    width: 0.25rem;
    align-self: stretch;
    background-color: var(--surface-primary);
    border-radius: var(--radius-xs);
  }

  .sector-intro__text {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  /* ── Two-column body ── */
  .sector-body__grid {
    display: grid;
    grid-template-columns: var(--grid-wide-narrow);
    gap: var(--space-2xl);
    align-items: start;
  }

  .sector-block__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    color: var(--text-accent);
  }

  .sector-block__text {
    font-size: var(--text-m);
    line-height: var(--leading-loose);
    color: var(--text-body);
    margin-block-start: var(--space-s);
  }

  @media (max-width: 48em) {
    .sector-body__grid {
      grid-template-columns: 1fr;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     SECTOR SIDEBAR
     ════════════════════════════════════════════════════════════════════ */

  .sector-sidebar__nav {
    border-radius: var(--radius-l);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
  }

  .sector-sidebar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-m) var(--space-l);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-s);
    text-decoration: none;
  }

  .sector-sidebar__header--active {
    background-color: var(--surface-primary);
    color: var(--text-on-primary);
  }

  .sector-sidebar__header--collapsed {
    background: var(--surface-raised);
    color: var(--text-main);
    border-block-end: 1px solid var(--border-subtle);
  }

  .sector-sidebar__items {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sector-sidebar__item {
    border-block-end: 1px solid var(--border-subtle);
  }

  .sector-sidebar__item--active {
    background: var(--primary-ultra-light);
  }

  .sector-sidebar__link {
    display: block;
    padding: var(--space-s) var(--space-l);
    font-size: var(--text-s);
    color: var(--text-body);
    text-decoration: none;
  }

  .sector-sidebar__item--active .sector-sidebar__link {
    color: var(--text-accent);
    font-weight: var(--weight-semibold);
  }

  .sector-sidebar__link:hover {
    color: var(--text-accent);
    background: var(--primary-ultra-light);
  }

  /* ── Specialist CTA card ── */
  .sector-sidebar__cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
    padding: var(--card-padding-spacious);
    background: var(--primary-ultra-dark);
    border-radius: var(--radius-l);
    text-align: center;
    margin-block-start: var(--space-l);
  }

  .sector-sidebar__cta-icon {
    color: var(--secondary);
  }

  .sector-sidebar__cta-heading {
    font-family: var(--font-heading);
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    color: var(--text-on-dark);
  }

  .sector-sidebar__cta-btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Accreditations ── */
  .sector-sidebar__accreditations {
    padding: var(--card-padding);
    background: var(--surface-raised);
    border-radius: var(--radius-l);
    border: 1px solid var(--border-subtle);
    margin-block-start: var(--space-l);
  }

  .sector-sidebar__accreditations-title {
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin-block-end: var(--space-m);
  }

  .sector-sidebar__badges {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  .sector-sidebar__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-s);
    background: var(--body-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-s);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--text-accent);
  }

  /* ── Social share ── */
  .sector-sidebar__share {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
  }

  .sector-sidebar__share-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .sector-sidebar__social {
    display: flex;
    gap: var(--space-xs);
  }

  .sector-sidebar__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-round);
    background: var(--surface-dark);
    color: var(--text-on-dark);
    text-decoration: none;
  }

  .sector-sidebar__social-link:hover {
    background-color: var(--surface-primary);
  }

}