/*
 * Snert-butik — tilbudsside (komposition B: hero = kundens live snert)
 * ====================================================================
 * Kilde-sandhed: docs/snert-butik/design/Snert-butik-IMPLEMENTERET.html
 * (Claudias design, Stevens valg bagt ind). Lys papir-palet; kun
 * vindues-medier er mørke. Firkantede hjørner, INGEN skygger, én
 * vermilion-hvisken pr. sektion. Self-hostede fonte (ingen Google Fonts).
 */

/* ── Self-hostede fonte (fra design-systemet · _ds) ── */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/Lora-Variable.ttf') format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/Lora-Italic-Variable.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/JetBrainsMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/JetBrainsMono-Medium.ttf') format('truetype');
}

html, body {
  margin: 0;
  padding: 0;
  background: #eef0eb;
  color: #1b2027;
  font-family: 'Lora', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
::selection { background: #8a1d1d; color: #eef0eb; }

@keyframes hv-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.rec { animation: hv-rec-pulse 2.4s ease-in-out infinite; }

@keyframes hv-sheen {
  0% { transform: translateX(-40%); opacity: 0; }
  18% { opacity: .55; }
  55% { opacity: .12; }
  100% { transform: translateX(130%); opacity: 0; }
}
.sheen {
  background: linear-gradient(105deg, transparent 42%, rgba(236, 229, 214, .06) 50%, transparent 58%);
  animation: hv-sheen 9s ease-in-out infinite;
}

a.q { color: inherit; text-decoration: none; border-bottom: 1px solid #cdd2d3; transition: border-color .15s; }
a.q:hover { border-bottom-color: #1b2027; }

.win {
  position: relative;
  overflow: hidden;
  border: 1px solid #cdd2d3;
  background: linear-gradient(152deg, #242427 0%, #18181b 52%, #0c0c0e 100%);
}
.win .empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: #8a8172;
  text-align: center;
  padding: 20px;
}

/* ── Intake (§ dit glimt) — beskriv forretning + branche → generér ── */
.sb-intake { display: flex; flex-direction: column; gap: 22px; }
.sb-branches { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-branch {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: #4a5562;
  background: #eef0eb;
  border: 1px solid #cdd2d3;
  padding: 11px 18px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sb-branch:hover { border-color: #7a8693; }
.sb-branch[aria-checked="true"] { border-color: #8a1d1d; color: #1b2027; }
.sb-textarea {
  width: 100%;
  font-family: 'Lora', Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  color: #1b2027;
  background: #eef0eb;
  border: 1px solid #cdd2d3;
  padding: 16px 18px;
  resize: vertical;
  min-height: 96px;
}
.sb-textarea:focus-visible { outline: none; border-color: #8a1d1d; }
.sb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sb-generate {
  align-self: flex-start;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #eef0eb;
  background: #1b2027;
  border: 1px solid #1b2027;
  padding: 14px 26px;
  cursor: pointer;
  transition: background .15s;
}
.sb-generate:hover:not(:disabled) { background: #8a1d1d; border-color: #8a1d1d; }
.sb-generate:disabled { opacity: .4; cursor: not-allowed; }

/* ── Hero-fyld (komposition B) — kundens snert i vinduet ── */
.sb-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sb-hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 60px);
  background: linear-gradient(0deg, rgba(9, 9, 11, .94) 0%, rgba(9, 9, 11, .55) 48%, transparent 100%);
}
.sb-hero-eyebrow {
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: #c3bbac;
  margin: 0 0 18px;
}
.sb-hero-headline {
  font-family: 'Lora', serif;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -.025em;
  margin: 0;
  color: #f2ede2;
  max-width: 18ch;
}
.sb-hero-subhead {
  margin: 18px 0 0;
  max-width: 50ch;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55;
  color: #dcd5c7;
  font-style: italic;
}
.sb-hero-cta {
  pointer-events: auto;
  display: inline-block;
  margin: 24px 0 0;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #f2ede2;
  border: 1px solid rgba(242, 237, 226, .5);
  padding: 12px 24px;
  text-decoration: none;
}
.sb-hero-cta:hover, .sb-hero-cta:focus-visible {
  border-color: #f2ede2;
  background: rgba(242, 237, 226, .08);
}

/* AI-mærkat på det genererede billede (compliance §8 — Skabt med AI) */
.sb-ai-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 10, 12, .55);
  border: 1px solid rgba(236, 229, 214, .28);
  padding: 6px 11px;
  font-size: 9.5px;
  letter-spacing: 0;
  text-transform: none;
  color: #e6dfd0;
}
.sb-ai-tag .rec { width: 7px; height: 7px; background: #d1553a; border-radius: 50%; display: inline-block; }

/* Loading / decline / error i hero-vinduet */
.sb-hero-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  padding: clamp(28px, 5vw, 60px);
  background: linear-gradient(0deg, rgba(9, 9, 11, .9) 0%, rgba(9, 9, 11, .4) 60%, transparent 100%);
}
.sb-hero-state p {
  margin: 0;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.4;
  color: #f2ede2;
  max-width: 40ch;
}
.sb-hero-state .sb-hero-cta { margin-top: 4px; }
[hidden] { display: none !important; }

/* ── responsiv (mobil) ── */
@media (max-width: 820px) {
  .r-2, .r-2a { grid-template-columns: 1fr !important; }
  .r-4 { grid-template-columns: 1fr 1fr !important; }
  .r-fig, .r-faq { grid-template-columns: 1fr !important; gap: 14px !important; }
  .r-fig .r-figlabel, .r-faq > div > div:first-child { padding-top: 0 !important; }
  .hero-h1 { font-size: 34px !important; }
  .r-hdr { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  .r-hdr > div:last-child { text-align: left !important; }
}

/* ── Book-modal (F1 Fase 1) — Havvilla: papir, 1px-kant, ingen skygge ── */
.sb-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: clamp(16px, 5vh, 64px) 16px;
}
.sb-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 32, 39, 0.55);
  backdrop-filter: blur(2px);
}
.sb-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #eef0eb;
  border: 1px solid #cdd2d3;
  border-top: 2px solid #8a1d1d;
  padding: clamp(28px, 4vw, 44px);
  margin: auto 0;
}
.sb-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #7a8693;
  cursor: pointer;
}
.sb-modal__close:hover { color: #1b2027; }
.sb-modal__eyebrow {
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: #8a1d1d;
  margin: 0 0 14px;
}
.sb-modal__title {
  font-family: 'Lora', serif;
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #1b2027;
}
.sb-modal__title em { font-style: italic; color: #8a1d1d; }
.sb-modal__lead { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: #4a5562; }
.sb-modal__whisper { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #7a8693; font-style: italic; }

.sb-book-glimt {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid #cdd2d3;
  background: #e6e9e3;
  margin: 0 0 24px;
}
.sb-book-glimt img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  display: block;
  border: 1px solid #cdd2d3;
}
.sb-book-glimt__headline { font-family: 'Lora', serif; font-style: italic; font-size: 17px; line-height: 1.3; color: #1b2027; }
.sb-ai-tag--static { position: static; margin-bottom: 8px; }

.sb-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.sb-field label,
.sb-pakker legend {
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: #7a8693;
  padding: 0;
}
.sb-optional { text-transform: none; letter-spacing: 0; color: #9aa3ad; }
.sb-field input[type="text"],
.sb-field input[type="email"],
.sb-field input[type="tel"] {
  font-family: 'Lora', Georgia, serif;
  font-size: 16px;
  color: #1b2027;
  background: #f7f8f5;
  border: 1px solid #cdd2d3;
  padding: 11px 14px;
}
.sb-field input:focus-visible { outline: none; border-color: #8a1d1d; }

.sb-pakker { border: none; margin: 0 0 18px; padding: 0; }
.sb-pakker legend { margin-bottom: 8px; }
.sb-pakker label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Lora', serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: #1b2027;
  border: 1px solid #cdd2d3;
  background: #f7f8f5;
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: pointer;
}
.sb-pakker label span { flex: 1; }
.sb-pakker label b { font-weight: 400; font-size: 12px; color: #7a8693; }
.sb-pakker input:checked + span { color: #8a1d1d; }

.sb-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: #4a5562;
  margin: 4px 0 20px;
}
.sb-consent input { margin-top: 3px; }

.sb-book-submit {
  width: 100%;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #eef0eb;
  background: #1b2027;
  border: 1px solid #1b2027;
  padding: 15px 26px;
  cursor: pointer;
  transition: background 0.15s;
}
.sb-book-submit:hover:not(:disabled) { background: #8a1d1d; border-color: #8a1d1d; }
.sb-book-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.sb-book-err {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #8a1d1d;
  font-style: italic;
}
.sb-book-back {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: #7a8693;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
}
.sb-book-back:hover { color: #1b2027; }

@media (max-width: 520px) {
  .sb-book-glimt { grid-template-columns: 72px 1fr; }
  .sb-book-glimt img { width: 72px; height: 72px; }
}

/* PR-4-lite: skjul ufærdige placeholder-rammer indtil billeder er klar */
.win:has(.empty):not(#snert-hero-slot){display:none;} /* P0-fix: hero-vinduet (#snert-hero-slot) har en .empty-tilstand og må ALDRIG skjules */