/* ========================================
   GRUNDINSTÄLLNINGAR
======================================== */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Nunito',sans-serif; background:#fffdf7; color:#2a2a2a; overflow-x:hidden; }

:root {
  --sky:#4db8e8; --sun:#f5c842; --grass:#5cb85c;
  --tomato:#e84b3a; --cream:#fffdf7; --sand:#f5ede0;
  --dough:#f0e6d2; --ink:#2a2a2a; --mid:#666;
}

/* ========================================
   NAVIGATION
======================================== */
nav {
  position:sticky; top:0; z-index:100;
  background:white; border-bottom:3px solid var(--sun);
  padding:.9rem 5vw;
  display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.nav-logo { font-family:'Fredoka One',cursive; font-size:1.8rem; color:var(--tomato); text-decoration:none; }
.nav-links { display:flex; gap:1.5rem; list-style:none; }
.nav-links a { font-weight:700; font-size:.85rem; text-decoration:none; color:var(--ink); padding:.3rem .8rem; border-radius:20px; transition:all .2s; }
.nav-links a:hover { background:var(--sun); }

/* ========================================
   HERO
======================================== */
.hero { min-height:92vh; display:grid; grid-template-columns:1fr 1fr; align-items:center; overflow:hidden; }
.hero-left { padding:6rem 4vw 6rem 8vw; }
.hero-tag { display:inline-block; background:var(--sun); font-weight:800; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; padding:.4rem 1rem; border-radius:20px; margin-bottom:1.5rem; }
.hero h1 { font-family:'Fredoka One',cursive; font-size:clamp(4rem,8vw,7rem); line-height:1.0; color:var(--tomato); margin-bottom:1rem; }
.hero h1 span { color:var(--sky); display:block; }
.hero-sub { font-size:1.1rem; font-weight:600; color:var(--mid); line-height:1.7; margin-bottom:2rem; max-width:400px; }
.hero-bells { animation:ring 2.5s ease-in-out infinite; display:inline-block; }
.bell-img { height:120px; width:auto; display:block; }
@keyframes ring { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-15deg)} 40%{transform:rotate(15deg)} 60%{transform:rotate(-8deg)} 80%{transform:rotate(8deg)} }
.hero-right { height:92vh; overflow:hidden; position:relative; }
.hero-right img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-right::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,var(--cream) 0%,transparent 25%); }

/* ========================================
   GEMENSAMMA SEKTIONER
======================================== */
section { padding:5rem 8vw; }
.section-tag { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; padding:.35rem 1rem; border-radius:20px; margin-bottom:.8rem; }
.tag-blue  { background:#dff0fa; color:#1a7aab; }
.tag-green { background:#dff5df; color:#2a7a2a; }
.tag-red   { background:#fde8e6; color:#b83525; }
.tag-sun   { background:#fef3cc; color:#8a6c00; }
h2.section-title { font-family:'Fredoka One',cursive; font-size:clamp(2.2rem,4vw,3.2rem); line-height:1.1; margin-bottom:1rem; }

/* ========================================
   OM OSS
======================================== */
.about-section { background:var(--sand); }
.about-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:5rem; align-items:center; margin-top:2rem; }
.about-text p { font-size:1rem; line-height:1.85; color:#444; margin-bottom:1.2rem; }
.about-photos { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.about-photos img { width:100%; border-radius:12px; object-fit:cover; height:190px; box-shadow:0 4px 16px rgba(0,0,0,.12); transition:transform .3s; }
.about-photos img:hover { transform:scale(1.04) rotate(1deg); }
.about-photos img:nth-child(2) { transform:rotate(-2deg); }
.about-photos img:nth-child(3) { transform:rotate(1.5deg); }

/* ========================================
   STATS-REMSA
======================================== */
.stats-strip { background:var(--tomato); padding:2.5rem 8vw; display:flex; justify-content:space-around; flex-wrap:wrap; gap:2rem; }
.stat-item { text-align:center; color:white; }
.stat-num { font-family:'Fredoka One',cursive; font-size:3.5rem; line-height:1; display:block; }
.stat-label { font-size:.8rem; font-weight:700; opacity:.85; letter-spacing:.1em; text-transform:uppercase; }

/* ========================================
   TRÄNING
======================================== */
.sports-section { background:white; }
.sports-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:2.5rem; }
.sport-card { background:var(--cream); border:2px solid #f0e8d8; border-radius:20px; padding:2rem 1.5rem; text-align:center; transition:all .25s; }
.sport-card:hover { transform:translateY(-6px); border-color:var(--sun); box-shadow:0 12px 30px rgba(0,0,0,.1); }
.sport-emoji { font-size:3rem; display:block; margin-bottom:1rem; }
.sport-card h3 { font-family:'Fredoka One',cursive; font-size:1.3rem; margin-bottom:.5rem; color:var(--tomato); }
.sport-card p { font-size:.82rem; color:var(--mid); line-height:1.6; }

/* ========================================
   GALLERI
======================================== */
.collage-section { background:var(--dough); }
.collage-intro { max-width:580px; margin-bottom:3rem; }
.collage-intro p { font-size:1rem; color:#555; line-height:1.8; margin-top:.8rem; }
.masonry { columns:3; column-gap:14px; }
.masonry-item { break-inside:avoid; margin-bottom:14px; border-radius:14px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.12); position:relative; cursor:pointer; }
.masonry-item img { width:100%; display:block; transition:transform .4s; filter:brightness(1.02) saturate(1.1); }
.masonry-item:hover img { transform:scale(1.04); }
.masonry-caption { position:absolute; bottom:0; left:0; right:0; padding:.8rem 1rem; background:linear-gradient(transparent,rgba(0,0,0,.65)); color:white; font-size:.75rem; font-weight:700; opacity:0; transition:opacity .3s; }
.masonry-item:hover .masonry-caption { opacity:1; }

/* ========================================
   KULTUREN
======================================== */
.kultur-section { background:white; }
.kultur-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:2.5rem; }
.kultur-card { border-radius:20px; padding:2.5rem; transition:transform .2s; }
.kultur-card:hover { transform:translateY(-4px); }
.kultur-card.bell  { background:#fff8e1; border:2px solid #f5c842; }
.kultur-card.masks { background:#fde8e6; border:2px solid #e84b3a; }
.kultur-card.bingo { background:#dff5df; border:2px solid #5cb85c; }
.kultur-card.cheer { background:#dff0fa; border:2px solid #4db8e8; }
.k-emoji { font-size:3.5rem; display:block; margin-bottom:1rem; }
.kultur-card h3 { font-family:'Fredoka One',cursive; font-size:1.6rem; margin-bottom:.8rem; }
.kultur-card p { font-size:.9rem; line-height:1.8; color:#444; }
.mask-photo { margin-top:1.5rem; border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.15); }
.mask-photo img { width:100%; display:block; }

/* ========================================
   MOENA & MAT
======================================== */
.moena-section { background:#f0f8e8; }
.moena-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; margin-top:2.5rem; align-items:start; }
.hotel-photo { border-radius:20px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.15); position:relative; }
.hotel-photo img { width:100%; display:block; }
.hotel-badge { position:absolute; top:1rem; right:1rem; background:white; border-radius:12px; padding:.6rem 1rem; font-weight:800; font-size:.8rem; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.second-photo { margin-top:14px; border-radius:20px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.12); }
.second-photo img { width:100%; display:block; }
.moena-text p { font-size:1rem; line-height:1.85; color:#444; margin-bottom:1.2rem; }
.food-cards { margin-top:2rem; display:flex; flex-direction:column; gap:14px; }
.food-card { display:flex; align-items:center; gap:1.2rem; background:white; border-radius:16px; padding:1.2rem 1.5rem; box-shadow:0 2px 10px rgba(0,0,0,.07); transition:transform .2s; }
.food-card:hover { transform:translateX(6px); }
.food-img { width:70px; height:70px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.food-emoji { font-size:2.2rem; flex-shrink:0; }
.food-card strong { display:block; font-weight:800; font-size:.95rem; margin-bottom:.2rem; }
.food-card span { font-size:.8rem; color:var(--mid); line-height:1.5; }

/* ========================================
   LOPP
======================================== */
.races-section { background:var(--sand); }
.race-list { margin-top:2rem; }
.race-row { display:flex; align-items:center; gap:2rem; padding:1.4rem 0; border-bottom:2px dashed #e8ddd0; }
.race-row:last-child { border-bottom:none; }
.race-year { font-family:'Fredoka One',cursive; font-size:1.3rem; color:var(--sky); min-width:60px; }
.race-info strong { display:block; font-size:1rem; font-weight:800; }
.race-info span { font-size:.82rem; color:var(--mid); }
.race-chip { margin-left:auto; font-size:.72rem; font-weight:800; padding:.35rem 1rem; border-radius:20px; white-space:nowrap; }
.chip-done   { background:#e8f5e9; color:#2a7a2a; }
.chip-target { background:#fff3cd; color:#8a6c00; border:2px solid var(--sun); }
.chip-camp   { background:#e3f2fd; color:#1565c0; }

/* ========================================
   INSTAGRAM
======================================== */
.ig-section { background:linear-gradient(135deg,#f9a825 0%,#e84b3a 50%,#c2185b 100%); text-align:center; padding:6rem 8vw; }
.ig-section h2 { font-family:'Fredoka One',cursive; font-size:clamp(2.5rem,5vw,4rem); color:white; margin-bottom:1rem; }
.ig-section p { color:rgba(255,255,255,.85); font-size:1.05rem; max-width:480px; margin:0 auto 2.5rem; line-height:1.7; }
.ig-btn { display:inline-flex; align-items:center; gap:.8rem; background:white; color:#c2185b; font-weight:800; font-size:.9rem; text-decoration:none; padding:1rem 2.5rem; border-radius:50px; box-shadow:0 6px 20px rgba(0,0,0,.2); transition:all .2s; }
.ig-btn:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.25); }

/* ========================================
   FOOTER
======================================== */
footer { background:#2a2a2a; color:white; padding:2.5rem 8vw; display:flex; justify-content:space-between; align-items:center; }
.footer-logo { font-family:'Fredoka One',cursive; font-size:1.6rem; color:var(--sun); }
.footer-copy { font-size:.8rem; color:rgba(255,255,255,.4); }

/* ========================================
   RESPONSIV (MOBIL)
======================================== */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .hero-right{height:60vw;}
  .hero-right::after{background:linear-gradient(to bottom,var(--cream) 0%,transparent 30%);}
  .about-grid,.moena-grid,.kultur-grid{grid-template-columns:1fr;gap:2rem;}
  .sports-grid{grid-template-columns:1fr 1fr;}
  .masonry{columns:2;}
  nav .nav-links{display:none;}
}
@media(max-width:600px){
  .masonry{columns:1;}
  .sports-grid{grid-template-columns:1fr;}
}