/* Sanni18 preview — full-width + responsive layer on top of the design (theme.css) */
html,body{margin:0;background:#0F0D0E}
body{overflow-x:hidden}
.s18{width:100%;min-height:100vh}
.s18 img,.s18 video,.s18 iframe{max-width:100%}
.nav-burger{display:none}

/* ---------- Home hero: always fits the screen, nav to bottom border ---------- */
.hero-home{
  --hh:clamp(520px,calc(100vh - 100px),940px);
  height:var(--hh)!important}
@supports (height:100svh){.hero-home{--hh:clamp(520px,calc(100svh - 100px),940px)}}
.hero-home .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr)!important;padding:0 clamp(12px,2vw,40px) calc(var(--hh)*.06 + 22px)!important}
.hero-home video.fig-drum,.hero-home video.fig-dance{height:min(500px,calc(var(--hh) - 120px))!important;width:calc(min(500px,calc(var(--hh) - 120px))*.75)!important;max-width:100%}
.hero-home .hero-mask{height:min(340px,calc(var(--hh)*.33))!important}
.hero-home .hero-head img{width:min(600px,100%,calc(var(--hh)*.7))!important}
.hero-home .kicker{margin-top:calc(var(--hh)*.012 + 6px)!important}
.hero-home .hero-grid > div > div{margin-top:calc(var(--hh)*.015 + 8px)!important}

/* ---------- wide screens: keep content readable, backgrounds stay edge to edge ---------- */
@media (min-width:1700px){
  body[data-layout=desktop] .s18 section[style*="padding: 100px 96px"],
  body[data-layout=desktop] .s18 section[style*="padding: 90px 96px"],
  body[data-layout=desktop] .s18 section[style*="padding: 110px 96px"],
  body[data-layout=desktop] .s18 section[style*="padding: 70px 96px"],
  body[data-layout=desktop] .s18 section[style*="padding: 100px 96px 110px"]{padding-left:calc((100% - 1560px)/2)!important;padding-right:calc((100% - 1560px)/2)!important}
}

/* ---------- phones: desktop-only pages (YAKA, Functions, Book) reflow into one column ---------- */
@media (max-width:759px){
  body[data-layout=desktop] .s18 .nav{height:68px;padding:0 14px;gap:10px}
  body[data-layout=desktop] .s18 .nav img{height:44px!important}
  body[data-layout=desktop] .s18 .nav-links{display:none}
  body[data-layout=desktop] .s18 .nav .btn{min-height:38px;padding:0 12px;font-size:11px;margin-left:auto}
  body[data-layout=desktop] .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(212,175,55,.55);background:transparent;color:#D4AF37;font-size:20px;cursor:pointer}

  body[data-layout=desktop] .s18 [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  body[data-layout=desktop] .s18 [style*="grid-column"]{grid-column:auto!important}
  body[data-layout=desktop] .s18 section,
  body[data-layout=desktop] .s18 section > div,
  body[data-layout=desktop] .s18 footer > div{padding-left:18px!important;padding-right:18px!important}
  body[data-layout=desktop] .s18 section[style*="padding: 1"],
  body[data-layout=desktop] .s18 section[style*="padding: 9"],
  body[data-layout=desktop] .s18 section[style*="padding: 7"],
  body[data-layout=desktop] .s18 section > div[style*="padding: 6"],
  body[data-layout=desktop] .s18 section > div[style*="padding: 9"]{padding-top:56px!important;padding-bottom:60px!important}
  body[data-layout=desktop] .s18 section.timber > div{padding-left:14px!important;padding-right:14px!important}
  /* fixed-height heroes/strips grow with their content */
  body[data-layout=desktop] .s18 > section[style*="flex: none; height"]{height:auto!important}
  body[data-layout=desktop] .s18 > section > div[style*="height: 100%"]{height:auto!important;min-height:480px;padding-top:56px!important;padding-bottom:64px!important;flex-direction:column!important;gap:18px!important}
  body[data-layout=desktop] .s18 [style*="width: 900px"]{width:100%!important}
  body[data-layout=desktop] .s18 .ola[style*="padding: 56px"]{padding:30px 18px!important}
  body[data-layout=desktop] .s18 [style*="display: flex; gap: 14px"]{flex-wrap:wrap;justify-content:center}
  body[data-layout=desktop] .s18 [style*="justify-content: space-between"]{flex-wrap:wrap;gap:14px}
  /* decoration that only works on wide screens */
  body[data-layout=desktop] .s18 img[alt=""][style*="position: absolute"],
  body[data-layout=desktop] .s18 img[alt=""][style*="height: 520px"],
  body[data-layout=desktop] .s18 video[style*="position: absolute"].fig-drum,
  body[data-layout=desktop] .s18 video[style*="position: absolute"].fig-dance{display:none!important}
  body[data-layout=desktop] .s18 video.fig-drum,body[data-layout=desktop] .s18 video.fig-dance{height:220px!important;width:165px!important}
  body[data-layout=desktop] .s18 video.fig-dance:not([style*="position: absolute"]){display:none}
  body[data-layout=desktop] .s18 img[style*="height: 320px"],body[data-layout=desktop] .s18 img[style*="height: 240px"]{height:170px!important}
  body[data-layout=desktop] .s18 h1 img,body[data-layout=desktop] .s18 h2 img{max-width:88vw}
  body[data-layout=desktop] .s18 .body-l{font-size:16px}
  /* YAKA photo pair */
  body[data-layout=desktop] .s18 div[style*="height: 560px"]{height:420px!important}
  body[data-layout=desktop] .s18 img[style*="width: 360px; height: 520px"]{width:68%!important;height:380px!important}
  body[data-layout=desktop] .s18 img[style*="width: 280px; height: 300px"]{width:52%!important;height:210px!important}
  /* tea-bar trio stays three across */
  body[data-layout=desktop] .s18 [style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body[data-layout=desktop] .s18 [style*="grid-template-columns: 1fr 1fr 1fr"] img{height:140px!important}
  /* gallery two across */
  body[data-layout=desktop] .s18 [style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-layout=desktop] .s18 [style*="grid-template-columns: repeat(4"] img{height:160px!important}
  body[data-layout=desktop] .s18 img.arch[style*="height: 360px"]{height:300px!important}
  body[data-layout=desktop] .s18 .panel[style*="padding: 26px 28px"]{padding:18px!important;gap:14px!important}
  body[data-layout=desktop] .s18 .panel .medal{width:64px;height:64px}
  body[data-layout=desktop] .s18 .panel .medal img{width:32px;height:32px}
  body[data-layout=desktop] .s18 footer > div{flex-direction:column;gap:12px;text-align:center}
  body[data-layout=desktop] .s18 .map-frame,body[data-layout=desktop] .s18 .map-frame iframe{min-height:280px!important}
}
@media (max-width:759px){
  body[data-layout=desktop] .s18 .corners::before,body[data-layout=desktop] .s18 .corners::after{width:46px;height:46px}
  body[data-layout=desktop] .s18 .ola.corners[style*="padding: 56px"]{padding-top:48px!important}
}
/* headline plate: keep it centred in the hero column */
.hero-home .hero-head{width:100%;display:flex;justify-content:center}
.hero-home .hero-head img{margin:0 auto}