/*
  index.css — sidspecifikt för landningssidan (/index.html).
  Allt värde hämtas från tokens.css. Delade komponenter (knapp, fält,
  kort, badge, banner) ligger i components.css — det här är bara det
  som är unikt för den här sidan.
*/
@layer components {
  .site-header {
    border-bottom: 1px solid var(--rule);
  }
  .wordmark {
    font-weight: var(--weight-bold);
    font-size: var(--t-body-lg);
    letter-spacing: var(--tracking-h1);
    color: var(--ink); /* aldrig --signal, se tokens.css */
  }

  .hero-image {
    width: 100%;
    max-height: 640px;
    overflow: hidden;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .hero-image img {
    width: 100%;
    height: 100%;
    max-height: 640px;
    object-fit: cover;
  }

  /* Val-chip för väntelisteformuläret. Skarp kant, ingen pill —
     samma språk som resten av systemet. */
  .chip {
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: var(--s-2) var(--s-4);
    font-size: var(--t-small);
    background: var(--paper-pure);
    color: var(--ink);
  }
  .chip:hover {
    opacity: 0.7;
  }
  .chip.is-active {
    background: var(--ink);
    color: var(--ink-on-dark);
    border-color: var(--ink);
  }
  /* Disabled tills waitlist.js aktiverar dem — se kommentar i
     assets/js/waitlist.js. En kontroll som ser klickbar ut men inte
     gör något är samma sorts fel som checkout-attrappen. */
  .chip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .proof-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: var(--s-4);
  }

  /* .stack-tight sätter margin-top via `> * + *`, men det gör
     ingenting på inline-element som <a> — footerns navlänkar måste
     vara block för att staplas. */
  footer nav a {
    display: block;
  }

  .waitlist-success {
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: var(--s-6);
  }
}