:root{ --vhf-blue:#273583; --vhf-bg:#f4f6fb; }

/* Wrapper + sektioner */
.vhf-kampe-wrap{ display:grid; gap:28px; }
.vhf-kampe-section{ background:#fff; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.06); overflow:hidden; }
.vhf-kampe-h{ margin:0; padding:16px 18px; background:var(--vhf-blue); color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }

/* Rækker */
.vhf-kamp-row{
  display:grid;
  grid-template-columns: 1.3fr 1fr 120px 1fr; /* dato | hjemme | score | ude */
  align-items:center;
  gap:8px;
  padding:16px 18px;
  background:#fff;
  border-bottom:1px solid #eef1f7;
}
.vhf-kamp-row:nth-child(odd){ background:#fafbff; }

/* Dato/tid */
.vhf-kamp-when{ font-weight:700; color:#2a2f3a; }

/* Hold + logoer */
.vhf-kamp-side{ display:flex; align-items:center; gap:8px; }
.vhf-kamp-side.vhf-left{  justify-content:flex-end; }   /* hjemmelogo/navn ind mod score */
.vhf-kamp-side.vhf-right{ justify-content:flex-start; } /* udelogo/navn ind mod score */

.vhf-team{ font-weight:900; color:#27324b; font-size:18px; text-transform:uppercase; }
/* Udeholdets navn venstre-justeret */
.vhf-kamp-side.vhf-right .vhf-team{ text-align:left; }

/* Logo-størrelse + stabil placering */
.vhf-logo{
  width:64px;
  height:64px;
  object-fit:contain;
  flex:0 0 64px; /* fast bredde = ens placering linje for linje */
}

/* Score */
.vhf-kamp-score{
  min-width:120px; /* rolig centrering */
  font-size:22px; font-weight:900; color:#27324b;
  display:flex; gap:10px; align-items:center; justify-content:center;
}
.vhf-kamp-score span{ opacity:.75; }

/* U11: "RESULTAT OK" badge */
.vhf-kamp-score.ok{
  background:#e9eef9;
  color:#273583;
  border-radius:24px;
  padding:6px 12px;
  font-weight:900;
  letter-spacing:.4px;
}
.vhf-kamp-score.ok .vhf-ok-dot{
  display:inline-block;
  width:10px; height:10px;
  margin-right:8px;
  border-radius:999px;
  background:#273583;
  vertical-align:middle;
}

/* Responsiv tilpasning */
@media (max-width:900px){
  .vhf-kamp-row{ grid-template-columns: 1fr 1fr 100px 1fr; row-gap:10px; }
  .vhf-kamp-when{ grid-column: 1 / -1; }
  .vhf-logo{ width:52px; height:52px; flex-basis:52px; }
  .vhf-team{ font-size:16px; }
}
/* ---------- Mobil-optimering af kampvisning ---------- */
@media (max-width: 640px){

  /* Mindre overskrift-bar */
  .vhf-kampe-section .vhf-kampe-h{
    font-size:22px;
    padding:12px 14px;
    line-height:1.1;
  }

  /* Hver kamp bliver et lille "kort" med egen ramme */
  .vhf-kampe-section .vhf-kamp-row{
    /* grid-områder: dato på egen linje, derefter venstre|score|højre */
    grid-template-areas:
      "when when when"
      "left score right";
    grid-template-columns: 1fr auto 1fr;
    gap:10px;
    padding:14px 12px;
    margin:12px;                 /* luft mellem kort */
    border:1px solid #e6e9f2;
    border-radius:14px;
    background:#fff;
  }
  .vhf-kampe-section .vhf-kamp-row:nth-child(odd){
    background:#fff;             /* fjern skiftefarve på mobil */
  }

  /* Dato øverst, fuld bredde */
  .vhf-kamp-when{
    grid-area: when;
    font-size:16px;
    font-weight:700;
  }

  /* Venstre: hjemmehold tæt mod scoren */
  .vhf-kamp-side.vhf-left{
    grid-area: left;
    justify-content:flex-end;
    gap:8px;
  }

  /* Højre: udehold venstre-justeret, tæt mod scoren */
  .vhf-kamp-side.vhf-right{
    grid-area: right;
    justify-content:flex-start;
    gap:8px;
  }
  .vhf-kamp-side.vhf-right .vhf-team{
    text-align:left;
  }

  /* Logoer en anelse mindre på mobil */
  .vhf-logo{
    width:44px;
    height:44px;
    flex:0 0 44px;
    object-fit:contain;
  }

  /* Holdnavne lidt ned i størrelse, strammere linjehøjde */
  .vhf-team{
    font-size:15px;
    line-height:1.15;
    text-transform:uppercase;
    font-weight:900;
    color:#27324b;
  }

  /* Score i midten; min-bredde væk så det ikke tvinger layout */
  .vhf-kamp-score{
    grid-area: score;
    min-width:auto;
    font-size:24px;
    font-weight:900;
    padding:0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }

  /* U11 "RESULTAT OK" badge justeres lidt ned */
  .vhf-kamp-score.ok{
    padding:6px 10px;
    border-radius:18px;
    font-size:14px;
  }
}