/* Containere & struktur */
.container{ max-width:var(--container); margin-inline:auto; padding:clamp(12px,2vw,24px); }

/* ========== HERO (placering/struktur) ========== */
.hero{
  position:relative; background:var(--red); color:#fff; border-radius:var(--radius);
  overflow:hidden; min-height:240px; display:grid; grid-template-columns:1fr; align-items:stretch;
}
.hero__text{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; gap:12px; padding:clamp(20px,4vw,48px);
}
.hero__text h1{ margin:0; font-weight:900; letter-spacing:.5px; font-size:clamp(28px,4.5vw,44px); }
.hero__text p{ margin:0; font-size:clamp(14px,2.2vw,18px) }
.hero__image{ position:relative; width:100%; min-height:220px }
.hero__image img{ object-fit:cover; width:100%; height:100% }
.below-badge-wrap{ margin-top:10px; display:flex; align-items:flex-start; gap:10px; justify-content:flex-end; }
.below-badge{ width:auto; max-width:350px; }
@media (min-width:720px){
  .hero{ grid-template-columns:1fr 1fr }
  .hero__text{ order:1 } .hero__image{ order:2 }
}

/* ========== KORT/ACCORDION – LAYOUT ========== */
.cards{
  display:grid;
  gap:clamp(12px,2.2vw,20px);
  align-items:start;                 /* ingen stræk */
  margin-top:clamp(14px,3vw,28px);
}
@media (min-width:720px){
  .cards{ grid-template-columns:1fr 1fr; }
}

/* Summary layout – ENS for alle: h3 = 1/3, teaser = 2/3, CTA under h3 */
details.card > summary{
  cursor:pointer; list-style:none; outline:none;
  padding:18px 20px;
  display:grid;
  grid-template-columns:1fr 2fr;
  grid-template-rows:auto auto;     /* række 2 til CTA */
  gap:12px 16px;
  align-items:start;
  font-size:clamp(16px,2.2vw,20px);
}
details.card > summary::-webkit-details-marker{ display:none }

details.card > summary h3{
  grid-column:1; grid-row:1;
  margin:0 0 4px 0;
  font-size:clamp(18px,2.2vw,22px);
}
details.card > summary .teaser{
  grid-column:2; grid-row:1;
  margin:0; opacity:.9;
}
details.card > summary .summary-cta{
  grid-column:1; grid-row:2;
  justify-self:start;
  font-weight:700; font-size:14px;
  position:relative; padding-right:18px;
}
details.card > summary .summary-cta::after{
  content:"›"; position:absolute; right:0; top:0;
  transform:rotate(90deg); transition:.2s;
}
details.card[open] .summary-cta::after{ transform:rotate(-90deg); }

/* Mobil: stack alt i summary */
@media (max-width:640px){
  details.card > summary{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }
  details.card > summary .teaser{ grid-column:1; grid-row:2 }
  details.card > summary .summary-cta{ grid-column:1; grid-row:3 }
}

/* ========== SIDESTRUKTUR (flex body/main) ========== */
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

/* === HERO – EN KONSOLIDERET VERSION (placering) === */
.hero{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;     /* mobil: én kolonne */
  align-items: stretch;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
  min-height: 240px;
}
.hero__text{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; gap:12px; padding:clamp(20px,4vw,48px);
}
.hero__text h1{ margin:0; font-weight:900; letter-spacing:.5px; font-size:clamp(28px,4.5vw,44px); }
.hero__text p{ margin:0; font-size:clamp(14px,2.2vw,18px); }

/* Tablet/desktop: 2 kolonner, billedet strækker i højden (ingen rød bar) */
@media (min-width: 720px){
  .hero{
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .hero__image{
    aspect-ratio: auto;        /* fjern mobil-ratio */
    min-height: 0;             /* tillad stræk */
  }
  .hero__image img{ height: 100%; }
}

/* Gør hele summary klikbart (placeret med summary-reglerne) */
details.card > summary{
  cursor: pointer;
  outline: none;
}