:root{
  --bg:#f3f4f6;
  --text:#222;
  --line:#d1d5db;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.container{max-width:1600px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:700;letter-spacing:.06em;text-decoration:none;color:#111;font-size:18px}
.nav a{margin-left:28px;text-decoration:none;color:#222;position:relative;font-weight:600;letter-spacing:.04em}
.nav a.active::after,.nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:#222}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:60px;background:#fff}
.site-footer .container{padding:22px 28px;color:#555}

.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* fyld hele skærmen */
  overflow: hidden;
  background: #000;
}

.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* deaktiver klik */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-overlay h1 {
  font-size: clamp(48px, 5vw, 140px);
  font-weight: 900;
  color: #fff;
  text-shadow: 3px 3px 8px rgba(0,0,0,0.8);
}

/* ABOUT */
.about {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 40px;
  align-items: start;   /* <- ændret */
  margin: 60px 0;
}
.about-title{font-size:clamp(28px,4vw,48px);font-weight:900;line-height:1.05;margin:0 0 14px}
.lead{font-weight:800;letter-spacing:.08em}
.about-photo-wrap{display:flex;justify-content:center}
.about-photo{width:min(420px,100%);aspect-ratio:1/1;object-fit:cover;object-position:50% 10%;
  border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.about-photo.zoom-110{transform:scale(1.1)}
.about-photo.zoom-120{transform:scale(1.2)}

.divider{border:none;height:1px;background:var(--line);margin:40px 0}

/* Contact & icons */
.contact{text-align:center;margin:30px 0 10px}
.contact h3{font-size:28px;letter-spacing:.08em;margin:0 0 16px}
.contact-items{display:flex;flex-direction:column;align-items:center;gap:14px}
.contact-item{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700}
.contact-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.contact-socials{display:flex;gap:14px;margin-top:4px}
.icon{color:#111;text-decoration:none}
.icon:hover{opacity:.7}

/* Page titles */
.page-title{text-align:center;font-size:clamp(28px,6vw,64px);margin:40px 0 10px;letter-spacing:.08em}

/* Videos */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:30px 0 60px}
.video-card{background:#fff;border:1px solid var(--line);box-shadow:0 2px 12px rgba(0,0,0,.04);border-radius:6px;overflow:hidden}
.video-card iframe,.video-card video{width:100%;aspect-ratio:16/9;border:0;display:block}

/* Photos */
.photo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;margin:26px 0 60px}
.photo-grid img{width:100%;display:block;border-radius:2px;background:#eee;object-fit:cover;aspect-ratio:3/4}

/* Responsive */
@media (max-width: 1000px){
  .about{grid-template-columns:1fr;gap:20px}
  .video-grid{grid-template-columns:1fr 1fr}
  .photo-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .video-grid{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
}

/* HERO fallback til billede */
.hero.hero--image{background:url('assets/hero.jpg') center/cover no-repeat}

/* Lightbox */
.lb{
  position:fixed; inset:0;
  background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease; z-index:1000;
}
.lb.is-open{ opacity:1; pointer-events:auto; }

.lb__img{
  max-width:min(92vw,1600px);
  max-height:90vh;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  border-radius:4px;
}

.lb__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); color:#fff; border:0;
  width:46px; height:46px; border-radius:999px;
  font-size:28px; line-height:46px; text-align:center;
  cursor:pointer; user-select:none;
}
.lb__btn:hover{ background:rgba(255,255,255,.22); }
.lb__close{ top:24px; right:24px; transform:none; font-size:30px; }
.lb__prev{ left:24px; }
.lb__next{ right:24px; }

/* Hover-effekt på billeder i galleriet */
.photo-grid img {
  position: relative;
  transition: filter 0.25s ease;
}

.photo-grid img:hover {
  filter: brightness(75%);
}

/* HERO container */
.hero { position: relative; }

/* Video-wrapper */
.hero-video {
  position: relative;
  overflow: hidden;
  min-height: 60vh; /* tilpas efter behov */
}

/* Hero-højde (prøv 100vh hvis du vil fylde hele skærmen) */
.hero-video{
  position: relative;
  overflow: hidden;
  min-height: 100vh; /* var 60vh */
}

/* Selve baggrundsvideoen */
.hero-video .hero-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35% !important; /* flyt fokus lidt op/ned */
  pointer-events: none;
}

/* Overlay oven på videoen */
.hero-overlay {
  position: relative;
  z-index: 1;
}

.sort-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-weight: 600;
}

.sort-menu label {
  font-size: 16px;
}

.sort-menu select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Sorteringsmenu (hvis ikke allerede tilføjet) */
.sort-menu{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:20px 0;font-weight:600}
.sort-menu select{padding:6px 10px;border:1px solid var(--line);border-radius:4px;background:#fff;font-family:inherit;font-weight:600;cursor:pointer}

/* Badge til visninger */
.video-card{ position: relative; }            /* <- vigtigt */
.view-badge{
  position:absolute;
  right:8px; bottom:8px;
  background:rgba(0,0,0,.75);
  color:#fff; font-size:12px; font-weight:700;
  padding:4px 8px; border-radius:999px;
  line-height:1; z-index:2; user-select:none;
}

/* Sort-menu (hvis ikke allerede) */
.sort-menu{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:20px 0;font-weight:600}
.sort-menu select{padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;font-family:inherit;font-weight:600;cursor:pointer}

/* Visnings-badge */
.video-card{ position:relative; }
.meta-pill{
  position:absolute; left:10px; bottom:10px;
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.72); color:#fff;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; line-height:1;
  backdrop-filter:saturate(120%) blur(2px);
  user-select:none; z-index:2;
}
.meta-pill svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* Mobilmenu */
.nav-toggle{display:none;background:none;border:0;font-size:26px;line-height:1;cursor:pointer}
@media (max-width:640px){
  .header-inner{height:56px}
  .brand{font-size:16px}
  .nav-toggle{display:block}
  .nav{
    position: fixed; top:56px; right:0; left:0;
    background:#fff; border-top:1px solid var(--line);
    display:none; flex-direction:column; padding:10px 16px; z-index:60;
  }
  .nav a{margin:10px 0; font-size:16px}
  .nav.is-open{display:flex}
}

@media (max-width:480px){
  .photo-grid{gap:14px}
  .photo-grid img{border-radius:6px}
}

.video-card{border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.06)}