/**
 * Category buying hubs — default presentation.
 *
 * THEMING CONTRACT
 * ----------------
 * Self-contained with neutral defaults. Themes restyle by setting the --khb-*
 * custom properties below, never by overriding selectors. Setting them on
 * `.kicked-hub` reskins the whole hub; setting them again on a narrower scope —
 * a zone, a block modifier, a single element — gives that scope its own palette
 * through the same contract. That second form is how a theme puts one block on
 * a dark panel while its neighbours stay light.
 *
 *   --khb-ink              block titles, questions, decision terms (via --khb-term)
 *   --khb-term             the decision terms alone, when they must differ from
 *                          the titles — an accent on a dark panel, say. Optional;
 *                          falls back to --khb-ink.
 *   --khb-body             answers, glosses, intros
 *   --khb-muted            the eyebrow over a top-zone block, the disclosure marker
 *   --khb-accent           links, the active chip, the "see the products" row
 *   --khb-accent-ink       text on the accent
 *   --khb-surface          the ground a zone's cards are drawn on
 *   --khb-sunken           the decision list's own row wells
 *   --khb-border           hairlines, and the edge of a question card
 *   --khb-border-strong    the top bar's edge, the guide card's edge, chip outlines
 *   --khb-border-hover     a chip outline under the pointer, underline tints
 *   --khb-radius           panel radius
 *   --khb-radius-md        question-card radius
 *   --khb-radius-sm        chip and decision-row radius
 *   --khb-font-display     block titles below the grid, and the questions
 *   --khb-font-mono        eyebrows and decision terms
 *   --khb-gap              distance between two blocks in the same zone
 *   --khb-transition       hover/focus timing
 *   --khb-scroll-offset    how far a sticky masthead reaches down the page, so
 *                          a jumped-to section lands under it and not behind it
 *
 * LAYOUT, BY ZONE
 * ---------------
 * The two zones carry different kinds of thing and are shaped accordingly.
 *
 * Above the grid is chrome: one bordered bar holding the chips and the jump
 * line. From 48em up it compresses to a single row — eyebrow, chips, pointer —
 * because a full-width panel around one row of chips is mostly panel.
 *
 * Below the grid is content: every block is its own surface with a real title,
 * not an eyebrow — down here there is no category h1 two elements above to
 * defer to. The decision list is a card; the questions stand directly on the
 * page, one card each. From 62em up the blocks sit side by side, which is what
 * a 1200px shell is for — one column of 68ch prose in it leaves half the page
 * blank — and the guide card keeps pace with the questions as they scroll.
 *
 * Layered on purpose: layered CSS always loses to unlayered CSS, so a host
 * theme's ordinary stylesheet wins without matching load order or specificity.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-hub {
  .kicked-hub {
    --khb-ink: #18181b;
    --khb-body: #52525b;
    --khb-muted: #a1a1aa;
    --khb-accent: #b91c1c;
    --khb-accent-ink: #fff;
    --khb-surface: #fff;
    --khb-sunken: #fafafa;
    --khb-border: #e4e4e7;
    --khb-border-strong: #d4d4d8;
    --khb-border-hover: #a1a1aa;
    --khb-radius: 1.125rem;
    --khb-radius-md: 0.875rem;
    --khb-radius-sm: 0.5625rem;
    --khb-font-display: inherit;
    --khb-font-mono: ui-monospace, monospace;
    --khb-gap: 1.125rem;
    --khb-transition: 0.15s ease-in-out;
    --khb-scroll-offset: 6rem;

    color: var(--khb-body);
  }

  /* The two zones sit on opposite sides of the grid, so each pushes away from
     it rather than reserving space on both sides — margins that met in the
     middle would double up against the listing's own. */
  .kicked-hub--top {
    padding: 1.25rem;
    margin-block-end: 1.5rem;
    background: var(--khb-surface);
    border: 1px solid var(--khb-border-strong);
    border-radius: var(--khb-radius);
  }

  /* 2.75rem is the shop's between-sections step (the product page uses it
     literally); the listing above is one section and the guide is the next. */
  .kicked-hub--bottom {
    display: grid;
    gap: 1.75rem;
    margin-block-start: 2.75rem;
  }

  /* The boundary the zone margin alone cannot draw: the grid ends wherever its
     last row ends, often mid-shell, and the guide opens in a different visual
     register. An eyebrow with a hairline running to the edge closes the
     listing the way the facet legends open their groups — same voice, chrome
     not content. */
  .kicked-hub__threshold {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0;
    font-family: var(--khb-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--khb-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .kicked-hub__threshold::after {
    flex: 1 1 0;
    height: 1px;
    content: "";
    background: var(--khb-border);
  }

  /* Two chip rows stacked on a phone are separated by a hairline rather than by
     whitespace alone: two wrapped lists of short labels read as one long list
     without it. From 48em up the bar layout takes over and the row gap does the
     separating, so the hairline and its padding come back off. */
  .kicked-hub--top .kicked-hub__block + .kicked-hub__block {
    padding-block-start: var(--khb-gap);
    margin-block-start: var(--khb-gap);
    border-block-start: 1px solid var(--khb-border);
  }

  /* A section reached from the pointer above the grid is the browser's scroll
     target, and the shop's masthead is sticky — without this the heading the
     shopper asked for arrives underneath it. */
  .kicked-hub__block {
    scroll-margin-block-start: var(--khb-scroll-offset);
  }

  /* The guide card: the one block below the grid that keeps a panel of its
     own, because a scannable list of terms is a thing a shopper consults, not
     prose they read through. */
  .kicked-hub--bottom .kicked-hub__block--decide {
    padding: 1.25rem;
    background: var(--khb-surface);
    border: 1px solid var(--khb-border-strong);
    border-radius: var(--khb-radius);
  }

  /* Above the grid an eyebrow, not a heading, visually — "ALEGE MEMORIA"
     labels the row under it and must not compete with the category's own h1
     two elements above. It stays an <h2> in the markup because that is what
     it is. */
  .kicked-hub--top .kicked-hub__title {
    margin: 0 0 0.625rem;
    font-family: var(--khb-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--khb-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* Below the grid the titles are real: this is the page's long-form content,
     a screen or more under the h1, and an 11px label over 500 words makes the
     guide read as a settings panel. Printed as authored — no uppercasing. */
  .kicked-hub--bottom .kicked-hub__title {
    margin: 0 0 0.875rem;
    font-family: var(--khb-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--khb-ink);
    letter-spacing: -0.01em;
  }

  .kicked-hub__intro {
    margin: -0.25rem 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--khb-body);
  }

  .kicked-hub--bottom .kicked-hub__intro {
    max-width: 68ch;
    margin: -0.375rem 0 1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  /* ------------------------------------------------------- top zone, as a bar */

  /* One row: eyebrow, chips, pointer. The eyebrow becomes an inline label and
     the pointer takes the far end, so the bar has content at both ends instead
     of three short lines stacked against the left edge of a full-width panel.
     Everything wraps: a second chip block starts a new line when it needs one,
     and the pointer drops to its own line — still at the far end — when the
     chips leave it no room. */
  @media (min-width: 48em) {
    .kicked-hub--top {
      display: flex;
      flex-wrap: wrap;
      gap: 0.625rem 2rem;
      align-items: center;
      padding-block: 0.875rem;
    }

    .kicked-hub--top .kicked-hub__block {
      display: flex;
      flex: 1 1 auto;
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
      align-items: center;
    }

    .kicked-hub--top .kicked-hub__block + .kicked-hub__block {
      padding-block-start: 0;
      margin-block-start: 0;
      border-block-start: 0;
    }

    .kicked-hub--top .kicked-hub__title {
      margin: 0;
    }

    /* In a row-flex line this pushes to the far end; when the pointer wraps to
       a line of its own, the same auto margin holds it there. */
    .kicked-hub--top .kicked-hub__jump {
      margin: 0 0 0 auto;
    }
  }

  /* ------------------------------------------------------------------ chips */

  .kicked-hub__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .kicked-hub__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.8125rem;
    font-size: 0.78125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--khb-ink);
    text-decoration: none;
    background: var(--khb-surface);
    border: 1px solid var(--khb-border-strong);
    border-radius: var(--khb-radius-sm);
    transition:
      color var(--khb-transition),
      background-color var(--khb-transition),
      border-color var(--khb-transition);
  }

  .kicked-hub__chip:hover,
  .kicked-hub__chip:focus-visible {
    color: var(--khb-accent);
    border-color: var(--khb-border-hover);
  }

  /* The chip for the filter this page is already showing. It stays a link —
     following it is idempotent — but it stops inviting the click. */
  .kicked-hub__chip--active,
  .kicked-hub__chip--active:hover,
  .kicked-hub__chip--active:focus-visible {
    color: var(--khb-accent-ink);
    background: var(--khb-accent);
    border-color: var(--khb-accent);
  }

  /* ------------------------------------------------------------------- jump */

  /* The line that replaced the guide above the grid. It reads as prose with
     links in it rather than as a second row of controls: the chips above are
     the page's navigation, and two competing rows of pills would make the
     shopper choose which one to read first. */
  .kicked-hub__jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0.875rem 0 0;
  }

  /* Underlined, unlike the question rows below the grid. The two carry the same
     chevron and would otherwise be indistinguishable, and they do different
     things: a question opens where it stands, this one moves the page. The
     underline is what says "link" before the shopper finds out the hard way. */
  .kicked-hub__jump-link {
    display: inline-flex;
    gap: 0.4375rem;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--khb-body);
    text-decoration: underline;
    text-decoration-color: var(--khb-border-hover);
    text-underline-offset: 0.1875rem;
  }

  /* Same two-border chevron as the answers disclosure, pointing down. Drawn
     rather than written as "↓" because a screen reader announces the character
     and "Nu știi ce să alegi? downwards arrow" is not a better label. */
  .kicked-hub__jump-link::after {
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    content: "";
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: translateY(-0.125rem) rotate(45deg);
    transition: transform var(--khb-transition);
  }

  .kicked-hub__jump-link:hover,
  .kicked-hub__jump-link:focus-visible {
    color: var(--khb-accent);
    text-decoration-color: currentcolor;
  }

  .kicked-hub__jump-link:hover::after {
    transform: translateY(0.0625rem) rotate(45deg);
  }

  /* ----------------------------------------------------------------- decide */

  .kicked-hub__decide {
    margin: 0;
  }

  /* Term and gloss on one line from sm up, stacked below it. */
  .kicked-hub__decide-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.125rem 0.75rem;
    padding: 0.5625rem 0.75rem;
    background: var(--khb-sunken);
    border-radius: var(--khb-radius-sm);
  }

  .kicked-hub__decide-row + .kicked-hub__decide-row {
    margin-block-start: 0.375rem;
  }

  @media (min-width: 30em) {
    /* `max-content` rather than a fixed width, so the longest term in a
       language nobody tested is never clipped. */
    .kicked-hub__decide-row {
      grid-template-columns: max-content 1fr;
      align-items: baseline;
    }

    /* One term column for the whole list, not one per row: sized per row,
       "16 GB" pushes its own gloss out of line with the other four, and the
       misalignment lands exactly where the accent colour points the eye. The
       per-row rule above stays as the fallback for engines without subgrid. */
    @supports (grid-template-columns: subgrid) {
      .kicked-hub__decide {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 0.75rem;
      }

      .kicked-hub__decide-row {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
      }
    }
  }

  .kicked-hub__term {
    font-family: var(--khb-font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--khb-term, var(--khb-ink));
  }

  .kicked-hub__term-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--khb-border-hover);
    text-underline-offset: 0.1875rem;
  }

  .kicked-hub__term-link:hover,
  .kicked-hub__term-link:focus-visible {
    color: var(--khb-accent);
    text-decoration-color: currentcolor;
  }

  /* Capped even though the card narrows at 62em: a category with no questions
     block leaves the guide the full shell, and at 1240px a gloss runs past 140
     characters and the eye loses the line coming back. */
  .kicked-hub__gloss {
    max-width: 68ch;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--khb-body);
  }

  .kicked-hub__gloss > :last-child {
    margin-block-end: 0;
  }

  /* ---------------------------------------------------------------- answers */

  /* One card per question, standing directly on the page — no panel around the
     stack. Hairline-separated rows inside a shared card read as one wall of
     text; separate cards give each question an edge to stop at. */
  .kicked-hub__answers {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .kicked-hub__answer {
    overflow: hidden;
    background: var(--khb-surface);
    border: 1px solid var(--khb-border);
    border-radius: var(--khb-radius-md);
  }

  .kicked-hub__question {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.125rem;
    font-family: var(--khb-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--khb-ink);
    cursor: pointer;

    /* The default marker is a triangle in a spot no design asks for, and both
       properties are needed: `list-style` for standards-track browsers and the
       pseudo-element for WebKit. */
    list-style: none;
  }

  .kicked-hub__question::-webkit-details-marker {
    display: none;
  }

  /* A chevron drawn from two borders rather than shipped as an icon: the module
     has no image pipeline, and an inline SVG in the template would be markup
     every theme then has to restyle. */
  .kicked-hub__question::after {
    flex: none;
    align-self: center;
    width: 0.5rem;
    height: 0.5rem;
    content: "";
    border-right: 2px solid var(--khb-muted);
    border-bottom: 2px solid var(--khb-muted);
    transform: translateY(-0.125rem) rotate(45deg);
    transition: transform var(--khb-transition);
  }

  .kicked-hub__answer[open] > .kicked-hub__question::after {
    transform: translateY(0.0625rem) rotate(-135deg);
  }

  /* Capped for the same reason the glosses are: with no guide card beside it
     the stack takes the whole shell, and prose that wide stops being read. */
  .kicked-hub__answer-body {
    max-width: 68ch;
    padding: 0 1.125rem 1rem;
    font-size: 0.90625rem;
    line-height: 1.65;
    color: var(--khb-body);
  }

  .kicked-hub__answer-body > :last-child {
    margin-block-end: 0;
  }

  .kicked-hub__more-wrap {
    margin-block: 0.5rem 0;
  }

  .kicked-hub__more {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--khb-accent);
    text-decoration: none;
  }

  .kicked-hub__more::after {
    content: " →";
  }

  .kicked-hub__more:hover,
  .kicked-hub__more:focus-visible {
    text-decoration: underline;
  }

  /* --------------------------------------------------- bottom zone, two-up */

  /* Guide beside questions once the shell is wide enough to make one column of
     68ch prose look abandoned. `auto-fit` rather than a fixed pair: a category
     that lost one of the two blocks to the catalogue check gets the full width
     back, and a third block would find its own place. The guide card keeps
     pace with the questions as they scroll — the same masthead offset the jump
     targets use, so it parks exactly where a jumped-to section lands. */
  @media (min-width: 62em) {
    .kicked-hub--bottom {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
      gap: 1.5rem;
      align-items: start;
    }

    .kicked-hub--bottom .kicked-hub__threshold {
      grid-column: 1 / -1;
    }

    .kicked-hub--bottom .kicked-hub__block--decide {
      position: sticky;
      top: var(--khb-scroll-offset);
      padding: 1.375rem;
    }
  }

  /* Reduced motion: the chevron still turns, it just arrives immediately. */
  @media (prefers-reduced-motion: reduce) {
    .kicked-hub__chip,
    .kicked-hub__jump-link::after,
    .kicked-hub__question::after {
      transition: none;
    }
  }
}