/* =========================
   THEME / VARIABELEN
========================= */
:root{
  --bg: #000;
  --grid: #c30000;     /* rode lijnen */
  --outer: #c30000;    /* buitenrand */

  --text: #f2f2f2;     /* tekst op zwart */
  --muted: #bdbdbd;

  --outer-w: 2px;
  --grid-w: 2px;

  --maxw: 1200px;
  --pad: 18px;

  --mobile: 780px;
  
    --accent: #c30000;   /* fel rood: menu-lijn + active */
  --line:   #4a0000;   /* bordeaux: alle kaders & grid */

}



/* =========================
   RESET / BASIS
========================= */
*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
/* =========================
   TYPOGRAFIE
========================= */

h1{
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #fff;
}

h2{
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}

h2 small{
  display: block;
  font-size: 0.6em;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.3px;
}

h3{
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

p{
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.card p{
  color: #333;
}

small{
  font-size: 13px;
  color: #777;
}

/* =========================
   NAVIGATIE
========================= */
.site-header{
  background: #000;
  border-bottom: 3px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 999;
}

.nav{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
  position: relative; /* nodig voor absolute mobile menu */
}

.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-logo{
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 15px;
}

/* Desktop menu */
.nav-menu{
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.nav-menu a{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
}

.nav-menu a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.2s ease;
}

.nav-menu a:hover::after,
.nav-menu a.active::after{
  width: 100%;
}

/* Burger (mobiel) */
.nav-toggle{ display: none; }

.nav-burger{
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}

.nav-burger span{
  width: 24px;
  height: 2px;
  background: #fff;
  display: block;
}

/* =========================
   PAGINA LAYOUT
========================= */
.page{
  min-height: 100%;
  display: flex;
  justify-content: center;
  padding: 0 12px 18px;
}
@media (max-width: 780px){
  .page{
    padding-left: 0;
    padding-right: 0;
  }
}

/* =========================
   HOMEPAGE "GRID-FRAME"
========================= */
.grid-frame{
  width: min(100%, var(--maxw));
  border: 1px solid var(--line);
  background: #000;
}

.row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: var(--grid-w);
  background: var(--line);

  /* alleen boven/links/rechts een lijn, niet onder */
  padding: var(--grid-w) var(--grid-w) 0;
}

.cell{
  background: #000;
  min-height: 210px;
  padding: var(--pad);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cell.empty{ background: #000; }

.link-block{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.img{
  max-width: 100%;
  height: auto;
  display: block;
}

.img.photo,
.img.poster,
.img.flyer{
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px;
}

.img.icon{
  max-width: 220px;
  width: 70%;
}

.img.logo{ width: min(360px, 100%); }
.img.sponsor{ width: min(380px, 100%); }

.text{
  margin: 0;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.text.big{ font-size: clamp(18px, 2.2vw, 28px); }
.muted{ color: var(--muted); }

/* subtiele hover */
.link-block img{ transition: transform 160ms ease; }
.link-block:hover img{ transform: scale(1.01); }

/* =========================
   CONTENT PAGINA'S (Fanclub, etc.)
========================= */
.content-frame{
  width: min(100%, var(--maxw));
  margin: 0 auto;
  border: 2px solid var(--line);
  padding: 32px 24px;
  background: #000;
  overflow: hidden; /* voorkomt “uit kader” effecten */
}

.content-frame h2{
  margin: 0 0 10px 0;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.5px;
  color: #fff;
}

.content-frame p{
  line-height: 1.6;
  font-size: 16px;
  color: #e0e0e0;
}

/* =========================
   CARDS / FOCUS BLOKKEN
========================= */
.card-grid{
  display: grid;
  gap: 20px;
  margin-top: 24px;

  /* desktop: 3 kolommen */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.card{
  background: #fff;
  color: #111;
  border-radius: 18px;
  padding: 18px;
  min-height: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.card h3{
  margin: 0 0 10px 0;
  color: #111;
  font-weight: 700;
}

.card p{
  margin: 0;
  color: #333;
  line-height: 1.5;
}

.card a{
  color: var(--grid);
  font-weight: 650;
  text-decoration: none;
}
.card a:hover{
  text-decoration: underline;
}

/* =========================
   FOOTER
========================= */
footer{
  text-align: center;
  padding: 18px 15px;
  font-size: 0.9em;
  color: #666;
}

/* =========================
   RESPONSIVE (alles samen)
========================= */
@media (max-width: 980px){
  /* cards: 2 kolommen */
  .card-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px){

  /* --- NAV: hamburger --- */
  .nav-burger{ display: flex; }

  .nav-menu{
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    background: #000;

    flex-direction: column;
    gap: 0;

    border-top: 1px solid var(--grid);
    display: none;
  }

  .nav-menu li{
    border-bottom: 1px solid rgba(195,0,0,0.4);
  }

  .nav-menu a{
    display: block;
    padding: 16px;
  }

  .nav-toggle:checked ~ .nav-menu{
    display: flex;
  }

  /* --- HOMEPAGE grid: direct 1 kolom --- */
  .row{ grid-template-columns: 1fr; }

  .cell{
    min-height: auto;
    padding: 16px;
  }

  /* lege cellen weg op mobiel */
  .cell.empty{ display: none; }

  /* ✅ belangrijk: quotes rond data-col */
  .row .cell[data-col=A]{ order: 1; }
  .row .cell[data-col=B]{ order: 2; }
  .row .cell[data-col=C]{ order: 3; }

  /* per rij instelbare volgorde */
  .row.order-abc .cell[data-col=A]{ order: 1; }
  .row.order-abc .cell[data-col=B]{ order: 2; }
  .row.order-abc .cell[data-col=C]{ order: 3; }

  .row.order-acb .cell[data-col=A]{ order: 1; }
  .row.order-acb .cell[data-col=C]{ order: 2; }
  .row.order-acb .cell[data-col=B]{ order: 3; }

  .row.order-bac .cell[data-col=B]{ order: 1; }
  .row.order-bac .cell[data-col=A]{ order: 2; }
  .row.order-bac .cell[data-col=C]{ order: 3; }

  .row.order-bca .cell[data-col=B]{ order: 1; }
  .row.order-bca .cell[data-col=C]{ order: 2; }
  .row.order-bca .cell[data-col=A]{ order: 3; }

  .row.order-cab .cell[data-col=C]{ order: 1; }
  .row.order-cab .cell[data-col=A]{ order: 2; }
  .row.order-cab .cell[data-col=B]{ order: 3; }

  .row.order-cba .cell[data-col=C]{ order: 1; }
  .row.order-cba .cell[data-col=B]{ order: 2; }
  .row.order-cba .cell[data-col=A]{ order: 3; }

  /* --- content page padding iets kleiner --- */
  .content-frame{
    padding: 20px 16px;
  }

  /* cards: 1 kolom */
  .card-grid{
    grid-template-columns: 1fr;
  }
}
.nav-logo{
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 3px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.logo-milan{
  color: #fff;
}

.logo-fretin{
  color: var(--grid); /* rood */
}
/* =========================
   BRAND HERO – VOLLE BREEDTE
========================= */

.brand-hero{
  /* full-bleed over de hele viewport */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);

  position: relative;
  aspect-ratio: 5 / 1;
  max-height: 240px;
  overflow: hidden;

background: linear-gradient(
  90deg,
  #260000 0%,
  #3a0000 35%,
  #260000 100%
				);
}

/* MF-logo in volle kleur */
.brand-hero img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;  /* later finetunen: 45% 50% bv */

  opacity: 1;
  filter: none;
  pointer-events: none;
  user-select: none;
}

/* =========================
   MOBIEL
========================= */
@media (max-width: 780px){
  .brand-hero{
    max-height: 170px;
  }
}
@media (max-width: 780px){
  :root{
    --outer-w: 1px;
    --grid-w: 1px;
  }
}