/* ==========================================================================
   Sections
   Section-level layout only. Shared visuals live in components/.
   ========================================================================== */

@layer sections {
  /* ------------------------------------------------------------------------
     Heading mark — shared by section headings: a dot centred in the Figma
     20 × 40 mark frame, level with the heading's first line. Each heading
     sets the gap (--heading-mark-gap) and, if needed, the dot colour.
     ------------------------------------------------------------------------ */
  .heading-mark {
    display: grid;
    grid-template-columns: 1.25rem auto; /* 20 */
    column-gap: var(--heading-mark-gap);
  }

  .heading-mark::before {
    content: "";
    justify-self: center;
    inline-size: 0.5rem; /* 8 */
    block-size: 0.5rem;
    margin-block-start: calc((1lh - 0.5rem) / 2);
    border-radius: 50%;
    background-color: var(--heading-mark-color, currentColor);
  }

  /* ------------------------------------------------------------------------
     Hero
     Figma (1920 × 1080): the header band (144), 210.75 of space, the content
     block (459.5), 266.75 of space. The hero is at least one screen tall and
     stacks these in a column: the header band is reserved (the header is
     layered over the hero), the content keeps its own height, and the space
     above it (::before) and the space below it (the video controls' area)
     share whatever height is left — equally, so the content sits centred
     below the header (a little lower than Figma, on request).
     Each space has a minimum: half the section spacing above, the room the video
     controls need below (so they go below the text rather than over it).
     When a space would get less than its minimum it keeps the minimum and
     the other space takes the rest; only when not even both minimums fit
     does the hero grow with its content.
     ------------------------------------------------------------------------ */
  .hero {
    /* Video Pause / Play (Figma: two 32px icons, 12 apart, 32px from the
       hero's bottom-right corner; on small screens no further in than the
       page side padding). Each button is a 44px target around its icon, so
       the two icons end up 12 apart and the group sits 6px further out. */
    --hero-video-icon: 2rem; /* 32 */
    --hero-video-target: 2.75rem; /* 44 */
    --hero-video-offset: calc(min(2rem, var(--container-padding)) - (var(--hero-video-target) - var(--hero-video-icon)) / 2);

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100svh;
    padding-block-start: calc(2 * var(--site-header-padding) + var(--site-header-row));
  }

  .hero::before {
    content: "";
    flex: 1 1 0;
    min-block-size: calc(var(--section-space) / 2); /* 32 → 48: keeps the wordmark clear of the navbar on short screens */
  }

  /* Background media: always fills the hero, cropped, never distorted. */
  .hero__video {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* The space below the content, with the video controls in its
     bottom-right corner (sizes in .hero). The button for the current state
     is dimmed. The buttons stay hidden until the script has set the state;
     the space stays either way. Its bottom offset is on the buttons, so
     the space shares the free height exactly like the one above. */
  .hero__video-controls {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-block-size: calc(var(--hero-video-target) + var(--hero-video-offset));
    padding-inline-end: var(--hero-video-offset);
  }

  .hero__video-controls:not([data-state]) > * {
    display: none;
  }

  .hero__video-button {
    display: grid;
    place-items: center;
    inline-size: var(--hero-video-target);
    block-size: var(--hero-video-target);
    margin-block-end: var(--hero-video-offset);
    padding: 0;
    border: 0;
    border-radius: var(--radius-button);
    background: none;
    cursor: pointer;
  }

  .hero__video-button[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
  }

  /* Figma content block: 1182.75px wide, centred within the container.
     The lockup is 1016px wide; the text column starts where the wordmark
     starts (120px into the lockup), so both scale together. */
  .hero__content {
    --hero-lockup-width: min(100cqi, 63.5rem); /* 1016 */

    container-type: inline-size;
    max-inline-size: 73.9219rem; /* 1182.75 */
  }

  /* Brand lockup set as text (the project has no Inter Tight): Inter 600,
     tracked to the Figma "logo II" proportions — dot 19 × 18 and line 85
     long, 35 before the wordmark.
     Wordmark size 147px at desktop (on request; the Figma geometry would be
     155.67px), scaling with the lockup width. The em offsets place the line
     and dot relative to the wordmark; the line keeps the 120px the wordmark
     starts at, so the text column stays aligned with it.
     The lockup keeps the Figma lockup height: the smaller wordmark is
     lowered onto the baseline of the 155.67px one (on request), so the text
     below stays where Figma has it. */
  .hero__lockup {
    --hero-wordmark: 147; /* px at desktop */
    --hero-line: max(1px, calc(var(--hero-lockup-width) * 4 / 1016)); /* thinner than Figma's 5, on request */

    display: flex;
    align-items: flex-start;
    padding-block-start: calc(var(--hero-lockup-width) * (155.6667 - var(--hero-wordmark)) * 0.75 / 1016);
    font-size: calc(var(--hero-lockup-width) * var(--hero-wordmark) / 1016);
    font-weight: var(--font-weight-semibold);
    line-height: 0.75; /* line box = glyph height */
    letter-spacing: -0.0301em; /* Figma wordmark proportions (858.3 wide at 155.67px) */
  }

  .hero__lockup::before,
  .hero__lockup::after {
    content: "";
    flex: none;
  }

  /* Line: shortened with the wordmark (on request) — Figma's 85 at 155.67px,
     so about 80 at 147px — and still 35 before the wordmark (minus the "b" side
     bearing), so the wordmark keeps its place. Centred at the same relative
     height as in Figma (31 of the 116.75px glyph height), i.e. 0.2030em from
     the line box top. */
  .hero__lockup::before {
    inline-size: calc(85em / 155.6667);
    block-size: var(--hero-line);
    margin-block-start: calc(0.203em - var(--hero-line) / 2);
    margin-inline-start: calc(var(--hero-lockup-width) * 85 / 1016 - 85em / 155.6667);
    margin-inline-end: calc(var(--hero-lockup-width) * 35 / 1016 - 0.0625em);
    border-radius: calc(var(--hero-line) / 2); /* rounded ends (on request) */
    background-color: currentColor;
  }

  /* Dot: 97 below the top of the wordmark, at x 997 of the lockup. */
  .hero__lockup::after {
    inline-size: calc(19em / 155.6667);
    block-size: calc(18em / 155.6667);
    margin-block-start: 0.627em;
    margin-inline-start: 0.0853em;
    border-radius: 50%;
    background-color: var(--color-accent);
  }

  .hero__text {
    padding-inline-start: calc(var(--hero-lockup-width) * 120 / 1016);
  }

  /* Vertical spacing scales with each text style (Figma: 54.75 at 28px,
     67 at 64px). */
  .hero__intro {
    margin-block-start: calc(54.75em / 28);
  }

  /* Closer than Figma's 67 (on request): 48 at 64px. */
  .hero__title {
    margin-block-start: 0.75em;
  }

  /* ------------------------------------------------------------------------
     What we do
     Shared page container (320 → 1600 at 1920), 96px top/bottom (.section).
     Title and lead form one row, vertically centred, 56px apart; the
     accordion follows 32px below.
     ------------------------------------------------------------------------ */
  .services__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--grid-gutter) 3.5rem; /* 56 */
    margin-block-end: 2rem; /* 32 */
  }

  /* Title (.heading-mark): 13px gap, then the text box (212px at 64px,
     in em so it scales with the fluid h1), which sets the "What / we do"
     line break. */
  .services__title {
    --heading-mark-gap: 0.8125rem; /* 13 */

    grid-template-columns: 1.25rem calc(212em / 64);
    color: var(--color-text-secondary);
  }

  .services__lead {
    flex: 1 1 20rem;
    max-inline-size: 58.0625rem; /* 929 */
  }

  /* ------------------------------------------------------------------------
     Where creativity takes shape
     Figma: full-bleed headline (Inter Bold 131px, 1909.12px wide, 9px from
     the left at 1920), 96px top/bottom (.section). The gallery starts 43px
     above the bottom of the headline and covers it, so the descenders sink
     behind the cards.
     ------------------------------------------------------------------------ */
  .projects {
    container-type: inline-size;
  }

  /* Size: 6.8159% of the width renders the Figma width (1909.12 of 1920)
     in Inter Bold, never below the h1 minimum (2.5rem) and never above the
     Figma size (131px), so it stops growing on screens wider than 1920.
     Below the width where it still fits on one line, the headline wraps
     inside the usual page padding. */
  .projects__title {
    padding-inline: var(--container-padding);
    font-size: clamp(2.5rem, 6.8159cqi, 8.1875rem); /* 40 → 131 */
    font-weight: var(--font-weight-bold);
    line-height: calc(159 / 131);
    margin-block-end: calc(-43em / 131);
  }

  @container (inline-size >= 36.75rem) {
    .projects__title {
      padding-inline: 0.4688cqi 0; /* 9 at 1920 */
    }
  }

  /* Opaque layer above the headline (positioned, so it paints over the
     headline's text). */
  .projects__gallery {
    position: relative;
    background-color: var(--color-bg);
  }

  /* ------------------------------------------------------------------------
     Get to know us
     Figma: 1px rule, uppercase label 22px below it, then (28px lower) the
     intro block and two 408px profile cards, 25px apart; the intro block is
     362px wide and sits at the bottom of the row. 96px top/bottom (.section)
     plus 18px under the cards.

     Content-driven layout. One rule drives it: a card is never narrower
     than 300px (≈30 characters of the 18px bio per line, plus the card
     padding).
     - Cards share the available width and wrap on their own (auto-fit):
       two side by side from 625px (2 × 300 + 25), otherwise one card at
       full width — no breakpoint.
     - From 1012px (intro 362 + 25 + 625) the intro sits beside the cards
       as in Figma, with the cards capped at the Figma 408px.
     ------------------------------------------------------------------------ */
  .about__inner {
    container-type: inline-size;
  }

  .about__title {
    padding-block-start: 1.375rem; /* 22 */
    border-block-start: 1px solid var(--color-border);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    line-height: calc(40 / 24);
    text-transform: uppercase;
  }

  .about__layout {
    display: grid;
    gap: 1.5625rem; /* 25 */
    margin-block: 1.75rem 1.125rem; /* 28 · 18 */
  }

  /* Heading box 277px at 36px (in em, so it scales with the fluid h2):
     "The people / behind the / screen". */
  .about__heading {
    --heading-mark-gap: 0.5rem; /* 8 */
    --heading-mark-color: var(--color-accent);

    grid-template-columns: 1.25rem calc(277em / 36);
    color: var(--color-text-muted);
  }

  /* Lead text lines up with the heading text (mark 20 + gap 8). */
  .about__lead {
    max-inline-size: 17.9375rem; /* 287 */
    margin-block-start: 1rem; /* 16 */
    margin-inline-start: 1.75rem;
    color: var(--color-text-muted);
  }

  .about__team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); /* min 300 */
    gap: 1.5625rem; /* 25 */
  }

  /* Desktop row: intro 362 | cards area up to 841 (2 × 408 + 25). */
  @container (inline-size >= 63.25rem) {
    .about__layout {
      grid-template-columns: minmax(0, 22.625rem) minmax(0, 52.5625rem);
      align-items: end;
    }
  }

  /* ------------------------------------------------------------------------
     Have a project in mind? (#contact)
     Figma: dark grey band; text column 365 and form 788, 77 apart, centred
     in the page container; 96px above, 65px below.
     From 948px of content width (365 + 77 + a form that still fits two
     240px field columns: 506) text and form sit side by side; below that
     the text goes above a full-width form.
     ------------------------------------------------------------------------ */
  .contact {
    --form-field-surface: var(--color-bg-alt); /* keeps autofilled fields on the band colour */

    padding-block-end: calc(var(--section-space) * 65 / 96);
    background-color: var(--color-bg-alt);
  }

  .contact__inner {
    container-type: inline-size;
  }

  .contact__layout {
    display: grid;
    gap: 1.625rem; /* 26, as in the form */
  }

  /* Text box 365px at 64px (in em, so it scales with the fluid h1); with
     the line break in the copy it reads "Have a / project / in mind?". */
  .contact__title {
    max-inline-size: calc(365em / 64);
  }

  .contact__lead {
    max-inline-size: 22.25rem; /* 356 */
    margin-block-start: 0.875rem; /* 14 */
  }

  @container (inline-size >= 59.25rem) {
    .contact__layout {
      grid-template-columns: minmax(0, 22.8125rem) minmax(0, 49.25rem); /* 365 · 788 */
      justify-content: center;
      align-items: start;
      column-gap: 4.8125rem; /* 77 */
    }
  }
}