/* The public site (marketing-site.md): the panel's editorial voice on white, the logo at the
   top, the same headline, index and metric pieces. No feature grid, no cards. */
@layer components {
  /* One edge for the site's full-width bands and its header, so the logo, the menu and the
     content line up: a 76rem column on a wide screen, a gutter that grows with the screen below. */
  body.site {
    /* the page's width, which 100vw is not where a scrollbar takes room (viewport_controller) */
    --page-half: calc(50vw - var(--scrollbar, 0px) / 2);
    --site-edge: max(1.5rem, 4vw, calc(var(--page-half) - 38rem));
    --bleed: calc(50% - var(--page-half)); /* a margin that takes a band from its column to the page's edges */

    background: var(--color-bg-raised); /* white, and dark in dark mode */

    & > main { max-inline-size: none; padding-inline: var(--site-edge); } /* the same edge as the header */
  }

  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--block-space) var(--inline-space-double);
    padding: var(--block-space) var(--site-edge);
  }

  /* The header in Grella's violet, edge to edge (the border-image paints past the 60rem column
     without a wrapper), with the brand manual's negative logo and white links. Fixed colours in
     either mode, as on the card. */
  /* Sticky: the menu stays at the top while the page scrolls under it, above the pinned panels. */
  .site-header {
    --focus-ring: 2px solid #fff;

    position: sticky;
    inset-block-start: 0;
    z-index: 20;

    color: #fff;
    border-image: conic-gradient(#6448e8 0 0) fill 0 // 0 100vw;

    /* White links with no underline (base.css draws one under classless links); the logo's too.
       Hover and focus dim them a touch instead. */
    & a {
      color: #fff;
      background: none;
      transition: opacity var(--transition);

      &:is(:hover, :focus-visible) { opacity: 0.75; }
    }

    /* The icons (sign in, languages) huddle together after the words. */
    & li:has(.site-header__icon, .locale-switch) { margin-inline-start: calc(var(--inline-space) * -1.5); }
    & ul.locale-switch { gap: 0; } /* not the nav's gap: the flags' own targets space them */

    & ul {
      display: flex;
      flex-wrap: wrap;
      gap: var(--block-space-half) calc(var(--inline-space) * 3);
      margin: 0;
      padding: 0;
      list-style: none;
      align-items: center;
      font-weight: 600;
    }
  }

  body.site .legal__home { display: none; } /* the header already carries the logo */

  /* Sign in, as an icon: the person motif in the link colour, at the flags' touch size. */
  .site-header__icon {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.75rem; /* narrow: icons sit close; tall: the touch target */
    min-block-size: var(--touch-target);
    margin-block: calc((var(--touch-target) - 1em) / -2);
  }

  .site-header__logo { inline-size: 7.5rem; block-size: auto; }

  /* Shrinks over the first 160px of scroll: less padding, a smaller logo, smaller words. Driven by
     the page's scroll, no script; with reduced motion or without scroll timelines, it stays full. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .site-header {
        animation: header-shrink linear both;
        animation-timeline: scroll(root);
        animation-range: 0 160px;
      }

      .site-header__logo {
        animation: header-logo-shrink linear both;
        animation-timeline: scroll(root);
        animation-range: 0 160px;
      }

      .site-header nav { animation: header-nav-shrink linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
    }
  }

  @keyframes header-shrink { to { padding-block: var(--block-space-half); } }
  @keyframes header-logo-shrink { to { inline-size: 5rem; } }
  @keyframes header-nav-shrink { to { font-size: var(--text-small); } }


  .site-page {
    gap: calc(var(--block-space) * 1.5);

    & section { margin-block-start: var(--block-space-double); }
    & h2 { font-size: var(--text-xx-large); letter-spacing: -0.03em; }
    & h3 { margin-block-start: var(--block-space); font-size: var(--text-medium); }
    & p, & li { max-inline-size: 40rem; }
  }

  /* The one quotable sentence (marketing-site.md, Generative search): plain text, early. */
  .site-lede {
    margin-block-start: var(--block-space);
    font-size: var(--text-x-large);
    line-height: 1.35;
    letter-spacing: -0.015em;
  }

  /* The hero: the headline, and beside it the card the customer sees. Below it on a phone. */
  .site-hero {
    display: grid;
    gap: var(--block-space-double) calc(var(--inline-space) * 6);
    align-items: center;

    @media (min-width: 52rem) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }

    & .headline > p:has(.btn) { margin-block-start: var(--block-space-double); }
  }

  .site-hero__card {
    margin: 0;
    inline-size: 100%;
    max-inline-size: 20rem;
    justify-self: center;

    /* The cards under it are paper too. */
    & .pile::before { background: oklch(86% 0.06 285); }
    & .pile::after { background: oklch(92% 0.035 285); }

    & figcaption {
      margin-block-start: var(--block-space-half);
      font-size: var(--text-small);
      color: var(--color-subtle);
      text-align: center;
    }
  }

  /* A printed card: fixed paper and ink in either mode, like the QR block (loyalty_card.css). */
  .prize-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space-half);
    padding: var(--block-space) calc(var(--inline-space) * 2.5) var(--block-space-double);
    overflow: clip; /* the emblems are cut by the card's edges */
    color: #1b1828;
    background: oklch(82% 0.075 285);
    border-radius: var(--radius);
    text-align: center;

    & p { margin: 0; }
    & .site-image { inline-size: 58%; margin-block: var(--block-space-half); border-radius: 2px; box-shadow: var(--shadow); }
    & .stamp-progress { display: flex; flex-direction: column; align-items: center; gap: var(--block-space-half); margin-block-start: var(--block-space-half); }
    & .stamp-progress__stamps { --slot: 1.1rem; justify-content: center; }
    & .stamp-progress__stamps .stamp-progress__stamp--filled::before { background: #6448e8; } /* lime would vanish on the paper */
    & .stamp-progress__label { font-size: var(--text-x-small); }
  }

  .prize-card__labels {
    display: flex;
    justify-content: space-between;
    inline-size: 100%;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .prize-card__label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }

  .prize-card__reward {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .prize-card__emblem {
    position: absolute;
    inset-block-start: 20%;
    inset-inline-start: -1.9rem;
    block-size: 6.5rem;
    inline-size: auto;
  }

  .prize-card__emblem--end { inset-inline: auto -1.9rem; scale: -1 1; }

  /* Text beside its photo once there is room; the photo under it on a phone. */
  .site-split {
    display: grid;
    gap: var(--block-space-double) calc(var(--inline-space) * 6);
    align-items: center;
    margin-block-start: var(--block-space-double);

    @media (min-width: 52rem) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }

  .site-image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
    border-radius: var(--radius-large);
  }

  /* Development only (SiteHelper): the file the slot is waiting for, at the photo's shape. */
  .site-image--placeholder {
    display: grid;
    place-items: center;
    padding: var(--block-space);
    font-family: ui-monospace, monospace;
    font-size: var(--text-small);
    color: var(--color-subtle);
    background: var(--color-link-tint);
    border: 2px dashed var(--color-border-strong);
  }

  /* Rings, the logo's bowl, in place of bullets. */
  /* The quotable sentence under the hero: one line, set like a lede, a breath before the sections. */
  .site-what { margin-block: var(--block-space-double) 0; }

  .site-list, .site-prose ul {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: 0;
    list-style: none;
    font-size: var(--text-medium);

    & li {
      display: flex;
      gap: var(--inline-space);

      &::before {
        content: "";
        flex: none;
        inline-size: 1.25em;
        block-size: 1.25em;
        margin-block-start: 0.1em;
        background: var(--color-link);
        mask: url("/assets/motifs/ring-e0d35887.svg") center / contain no-repeat;
        rotate: 57deg;
      }
    }
  }

  /* How it works: the index the panel uses, as four steps in a row once there is room. */
  .site-loop li { max-inline-size: none; }

  @media (min-width: 52rem) {
    .site-loop {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: calc(var(--inline-space) * 4);

      & li {
        grid-template-columns: none;
        align-content: start;
        gap: var(--block-space);
        border-block-end: 0;
        font-size: var(--text-medium);
      }

      & .checklist__mark { font-size: var(--text-xx-large); font-weight: 700; color: var(--color-link); }
    }
  }

  .site-page ul.headline__facts { margin: 0; padding: 0; list-style: none; }

  /* Case studies: each entry's trade and city under its title, the row the page's width. */
  .site-cases {
    & li { max-inline-size: none; }
    & .headline__facts { margin-block-start: var(--block-space-half); font-weight: 400; }
  }

  /* A piece's title is a sentence, not a word: smaller than a page's. */
  .headline--article h1 { font-size: clamp(2.25rem, 1.25rem + 4vw, 4rem); line-height: 1; letter-spacing: -0.04em; }

  .site-prose {
    font-size: var(--text-medium);

    & h2 { margin-block-start: var(--block-space); }
    & p, & ul { margin: 0; }
  }

  /* The FAQ as a ruled index: the question, and its answer beside it once there is room. */
  .site-faq {
    border-block-start: 1px solid var(--color-border-strong);

    & > div {
      display: grid;
      gap: var(--block-space-half) calc(var(--inline-space) * 4);
      padding-block: var(--block-space) var(--block-space-double);
      border-block-end: 1px solid var(--color-border-strong);

      @media (min-width: 52rem) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    }

    & h3 { margin: 0; }
    & p { margin: 0; }
  }

  /* The last word before the button, set big: the visit is the product. */
  .site-close { gap: var(--block-space-double); }

  .site-close h2 {
    max-inline-size: 18ch;
    font-size: clamp(2.25rem, 1.25rem + 4vw, 4rem);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  /* Cookie consent: a strip at the foot of the screen, both choices the same size. */
  .consent {
    position: fixed;
    inset-inline: var(--inline-space-double);
    inset-block-end: var(--block-space);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--block-space-half) var(--inline-space-double);
    max-inline-size: 56rem;
    margin-inline: auto;
    padding: var(--block-space) var(--inline-space-double);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large);
    font-size: var(--text-small);

    & p { margin: 0; max-inline-size: 36rem; }
    &[hidden] { display: none; }
  }

  .consent__actions { display: flex; gap: var(--inline-space); }
}