/* =============================
   Grøndal Ungdom – enkel, gennemskuelig CSS
   - Ét grid-system
   - Simpel centrering
   - Hero-overskrift ovenpå billede
   - 3/1/1 kolonner (desktop/tablet/mobil)
   ============================= */

:root{
  --brand: #0ea5a4;       /* primær */
  --brand-dark:#0b8a89;   /* hover */
  --ink:#0f172a;          /* næsten-sort */
  --muted:#475569;        /* sekundær tekst */
  --paper:#f8fafc;        /* lys baggrund til kort */
  --radius: 16px;         /* hjørner */
  --maxw: 1100px;         /* container bredde */
  --space: 16px;          /* basis spacing */
}

/* Baseline */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:var(--ink);background:#fff}
img{display:block;max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;color:var(--brand-dark)}

/* Utilities */
.container{max-width:var(--maxw);margin-inline:auto;padding:calc(var(--space)*1.25)}
.center{display:grid;place-items:center;text-align:center}
.stack>*{margin:0}
.stack>*+*{margin-top:calc(var(--space)*0.75)}
.btn{display:inline-block;background:var(--brand);color:#fff;font-weight:700;border-radius:12px;padding:10px 16px}
.btn:hover{background:var(--brand-dark);text-decoration:none}
.btn-ghost{background:transparent;border:1px solid #e2e8f0;color:var(--ink)}
.btn-ghost:hover{background:#f1f5f9}
.linklike{background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--brand)}
.linklike:hover{text-decoration:underline;color:var(--brand-dark)}
.muted{color:var(--muted)}
.card{background:var(--paper);border-radius:var(--radius);overflow:hidden}

/* Header */
header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid #e2e8f0;z-index:10}
.nav{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--ink)}
.links{display:flex;gap:14px;align-items:center}

/* Hero */
.hero { padding: 0 0 18px 0; }

/* Variabler:
   --fade-start   : hvor faden starter (procent af hero-højden)
   --fade-size    : hvor TYK fade-overgangen er
   --title-offset : ekstra afvigelse for h1 i forhold til fade-start
*/
.hero-image-wrapper{
  --fade-start: 70%;
  --fade-size: 18%;
  --title-offset: 12%;

  position: relative;
  width: 100%;
  height: clamp(340px, 78vh, 800px);  /* højere = mindre crop, mere billede */
  border-radius: var(--radius);
  overflow: hidden;
}

/* Lag 0: billede */
.hero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 56% 22%;           /* skub fokus væk fra venstre-nederst */
  z-index: 0;
}

/* Lag 1: symmetrisk fade til hvid i bunden */
.hero-overlay{
  position: absolute; inset: 0; pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) var(--fade-start),
    rgba(255,255,255,0.85) calc(var(--fade-start) + calc(var(--fade-size) * 0.6)),
    #ffffff               calc(var(--fade-start) + var(--fade-size))
  );
}

/* Lag 2: overskrift – uafhængigt af fade-start via --title-offset */
.hero h1{
  position: absolute; left: 50%;
  top: calc(var(--fade-start) + var(--title-offset));
  transform: translate(-50%, -50%);
  z-index: 2;

  margin: 0; padding: 0; background: none;
  color: var(--ink); text-align: center;
  font-weight: 800; line-height: 1.15;
  font-size: clamp(22px, 5vw, 44px);
  width: min(92%, 720px);
  text-wrap: balance;
}

/* Hvis du bruger to spans i h1 for fast to linjer */
#hero-title .t1, #hero-title .t2 { display: block; white-space: nowrap; }
#hero-title .t1 { margin-bottom: 6px; }

/* Subheadline under billedet */
.subheadline{ margin: 14px 0 6px 0; color: var(--muted); }

/* Responsiv finjustering */
@media (max-width: 1024px){
  .hero-image-wrapper{ --fade-start: 72%; height: clamp(300px, 58vh, 600px); }
  .hero-img{ object-position: 55% 26%; }
  .hero h1{ width: min(94%, 640px); }
}
@media (max-width: 640px){
  .hero-image-wrapper{ --fade-start: 74%; height: clamp(260px, 54vh, 560px); }
  .hero-img{ object-position: 54% 30%; }
  .hero h1{
    font-size: clamp(20px, 6vw, 34px);
    width: min(94%, 520px);
  }
  #hero-title .t1{ margin-bottom: 4px; }
}






/* Benefits */
.benefits{padding:24px 0}
.benefit-list{list-style:none;display:grid;gap:var(--space);grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin:0}
.benefit-list li{background:var(--paper);border-radius:var(--radius);padding:16px}
.benefit-list h3{margin:0 0 6px 0}
@media (max-width: 1024px){
  .benefit-list{grid-template-columns:1fr}
}

/* Teams (kort) */
.teams{padding:18px 0}
.teams h2{margin:0 0 14px 0;text-align:center}
.team-grid{display:grid;gap:var(--space);grid-template-columns:repeat(3,minmax(0,1fr))}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-body{padding:14px}
.card-body h3{margin:0 0 6px 0}

/* Breakpoints: Desktop=3, Tablet=1, Mobil=1 */
@media (max-width: 1024px){
  .team-grid{grid-template-columns:1fr}
}

/* Soft CTA */
.cta-soft{padding:24px 0}
.cta-soft .container{max-width:700px}

/* Pricing */
.pricing{padding:18px 0}
.pricing h2{margin:0 0 10px 0;text-align:center}
.pricing .container{max-width:800px}

/* About */
.about{padding:18px 0}
.about h2{margin:0 0 10px 0;text-align:center}
.about .container{max-width:800px}

/* Footer */
footer{border-top:1px solid #e2e8f0;margin-top:28px}
footer .container{padding-top:18px;padding-bottom:28px;text-align:center}



/* =====================================
   UNDERSIDER – HERO / FADE overrides
   (påvirker KUN sider med disse body-klasser)
   ===================================== */

/*  fælles underside-tweaks  */
.page-team-5-10 .hero-overlay,
.page-team-10-15 .hero-overlay,
.page-team-15plus .hero-overlay{
  /* symmetrisk fade til hvid i bunden */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) var(--fade-start),
    rgba(255,255,255,0.85) calc(var(--fade-start) + calc(var(--fade-size) * 0.6)),
    #ffffff               calc(var(--fade-start) + var(--fade-size))
  );
}

/* 5–10 år */
.page-team-5-10 .hero-image-wrapper{
  --fade-start: 72%;      /* start faden lidt nede */
  --fade-size: 16%;       /* længde på fade-zonen */
  --title-offset: 15%;     /* flyt KUN overskriften ift. faden */
  height: clamp(320px, 75vh, 800px);
}
.page-team-5-10 .hero-img{
  /* fokus/crop tilpasses billedet */
  --obj-x: 58%;
  --obj-y: 28%;
}

/* 10–15 år */
.page-team-10-15 .hero-image-wrapper{
  --fade-start: 72%;
  --fade-size: 16%;
  --title-offset: 15%;
  height: clamp(320px, 75vh, 800px);
}
.page-team-10-15 .hero-img{
  --obj-x: 56%;
  --obj-y: 24%;
}

/* 15+ år */
.page-team-15plus .hero-image-wrapper{
  --fade-start: 72%;
  --fade-size: 16%;
  --title-offset: 15%;
  height: clamp(320px, 75vh, 800px);
}
.page-team-15plus .hero-img{
  --obj-x: 54%;
  --obj-y: 26%;
}

/* (valgfrit) to-linjers hero-overskrift kun på undersider */
.page-team-5-10 #hero-title .t1,
.page-team-10-15 #hero-title .t1,
.page-team-15plus #hero-title .t1,
.page-team-5-10 #hero-title .t2,
.page-team-10-15 #hero-title .t2,
.page-team-15plus #hero-title .t2 {
  display: block; white-space: nowrap;
}
.page-team-5-10 #hero-title .t1,
.page-team-10-15 #hero-title .t1,
.page-team-15plus #hero-title .t1 { margin-bottom: 6px; }


/* Centrér CTA-knapper pænt */
.cta-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.cta-row .btn{
  min-width:200px;
  text-align:center;
}

/* Lille note under knapperne */
.cta-note{
  text-align:center;
  margin-top:8px;
  color:var(--muted);
}

/* Lidt luft i bunden af siderne */
main{ padding-bottom: 28px; }

/* På helt små skærme: knapper på egen linje */
@media (max-width: 480px){
  .cta-row .btn{ width:100%; }
}

/* Desktop: fluid scaling for brand + nav (mobil/tablet urørt) */
@media (min-width: 1024px){
  :root{
    /* justér disse hvis du vil have mere/mindre punch */
    --header-pad-y: clamp(12px, 1.2vw, 24px);
    --brand-img:   clamp(48px, 3.6vw, 72px);  /* logo-størrelse */
    --brand-text:  clamp(20px, 1.5vw, 28px);  /* "Grøndal Ungdom" */
    --nav-text:    clamp(16px, 1.1vw, 20px);  /* link-font */
    --nav-gap:     clamp(12px, 1.2vw, 20px);  /* afstand mellem links */
  }

  header .container{
    padding-top: var(--header-pad-y);
    padding-bottom: var(--header-pad-y);
  }
  .brand img{
    width: var(--brand-img);
    height: var(--brand-img);
    object-fit: contain;
  }
  .brand span{
    font-size: var(--brand-text);
    font-weight: 900;
    letter-spacing: .2px;
  }
  .links{
    gap: var(--nav-gap);
  }
  .links a{
    font-size: var(--nav-text);
  }
}



/* Mobil: gør headeren tight og bevar kun logo */
@media (max-width: 420px){
  .brand span{ display:none; }           /* skjul "Grøndal Ungdom" ved logoet */
  .links{ gap:10px; }                    /* lidt mindre afstand mellem links */
  .links a{ font-size:15px; }            /* en tand mindre linktekst */
  .links .btn{ padding:10px 12px; }      /* kompakt "Tilmeld dig" */
}

/* Styling til Spilleregler */
.rules{ padding:24px 0; }
.rules h2{ text-align:center; margin:0 0 10px 0; }
.rules .muted{ text-align:center; }

.rules-list{
  list-style:none; padding:0; margin:16px 0 0;
  display:grid; gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.rules-list li{
  background:var(--paper);
  border-radius:var(--radius);
  padding:12px 14px;
}
@media (max-width:1024px){
  .rules-list{ grid-template-columns:1fr; }
}