/* Shared building blocks: spec §2 "Components" and §2 "Layout".
   Plain classes in the components layer, so any Tailwind utility can still
   override them on a single element. */
@layer components {
  /* ---- Container --------------------------------------------------------
     Not named .container on purpose: Tailwind ships its own .container utility
     with breakpoint max-widths that would override these.
     Content is 1200px (x 120-1320 at 1440); --wide is 1360px (x 40-1400),
     used by the Instagram strip and the footer. The gutter sits inside the
     max-width, so the content width stays exact and shrinks with the viewport. */
  .site-container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .site-container--wide {
    max-width: calc(var(--container-wide) + 2 * var(--gutter));
  }

  /* ---- Icons -------------------------------------------------------------
     Markup comes from src/js/icons.js. Line weight is constant on screen
     (non-scaling stroke), so a 14px badge and a 48px brand icon read as one
     family. Override per icon with --icon-stroke. Size with Tailwind's size-*
     (size-3 = 12px, size-3.5 = 14px, size-4 = 16px, size-12 = 48px). */
  .icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: var(--icon-stroke, 1.25px);

    & :where(path, circle, rect, line, polyline, polygon, ellipse) {
      vector-effect: non-scaling-stroke;
    }
  }

  /* ---- Buttons -----------------------------------------------------------
     Lato 700, uppercase, 0.08em, square corners. Each variant carries its own
     size from the spec table, so it works with just .btn + one modifier. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }

  /* Large: hero buttons (181 x 47 / 199 x 47 in the mockup) */
  .btn--gold,
  .btn--outline-light {
    min-height: 47px;
    padding-inline: 28px;
    font-size: var(--fs-button-lg);
  }

  .btn--gold {
    background-color: var(--gold-500);
    color: var(--ink-900);

    &:hover {
      background-color: var(--gold-600);
    }
  }

  .btn--outline-light {
    border-color: color-mix(in srgb, var(--text-on-dark) 75%, transparent);
    color: var(--text-on-dark);

    &:hover {
      border-color: var(--text-on-dark);
      background-color: color-mix(in srgb, var(--text-on-dark) 8%, transparent);
    }
  }

  /* Card: "Shop now" / "Stay tuned" (126 x 30). The min-width keeps the two
     labels the same width side by side. */
  .btn--outline-card {
    min-height: 30px;
    min-width: 126px;
    padding-inline: 20px;
    background-color: var(--cream-50);
    border-color: var(--sand-300);
    color: var(--text-on-light);
    font-size: var(--fs-button);

    &:hover {
      border-color: var(--gold-400);
      background-color: var(--cream-100);
    }
  }

  /* Small: "Read our story" (155 x 36) and gold-sm (170 x 32) */
  .btn--dark,
  .btn--gold-sm {
    padding-inline: 20px;
    font-size: var(--fs-button-sm);
  }

  .btn--dark {
    min-height: 36px;
    background-color: var(--ink-800);
    color: var(--gold-200);

    &:hover {
      color: var(--gold-400);
      box-shadow: inset 0 0 0 1px var(--gold-400);
    }
  }

  .btn--gold-sm {
    min-height: 32px;
    background-color: var(--gold-500);
    color: var(--ink-900);

    &:hover {
      background-color: var(--gold-600);
    }
  }

  /* ---- Round arrow button ------------------------------------------------
     42px circle (40px on dark), 16px icon. Disable with aria-disabled="true"
     rather than the disabled attribute, so a keyboard user who reaches the end
     of a carousel doesn't lose focus (scroll-arrows.js does this for you).
     The hover tint is not in the spec; it is the minimum feedback a control needs. */
  .arrow-btn {
    --arrow-size: 42px;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--arrow-size);
    height: var(--arrow-size);
    padding: 0;
    border: 1px solid;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      opacity var(--dur) var(--ease);

    & .icon {
      width: 16px;
      height: 16px;
      --icon-stroke: 1.5px;
    }

    &:is(:disabled, [aria-disabled="true"]) {
      opacity: 0.35;
      cursor: default;
    }
  }

  /* Signature Collection */
  .arrow-btn--light {
    border-color: var(--gold-400);
    color: var(--text-on-light);

    &:not(:is(:disabled, [aria-disabled="true"])):hover {
      background-color: color-mix(in srgb, var(--gold-400) 14%, transparent);
    }
  }

  /* Customer Love */
  .arrow-btn--dark {
    --arrow-size: 40px;
    border-color: color-mix(in srgb, var(--gold-400) 70%, transparent);
    color: var(--gold-400);

    &:not(:is(:disabled, [aria-disabled="true"])):hover {
      border-color: var(--gold-400);
      background-color: color-mix(in srgb, var(--gold-400) 12%, transparent);
    }
  }

  /* Touch devices: keep the spec sizes on desktop, but never go below a 44px
     tap target on a phone or tablet. Must stay after the variants above. */
  @media (pointer: coarse) {
    .btn {
      min-height: 44px;
    }

    .arrow-btn {
      --arrow-size: 44px;
    }
  }

  /* ---- Section title -----------------------------------------------------
     Centred title with the gold flourish 12px below. The flourish takes the
     surface accent: --gold-400 on dark, --gold-600 on light. The flourish is
     optional (the Ingredients title has none). */
  .section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
  }

  .section-title__flourish {
    width: var(--flourish-w, 52px);
    height: auto;
    color: var(--ca-accent);
    --icon-stroke: 1px;
  }

  /* 70px flourish under "Customer Love" (52px under "Signature Collection") */
  .section-title--flourish-lg {
    --flourish-w: 70px;
  }
}