:root{--bg:#f5efe9;--card:rgba(255,255,255,.45);--text:#2d2b2a;--accent:#7b3f32}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,sans-serif;background:linear-gradient(#f7f2ed,#efe5da);color:var(--text)}
h1,h2,h3,.logo{font-family:"Cormorant Garamond",serif}h1{font-size:4rem}h2{font-size:2.2rem}
.nav{position:fixed;top:0;width:100%;display:flex;justify-content:space-between;padding:16px 8%;z-index:10}.links a{text-decoration:none;color:#222;margin-left:22px}
.glass{backdrop-filter:blur(12px);background:var(--card);border:1px solid rgba(255,255,255,.5)}
.hero{height:100vh;background:url("assets/hero.png?v=6") center/cover;display:flex;align-items:center}.overlay{margin-left:8%;padding:3rem;border-radius:24px;max-width:600px}
.container{max-width:1180px;margin:auto;padding:5rem 1.5rem}.grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.card{padding:2rem;border-radius:24px;box-shadow:0 15px 40px rgba(0,0,0,.08);transition:.35s}.card:hover{transform:translateY(-6px)}
.instructor{display:grid;grid-template-columns:320px 1fr;gap:2rem;align-items:center}.instructor img{width:100%;border-radius:22px}
.btn{display:inline-block;margin:.5rem .5rem 0 0;padding:1rem 1.6rem;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;transition:.3s}.secondary{background:#fff;color:#333}.btn:hover{transform:scale(1.05)}
.reveal{opacity:0;transform:translateY(40px);transition:1s}.reveal.show{opacity:1;transform:none}
footer{background:#251b18;color:#eee;text-align:center;padding:4rem}.social{opacity:.8;margin-top:1rem}
@media(max-width:800px){h1{font-size:2.8rem}.grid,.instructor{grid-template-columns:1fr}.nav{padding:12px 5%}.links{display:none}.hero{height:75vh}.overlay{margin:1rem}}

.hero img{object-position:center 35%;}
#tango-video iframe{box-shadow:0 10px 30px rgba(0,0,0,.2)}

.hero{background-position:center center}.overlay{background:rgba(255,255,255,.38)}img{max-width:100%;height:auto}
.instructor img{max-width:320px;border-radius:20px}.instructor{display:grid;grid-template-columns:320px 1fr;gap:2rem;align-items:center}.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}.btn{display:inline-block;padding:.8rem 1.2rem;background:#7b3f32;color:#fff;text-decoration:none;border-radius:999px;margin-right:.5rem}.secondary{background:transparent;border:1px solid #7b3f32;color:#7b3f32}footer{padding:3rem;text-align:center}@media(max-width:800px){.grid,.instructor{grid-template-columns:1fr}h1{font-size:2.8rem}.links{display:none}}
.reveal{opacity:0;transform:translateY(30px);transition:.6s}.show{opacity:1;transform:none}


/* Idebank large readable images */
.idebank{
 max-width:900px;
 margin:2rem auto;
 display:flex;
 flex-direction:column;
 gap:3rem;
}
.idebank img{
 width:100%;
 height:auto;
 display:block;
 border-radius:12px;
 box-shadow:0 10px 24px rgba(0,0,0,.15);
}

.hero,.hero-v4{min-height:90vh;background-position:70% center!important}.hero .hero-content,.hero-v4 .hero-content{max-width:420px;padding:2.2rem;margin-left:4.5rem;background:rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.45);border-radius:28px;box-shadow:0 20px 45px rgba(0,0,0,.18)}.hero h1,.hero-v4 h1{font-size:clamp(3rem,5vw,4.4rem)}@media(max-width:768px){.hero .hero-content,.hero-v4 .hero-content{margin:1rem;max-width:none;padding:1.5rem}.hero,.hero-v4{min-height:75vh;background-position:75% center!important}}


/* Tango Sørlandet v5 – mobile hero, softer wording and calendar */
.instructor .role{
  margin-top:-1.2rem;
  font-family:"Cormorant Garamond",serif;
  font-size:1.45rem;
  color:var(--accent);
}
@media(max-width:768px){
  .hero,.hero-v4{
    min-height:52vh;
    height:52vh;
    background-position:68% center!important;
  }
  .overlay{
    margin:0 1rem;
    width:calc(100% - 2rem);
    max-width:none;
    padding:1.35rem 1.25rem;
    border-radius:22px;
  }
  .hero h1,.hero-v4 h1{
    font-size:clamp(2.45rem,10vw,3.1rem);
    margin:.2rem 0 .8rem;
    line-height:1;
  }
  .hero p{
    margin:.7rem 0 1rem;
    font-size:.95rem;
    line-height:1.45;
  }
  .hero .btn{
    padding:.7rem 1rem;
    font-size:.9rem;
  }
  .calendar-wrap{
    border-radius:16px;
    margin-top:1.25rem;
  }
  .calendar-wrap iframe{
    height:650px;
  }
}

/* Tango kan skje hvor som helst */
.tango-places {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}
.tango-places span {
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: .92rem;
}
#tango-overalt h3 {
  margin-top: -.35rem;
}
#tango-overalt blockquote {
  margin: 1.4rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid rgba(150,70,55,.75);
}
@media (max-width: 700px) {
  .tango-places {
    gap: .45rem;
  }
  .tango-places span {
    font-size: .84rem;
    padding: .45rem .65rem;
  }
}


/* Tango Sørlandet v7 – mobile hero without the glass box */
@media (max-width: 768px) {
  .hero .overlay,
  .hero-v4 .overlay {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 1rem !important;
    padding: 1rem 0 !important;
    width: auto !important;
  }

  .hero .overlay h1,
  .hero .overlay p,
  .hero .overlay .btn {
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
  }

  .hero .overlay .btn {
    text-shadow: none;
  }
}

/* Argentine Tango Radio player */
.radio-player {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(123,63,50,.25);
}

.radio-player h3 {
  margin: 0 0 .25rem;
  font-size: 1.35rem;
}

.radio-player p {
  margin: 0 0 .75rem;
}

.radio-player iframe {
  display: block;
  width: 120px;
  height: 75px;
  border: 0;
}

.radio-player audio {
  display: block;
  width: min(100%, 420px);
  height: 42px;
}


/* v8 – mobil hero: image first, text below */
@media (max-width: 768px) {
  .hero, .hero-v4 {
    display: block;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 66.64vw;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-color: var(--bg);
  }

  .hero .overlay, .hero-v4 .overlay {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1.6rem 1.25rem 1.8rem !important;
    border-radius: 0 !important;
    background: rgba(247,242,237,.96) !important;
    border: 0 !important;
    border-top: 1px solid rgba(123,63,50,.12) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-align: center;
  }

  .hero .overlay h1, .hero-v4 .overlay h1 {
    font-size: clamp(2.45rem, 10vw, 3.1rem) !important;
    line-height: 1;
    margin: 0 0 .75rem;
    color: var(--text);
    text-shadow: none !important;
  }

  .hero .overlay p, .hero-v4 .overlay p {
    max-width: 34rem;
    margin: 0 auto 1.15rem;
    font-size: .96rem;
    line-height: 1.5;
    color: var(--text);
    text-shadow: none !important;
  }

  .hero .overlay .btn, .hero-v4 .overlay .btn {
    margin: .2rem .2rem 0;
    padding: .7rem 1rem;
    font-size: .9rem;
    white-space: nowrap;
  }
}


/* Tango clubs */
.club-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.club-item {
  padding: 1.35rem;
  border: 1px solid rgba(123,63,50,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.28);
}

.club-item h3 {
  margin-top: 0;
  margin-bottom: .45rem;
}

.club-item p {
  margin-bottom: .9rem;
}

.club-link {
  font-weight: 600;
  text-decoration: none;
}

.club-link:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .club-grid {
    grid-template-columns: 1fr;
  }
}


/* Tango i utelivet – demo */
.tango-outreach {
  padding-top: 1rem;
  padding-bottom: 5rem;
}
.tango-outreach-card {
  padding: 2.2rem;
  border-radius: 26px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: 2.5rem;
  align-items: center;
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
}
.tango-outreach-copy .eyebrow {
  margin: 0 0 .55rem;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.tango-outreach-copy h2 {
  margin: 0 0 1rem;
  line-height: 1.08;
}
.tango-outreach-copy .lead {
  font-size: 1.12rem;
  line-height: 1.55;
}
.outreach-points {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.25rem 0;
}
.outreach-points span {
  padding: .5rem .75rem;
  border-radius: 999px;
  background: rgba(123,63,50,.10);
  color: var(--accent);
  font-size: .88rem;
  font-weight: 600;
}
.outreach-cta {
  margin-bottom: 0;
}
.tango-outreach-video video {
  display: block;
  width: 100%;
  max-height: 720px;
  object-fit: contain;
  border-radius: 18px;
  background: #0a0b0d;
  box-shadow: 0 12px 32px rgba(0,0,0,.20);
}
.video-caption {
  margin: .8rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
}
.video-source {
  margin: .45rem 0 0;
  font-size: .72rem;
  line-height: 1.4;
  opacity: .58;
}
@media (max-width: 800px) {
  .tango-outreach {
    padding-top: .25rem;
    padding-bottom: 3.5rem;
  }
  .tango-outreach-card {
    grid-template-columns: 1fr;
    padding: 1.35rem;
    gap: 1.5rem;
    border-radius: 20px;
  }
  .tango-outreach-copy h2 {
    font-size: 2rem;
  }
  .tango-outreach-copy .lead {
    font-size: 1.02rem;
  }
  .tango-outreach-video video {
    border-radius: 12px;
  }
}