@layer sections {
  /* About «Про SPACE FOOD» (PAGE-03, D4-04). Literal Figma values (L-0052): «ABOUT SPACE FOOD»
     1428:3627 at 375 and 466:3537 at 1280. Mobile-first: a single column of category cards below
     768, three fluid columns at 768–1023, three 260 px cards 75 apart at >=1024. In Figma About is
     drawn over the hero's lower edge: below 1024 its top fades in over the hero raster and floor,
     from 1024 it starts on the raster's floor strip. */

  /* --- Mobile (<768 px) --- */
  .about {
    /* Figma fill: #eaeaea, transparent at 5.17 % of the 1193 px frame, opaque at 22.19 %, white
       at the bottom. */
    --about-fade: #eaeaea;
    /* Above the hero raster, which runs on under About's transparent top (hero.css). */
    position: relative;
    z-index: 1;
    padding-block: 40px;
    background: linear-gradient(
      180deg,
      transparent 61.68px,
      var(--about-fade) 264.68px,
      var(--c-white)
    );
    text-align: center;
  }

  /* Label 22 tall, then the wordmark 14 below (Figma y 40 / 76). */
  .about__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    /* Block only: `margin: 0` dropped .container's auto inline margins, so above 1075 + gutters
       the title box sat left of centre (04-10 gate, 1920). */
    margin-block: 0;
    font-weight: 400;
  }

  /* Figma 1428:3657 / 1428:3654: 400 18/21.94, tracking 1.8, upper case. */
  .about__label,
  .about__categories-label {
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.8px;
  }

  /* Chrome centres a line together with the tracking after its last letter, Figma without it;
     the Figma boxes also sit 1 px right of the frame centre (x 165 w 47, x 67 w 243). The
     start offset = tracking + 2 x 1 px moves the letters onto the Figma positions. */
  .about__label {
    margin-left: 3.8px;
  }

  /* Figma x 88 (centre 188), 1280: x 489.5 (centre 639.5). */
  .about__wordmark {
    width: 200px;
    height: 16px;
    margin-left: 1px;
  }

  /* Figma 1428:3655: 400 13/15.85 (16 px pitch), centred in a 335 box, 55 below the wordmark.
     Figma centres a line together with the space typed before its ⏎, so break-spaces keeps that
     space in the line instead of letting it hang; a soft-wrapped first line then also keeps its
     trailing space, which Figma drops — the indent puts it back on the centre, and the box is
     6 px wider (same centre) so the space and the indent still fit the Figma line. Up to 767 px
     the box keeps that 341 px measure, so the Figma lines (and their «|» breaks) carry over
     instead of a long first line and a one-word line before the break. */
  .about__text {
    width: min(100% - 2 * var(--gutter) + 6px, 341px);
    margin-top: 55px;
    font-size: 13px;
    line-height: 16px;
    text-indent: 3.4px;
  }

  /* break-spaces on the text blocks, not on the box: a raw newline between two paragraphs
     (pasted or imported HTML) would otherwise render as an empty line. Bare text without a
     block keeps it on the box. */
  .about__text :is(p, li),
  .about__text:not(:has(> :is(p, ul, ol))) {
    white-space: break-spaces;
  }

  .about__text :is(strong, b) {
    font-weight: 700;
  }

  .about__text :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: var(--space-3);
  }

  /* Below the 375 frame (box 286 px at 320): the Figma lines still fit once the spaces typed
     before the breaks hang again (plain white space, no indent), so the «|» breaks that base.css
     drops come back; the soft-wrapped first lines are balanced instead of leaving a one-word
     line before the break (the line breaker balances only collapsible spaces). */
  @media (max-width: 374.98px) {
    .about__text {
      text-indent: 0;
      text-wrap: balance;
    }

    .about__text .br-m {
      display: inline;
    }

    .about__text :is(p, li),
    .about__text:not(:has(> :is(p, ul, ol))) {
      white-space: normal;
    }
  }

  .about__categories-label {
    margin-top: 75px;
    padding-left: 3.8px;
    color: var(--c-ink);
  }

  /* Figma LIST 1428:3632: 21 below the label, cards 234 tall and 45 apart, centred 1.5 px right
     of the frame centre (x 59 w 260). */
  .category-list {
    margin-top: 21px;
    display: grid;
    justify-items: center;
    row-gap: 45px;
    list-style: none;
    padding: 0 0 0 3px;
  }

  .category-card {
    /* Hover lift; reduced motion sets it to 0. */
    --card-lift: -4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 260px;
    max-width: 100%;
    color: var(--c-ink);
    text-decoration: none;
  }

  .category-card__image {
    display: block;
    transition: transform 150ms ease;
  }

  .category-card__image img {
    width: 170px;
    height: 170px;
    object-fit: contain;
  }

  /* Figma NAME: padding 3/0/12, wordmark 10 tall, gap 5, name 17; then the count 17. */
  .category-card__logo {
    margin-top: 3px;
    width: auto;
    height: 10px;
  }

  /* The SPACE BITE card wordmark is drawn 140 x 12 in Figma (117 x 10 here); the shared file is
     the 180 x 15 intro wordmark, so the card size is set, not derived from the file. */
  .category-card__logo[width="140"] {
    width: 117px;
  }

  .category-card__name,
  .category-card__count {
    position: relative;
    /* Figma puts the baseline 14 px into the 17 px line, Chrome 13. */
    top: 1px;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
  }

  .category-card__name {
    margin-top: 5px;
    font-weight: 400;
  }

  .category-card__count {
    margin-top: 12px;
    font-weight: 700;
  }

  /* --- States --- */
  @media (hover: hover) {
    .category-card:hover {
      text-decoration: none;
    }

    .category-card:hover .category-card__image {
      transform: translateY(var(--card-lift));
    }

    .category-card:hover .category-card__name {
      text-decoration: underline 1px;
      text-underline-offset: 4px;
    }
  }

  .category-card:focus-visible {
    outline: 2px solid var(--c-black);
    outline-offset: 4px;
    border-radius: var(--radius-btn);
  }

  @media (prefers-reduced-motion: reduce) {
    .category-card {
      --card-lift: 0px;
    }

    .category-card__image {
      transition: none;
    }
  }

  /* --- Tablet (768–1023 px) --- */
  @media (min-width: 768px) {
    .about__wordmark {
      width: 300px;
      height: 24px;
    }

    .about__text {
      width: min(100% - 2 * var(--gutter) + 6px, 656px);
    }

    .category-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--space-5);
      padding-left: 0;
    }

    .category-card {
      width: 100%;
    }

    .category-card__image {
      width: min(100%, 250px);
    }

    .category-card__image img {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
    }

    .category-card__logo {
      height: 12px;
    }

    .category-card__logo[width="140"] {
      width: 140px;
    }

    /* L-0038 (6): «Енергетичні батончики» wraps to 2 lines at 768; a two-line name box keeps
       the three counts on one alignment line. */
    .category-card__name {
      min-height: calc(2 * 17px);
    }
  }

  /* --- Desktop and wide (>=1024 px) --- */
  @media (min-width: 1024px) {
    /* Figma: About lies over the last 124 px of the hero raster — its flat #e1e1e1 floor — and
       the hero's #e2e2e2, so its fill (white, transparent → opaque) is the plain grey → white
       gradient. 40 / 53 px padding. */
    .about {
      padding-block: 40px 53px;
      background: linear-gradient(180deg, var(--c-grey-200), var(--c-white));
    }

    /* Label 24 tall, wordmark 12 below (Figma y 40 / 76). */
    .about__title {
      gap: 12px;
    }

    /* Figma 1356:1821 / 1356:1818: 400 20/24.38, tracking 2 (boxes centred on the frame). */
    .about__label,
    .about__categories-label {
      font-size: 20px;
      line-height: 24px;
      letter-spacing: 2px;
    }

    .about__label {
      margin-left: 2px;
    }

    .about__wordmark {
      margin: 0 1px 0 0;
    }

    /* Figma 1356:1819: 400 15/18.28 (18 px pitch) in a 1017 box, 47 below the wordmark. */
    .about__text {
      width: min(100% - 2 * var(--gutter), 1017px);
      margin-top: 47px;
      font-size: 15px;
      line-height: 18px;
      text-indent: 0;
      /* The Figma box is centred on 640.5 (x 132 w 1017). */
      translate: 0.5px;
    }

    .about__categories-label {
      margin-top: 67px;
      padding-left: 2px;
    }

    /* Figma LIST 1392:3381: 260 px cards 75 apart, centred on each other (counter=CENTER) and
       1 px right of the frame centre (x 176 w 930). */
    .category-list {
      margin-top: 19px;
      grid-template-columns: repeat(3, 260px);
      column-gap: 75px;
      align-items: center;
      justify-content: center;
      padding-left: 2px;
    }

    .category-card {
      width: 260px;
    }

    .category-card__image {
      width: 250px;
    }

    .category-card__image img {
      width: 250px;
      height: 250px;
    }

    /* Figma NAME: padding 8 top, wordmark 12, gap 10, name 17, then the count line 25 below
       (8 padding + the empty first line of «⏎5 смаків»). */
    .category-card__logo {
      margin-top: 8px;
    }

    .category-card__name {
      min-height: 0;
      margin-top: 10px;
    }

    .category-card__count {
      margin-top: 25px;
    }

    /* Figma Li 1 holds its count inside NAME (gap 10, then 8 padding below), so the first card
       is 10 px taller (349 vs 339) and, centred with the others, sits 5 px higher. */
    .category-list > li:first-child .category-card__count {
      margin-top: 27px;
      padding-bottom: 8px;
    }
  }
}