/*
 * Befora Coming Soon — bespoke "In the workshop" page composition.
 *
 * The page-template override (page--front.html.twig) wraps this SDC
 * in `.befora-page--coming-soon` without forcing any color mode — the
 * page follows the user's `[data-theme]` preference (the theme-toggle
 * in the top bar lets them switch). All `var(--bef-*)` references
 * below resolve through the cascade in tokens.css.
 *
 * The Webform block dropped into the `form` slot is styled by targeting
 * Drupal's default form element classes (form-item, input[type="email"],
 * etc.) so the waitlist visually matches the static design while leaving
 * Webform's native AJAX submit + confirmation behavior intact.
 */

[data-component-id="befora:coming-soon"] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bef-canvas);
  color: var(--bef-ink);

  .befora-coming-soon-grain {
    /* The design uses position:fixed; inside an SDC scope we use absolute
       so the grain stays within the component's bounding box. The page
       template gives this component the full viewport height, so the
       effect still covers everything visible. */
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      radial-gradient(rgb(236 227 209 / 1.2%) 1px, transparent 1px),
      radial-gradient(rgb(196 86 74 / 1.4%) 1px, transparent 1px);
    background-size: 22px 22px, 13px 13px;
    background-position: 0 0, 11px 7px;
  }

  .befora-coming-soon-page {
    flex: 1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 56px 32px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 96px;
  }

  /* ── Top bar ─────────────────────────────────────────── */
  .befora-coming-soon-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .befora-coming-soon-top-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .befora-coming-soon-wordmark {
    font-family: var(--bef-display);
    font-size: var(--fs-28);
    line-height: 0.9;
    letter-spacing: -0.018em;
    color: var(--bef-ink);
    display: inline-flex;
    align-items: baseline;
  }
  .befora-coming-soon-wordmark-name { font-style: italic; }

  .befora-coming-soon-wordmark-dot {
    color: var(--bef-ember);
    font-style: italic;
  }

  /* ── Main ────────────────────────────────────────────── */
  .befora-coming-soon-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .befora-coming-soon-eyebrow {
    font-family: var(--bef-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bef-honey);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
  }

  .befora-coming-soon-pip {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--bef-honey);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--bef-honey) 22%, transparent);
    animation: befora-coming-soon-pulse 2.8s ease-in-out infinite;
  }

  @keyframes befora-coming-soon-pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--bef-honey) 22%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--bef-honey) 6%,  transparent); }
  }

  @media (prefers-reduced-motion: reduce) {
    .befora-coming-soon-pip { animation: none; }
  }

  .befora-coming-soon-hero {
    font-family: var(--bef-display);
    font-size: clamp(var(--fs-56), 8.4vw, var(--fs-104));
    line-height: 0.97;
    letter-spacing: -0.014em;
    margin: 0;
    color: var(--bef-ink);
    max-width: 13ch;
    text-wrap: pretty;
  }

  .befora-coming-soon-hero em {
    font-style: italic;
    color: var(--bef-honey);
  }

  .befora-coming-soon-lede {
    font-family: var(--bef-body);
    font-size: var(--fs-19);
    line-height: 1.55;
    color: var(--bef-graphite);
    margin: 0;
    max-width: 56ch;
  }

  .befora-coming-soon-lede em {
    font-style: italic;
    color: var(--bef-ink);
  }

  /* ── Waitlist form (Webform render block lives in the slot) ─────
     The design's <form class="waitlist"> is recreated here by targeting
     Drupal's default form markup. Webform handles AJAX submit, validation,
     and confirmation swap natively — no inline JS. */
  .befora-coming-soon-waitlist {
    max-width: 540px;
    width: 100%;
    margin: 0;
  }

  .befora-coming-soon-waitlist form {
    display: flex;
    gap: 8px;
    margin: 0;
  }

  .befora-coming-soon-waitlist .form-item {
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  /* Visually hide the email label — placeholder + aria-label carry it. */
  .befora-coming-soon-waitlist .form-item label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .befora-coming-soon-waitlist .befora-form-control {
    background: var(--bef-canvas-raised);
    border-color: var(--bef-control-border);
    padding: 0 18px;
    transition:
      border-color var(--dur-2) var(--ease-quiet),
      box-shadow var(--dur-2) var(--ease-quiet);
  }

  .befora-coming-soon-waitlist .befora-form-control:focus-within {
    border-color: var(--bef-ink);
    box-shadow: 0 0 0 3px var(--bef-ember-tint);
  }

  .befora-coming-soon-waitlist input[type="email"] {
    font-family: var(--bef-body);
    font-size: var(--fs-15);
    color: var(--bef-ink);
    padding: 14px 0;
  }

  .befora-coming-soon-waitlist input[type="email"]::placeholder {
    color: var(--bef-stone);
  }

  /* Webform submit button — honey background, dark text, mirrors the
     design's .waitlist button styling. Button SDC classes are scoped to
     their own data-component-id so we inline the styling here. */
  .befora-coming-soon-waitlist .form-actions {
    margin: 0;
    padding: 0;
  }

  .befora-coming-soon-waitlist input[type="submit"],
  .befora-coming-soon-waitlist button[type="submit"] {
    background: var(--bef-honey);
    color: #15110D;
    border: 1px solid var(--bef-honey);
    border-radius: var(--r-2);
    padding: 14px 22px;
    font-family: var(--bef-body);
    font-size: var(--fs-14);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition:
      background var(--dur-2) var(--ease-quiet),
      border-color var(--dur-2) var(--ease-quiet);
  }

  .befora-coming-soon-waitlist input[type="submit"]:hover,
  .befora-coming-soon-waitlist button[type="submit"]:hover {
    background: var(--bef-honey-deep);
    border-color: var(--bef-honey-deep);
  }

  .befora-coming-soon-waitlist input[type="submit"]:focus-visible,
  .befora-coming-soon-waitlist button[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bef-ember-tint);
  }

  /* Webform's AJAX swap inserts .webform-confirmation in place of the form
     on successful submit. Mirrors the design's .confirm panel. */
  .befora-coming-soon-waitlist .webform-confirmation {
    max-width: 540px;
    padding: 16px 18px;
    border-radius: var(--r-3);
    background: var(--bef-canvas-raised);
    border: 1px solid var(--bef-hairline-strong);
    border-left: 2px solid var(--bef-honey);
    font-family: var(--bef-body);
    font-size: var(--fs-14);
    line-height: 1.55;
    color: var(--bef-graphite);
  }

  .befora-coming-soon-waitlist .webform-confirmation strong {
    color: var(--bef-ink);
    font-weight: 500;
  }

  .befora-coming-soon-meta {
    font-family: var(--bef-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bef-stone);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
  }

  /* ── Phase strip — pre-launch self-reference ─────────── */
  .befora-coming-soon-phases {
    margin-top: 4px;
    padding-top: 28px;
    border-top: 1px solid var(--bef-hairline-strong);
  }

  .befora-coming-soon-phases-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
  }

  .befora-coming-soon-phases-label,
  .befora-coming-soon-phases-note {
    font-family: var(--bef-mono);
    font-size: var(--fs-10);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bef-stone);
  }

  .befora-coming-soon-phase-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .befora-coming-soon-phase {
    padding: 12px 14px;
    border-radius: var(--r-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    border: 1px solid transparent;
  }
  .befora-coming-soon-phase.is-done   { border-color: var(--bef-hairline-strong); }
  .befora-coming-soon-phase.is-now    { background: var(--bef-ember-tint); border-color: var(--bef-ember); }
  .befora-coming-soon-phase.is-queued { border: 1px dashed var(--bef-hairline-strong); }

  .befora-coming-soon-phase-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--bef-mono);
    font-size: var(--fs-9);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .befora-coming-soon-phase-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .befora-coming-soon-phase-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    display: inline-block;
  }

  .befora-coming-soon-phase.is-done .befora-coming-soon-phase-num,
  .befora-coming-soon-phase.is-done .befora-coming-soon-phase-status   { color: var(--bef-graphite); }
  .befora-coming-soon-phase.is-done .befora-coming-soon-phase-dot      { background: var(--bef-posted); }

  .befora-coming-soon-phase.is-now .befora-coming-soon-phase-num,
  .befora-coming-soon-phase.is-now .befora-coming-soon-phase-status    { color: var(--bef-ember); }
  .befora-coming-soon-phase.is-now .befora-coming-soon-phase-dot       { background: var(--bef-ember); }

  .befora-coming-soon-phase.is-queued .befora-coming-soon-phase-num,
  .befora-coming-soon-phase.is-queued .befora-coming-soon-phase-status { color: var(--bef-stone); }
  .befora-coming-soon-phase.is-queued .befora-coming-soon-phase-dot    { background: var(--bef-hairline-strong); }

  .befora-coming-soon-phase-name {
    font-family: var(--bef-display);
    font-size: var(--fs-17);
    line-height: 1.15;
    color: var(--bef-ink);
  }

  .befora-coming-soon-phase.is-now .befora-coming-soon-phase-name {
    font-style: italic;
    color: var(--bef-ember);
  }

  .befora-coming-soon-phase.is-queued .befora-coming-soon-phase-name {
    color: var(--bef-stone);
  }

  /* ── Who's building this ─────────────────────────────── */
  .befora-coming-soon-who {
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: 40px;
    padding-top: 36px;
    border-top: 1px solid var(--bef-hairline-strong);
  }

  .befora-coming-soon-who-label {
    font-family: var(--bef-mono);
    font-size: var(--fs-10);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bef-stone);
    padding-top: 4px;
  }

  .befora-coming-soon-who-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .befora-coming-soon-who-body p {
    margin: 0;
    font-family: var(--bef-body);
    font-size: var(--fs-16);
    line-height: 1.7;
    color: var(--bef-graphite);
    max-width: 56ch;
    text-wrap: pretty;
  }

  .befora-coming-soon-who-sig {
    font-family: var(--bef-display);
    font-style: italic;
    font-size: var(--fs-17);
    color: var(--bef-ink);
    margin-top: 4px;
  }

  .befora-coming-soon-who-mono {
    font-family: var(--bef-mono);
    font-style: normal;
    font-size: var(--fs-10);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bef-stone);
    margin-left: 10px;
  }

  /* ── Footer ──────────────────────────────────────────── */
  .befora-coming-soon-footer {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 28px 56px 32px;
    border-top: 1px solid var(--bef-hairline);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: var(--bef-mono);
    font-size: var(--fs-10);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bef-graphite);
    position: relative;
    z-index: 1;
  }

  .befora-coming-soon-footer a {
    color: var(--bef-graphite);
    text-decoration: none;
    border-bottom: 1px dotted var(--bef-stone);
    padding-bottom: 1px;
    transition:
      color var(--dur-2) var(--ease-quiet),
      border-color var(--dur-2) var(--ease-quiet);
  }

  .befora-coming-soon-footer a:hover {
    color: var(--bef-ink);
    border-bottom-color: var(--bef-ink);
  }

  /* ── Responsive ──────────────────────────────────────── */
  @media (width <= 720px) {
    .befora-coming-soon-page {
      padding: 32px 22px;
      gap: 64px;
    }

    .befora-coming-soon-hero {
      font-size: clamp(var(--fs-40), 11vw, var(--fs-64));
      max-width: 16ch;
    }
    .befora-coming-soon-lede { font-size: var(--fs-17); }
    .befora-coming-soon-waitlist form { flex-direction: column; }

    .befora-coming-soon-waitlist input[type="submit"],
    .befora-coming-soon-waitlist button[type="submit"] { width: 100%; }
    .befora-coming-soon-phase-strip { grid-template-columns: 1fr 1fr; }

    .befora-coming-soon-who {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .befora-coming-soon-footer {
      padding: 22px;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  }
}