/* ============================================================
   «VI HOLDER LUKKET» — KORTET  (18/10)
   ------------------------------------------------------------
   Mikkels ord: *"det skal … se rigtig, rigtig godt og ligesom
   det her, hvis ikke bedre"*. Forlægget var et lyst, varmt kort med
   et rundt mærke, en lille overskrift over en stor dato, «vi er
   tilbage» i farve, to linjer om hvad man kan, og to knapper.

   Husets egen udgave: cremen og den røde fra logoet, Host Grotesk,
   ankeret når der ingen emoji er, og husets ikoner i stedet for
   emoji i punkterne (kundens ord 13/9: de rigtige mærker, ikke
   tegn).

   ⚠️ ARKET STÅR ALENE. Det indlæses af fem gæstesider med to
   forskellige grundark (havnegrillen.css og css/style.css) og af
   admin til forhåndsvisningen — derfor ingen variabler udefra
   uden en reserve, og egne knapper i stedet for husets .g, som
   kun det ene grundark har. Alt er scopet til .lukket-kort.

   Kontrasten er regnet: #b41f2e på #fdf2ea ≈ 6,0:1 (lille skrift),
   #241a17 på cremen over 15:1, hvid på knappens #c11f2f 5,9:1.
   ============================================================ */
.lukket-kort {
  padding: 22px 16px 6px;
  font-family: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.lukket-kort[hidden] { display: none; }
.lukket-kort .lukket-ind {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 40px) clamp(20px, 4.4vw, 44px);
  border-radius: 28px;
  background:
    radial-gradient(120% 140% at 100% 100%, rgba(240, 195, 187, .55), transparent 60%),
    linear-gradient(160deg, #fffaf4 0%, #fdf2ea 100%);
  border: 1px solid rgba(214, 42, 58, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 26px 60px -34px rgba(36, 26, 23, .42);
  color: #241a17;
  text-align: left;
}
.lukket-kort .lukket-hoved { display: flex; align-items: center; gap: clamp(14px, 3vw, 22px); }
.lukket-kort .lukket-maerke {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(58px, 12vw, 76px);
  height: clamp(58px, 12vw, 76px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 26px -12px rgba(36, 26, 23, .38), inset 0 0 0 1px rgba(36, 26, 23, .06);
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1;
}
.lukket-kort .lukket-maerke .lukket-ikon { width: 46%; height: 46%; color: #d62a3a; }
.lukket-kort .lukket-hv { min-width: 0; }
.lukket-kort .lukket-kicker {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #b41f2e;
}
.lukket-kort .lukket-titel {
  margin: 0;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: clamp(30px, 6.4vw, 50px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: #241a17;
  text-wrap: balance;
}
.lukket-kort .lukket-hvorfor {
  margin: 18px 0 0;
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 600;
  line-height: 1.35;
}
.lukket-kort .lukket-besked {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #5c4a45;
  white-space: pre-line;
  max-width: 62ch;
}
.lukket-kort .lukket-tilbage {
  margin: 16px 0 0;
  font-size: clamp(19px, 2.6vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  color: #b41f2e;
}
.lukket-kort .lukket-tilbage .lukket-ikon { display: inline-block; width: .95em; height: .95em; vertical-align: -.12em; color: #d62a3a; }
.lukket-kort .lukket-punkter {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.lukket-kort .lukket-punkt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.45;
  color: #3a2924;
}
.lukket-kort .lukket-punkt .lukket-ikon { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; color: #d62a3a; }
.lukket-kort .lukket-punkt a { color: inherit; text-decoration: underline; text-decoration-color: rgba(214, 42, 58, .45); text-underline-offset: 3px; }
.lukket-kort .lukket-punkt a:hover { text-decoration-color: #d62a3a; }
.lukket-kort .lukket-knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.lukket-kort .lukket-knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: #241a17;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(36, 26, 23, .14), 0 8px 20px -12px rgba(36, 26, 23, .35);
  transition: transform .25s cubic-bezier(.2, .9, .24, 1), box-shadow .25s ease;
}
.lukket-kort .lukket-knap-hoved {
  color: #fff;
  background: linear-gradient(180deg, #e2394a, #c11f2f);
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .45), 0 12px 26px -10px rgba(214, 42, 58, .6);
}
.lukket-kort .lukket-knap:hover { transform: translateY(-1px); }
.lukket-kort .lukket-knap:focus-visible { outline: 3px solid #241a17; outline-offset: 3px; }
@media (max-width: 520px) {
  .lukket-kort .lukket-knap { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lukket-kort .lukket-knap { transition: none; }
}
.lukket-kort .lukket-hale { white-space: nowrap; }