/* assets/css/components/page-csr.css
 * @layer components — Corporate Social Responsibility page styles
 * ════════════════════════════════════════════════════════════════════
 *
 * Sections:
 *   1. Intro           — centred editorial column
 *   2. Report card     — compact download band
 *   3. Policy tiles    — image tiles with persistent title bar +
 *                        hover-expand description
 *   4. Pillars         — 4-col desktop grid / Splide mobile (single source)
 *   5. Initiatives     — year-labelled timeline list
 *   6. Responsive      — all breakpoints at the bottom
 *
 * Token source: tokens.css — no hardcoded values.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     1. INTRO
     ─────────────────────────────────────────────────────────────────────
     The intro section-header sits at the top of the page content —
     one step below the page-banner h1. Use --heading-s (max 2rem) so
     it reads as a section lead-in, not a competing page title.
     ════════════════════════════════════════════════════════════════════ */

  .csr-intro {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    max-inline-size: 76ch;
    margin-inline: auto;
    text-align: center;
  }

  /* Step the intro heading down from the global --heading-m default */
  .csr-intro .section-header__heading {
    font-size: var(--heading-s);
  }

  .csr-intro__body {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    text-align: start;
  }

  .csr-intro__body p { margin: 0; }


  /* ════════════════════════════════════════════════════════════════════
     2. REPORT DOWNLOAD CARD
     ════════════════════════════════════════════════════════════════════ */

  .csr-report-card {
    display: flex;
    flex-direction: column;
    max-inline-size: 32rem;
    margin-inline: auto;
    border-radius: var(--card-radius);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--card-shadow);
  }

  .csr-report-card__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-l);
    background: var(--primary-ultra-dark);
  }

  /* Sizing handled by [data-icon-style="boxed"][data-icon-size="s"] — icon.css */
  .csr-report-card__icon {
    background: color-mix(in oklch, var(--white) 12%, transparent);
    color: var(--white);
  }

  .csr-report-card__title {
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    color: var(--text-on-dark);
    margin: 0;
  }

  .csr-report-card__year {
    font-size: var(--text-xs);
    color: var(--text-on-dark-secondary);
    margin: 0;
  }

  .csr-report-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    padding: var(--space-l);
    background: var(--white);
  }

  .csr-report-card__desc {
    font-size: var(--text-s);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    margin: 0;
  }


  /* ════════════════════════════════════════════════════════════════════
     3. POLICY MANDATE — section-header (eyebrow + title) + image tile grid
     ─────────────────────────────────────────────────────────────────────
     No tinted container — the tiles are the visual centrepiece.
     section-header renders eyebrow + title via the shared component.
     Grid sits directly below with a container-gap top margin.
     Each tile shows a background image with a dark gradient.
     A persistent title bar is pinned to the bottom.
     On hover: the tile lifts slightly and the description slides up
     from below the title, pushing nothing — it expands via max-block-size
     so layout stays stable for neighbouring tiles.
     ════════════════════════════════════════════════════════════════════ */

  /* Policy section-header: one tier below intro — --heading-xs (max 1.625rem) */
  .csr-policy-section .section-header__heading {
    font-size: var(--heading-xs);
  }

  .csr-policy__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    margin-block-start: var(--container-gap);
  }

  /* ── Tile ──
     --csr-tile-min-height is a component-scoped token — no global token
     maps to this specific tile height requirement. */

  .csr-policy-tile {
    --csr-tile-min-height: 15rem;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-block-size: var(--csr-tile-min-height);
    border-radius: var(--card-radius);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
  }

  .csr-policy-tile:hover,
  .csr-policy-tile:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover, 0 8px 24px color-mix(in oklch, var(--primary-dark) 22%, transparent));
  }

  /* Background image — always present, fills the tile */
  .csr-policy-tile__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .csr-policy-tile__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slow, 600ms) var(--ease-default);
  }

  .csr-policy-tile:hover .csr-policy-tile__media img,
  .csr-policy-tile:focus-within .csr-policy-tile__media img {
    transform: scale(1.05);
  }

  /* At rest: partial gradient — title bar always readable, image visible above */
  .csr-policy-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--primary-dark) 0%,  transparent) 30%,
      color-mix(in oklch, var(--primary-dark) 72%, black)        75%,
      color-mix(in oklch, var(--primary-dark) 92%, black)       100%
    );
    opacity: 1;
    transition: opacity var(--duration-normal) var(--ease-default);
  }

  /* On hover: deep primary overlay floods the tile — image becomes a texture,
     white text is guaranteed readable at every point.
     --brand-gradient-vertical ends in warm blush which fails contrast for
     white text; a solid --primary-ultra-dark overlay avoids that entirely. */
  .csr-policy-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklch, var(--primary-ultra-dark) 94%, transparent);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-default);
  }

  .csr-policy-tile:hover::before,
  .csr-policy-tile:focus-within::before {
    opacity: 0;
  }

  .csr-policy-tile:hover::after,
  .csr-policy-tile:focus-within::after {
    opacity: 1;
  }

  /* ── Body — title bar + expandable description ── */

  .csr-policy-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--card-padding-compact);
  }

  .csr-policy-tile__title {
    margin: 0;
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-on-dark);
    flex-shrink: 0;
  }

  /* Description — hidden at rest, slides up on hover via max-block-size.
     max-block-size transition is the only reliable CSS-only expand pattern
     that doesn't require JS or fixed heights. 0 → 12rem covers any desc
     up to ~6 lines at --text-xs. */
  .csr-policy-tile__desc {
    margin: 0;
    max-block-size: 0;
    overflow: hidden;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--text-on-dark);
    transition: max-block-size var(--duration-normal) var(--ease-default),
                margin-block-start var(--duration-normal) var(--ease-default),
                opacity var(--duration-normal) var(--ease-default);
    opacity: 0;
  }

  .csr-policy-tile:hover .csr-policy-tile__desc,
  .csr-policy-tile:focus-within .csr-policy-tile__desc {
    max-block-size: 12rem;
    margin-block-start: var(--space-2xs);
    opacity: 1;
  }

  /* Fallback: tiles without an image get the dark primary bg at rest */
  .csr-policy-tile:not(.csr-policy-tile--has-media) {
    background: color-mix(in oklch, var(--primary-dark) 90%, black);
  }


  /* ════════════════════════════════════════════════════════════════════
     4. CSR PILLARS — single markup source, CSS drives desktop layout,
     Splide picks up the same .csr-pillar items on mobile.
     ════════════════════════════════════════════════════════════════════ */

  .csr-pillars-section { background: var(--surface-tinted); }

  /* Pillars + Initiatives section-headers: same tier as policy — --heading-xs */
  .csr-pillars-section .section-header__heading,
  .csr-initiatives-section .section-header__heading {
    font-size: var(--heading-xs);
  }

  .csr-pillars-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-l);
    margin-block-end: var(--container-gap);
  }

  .csr-pillars-header__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Desktop grid — hidden on mobile, replaced by Splide */
  .csr-pillars-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
  }

  /* Mobile Splide — hidden by default */
  .csr-pillars-track--splide { display: none; }

  .csr-pillar {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    padding: var(--space-xl);
    background: var(--white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
  }

  /* Sizing handled by [data-icon-style="boxed"] — icon.css */
  .csr-pillar__icon-wrap {
    background: var(--primary-ultra-light);
    color: var(--primary);
  }

  .csr-pillar__icon-wrap svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }

  .csr-pillar__title {
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
    line-height: var(--leading-tight);
  }

  .csr-pillar__desc {
    font-size: var(--text-s);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    margin: 0;
  }


  /* ════════════════════════════════════════════════════════════════════
     5. INITIATIVES TIMELINE
     ════════════════════════════════════════════════════════════════════ */

  .csr-initiatives {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    margin-block-start: var(--container-gap);
  }

  .csr-initiative {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0 var(--container-gap);
    align-items: start;
    padding-block: var(--space-l);
    border-block-start: 1px solid var(--border-subtle);
  }

  .csr-initiative:first-child { border-block-start: none; }

  .csr-initiative__year {
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    color: var(--primary);
    margin: 0;
    padding-block-start: var(--space-2xs);
  }

  .csr-initiative__body {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  .csr-initiative__media {
    border-radius: var(--radius-m);
    overflow: hidden;
    max-inline-size: 32rem;
  }

  .csr-initiative__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .csr-initiative__title {
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
  }

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


  /* ════════════════════════════════════════════════════════════════════
     6. RESPONSIVE
     ════════════════════════════════════════════════════════════════════ */

  @media (max-width: 64em) {
    .csr-policy__grid     { grid-template-columns: repeat(2, 1fr); }
    .csr-pillars-track    { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 48em) {
    .csr-policy__grid           { grid-template-columns: 1fr; }
    .csr-pillars-track          { display: none; }
    .csr-pillars-track--splide  { display: block; }
  }

  @media (max-width: 36em) {
    .csr-initiative           { grid-template-columns: 1fr; }
    .csr-initiative__year     { padding-block-start: 0; }
  }

  /* Touch devices — dark overlay + description always visible (no hover state) */
  @media (hover: none) {
    .csr-policy-tile::before  { opacity: 0; }
    .csr-policy-tile::after   { opacity: 1; }
    .csr-policy-tile__desc {
      max-block-size: 12rem;
      margin-block-start: var(--space-2xs);
      opacity: 1;
    }
  }

  /* Reduced motion — disable all transitions, keep hover visual state */
  @media (prefers-reduced-motion: reduce) {
    .csr-policy-tile,
    .csr-policy-tile::before,
    .csr-policy-tile::after,
    .csr-policy-tile__media img,
    .csr-policy-tile__desc {
      transition: none;
    }
    .csr-policy-tile:hover,
    .csr-policy-tile:focus-within {
      transform: none;
    }
  }

}