/* Home page only. Shared components (facts, tile, xrow, map, steps) are in assets/css/site.css. */

/* hero: one full-bleed evening plate, then a dark caption bar (h1 + three facts) */
.hero__plate{ height:clamp(400px, min(calc(100svh - var(--hdr) - 200px), 62vw), 820px) }
.hero__cap{ padding-block:var(--s-6) var(--s-7); align-items:end; row-gap:var(--s-5) }
.hero__h{ grid-column:1/7; max-width:15em; text-wrap:balance }
.hero__facts{ --cols:3; grid-column:7/-1 }
.hero__facts>div{ padding-top:0; border-top:0 }
.hero__facts dd{ font-weight:var(--w-body) }
@media (max-width:1023px){
  .hero__h,.hero__facts{ grid-column:1/-1 }
}
@media (max-width:767px){
  .hero__plate{ height:min(54svh, 480px) }
  .hero__cap{ padding-block:var(--s-5) var(--s-6) }
  .hero__facts{ --cols:1; row-gap:0 }
  .hero__facts>div{ display:grid; grid-template-columns:5.5em minmax(0,1fr); column-gap:var(--s-4); padding-block:var(--s-3); border-top:1px solid var(--line) }
  .hero__facts>div:last-child{ border-bottom:1px solid var(--line) }
  .hero__facts dt{ padding-top:2px }
  .hero__facts dd{ margin-top:0 }
  html[lang=en] .hero__facts>div{ grid-template-columns:7.5em minmax(0,1fr) }
}

/* rooms: the hall leads (8 columns, full height), band and upright stacked beside it */
.rooms{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); row-gap:var(--s-7) }
.rooms__hall{ grid-column:1/9; grid-row:1/3; display:flex; flex-direction:column }
.rooms__hall .ph{ flex:1 1 0; height:auto; min-height:400px }
.rooms__hall .ph img{ position:absolute; inset:0 }
.rooms__side{ grid-column:9/-1 }
.rooms+.xrow{ margin-top:var(--s-8) }
@media (max-width:1023px){
  .rooms{ grid-template-columns:minmax(0,1fr); row-gap:0 }
  .rooms__hall,.rooms__side{ grid-column:1/-1; grid-row:auto }
  .rooms__hall{ margin-bottom:var(--s-6) }
  .rooms__hall .ph{ flex:none; aspect-ratio:4/3; min-height:0 }
  .rooms__hall .ph img{ position:static }
  .rooms+.xrow{ margin-top:0 }
}

/* location teaser: address and the three steps beside the static map (portrait on phones) */
.loc{ row-gap:var(--s-6); align-items:start }
.loc__text{ grid-column:1/5 }
.loc__map{ grid-column:5/-1 }
.loc__addr{ margin-top:var(--s-5); font-weight:var(--w-mid) }
.loc__copy{ display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--s-3); margin-top:-4px; font-size:var(--t-s); color:var(--fg-2) }
.loc__copy .copy{ margin-left:-4px }
.loc__copy span+.copy{ margin-left:0 }
.loc__steps{ margin-block:var(--s-4) }
/* 1024–1279: beside the text the map would shrink to ~600 px and its labels to ~9 px; it takes the full width under it */
@media (max-width:1279px){
  .loc__text{ grid-column:1/8 }
  .loc__map{ grid-column:1/-1 }
}
@media (max-width:1023px){
  .loc__text{ grid-column:1/-1 }
}
@media (max-width:767px){
  .loc__map{ margin-inline:calc(var(--m) * -1) }
}