/* Hotel sites — hand-written, no framework. Brand colours come from the site's env (--brand, --accent). */
:root {
  --ink: #0f1222; --ink-2: #2e3245; --muted: #5d6273; --navy: #0f1430; --line: #e8e8ec; --bg: #fff; --card: #fff;
  --soft: #f5f6f8; --ok: #0f9f5a; --bad: #d92d20; --score: #0f9f5a; --mint: #d9f7e8;
  --brand-ink: color-mix(in srgb, var(--brand) 62%, #000);
  --r: 24px; --r-sm: 14px; --shadow: 0 2px 4px rgba(18,18,18,.04), 0 12px 32px rgba(18,18,18,.08);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
  color-scheme: only light;
}
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px }
body { margin: 0; overflow-x: hidden; font: 16px/1.6 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px }
a:hover { color: var(--brand-ink) }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.025em }
h1 { font: 600 clamp(1.8rem, 3.6vw, 2.7rem)/1.08 var(--display) }
h2 { font: 600 clamp(1.35rem, 2.4vw, 1.75rem)/1.15 var(--display) }
h3 { font-size: 1rem; font-weight: 600 }
p { margin: 0 0 1em }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none }
.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto }
.page { padding: 1.5rem 0 3rem }
.narrow { max-width: 680px }
.center { text-align: center }
.muted { color: var(--muted) }
.small { font-size: .85rem }
.lead { font-size: 1.1rem; color: var(--ink-2) }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip:focus { position: fixed; top: .5rem; left: .5rem; z-index: 99; background: #fff; padding: .5rem 1rem; border-radius: 8px }
.hp { position: absolute; left: -9999px }

/* buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .65em 1.15em; border-radius: 999px; border: 1px solid transparent; font: 600 .95rem/1.2 var(--font); cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s, transform .05s; white-space: nowrap }
.btn:active { transform: translateY(1px) }
.btn-primary { background: var(--ink); color: #fff }
.btn-primary:hover { color: #fff; background: #1f2440; box-shadow: 0 8px 22px rgba(18,18,18,.22) }
.btn-brand { background: var(--brand); color: #fff }
.btn-brand:hover { color: #fff; background: color-mix(in srgb, var(--brand) 90%, #000) }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink) }
.btn-ghost:hover { border-color: var(--ink-2); color: var(--ink) }
.btn-light { background: #fff; color: var(--ink) }
.btn-danger { background: #fff; border-color: #f2c4bf; color: var(--bad) }
.btn-sm { padding: .45em .9em; font-size: .875rem }
.btn-lg { padding: .85em 1.5em; font-size: 1rem }
.btn-block { width: 100% }
input, select, textarea { font: inherit; color: inherit; width: 100%; padding: .7em .85em; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; transition: border-color .15s, box-shadow .15s }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent) }
label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 500; color: var(--ink-2) }
.err { color: var(--bad); font-weight: 500 }
.err-box { background: #fef3f2; color: var(--bad); padding: .7rem 1rem; border-radius: var(--r-sm) }
.flash { background: #ecfdf3; color: var(--ok); padding: .7rem 1rem; border-radius: var(--r-sm); font-weight: 500 }
.stack { display: grid; gap: 1rem }

/* header bar + megamenu (layout.html; ported from micapoveste.ro). From 1020px three buttons open wide panels under the
   bar; below, the nav is a drawer and each panel a group. A panel is display: none until open, so its pictures load only then. */
.bar { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow .2s }
.bar.is-scrolled, html.mega-open .bar { box-shadow: 0 4px 16px rgba(15,18,34,.06) }
.bar-in { display: flex; align-items: center; gap: 1.6rem; height: 70px }
.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; flex: none }
.logo:hover { color: inherit }
.logo svg { width: 40px; height: 24px; stroke: none }
:root { --logo: #ff6d31 }
/* the wordmark: lowercase, Outfit, charcoal (the owner's chosen logo, ~/scratchpad/brx.es/logo/v3/m7.png) */
.wm { font: 500 1.6rem/1 var(--display); letter-spacing: -.02em; text-transform: lowercase; color: #333 }
.logo-light .wm { color: #fff }
.bar-nav { flex: 1; align-self: stretch; display: flex }
.nav { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none }
.nav-item { display: flex; align-items: center }
.nav-top { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 0; background: none; color: var(--ink-2); font: 600 .95rem var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .14s }
.nav-top::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,0,0,1) }
.nav-top:hover, .nav-top[aria-expanded="true"] { color: var(--ink) }
.nav-top[aria-expanded="true"]::after, .nav-top:hover::after { transform: scaleX(1) }
.nav-chev { width: 16px; height: 16px; margin-right: -4px; transition: transform .2s }
.nav-top[aria-expanded="true"] .nav-chev { transform: rotate(180deg) }
.nav-drawer-only { display: none }
.mega { position: absolute; top: 100%; left: 0; right: 0; display: none; padding-top: 6px }
.nav-item.is-open > .mega { display: block; animation: mega-in .18s cubic-bezier(.2,0,0,1) }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px) } }
.bar::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(18,18,30,.16); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, visibility 0s linear .18s }
@media (min-width: 1021px) { html.mega-open .bar::before { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s } }
@media (min-width: 1021px) { html:not(.js) .nav-item:hover > .mega, html:not(.js) .nav-item:focus-within > .mega { display: block } }
.mega-box { display: grid; gap: 2rem; padding: 1.6rem 1.8rem 1.8rem; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 2px 4px rgba(20,20,40,.04), 0 28px 64px rgba(20,20,40,.16) }
.mtitle { margin: 0 0 .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.mega-stays { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) }
.mkinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 6px; margin: 0; padding: 0; list-style: none }
.mkind { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; text-decoration: none; transition: background .14s }
.mkind:hover, .mkind[aria-current] { background: var(--soft); color: inherit }
.mkind-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--k, var(--brand)) 13%, #fff); color: var(--k, var(--brand)); transition: background .14s, color .14s }
.mkind:hover .mkind-ico { background: var(--k, var(--brand)); color: #fff }
.mkind-ico svg { width: 21px; height: 21px; stroke-width: 1.8 }
.mkind b { display: block; font-weight: 600; line-height: 1.3 }
.mkind small { color: var(--muted); font-size: .84rem }
.mside { display: flex; flex-direction: column; gap: 2px; padding-left: 1.6rem; border-left: 1px solid var(--line) }
.marrow { display: flex; align-items: center; justify-content: space-between; padding: .45rem 0; font-weight: 600; text-decoration: none }
.marrow svg { width: 16px; height: 16px; transition: transform .16s }
.marrow:hover svg { transform: translateX(3px) }
.mowner { margin-top: auto; display: grid; gap: .15rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--ink); color: #fff; text-decoration: none }
.mowner:hover { color: #fff; background: #26262c }
.mowner span { font-size: .86rem; color: #c9c9d1 }
.mega-dest { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) }
.mthumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 14px; margin: 0; padding: 0; list-style: none }
.mthumb { display: grid; gap: 1px; text-decoration: none }
.mthumb-ph { position: relative; aspect-ratio: 16/10; margin-bottom: .45rem; border-radius: 14px; overflow: hidden; background: var(--soft) }
.mthumb-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s }
.mthumb:hover img { transform: scale(1.04) }
.mthumb b { font-weight: 600 }
.mthumb small { color: var(--muted); font-size: .84rem }
.mlist { display: grid; margin: 0 -.6rem; padding: 0; list-style: none }
.mlist a { display: flex; justify-content: space-between; padding: .38rem .6rem; border-radius: 10px; font-weight: 500; text-decoration: none }
.mlist a:hover { background: var(--soft); color: inherit }
.mlist small { color: var(--muted) }
.mega-events { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px }
.mevent { position: relative; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none }
.mevent img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s }
.mevent:hover img { transform: scale(1.04) }
.mevent::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.65)) }
.mevent span { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1; display: grid }
.mevent b { font: 600 1.3rem/1.1 var(--display); letter-spacing: -.02em }
.mevent small { opacity: .9 }
.mevent:hover { color: #fff }
.bar-tools { display: flex; align-items: center; gap: .6rem; margin-left: auto }
.hdr-search { position: relative; width: 270px }
.hdr-search > svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none }
.hdr-search input { height: 44px; padding: 0 .9em 0 2.4rem; border-radius: 999px; background: var(--soft); border-color: transparent; font-size: .92rem }
.hdr-search input:focus { background: #fff }
.bar-login { height: 44px; padding: 0 1.2rem; font-size: .92rem }
.bar-toggle { display: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer }
.bar-toggle svg { width: 20px; height: 20px }
.bar-toggle .i-close, .bar-toggle[aria-expanded="true"] .i-open { display: none }
.bar-toggle[aria-expanded="true"] .i-close { display: block }
/* from 1021px: the menu on the left, the logo in the middle, search and sign-in on the right. The logo stays centred
   while both sides fit; the grid's max-content floor keeps the sides from overlapping it. */
@media (min-width: 1021px) {
  .bar-in { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); gap: 1.5rem }
  .bar-nav { grid-column: 1; grid-row: 1; margin-left: -12px }
  .logo { grid-column: 2; grid-row: 1; justify-self: center }
  .bar-tools { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0 }
}
@media (max-width: 1240px) and (min-width: 1021px) { .hdr-search { width: 200px } .bar-in { gap: 1rem } }
@media (max-width: 1020px) {
  .bar-toggle { display: grid }
  .hdr-search, .bar-login { display: none }
  .bar-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; height: calc(100dvh - 70px); padding: 4px 1.25rem 3rem; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); background: #fff }
  html.menu-open .bar-nav { display: block }
  html.menu-open, html.menu-open body { overflow: hidden }
  .nav { flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto }
  .nav-item { display: block; border-bottom: 1px solid var(--line) }
  .nav-drawer-only { display: block }
  .nav-top { justify-content: space-between; width: 100%; height: 60px; padding: 0 4px; font: 500 1.2rem var(--display); color: var(--ink) }
  .nav-top::after { display: none }
  .nav-chev { width: 22px; height: 22px; margin-right: 0 }
  .mega { position: static; padding: 0 0 1.2rem }
  .mega .wrap { width: auto }
  .mega-box, .mega-stays, .mega-dest, .mega-events { display: flex; flex-direction: column; gap: 1.2rem; padding: 0; border: 0; border-radius: 0; box-shadow: none }
  .mkinds { grid-template-columns: 1fr 1fr; margin: 0 -8px }
  .mside { padding-left: 0; border-left: 0 }
  .mthumbs { grid-template-columns: 1fr 1fr }
  .mlist { grid-template-columns: 1fr 1fr; column-gap: .5rem }
}
@media (max-width: 520px) { .mkinds { grid-template-columns: 1fr } .wm { font-size: 1.25rem } }
@media (prefers-reduced-motion: reduce) { .nav-item.is-open > .mega { animation: none } .nav-top::after, .nav-chev, .mthumb img, .mevent img { transition: none } }

/* search suggestions (site.js, /api/suggest) */
.sug-wrap { position: relative }
.sug { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; min-width: 300px; max-height: 70vh; overflow-y: auto; margin: 0; padding: .4rem; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 2px 4px rgba(20,20,40,.04), 0 20px 48px rgba(20,20,40,.16); text-align: left }
.sug[hidden] { display: none }
.sug-h { padding: .5rem .7rem .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.sug a { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; border-radius: 12px; text-decoration: none; color: var(--ink) }
.sug a[aria-selected="true"], .sug a:hover { background: var(--soft); color: var(--ink) }
.sug-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--brand); overflow: hidden }
.sug-ico img { width: 100%; height: 100%; object-fit: cover }
.sug-ico svg { width: 19px; height: 19px; stroke-width: 1.8 }
.sug-t { min-width: 0; display: grid; line-height: 1.3 }
.sug-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sug-t b mark { background: none; color: var(--brand); font-weight: 700 }
.sug-t small { color: var(--muted); font-size: .82rem }

/* hero */
.hero { position: relative; padding: 3.5rem 0 2.5rem }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: center }
.hero-in { min-width: 0 }
/* four real places from the site, the best-rated much-visited ones: a tall photo and three around it */
.hero-pics { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 12px; height: 520px }
.hpic { position: relative; display: block; overflow: hidden; border-radius: 22px; background: var(--soft) }
.hpic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s }
.hpic:hover img { transform: scale(1.05) }
.hpic-1 { grid-row: 1 / 4 }
.hpic-2 { grid-row: 1 / 2 } .hpic-3 { grid-row: 2 / 3 } .hpic-4 { grid-row: 3 / 4 }
.hpic-card { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 6px 20px rgba(15,18,34,.16); line-height: 1.25 }
.hpic-card span { display: grid; min-width: 0 }
.hpic-card span b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hpic-card small { color: var(--muted); font-size: .8rem }
@media (max-width: 1020px) { .hero-grid { grid-template-columns: 1fr } .hero-pics { display: none } }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; margin-bottom: .6rem }
.bigsearch { display: flex; gap: .5rem; background: #fff; padding: .5rem; border-radius: 999px; box-shadow: var(--shadow); margin-top: 1.8rem }
.bigsearch.small { margin: 1.5rem auto; max-width: 520px }
.bs-field { position: relative; flex: 1; display: block }
.bs-field > svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); width: 20px; height: 20px }
.bs-field input { border: 0; padding: .85em 1em .85em 2.8rem; border-radius: 999px; font-size: 1.02rem; box-shadow: none !important }
.bs-select { display: block; border-left: 1px solid var(--line) }
.bs-select select { border: 0; height: 100%; border-radius: 0; background: transparent; box-shadow: none !important; min-width: 180px }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .85rem; text-decoration: none; font-size: .9rem; font-weight: 500 }
.chip small { color: var(--muted); margin-left: .25rem }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem .35rem .4rem; transition: border-color .15s, transform .15s }
.chip:hover { border-color: var(--k); transform: translateY(-1px); color: var(--ink) }
.chip-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--k) 14%, #fff); color: var(--k) }
.chip-ico svg { width: 16px; height: 16px }
.chip small { margin-left: 0 }
.k-hotel { --k: #2a5bff } .k-pension { --k: #e08a00 } .k-apartment { --k: #7c4dff } .k-holiday-home { --k: #0f9f6e }
.k-villa { --k: #e5484d } .k-guest-house { --k: #d6409f } .k-bnb { --k: #0891b2 } .k-hostel { --k: #ea580c } .k-camping { --k: #4d7c0f } .k-other { --k: #5d6273 }
/* a coloured band for one section, so the page has rhythm (solid, no gradient) */
.band { background: #fff5d9; margin-top: 3rem; padding: .5rem 0 3rem }

/* sections */
.section { padding: 2.75rem 0 .5rem }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem }
.sec-head h1, .sec-head h2 { margin: 0 }
.more { font-weight: 600; text-decoration: none; color: var(--brand-ink); white-space: nowrap }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(255px, 100%), 1fr)); gap: 1.25rem }

/* hotel card */
.hc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; padding: 8px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s }
.hc:hover { box-shadow: var(--shadow); transform: translateY(-3px) }
.hc-ph { position: relative; aspect-ratio: 4/3; flex: none; overflow: hidden; border-radius: calc(var(--r) - 6px); background: linear-gradient(135deg, var(--soft), #efe7dc) }
.hc-ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover }
.hc-ph.noimg::after, .dest.noimg::before, .g-item.noimg::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9bfb2' stroke-width='1.5'%3E%3Cpath d='M3 21V9.5L12 3l9 6.5V21h-6v-6H9v6z'/%3E%3C/svg%3E") center/48px no-repeat }
.hc-dist { position: absolute; left: .6rem; bottom: .6rem; background: rgba(0,0,0,.65); color: #fff; font-size: .8rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px }
.hc-body { padding: .85rem .65rem .6rem; display: grid; gap: .3rem }
.hc-top { display: flex; gap: .5rem; align-items: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600 }
.hc-stars, .h-stars { color: var(--brand); letter-spacing: .05em }
.hc-title { font: 500 1.12rem/1.25 var(--display); letter-spacing: -.015em; margin: 0 }
.hc-title a { text-decoration: none }
.hc-title a::after { content: ""; position: absolute; inset: 0 }
.hc { position: relative }
.hc-loc { display: flex; gap: .3rem; align-items: center; margin: 0; color: var(--muted); font-size: .9rem }
.hc-score { display: flex; align-items: center; gap: .45rem; font-size: .88rem; margin-top: .2rem }
.hc-score small { color: var(--muted) }
.score { display: inline-flex; align-items: center; gap: .3em; padding: .28em .55em; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 700; font-size: .85rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.score::before { content: "★"; color: #ffc107; font-size: .9em }
.score-lg { font-size: 1.1rem; padding: .35em .65em; border-radius: 10px }
.score-sm { font-size: .78rem }

/* destinations */
.dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 1rem }
.dest { position: relative; aspect-ratio: 4/5; border-radius: var(--r); overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 25%, #fff), var(--soft)); text-decoration: none }
.dest img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s }
.dest:hover img { transform: scale(1.04) }
.dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.65)) }
.dest-txt { position: absolute; left: 1rem; bottom: .85rem; z-index: 1; color: #fff; display: grid }
.dest-txt b { font: 500 1.3rem var(--display); letter-spacing: -.02em }
.dest-txt small { opacity: .85 }
.dest:hover { color: #fff }

.promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1rem }
.promo { border-radius: var(--r); padding: 1.7rem; min-height: 260px; isolation: isolate; background: #222 center / cover; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; text-decoration: none; position: relative; overflow: hidden }
.promo b { font: 500 2rem/1.05 var(--display); letter-spacing: -.03em }
.promo::after { content: "↗"; position: absolute; top: 1.2rem; right: 1.2rem; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 1.3rem; font-weight: 600 }
.promo:hover { color: #fff; filter: brightness(1.05) }
.promo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s }
.promo:hover img { transform: scale(1.04) }
.promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7)) }
.promo-sea::before { background: linear-gradient(180deg, color-mix(in srgb, #0ea5e9 20%, transparent) 20%, color-mix(in srgb, #075985 85%, transparent)) }
.promo-fest::before { background: linear-gradient(180deg, color-mix(in srgb, #7c3aed 20%, transparent) 20%, color-mix(in srgb, #2e1065 88%, transparent)) }
.promo-castle::before { background: linear-gradient(180deg, color-mix(in srgb, #22c55e 18%, transparent) 20%, color-mix(in srgb, #14532d 86%, transparent)) }
.promo span { position: relative }
.owner-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.2rem 2.4rem; border-radius: var(--r); background: var(--navy); color: #fff; margin-bottom: 2rem }
.owner-cta h2 { color: #fff }
.owner-cta p { margin: 0; opacity: .92; max-width: 620px }

/* listings */
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .88rem; color: var(--muted); margin-bottom: 1rem }
.crumbs a { text-decoration: none }
.list-head { margin-bottom: 1rem }
/* event landings (content/landings.ts): intro, a row of figures, the list, then the guide */
.lp-intro { max-width: 760px }
.lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin: 1.2rem 0 1.6rem; padding: 0; list-style: none }
.lp-stats li { display: grid; gap: .15rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px }
.lp-stats b { font: 600 1.6rem/1.1 var(--display); letter-spacing: -.02em }
.lp-stats span { color: var(--muted); font-size: .88rem; line-height: 1.35 }
.lp-guide { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line) }
.lp-body { max-width: 760px }
.lp-sec { margin-bottom: 2.2rem }
.lp-sec .prose ul { padding-left: 1.2rem }
.lp-sec .prose li { margin-bottom: .45rem }
.lp-sources { color: var(--muted); font-size: .82rem }
.lp-sources a { color: inherit }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem; padding: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 999px }
.filters input, .filters select { border-radius: 999px; background: var(--soft); border-color: transparent }
.filters label { display: block }
.filters .f-q { flex: 1 1 260px }
.filters select { min-width: 190px }
.empty { text-align: center; padding: 3rem 1rem; background: #fff; border: 1px dashed var(--line); border-radius: var(--r) }
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 2rem 0 0 }
.pager a, .pager .off { padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid transparent; background: #fff; text-decoration: none; font-weight: 500 }
.pager .off { opacity: .45 }
.pager-at { color: var(--muted); font-size: .92rem }

/* hotel page */
.h-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.1rem }
.h-meta { display: flex; gap: .6rem; align-items: center; margin-bottom: .4rem }
.tag { background: var(--soft); border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; font-weight: 600; color: var(--ink-2) }
.h-addr { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; color: var(--ink-2); margin: 0 }
.h-score { display: inline-flex; align-items: center; gap: .65rem; padding: .35rem .95rem .35rem .4rem; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; flex: none; transition: border-color .15s }
.h-score:hover { border-color: var(--ink); color: var(--ink) }
.h-score .score { font-size: 1rem; padding: .4em .6em }
.h-score span { display: grid; line-height: 1.25 }
.h-score span b { font-size: .95rem }
.h-score small { color: var(--muted); font-size: .8rem }
.gallery { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .5rem; height: clamp(260px, 44vw, 470px); border-radius: var(--r); overflow: hidden; margin-bottom: 1.6rem }
.g-item { position: relative; padding: 0; border: 0; background: var(--soft); cursor: zoom-in; overflow: hidden }
.g-item:first-child { grid-row: 1 / 3 }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s }
.g-item:hover img { transform: scale(1.03) }
.gallery[data-count="1"] { grid-template-columns: 1fr }
.gallery[data-count="2"] { grid-template-columns: 1fr 1fr }
.gallery[data-count="2"] .g-item { grid-row: 1 / 3 }
.gallery[data-count="3"] { grid-template-columns: 2fr 1fr }
.gallery[data-count="4"] .g-item:nth-of-type(4) { grid-column: 2 / 4 }
.g-all { position: absolute; right: 1rem; bottom: 1rem; background: #fff; border: 0; border-radius: 999px; padding: .55rem 1rem; font: 600 .9rem var(--font); cursor: pointer; box-shadow: var(--shadow) }
.h-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; align-items: start }
.h-sec { padding: 1.6rem 0; border-top: 1px solid var(--line) }
.h-sec:first-of-type { border-top: 0; padding-top: .4rem }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.2rem }
.pills li { background: var(--mint); color: #08754a; border-radius: 999px; padding: .3rem .8rem; font-size: .88rem; font-weight: 500 }
.prose { color: var(--ink-2); max-width: 72ch }
.prose p { margin-bottom: .9em }
.prose ul { padding-left: 1.2rem }
.disclose summary { cursor: pointer; font-weight: 600; color: var(--brand-ink) }
.fac-grid { columns: 3 220px; column-gap: 2rem }
.fac { break-inside: avoid; margin-bottom: 1.2rem }
.fac h3 { margin-bottom: .35rem }
.fac ul, .lm ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; font-size: .93rem; color: var(--ink-2) }
.fac li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: .45rem }
.map { position: relative; height: 320px; border-radius: var(--r); overflow: hidden; background: var(--soft) center/cover; display: grid; place-items: center; margin: .5rem 0 1.2rem; border: 1px solid var(--line) }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.lm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.4rem }
.lm li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line); padding: .3rem 0 }
.lm b { white-space: nowrap; font-weight: 600; color: var(--ink) }
.rev-sum { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.2rem }
.rev-sum div { display: grid }
.rev-sum small { color: var(--muted) }
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 1rem }
.rev { background: #fff; border: 1px solid transparent; border-radius: var(--r); padding: 1rem 1.1rem; font-size: .93rem }
.rev header { display: flex; gap: .6rem; align-items: center; margin-bottom: .5rem }
.rev header div { display: grid; flex: 1; line-height: 1.3 }
.rev header small { color: var(--muted) }
.rev h3 { margin: .2rem 0 .4rem }
.rev p { display: flex; gap: .45rem; margin: 0 0 .4rem; color: var(--ink-2) }
.rev .pro span { color: var(--ok); font-weight: 700 }
.rev .con span { color: var(--bad); font-weight: 700 }
.rev time { font-size: .8rem; color: var(--muted) }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 18%, #fff); color: var(--brand-ink); font-weight: 700; flex: none }
.faq details { border-bottom: 1px solid var(--line); padding: .85rem 0 }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--brand-ink) }
.faq details[open] summary::after { content: "−" }
.faq .prose { margin-top: .5rem }
.h-side { position: sticky; top: 84px; display: grid; gap: 1rem; min-width: 0 }
/* the booking card: white with a clear edge; the four fields share one bordered box, label inside each cell */
.book { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 6px 24px rgba(15,18,34,.08); padding: 1.4rem; display: grid; gap: 1rem }
.book-top { display: grid; gap: .45rem }
.book p { margin: 0 }
.book h2 { font-size: 1.25rem; margin: 0 }
.book-score { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-2); font-size: .9rem; text-decoration: none }
.book-score:hover { color: var(--ink) }
.book-fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #c9ccd6; border-radius: 14px; overflow: hidden }
.bf { display: grid; gap: .1rem; padding: .55rem .85rem .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); cursor: pointer }
.bf:nth-child(odd) { border-right: 1px solid #c9ccd6 }
.bf:nth-child(-n+2) { border-bottom: 1px solid #c9ccd6 }
.bf:focus-within { box-shadow: inset 0 0 0 2px var(--ink); border-radius: 12px }
.bf input, .bf select { border: 0; padding: 0; background: none; border-radius: 0; font-size: .95rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); box-shadow: none !important; min-width: 0 }
.host-box .host-name { font: 600 1.05rem var(--display); margin: 0 }
.host-box .host-kind { color: var(--muted); font-size: .88rem; margin: 0 }
.host-box .btn { width: 100% }
.book-note { color: var(--muted); font-size: .8rem; line-height: 1.45; text-align: center }
.toc { display: grid; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .5rem }
.toc a { position: relative; padding: .5rem .8rem; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-size: .93rem; font-weight: 500 }
.toc a:hover { background: var(--soft); color: var(--ink) }
.toc a::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 3px; background: var(--brand); opacity: 0; transition: opacity .15s }
.toc a:hover::before { opacity: 1 }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(12,10,8,.94); display: grid; place-items: center }
.lightbox[hidden] { display: none }
.lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 6px }
.lb-close, .lb-nav { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 1.8rem; cursor: pointer }
.lb-close { top: 1rem; right: 1rem }
.lb-prev { left: 1rem; top: 50% }
.lb-next { right: 1rem; top: 50% }
.lb-count { position: absolute; bottom: 1rem; color: #fff; opacity: .7 }

/* auth & account */
.auth { min-height: calc(100vh - 66px - 200px); display: grid; place-items: center; padding: 3rem 1rem }
.auth-card { width: min(440px, 100%); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 2rem }
.auth-card h1 { font-size: 1.7rem }
.auth-alt { text-align: center; margin: 1.2rem 0 0; color: var(--muted) }
.auth-card { box-shadow: none }
.auth-card h1 { margin-bottom: .25rem }
.auth-sub { color: var(--muted); margin: 0 0 1.4rem }
.auth-sub a { color: var(--brand); font-weight: 600; text-decoration: none }
.auth-form { display: grid; gap: 1rem }
.auth-form label { font-size: .85rem; font-weight: 600; color: var(--ink); gap: .4rem }
.auth-form input:not([type=radio]) { height: 48px; border-radius: 12px; font-size: 1rem }
.auth-form .opt { font-weight: 400; color: var(--muted) }
.auth-form .hint { font-weight: 400; color: var(--muted); font-size: .8rem }
.auth-form .btn { margin-top: .4rem }
.auth-forgot { justify-self: end; margin-top: -.4rem; font-size: .85rem; font-weight: 600; color: var(--brand); text-decoration: none }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem }
.pw { position: relative; display: block }
.pw input { padding-right: 3rem }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer }
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--ink); background: var(--soft) }
.pw-toggle svg { width: 19px; height: 19px }
/* sign-up: why list here on the left, the form on the right */
.auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 3rem; align-items: center; max-width: 1040px; margin: 0 auto }
.auth-split .auth-card { width: 100% }
.auth-side h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.12; margin-bottom: 1.4rem }
.auth-kicker { color: var(--brand); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .6rem }
.auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem }
.auth-perks li { display: flex; gap: .85rem; align-items: flex-start }
.auth-perks li > span:last-child { display: grid; color: var(--ink-2); line-height: 1.45 }
.auth-perks b { color: var(--ink) }
.perk-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--brand) }
.perk-ico svg { width: 20px; height: 20px }
@media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; gap: 1.5rem } .auth-side h2 { font-size: 1.5rem } .auth-perks { gap: .8rem } }
@media (max-width: 480px) { .auth-row { grid-template-columns: 1fr } .auth-card { padding: 1.4rem } }
.or { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .85rem; margin: 1rem 0 }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line) }
/* account type: a two-way toggle with icons, the radio itself hidden */
.seg { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem }
.seg legend { font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem }
.seg label { display: flex; gap: .55rem; align-items: center; justify-content: center; height: 48px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--ink-2); transition: border-color .15s, background .15s }
.seg label:hover { border-color: #c9ccd6 }
.seg label:has(input:checked) { border-color: var(--ink); background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.seg label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px }
.seg svg { width: 18px; height: 18px }
.acc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start }
.acc-nav { position: sticky; top: 84px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; display: grid; gap: .8rem }
.acc-me { display: flex; gap: .7rem; align-items: center; padding-bottom: .8rem; border-bottom: 1px solid var(--line) }
.acc-me div { display: grid; min-width: 0 }
.acc-me small { color: var(--muted); overflow: hidden; text-overflow: ellipsis }
.acc-nav nav { display: grid }
.acc-nav nav a { padding: .5rem .7rem; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-weight: 500 }
.acc-nav nav a:hover, .acc-nav nav a[aria-current] { background: var(--soft); color: var(--ink) }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0 2rem }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; display: grid }
.stat b { font: 700 1.8rem var(--display) }
.stat span { color: var(--muted); font-size: .9rem }
.otable { display: grid; gap: .6rem }
.orow { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .7rem }
.orow-ph { width: 96px; height: 72px; border-radius: 8px; background: var(--soft); overflow: hidden; flex: none }
.orow-ph img { width: 100%; height: 100%; object-fit: cover }
.orow-main { flex: 1; display: grid; min-width: 0 }
.orow-main small { color: var(--muted) }
.orow-act { display: flex; gap: .4rem }
.status { font-size: .8rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px; background: var(--soft); color: var(--ink-2) }
.status-live { background: #ecfdf3; color: var(--ok) }
.status-review { background: #fffaeb; color: #b54708 }
.status-hidden { background: #f2f4f7; color: #475467 }
.card-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; margin-bottom: 1.2rem }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
.span2 { grid-column: 1 / -1 }
.form-actions, .actions-row { display: flex; gap: .6rem; flex-wrap: wrap }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin-bottom: 1rem }
.ph-grid figure { margin: 0; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden }
.ph-grid img { width: 100%; height: 100%; object-fit: cover }
.upload { display: grid; gap: .6rem; justify-items: start }
.big404 { font: 600 6rem var(--display); color: var(--brand); margin: 0 }

/* footer */
.ftr { background: var(--navy); color: #c3c8dc; margin-top: 3rem; padding: 3rem 0 1.5rem; font-size: .93rem }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem }
.ftr h3 { color: #fff; font-size: .95rem; margin-bottom: .8rem }
.ftr a { display: block; text-decoration: none; padding: .2rem 0; color: #c3c8dc }
.ftr a:hover { color: #fff }
.logo-light, .ftr .logo-light:hover { color: #fff; display: inline-flex !important }
.ftr-about { margin: .8rem 0 1.2rem; max-width: 340px }
.nl label { color: #fff; font-weight: 600 }
.nl-row { display: flex; gap: .4rem; margin-top: .4rem; max-width: 380px }
.nl input { background: #1a2148; border-color: #2a3366; color: #fff; border-radius: 999px }
.nl-msg { margin: .5rem 0 0; font-size: .85rem }
.ftr-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid #252c55; margin-top: 2.5rem; padding-top: 1.2rem; font-size: .85rem }
.ftr-bottom .muted { color: #8f96b3 }

@media (max-width: 1020px) {
  .h-layout { grid-template-columns: 1fr }
  .h-side { position: static; order: -1 }
  .toc { display: none }
  .ftr-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 720px) {
  .wrap { width: min(1200px, 100% - 1.6rem) }
  .hero { padding: 2.5rem 0 2rem }
  .bigsearch { flex-direction: column; border-radius: var(--r) }
  .bs-select { border-left: 0; border-top: 1px solid var(--line) }
  .bs-select select { padding: .8em 1em }
  .gallery { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 62vw }
  .gallery .g-item:not(:first-child) { display: none }
  .h-head { flex-direction: column; gap: .8rem }
  .h-score { text-align: left; flex-direction: row-reverse; justify-content: flex-end }
  .acc { grid-template-columns: 1fr }
  .acc-nav { position: static }
  .stats { grid-template-columns: 1fr 1fr 1fr; gap: .5rem }
  .grid-form { grid-template-columns: 1fr }
  .orow { flex-wrap: wrap }
  .owner-cta { flex-direction: column; align-items: flex-start; padding: 1.5rem }
  .ftr-grid { grid-template-columns: 1fr }
  .grid { grid-template-columns: 1fr; gap: 1rem }
  .dest-grid { grid-template-columns: 1fr 1fr; gap: .6rem }
  .dest-txt { left: .7rem; bottom: .6rem }
  .dest-txt b { font-size: .98rem }
  .rev-grid, .lm-grid { grid-template-columns: 1fr }
}