/* Shambhala page CSS (built on the Turia kit): only what the kit lacks (type moment, compositions, contact buttons, age gate) */
html[data-type="place"] { --r-lg: 0; --r-md: 0; --r-sm: 2px; --r-btn: 2px; --t-h2: clamp(24px, .762vw + 21px, 32px); }

/* the one type moment: the street set large, linked to the map */
.type-moment { margin: 0 0 var(--s-7); font: var(--display-weight) clamp(44px, 6.4vw, 96px)/1.02 var(--font-display); letter-spacing: -0.03em; }
.type-moment a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s cubic-bezier(.2,.7,.2,1); text-decoration: none; }
.type-moment a:hover { background-size: 100% 1px; }

/* visit split: the panel on the surface, the photograph 4:3 */
.visit-split { align-items: stretch; }
.visit--card .visit__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-row { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.contact-row .btn { gap: var(--s-2); }
.contact-row .btn img { width: 20px; height: 20px; flex: none; }
.ph { margin: 0; overflow: hidden; display: block; background: var(--surface); }
.ph > img, .ph > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
a.ph:hover > img { transform: scale(1.03); }
.ph--43 { aspect-ratio: 4 / 3; } .ph--11 { aspect-ratio: 1; } .ph--45 { aspect-ratio: 4 / 5; }

/* membership: two ruled groups, then the detail strip */
.group-label { margin: 0 0 var(--s-4); }
.rows--steps { counter-reset: step; padding: 0; margin: 0; list-style: none; }
.rows--steps > li { counter-increment: step; }
.rows--steps .rows__name::before { content: counter(step) "  "; color: var(--muted); font-variant-numeric: tabular-nums; white-space: pre; }
.rows { padding: 0; margin: 0; list-style: none; }
.rows .rows__name { font-size: 18px; line-height: 26px; }
.rows .rows__name small { display: block; font-size: 16px; line-height: 24px; color: var(--muted); font-weight: 400; }
.strip { margin-top: var(--s-7); }

/* the room: text beside one tall photograph */
.story__text { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); }
.story__text p.t-lead { max-width: 34ch; }

/* footer extras */
.footer__address a { text-decoration: none; }
.footer__address a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.footer__note { font-size: 14px; line-height: 20px; color: var(--muted); max-width: 52ch; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; font-size: 14px; }
.footer__nav a { text-decoration: none; }

/* age gate: shown until the visitor confirms 21+; remembered in this browser */
.agegate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s-5); background: var(--p-ink); color: var(--p-inv-ink); }
.age-ok .agegate { display: none; }
.agegate__box { max-width: 520px; display: grid; gap: var(--s-5); justify-items: start;
  --bg: var(--p-ink); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); --action: var(--p-inv-action); --action-ink: var(--p-inv-action-ink); --line: color-mix(in oklab, var(--p-inv-ink) 20%, transparent); --line-strong: color-mix(in oklab, var(--p-inv-ink) 40%, transparent); }
.agegate h2 { margin: 0; font: var(--display-weight) clamp(32px, 4vw, 48px)/1.08 var(--font-display); letter-spacing: -0.02em; }
.agegate p { margin: 0; font-size: 18px; line-height: 28px; color: var(--p-inv-muted); }
.agegate .mark { color: var(--p-inv-ink); }
html:not(.age-ok) body { overflow: hidden; }

@media (max-width: 1023px) {
  .visit-split > * { grid-column: 1 / -1; }
  .story > * { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .contact-row .btn { width: 100%; justify-content: center; }
  .strip > .ph { grid-column: auto / span 6; }
  .type-moment { font-size: clamp(36px, 11vw, 48px); }
  .agegate .btn { width: 100%; }
}

/* legal sub-pages */
.legal { padding-top: calc(var(--nav) + var(--s-9)); padding-bottom: var(--s-9); }
.legal h1 { font: var(--display-weight) clamp(36px, 4vw, 48px)/1.1 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--s-7); }
.legal h2 { margin: var(--s-7) 0 var(--s-3); }
.legal p, .legal li { max-width: 68ch; font-size: 16px; line-height: 26px; }

/* fixes after the first look */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; padding: var(--s-2) var(--s-3); background: var(--bg); z-index: 20; }
.visit--card .visit__cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.visit .hours { grid-template-columns: 1fr; gap: 0; }
.visit .hours dd { font-size: 20px; line-height: 30px; white-space: nowrap; }
.btn-contact { display: inline-flex; align-items: center; gap: var(--s-2); height: 48px; padding: 0 var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--ink); background: var(--bg); font-weight: 500; font-size: 16px; text-decoration: none; transition: transform .15s, border-color .2s, background-color .2s; }
.btn-contact:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-contact:active { transform: translateY(1px); }
.btn-contact img, .btn-contact svg { width: 20px; height: 20px; flex: none; }
#socios .rows > li { padding-block: var(--s-3); }
#socios .strip { margin-top: var(--s-6); }
@media (max-width: 639px) { .btn-contact { width: 100%; justify-content: center; } }
@media (max-width: 639px) {
  .visit--card .visit__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) { .hero--place { --photo: min(600px, 64svh); } }
.inline-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.inline-link:hover { text-decoration-color: currentColor; }
.nav__logo img.nav__emblem { height: 44px; width: auto; margin-right: var(--s-3); }
.agegate__logo { width: 160px; height: auto; background: #fff; border-radius: 999px; padding: 14px; box-sizing: content-box; }
@media (max-width: 639px) { .nav__emblem { height: 36px; margin-right: var(--s-2); } }

/* ---------- responsive pass ---------- */
/* under 1280: sections take their content's height, no forced full screens with empty ground */
@media (max-width: 1279px) {
  main > :is(section, .section):not(.hero), footer.closing { height: auto !important; min-height: 0 !important; display: block; }
  main > :is(section, .section):not(.hero) > .wrap, footer.closing > .wrap { height: auto !important; }
  footer.closing > .wrap { grid-template-rows: auto auto !important; row-gap: var(--s-9) !important; }
  main > section:not(.hero) { padding-top: var(--s-9); padding-bottom: var(--s-9); }
  /* visit: panel full width, photo under it */
  .visit-split > * { grid-column: 1 / -1 !important; }
  .visit-split .ph--43 { aspect-ratio: 16 / 9; margin-top: var(--s-5); }
  .visit--card .visit__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* the room: text first, photo landscape */
  .story > * { grid-column: 1 / -1 !important; }
  .story .ph--45 { aspect-ratio: 3 / 2; order: 2; margin-top: var(--s-6); }
  .story__text { order: 1; gap: var(--s-4); }
  /* nav tighter */
  .nav__emblem { height: 36px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__link { padding-inline: 10px; font-size: 14px; }
  .nav--split .nav__logo { font-size: 22px; }
  .nav__actions .btn { padding-inline: 16px; font-size: 15px; }
}
/* tablet: the detail strip stays one row of four */
@media (min-width: 640px) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .strip > .ph { grid-column: auto !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .visit-split { display: block; }
  #socios .grid--top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #socios .grid--top > * { grid-column: auto !important; }
  .section-head--split { flex-wrap: wrap; gap: var(--s-5); }
}
/* phone */
@media (max-width: 639px) {
  header.nav .nav__bar > .nav__actions { display: none !important; }
  header.nav .nav__toggle { margin-left: auto; }
  main > section:not(.hero) { padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .visit--card { padding: var(--s-5); background: var(--p-surface); }
  .visit--card .visit__cols { grid-template-columns: minmax(0, 1fr); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--s-3); }
  .strip > .ph { grid-column: auto !important; }
  .section-head--split { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-5); }
  .section-head--split .btn { width: 100%; justify-content: center; }
  .story .ph--45 { aspect-ratio: 4 / 5; }
  footer.closing { padding-top: var(--s-9); }
  .footer__legal { gap: var(--s-3); }
}
/* group headings in the membership block: readable, in the display face */
#socios .group-label { margin: 0 0 var(--s-5); font: var(--display-weight) 26px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-strong); }
@media (max-width: 639px) { #socios .group-label { font-size: 22px; } }

/* ---------- responsive pass 2 ---------- */
/* desktop: a section is at least one screen, but grows when its content is taller (short laptops, 1366x768) */
@media (min-width: 1280px) {
  main > :is(section, .section):not(.hero), footer.closing { height: auto !important; min-height: 100vh; min-height: 100svh; }
  main > :is(section, .section):not(.hero) > .wrap, footer.closing > .wrap { height: auto !important; min-height: calc(100svh - var(--padt) - var(--padb)); }
  #sala .story { align-items: stretch; }
}
/* the hero never cuts its words: on short or landscape screens it grows */
.hero--place { height: auto !important; min-height: 0; padding-bottom: var(--s-8); }
@media (max-height: 500px) and (orientation: landscape) {
  .hero--place { --photo: 56vh; }
}
/* very narrow phones (320) */
@media (max-width: 359px) {
  .btn--xl, .btn { white-space: normal; text-align: center; height: auto; min-height: 48px; padding-block: 10px; }
  .type-moment { font-size: 34px; }
  #socios .group-label { font-size: 20px; }
}
/* the hero fills the first screen on desktops tall enough for it (no next heading peeking in) */
@media (min-width: 1024px) and (min-height: 700px) {
  main > section.hero--place { min-height: 100vh !important; min-height: 100svh !important; }
}
.closing__cta h2 { max-width: 28ch; }
@media (min-width: 1024px) and (max-height: 820px) { .hero--place { --photo: 50svh; } }
/* the room: amenities list between the text and the link */
.story__text { justify-content: flex-start; }
.story__text > .link { margin-top: auto; }
.rows--amenities > li { padding-block: var(--s-3); }
@media (max-width: 1279px) { .story__text > .link { margin-top: 0; } }

/* ================= Shambhala skin: dark lounge, wicker gold, soft corners ================= */
:root[data-type="place"][data-radius] { --r-lg: 18px; --r-md: 12px; --r-sm: 8px; --r-btn: 999px; }
.btn { border-radius: 999px; }
body { background: var(--p-bg); }
.nav__mark { width: 30px; height: 30px; margin-right: var(--s-3); color: var(--p-action); flex: none; }
.nav__logo { display: inline-flex; align-items: center; letter-spacing: .01em; }
@media (max-width: 639px) { .nav__mark { width: 26px; height: 26px; margin-right: var(--s-2); } }
.ph { border-radius: var(--r-lg); }
.hero h1 { font-style: italic; font-weight: 350; }
.type-moment { font-style: italic; font-weight: 300; color: var(--p-action); }
.type-moment a { color: inherit; }
#socios .group-label { font-style: italic; }
.rows--steps .rows__name::before { color: var(--p-action); }
.btn-contact { border-radius: 999px; background: transparent; }
.btn-contact:hover { border-color: var(--p-action); }
.btn-contact img { filter: none; }
.visit--card { border-radius: var(--r-lg); }
.badge-row { margin-top: var(--s-5); }
.cannasys-badge { display: inline-block; line-height: 0; border-radius: 10px; transition: transform .15s, opacity .2s; }
.cannasys-badge:hover { transform: translateY(-1px); opacity: .9; }
.cannasys-badge img { width: 200px; height: 48px; }
/* the age gate on the dark ground, gold mark on top */
.agegate { background: var(--p-bg); color: var(--p-ink); }
.agegate__box { --bg: var(--p-bg); --ink: var(--p-ink); --muted: var(--p-muted); --action: var(--p-action); --action-ink: var(--p-action-ink);
  --line: color-mix(in oklab, var(--p-ink) 18%, transparent); --line-strong: color-mix(in oklab, var(--p-ink) 36%, transparent); }
.agegate p { color: var(--p-muted); }
.agegate h2 { font-style: italic; font-weight: 350; }
.agegate__mark { width: 64px; height: 64px; color: var(--p-action); }

/* club logo */
.nav__logo img.nav__emblem { height: 44px; width: auto; margin-right: var(--s-3); }
@media (max-width: 1279px) { .nav__logo img.nav__emblem { height: 38px; } }
@media (max-width: 639px) { .nav__logo img.nav__emblem { height: 34px; margin-right: var(--s-2); } }
.agegate__logo { width: 180px; height: auto; background: none; padding: 0; border-radius: 0; }
@media (max-width: 639px) { .agegate__logo { width: 140px; } }

/* buttons: always the text face, one line on the narrowest phones */
.btn { font-family: var(--font-text); white-space: nowrap; }
@media (max-width: 379px) { .btn { font-size: 14px; padding-inline: 18px; gap: 6px; } }