/* Bas */
* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background: #0f1114;
  color: #eee;
}

h1, h2, h3 { font-weight: 600; margin-top: 0; }

a { color: #e7c66a; text-decoration: none; }
a:hover { text-decoration: underline; }

/* NAV */
.nav{
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; background: #0b0d10;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand{ display:flex; align-items:center; }
.brand img{ height:40px; width:auto; display:block; }

.menu{
  display: flex; align-items: center; gap: 14px;
}
.menu a{ color:#e6e6e6; }
.menu .btn{
  background:#e7c66a; color:#111; padding:8px 12px; border-radius:6px; font-weight:600;
}

/* hamburgermeny: dold på desktop */
.menu-toggle{
  display: none;
  appearance: none;
  background: #1b1f24; color:#e6e6e6;
  border: 1px solid rgba(255,255,255,.15);
  padding: 8px 12px; border-radius: 6px;
  font-size: 20px; line-height: 1;
}

/* HERO */
.hero{ position:relative; text-align:center; color:#fff; }
.hero-bg{ width:100%; height:60vh; min-height:360px; object-fit:cover; display:block; filter:brightness(.85); }
.hero .overlay{ position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,.55)); }
.hero-inner{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(92vw, 950px); padding:0 16px; text-align:center;
}
.btn-primary{
  background:#e7c66a; color:#0b0d10; padding:10px 16px; border-radius:8px; display:inline-block; font-weight:700;
}
.btn-ghost{
  border:1px solid #fff; padding:10px 16px; border-radius:8px; margin-left:10px; color:#fff;
}

/* Sektioner och grid */
.section{ padding:56px 16px; }
.container{ max-width:1100px; margin:0 auto; }

.grid{ display:grid; gap:24px; }
.grid.two{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid.three{ grid-template-columns: repeat(3,minmax(0,1fr)); }

.card{ background:#14181d; padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,.06); }

.image-card img{ width:100%; border-radius:10px; display:block; }

/* Spelare */
.player{ text-align:center; }
.player h3{ margin:10px 0 6px; }
.player-photo{
  width:100%; max-width:220px;
  aspect-ratio: 3/4; object-fit:cover;
  border-radius:12px; margin:0 auto 10px auto; display:block;
}

/* Media */
.section.media{ position:relative; padding:0; }
.section.media img{ width:100%; height:380px; object-fit:cover; display:block; }
.media-overlay{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.6));
}

/* Formulär & footer */
.form label{ display:block; margin-bottom:10px; }
.form input,.form textarea{
  width:100%; background:#0f1419; color:#e6e6e6;
  border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:10px 12px;
}
.form button.btn-primary{ margin-top:6px; }

.footer{ background:#0b0d10; color:#e6e6e6; padding:20px 16px; }
.footer a{ color:#e7c66a; }
.footer-inner{
  max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;
}

/* RESPONSIVITET */
@media (max-width: 1024px){
  .grid.three{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .player-photo{ max-width:200px; }
}

@media (max-width: 768px){
  /* hamburgermenyn visas på mobil */
  .menu-toggle{ display:inline-block; }
  /* göm horisontell meny – fäll ut vertikalt när .open */
  .menu{ display:none; position:absolute; top:100%; left:0; right:0; background:#0b0d10; padding:12px 16px; flex-direction:column; gap:10px; border-bottom:1px solid rgba(255,255,255,.06); }
  .menu.open{ display:flex; }
  .nav{ flex-wrap:wrap; }

  .grid.two, .grid.three{ grid-template-columns:1fr; }

  .hero-bg{ height:45vh; min-height:260px; }
  .player-photo{ max-width:160px; }
}

@media (max-width: 380px){
  .player-photo{ max-width:140px; }
}