/* ============================================================
   Kortlayout – fælles for index.php og solution*.php
   ============================================================ */

/* Kortcontainer – centreret, maks 1000px, hvid bg, let grå kant, runde hjørner */
.card-outer{
  width:100%;
  max-width:1000px;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.05);
  padding:24px;
}

/* Titel */
.card-title{
  margin:0 0 12px 0;
  font-size:24px;
  text-align:left;
}

/* ============================================================
   FORSIDE (index.php)
   tekst 1/3 – billeder/CTA 2/3
   ============================================================ */
.card-grid{
  display:grid;
  grid-template-columns: 1fr 2fr;   /* tekst 1/3, billede 2/3 */
  gap:32px;
  align-items:start;
}
@media (max-width: 900px){
  .card-grid{ grid-template-columns:1fr; }
}

/* Venstre kolonne (tekst og formular) */
.card-left{
  font-size:16px;
  line-height:1.55;
}

/* Stack helpers */
.stack-sm > * + *{ margin-top:8px; }
.stack-md > * + *{ margin-top:14px; }

/* Feltgrupper – listeform */
.fieldset{
  border:1px solid #eaeaea;
  border-radius:10px;
  padding:14px 16px;
  margin:16px 0;
  background:#fafafa;
}
.legend{
  font-weight:600;
  font-size:15px;
  margin-bottom:8px;
  display:block;
}

/* Én mulighed pr. linje */
.radio-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  cursor:pointer;
  border-bottom:1px solid #f0f0f0;
}
.radio-row:last-child{ border-bottom:none; }
.radio-row:hover{ background:#f9f9f9; }
.radio-row input{ flex-shrink:0; transform:scale(1.1); }
.radio-row span{ flex:1; }

/* Højre kolonne (billeder + CTA) */
.card-right{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.card-figure{ margin:0; }

/* Stabil preview-container – undgå hop ved mouseover/kildeskift */
.card-figure--preview{
  aspect-ratio: 4 / 3;
  width:100%;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid #e5e5e5;
  transition: transform .18s ease, box-shadow .18s ease;
  background:#fff;
}
.card-image:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.card-image--preview{
  border:none;
  width:100%;
  height:100%;
  max-height:420px;
  object-fit:contain;
}
.card-figcaption{
  font-size:13px;
  color:#666;
  margin-top:6px;
  text-align:center;
}

/* ============================================================
   CTA-boks (fælles)
   ============================================================ */
.cta-box{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  padding:16px;
  text-align:center;
}
.cta-title{
  margin:0 0 8px 0;
  font-size:18px;
}
.cta-text{
  margin:0 0 12px 0;
  color:#444;
  font-size:15px;
  line-height:1.5;
}
.cta-actions{
  display:flex;
  justify-content:center;
}
.cta-button{
  width:auto;
  min-width:240px;
}

/* Brandet CTA (samme farve som header/footer) */
.cta-box--brand{
  background:#5e544a;      /* header/footer farve */
  border-color:#5e544a;
  color:#fff;
}
.cta-box--brand .cta-title,
.cta-box--brand .cta-text{ color:#fff; }
.cta-button--onbrand{
  background:#fff;
  color:#000;
  transition: all .2s ease;
}
.cta-button--onbrand:hover{
  filter: brightness(0.92);
}

/* ============================================================
   SOLUTION-SIDER (solution*.php)
   tekst 2/3 – billeder/CTA 1/3
   ============================================================ */
.solution-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;   /* tekst 2/3, billede 1/3 */
  gap:32px;
  align-items:start;
}
@media (max-width: 900px){
  .solution-grid{ grid-template-columns:1fr; }
}
.solution-left{
  font-size:16px;
  line-height:1.55;
}
.solution-left h2{
  font-size:18px;
  margin:16px 0 8px;
}
.solution-right{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.solution-right .cta-box{
  margin-top:auto; /* holder CTA i bunden hvis billeder ovenover */
}

/* ============================================================
   Fælles status- og hjælpeelementer
   ============================================================ */
.app-status{ margin-bottom:12px; }
.status-list{
  display:grid;
  grid-template-columns:1fr;
  row-gap:8px;
  margin:0 0 8px 0;
}
.status-list dt{ font-weight:600; }
.status-list dd{ margin:0; }

/* Hjælpetekst */
.help{
  font-size:14px;
  color:#555;
}