/* ════════════════════════════════════════════════════════════════════
   SELECTED WORK — Homepage section
   BEM block: .selected-work
   Pencil source: R7VZq (1440), erpiO (768), Kv83I (360)

   Velvet ink ground · bone cards · ember chip tags
   2-up grid + 1 wide horizontal card (Bhoo Tapasvi treatment).
   Token discipline: --primary-*, --secondary, --cloud-linen,
                     --space-*, --text-*, --heading-*, --line-*,
                     --radius-*, --tracking-*, --leading-*, --shadow-*.
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Section frame ─────────────────────────────────────────────
     .section primitive owns padding-inline (--gutter) — we only set
     padding-block + visual treatment here. */
  .selected-work {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-xl);

    background-color: var(--primary-ultra-dark);
    background-image:
      radial-gradient(
        ellipse 90% 100% at 18% 20%,
        var(--primary-semi-dark) 0%,
        transparent 55%
      ),
      radial-gradient(
        ellipse 70% 70% at 85% 85%,
        color-mix(in oklch, var(--primary) 45%, transparent) 0%,
        transparent 70%
      );
  }

  .selected-work__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }


  /* ── Header band — mobile default: stacked column. */

  .selected-work__head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-m);
  }

  .selected-work__head-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  /* Eyebrow uses canonical brand-eyebrow component (--soft variant). */

  .selected-work__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-extrabold);
    color: var(--cloud-linen);
    text-transform: uppercase;
    font-size: var(--heading-m);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-display);
    text-wrap: balance;
  }

  .selected-work__view-all {
    color: var(--secondary);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-snug);
    text-decoration: none;
    flex-shrink: 0;
    align-self: start;       /* mobile default — desktop overrides to end */
    transition: color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
  }

  .selected-work__view-all:hover {
    color: color-mix(in oklch, var(--secondary) 70%, var(--cloud-linen));
  }


  /* ── Grid layout: row 1 = 2-up, row 2 = single wide horizontal ─ */

  .selected-work__grid {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
  }

  /* Mobile default: stack everything in a single column. */
  .selected-work__row--two-up {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
  }


  /* ── Card ──────────────────────────────────────────────────────
     Bone surface, ink type, ember chip tags, hairline stroke,
     shadow-l for elevation. */

  .selected-work__card {
    display: flex;
    flex-direction: column;
    background-color: var(--cloud-linen);
    border: var(--line-thin) solid color-mix(in oklch, var(--primary) 8%, transparent);
    border-radius: var(--radius-s);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-l);
    transition:
      transform var(--duration-normal) var(--ease-out),
      box-shadow var(--duration-normal) var(--ease-out);
  }

  a.selected-work__card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-xl);
  }


  /* Wide card — mobile default: stacks like normal card.
     Desktop overrides to landscape split. */
  .selected-work__card--wide .selected-work__media {
    aspect-ratio: 16 / 10;
  }

  .selected-work__card--wide .selected-work__body {
    padding: var(--card-padding);
  }


  /* ── Card media — image fill or gradient placeholder ──────────── */

  .selected-work__media {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--primary-dark);
    background-image:
      linear-gradient(
        135deg,
        color-mix(in oklch, var(--primary) 50%, transparent) 0%,
        var(--primary-ultra-dark) 100%
      );
    overflow: hidden;
  }

  .selected-work__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }


  /* ── Card body ────────────────────────────────────────────────── */

  .selected-work__body {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap-meta);
    padding: var(--card-padding);
  }

  .selected-work__tags {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cluster-gap);
  }

  .selected-work__tag {
    color: var(--secondary);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .selected-work__tags-sep {
    color: color-mix(in oklch, var(--primary) 30%, transparent);
    font-size: var(--text-xs);
  }

  .selected-work__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-extrabold);
    color: var(--primary-ultra-dark);
    text-transform: uppercase;
    font-size: var(--heading-m);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-display);
  }

  .selected-work__card--wide .selected-work__title {
    font-size: var(--heading-l);
  }

  .selected-work__desc {
    margin: 0;
    color: color-mix(in oklch, var(--primary) 65%, transparent);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
  }

  .selected-work__view-link {
    color: var(--secondary);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    margin-block-start: var(--space-2xs);
  }


  /* ── Tablet (≥ 48em) — heading scales up, two-up grid kicks in ── */

  @media (min-width: 48em) {
    .selected-work__heading {
      font-size: var(--heading-l);
    }

    .selected-work__row--two-up {
      grid-template-columns: 1fr 1fr;
    }
  }


  /* ── Desktop (≥ 64em) — full editorial scale + asymmetric header
                            + landscape wide-card layout. */

  @media (min-width: 64em) {
    .selected-work__head {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: var(--container-gap);
    }

    .selected-work__view-all {
      align-self: end;
    }

    .selected-work__heading {
      font-size: var(--heading-xl);
    }

    .selected-work__card--wide {
      flex-direction: row;
      align-items: stretch;
    }

    .selected-work__card--wide .selected-work__media {
      aspect-ratio: auto;
      flex: 0 0 38%;
      min-block-size: var(--space-xxl);
    }

    .selected-work__card--wide .selected-work__body {
      flex: 1;
      justify-content: center;
      padding: var(--space-l);
    }
  }

}