/* Explore & Search (PAGE-PUB-002, TASK-035)
   Public listing archetype A02: intro, search, filter bar, result grid,
   pagination, empty state, concierge band. Tokens only — no prototype CSS. */

.page-intro { padding: var(--space-12) 0 var(--space-8); background: var(--color-bg-paper); }
.page-intro h1 { font-family: var(--font-editorial); font-weight: 400; font-size: var(--type-display-section); line-height: 1.08; color: var(--color-brand-navy); margin: 0 0 var(--space-3); }
.page-lead { max-width: var(--container-text); margin: 0 0 var(--space-8); font-size: var(--type-body-large); color: var(--color-text-secondary); }

/* ---------- Search + filters ---------- */
.explore-form { display: grid; gap: var(--space-4); }
.field-label { display: block; font-size: var(--type-body-small); font-weight: 600; color: var(--color-brand-navy); margin-bottom: var(--space-2); }
.search-row { display: flex; gap: var(--space-2); max-width: 720px; }
.search-row input { flex: 1; min-width: 0; height: 52px; padding: 0 var(--space-4); border: var(--border-input); border-radius: var(--radius-md); background: var(--color-surface-clean); font: inherit; color: inherit; }
.search-row input:focus-visible, .fsel select:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.search-row .btn { height: 52px; }
.field-hint { margin: var(--space-2) 0 0; font-size: var(--type-caption); color: var(--color-text-secondary); }

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; }
.explore-form .fsel { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 0 1 220px; min-width: 170px; max-width: none; height: 56px; padding: 0 var(--space-4); border: var(--border-input); border-radius: var(--radius-md); background: var(--color-surface-clean); }
.explore-form .fsel.is-set { border-color: var(--color-brand-navy); box-shadow: inset 0 0 0 1px var(--color-brand-navy); }
.explore-form .fsel-l { font-size: 0.72rem; font-weight: 600; color: var(--color-text-secondary); }
.explore-form .fsel select { -webkit-appearance: none; appearance: none; border: 0; background: none; padding: 0 var(--space-5) 0 0; margin: 0; font: inherit; font-size: var(--type-body-small); font-weight: 500; color: var(--color-text-primary); width: 100%; cursor: pointer; }
.explore-form .fsel::after { content: ""; position: absolute; right: var(--space-4); top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--color-text-secondary); border-bottom: 1.5px solid var(--color-text-secondary); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.filter-apply { height: 56px; }
/* With JS the selects apply on change, so the extra button steps aside. */
.explore-form.is-enhanced .filter-apply { display: none; }

.chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: var(--border-strong); border-radius: var(--radius-pill); background: var(--color-surface-clean); font-size: var(--type-body-small); color: var(--color-text-primary); text-decoration: none; }
.chip:hover { border-color: var(--color-brand-navy); }
.chip:focus-visible, .pager a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.chip-x { font-size: 1.1rem; line-height: 1; color: var(--color-text-secondary); }
.chip-clear { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.notice { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-warning-bg); font-size: var(--type-body-small); }

/* ---------- Results ---------- */
.results { padding: var(--space-8) 0 var(--space-16); }
.results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); }
.results-head h2 { font-family: var(--font-ui); font-size: 1.35rem; font-weight: 600; margin: 0 0 var(--space-1); color: var(--color-text-primary); }
.results-head h2:focus { outline: none; }
.results-context { margin: 0; font-size: var(--type-body-small); color: var(--color-text-secondary); }
.results-currency { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-body-small); color: var(--color-text-secondary); }
.seg { display: inline-flex; padding: 3px; border: var(--border-subtle); border-radius: var(--radius-pill); background: var(--color-surface-clean); }
.seg button { min-width: 48px; height: 32px; border: 0; border-radius: var(--radius-pill); background: none; font: inherit; font-size: var(--type-caption); font-weight: 600; color: var(--color-text-secondary); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--color-brand-navy); color: var(--color-text-inverse); }
.seg button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
/* Photo card: the picture fills the card and the details sit on a plate over it.
   The plate is a solid tint — no backdrop blur over a moving photo. */
.svc-card { position: relative; display: block; height: 460px; border-radius: var(--radius-2xl); overflow: hidden; background: linear-gradient(160deg, #1d4a6b 0%, var(--color-brand-navy) 100%); color: #fff; isolation: isolate; }
.svc-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -1; transition: transform var(--motion-image-slow) var(--motion-ease); }
.svc-card:has(a):hover .svc-card-img { transform: scale(1.05); }
.svc-card-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-editorial); font-size: 1.1rem; color: rgba(1, 42, 85, 0.28); }
/* Inside the photo card the placeholder sits on the dark ground, above the plate. */
.svc-card > .svc-card-noimg { inset: 0 0 35% 0; font-size: 1.2rem; color: rgba(255, 255, 255, 0.4); z-index: -1; }
.svc-card-tag { position: absolute; left: 14px; top: 14px; z-index: 2; max-width: calc(100% - 28px); padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.92); font-size: 0.76rem; font-weight: 600; color: var(--color-brand-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-card-plate { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; padding: 16px 18px; border-radius: var(--radius-lg); background: rgba(1, 30, 61, 0.84); border: 1px solid rgba(255, 255, 255, 0.14); }
.svc-card-title { font-family: var(--font-editorial); font-weight: 400; font-size: 1.45rem; line-height: 1.15; margin: 0 0 4px; color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.svc-card-title a { color: inherit; text-decoration: none; }
/* The whole card is the click target; the link stays the single accessible name. */
.svc-card-title a::after { content: ""; position: absolute; inset: -600px -10px -10px; } /* reaches past the plate; the card clips it */
.svc-card-title a:focus-visible { outline: none; }
.svc-card:has(a:focus-visible) { outline: var(--focus-ring); outline-offset: 3px; }
.svc-card-place { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 0.84rem; color: rgba(255, 255, 255, 0.85); }
.svc-card-place svg { flex: none; }
.svc-card-foot { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.svc-card-price { font-size: 0.93rem; font-weight: 600; line-height: 1.3; color: #fff; }
.svc-card-go { flex: none; padding: 7px 13px; border-radius: var(--radius-pill); background: #fff; font-size: 0.82rem; font-weight: 600; color: var(--color-brand-navy); }

.fx-note { margin: var(--space-6) 0 0; font-size: var(--type-caption); color: var(--color-text-secondary); }

/* ---------- Pagination ---------- */
.pager { margin-top: var(--space-8); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); }
.pager ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; }
.pager-range { margin: 0; font-size: var(--type-body-small); color: var(--color-text-secondary); }
.pager-single { margin-top: var(--space-6); }
.pager-num, .pager-step { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 var(--space-3); border: var(--border-subtle); border-radius: var(--radius-sm); background: var(--color-surface-clean); font-size: var(--type-body-small); font-weight: 500; color: var(--color-text-primary); text-decoration: none; }
a.pager-num:hover, a.pager-step:hover { border-color: var(--color-brand-navy); }
.pager-num.is-current { background: var(--color-brand-navy); border-color: var(--color-brand-navy); color: var(--color-text-inverse); }
.pager-step.is-off { color: var(--color-disabled); background: transparent; }
.pager-gap { padding: 0 var(--space-1); color: var(--color-text-secondary); }

/* ---------- Empty state ---------- */
.state-panel { max-width: var(--container-panel); padding: var(--space-8); border: var(--border-subtle); border-radius: var(--radius-xl); background: var(--color-surface-clean); }
.state-panel h3 { font-family: var(--font-editorial); font-weight: 400; font-size: var(--type-heading-editorial); margin: 0 0 var(--space-2); color: var(--color-brand-navy); overflow-wrap: anywhere; }
.state-panel p { margin: 0 0 var(--space-5); color: var(--color-text-secondary); }
.state-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.state-sub { margin: var(--space-6) 0 0 !important; font-size: var(--type-body-small); font-weight: 600; color: var(--color-text-primary) !important; }
.state-panel .chip-row { margin-top: var(--space-3); }

.state-ico { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: var(--space-5); border-radius: var(--radius-md); background: var(--color-bg-sand); color: var(--color-brand-navy); }

/* ---------- Mobile filter sheet (progressive enhancement) ---------- */
.filter-open { display: none; }
/* A plain fixed overlay (as in the prototype) rather than a native dialog. */
.sheet-overlay { position: fixed; inset: 0; z-index: 1600; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 18, 40, 0.38); opacity: 0; visibility: hidden; transition: opacity 200ms var(--motion-ease), visibility 0s linear 200ms; }
.sheet-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 200ms var(--motion-ease); }
.filter-sheet { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 86vh; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--color-surface-clean); color: var(--color-text-primary); box-shadow: var(--shadow-floating); transform: translateY(100%); transition: transform 280ms var(--motion-ease); }
.sheet-overlay.is-open .filter-sheet { transform: none; }
body.sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sheet-overlay, .sheet-overlay.is-open, .filter-sheet { transition: none; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-5) var(--space-3); }
.sheet-head h2 { font-family: var(--font-ui); font-size: 1.15rem; font-weight: 600; margin: 0; }
.sheet-x { width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: var(--color-bg-sand); font-size: 1.4rem; line-height: 1; color: var(--color-brand-navy); cursor: pointer; }
.sheet-body { flex: 1; overflow-y: auto; padding: 0 var(--space-5) var(--space-4); }
.sheet-body fieldset { border: 0; margin: 0 0 var(--space-5); padding: 0; }
.sheet-body legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--type-body-small); font-weight: 600; color: var(--color-brand-navy); }
.sheet-opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sheet-opts label { position: relative; }
.sheet-opts input { position: absolute; opacity: 0; inset: 0; }
.sheet-opts span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border: var(--border-strong); border-radius: var(--radius-pill); font-size: var(--type-body-small); }
.sheet-opts input:checked + span { background: var(--color-brand-navy); border-color: var(--color-brand-navy); color: var(--color-text-inverse); }
.sheet-opts input:focus-visible + span { outline: var(--focus-ring); outline-offset: 2px; }
.sheet-foot { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-top: var(--border-subtle); }
.sheet-foot .btn { flex: 1; }
.sheet-foot .btn:last-child { flex: 2; }

/* ---------- Concierge band ---------- */
/* Ask Concierge band: a rounded brand card with air around it, as in the approved
   prototypes (CTA Section), on every screen size — never a full-width strip glued to the footer. */
.concierge-band { padding: var(--space-8) var(--page-gutter) clamp(64px, 9vw, 112px); }
.concierge-band-inner.container-wide { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6) var(--space-8); max-width: var(--container-wide); margin: 0 auto; padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-3xl); background: var(--color-brand-navy); color: var(--color-text-inverse); }
.concierge-band h2 { font-family: var(--font-editorial); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.1; margin: 0 0 10px; color: inherit; }
.concierge-band p { margin: 0; max-width: 54ch; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 900px) { .concierge-band { padding-inline: var(--page-gutter-sm); } }
@media (max-width: 620px) { .concierge-band-inner.container-wide { border-radius: var(--radius-xl); } }

/* ---------- Discovery landings (Category, later Location/Collection) ---------- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; font-size: var(--type-body-small); color: var(--color-text-secondary); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-border-strong); }
.crumbs a { color: inherit; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--color-text-primary); }
.page-intro.has-media .intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-10); align-items: center; }
.intro-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius-2xl); }
.intro-copy { max-width: var(--container-text); color: var(--color-text-primary); line-height: 1.65; }
.intro-aside { margin: var(--space-5) 0 0; font-size: var(--type-body-small); font-weight: 600; }
.intro-aside a { color: var(--color-brand-navy); text-underline-offset: 3px; }
.page-intro .page-lead:last-child, .page-intro .intro-copy:last-child { margin-bottom: 0; }

.ent-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
/* Place / Collection / Category card: the same photo card as a Service, in portrait. */
.ent-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(160deg, #1d4a6b 0%, var(--color-brand-navy) 100%); color: #fff; isolation: isolate; }
.ent-card-media { position: absolute; inset: 0; z-index: -1; }
.ent-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--motion-image-slow) var(--motion-ease); }
.ent-card:hover .ent-card-media img { transform: scale(1.05); }
.ent-card-media .svc-card-noimg { inset: 0 0 40% 0; color: rgba(255, 255, 255, 0.4); }
.ent-card-body { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radius-lg); background: rgba(1, 30, 61, 0.84); border: 1px solid rgba(255, 255, 255, 0.14); }
.ent-card-body h3 { font-family: var(--font-editorial); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0; color: #fff; overflow-wrap: anywhere; }
.ent-card-body h3 a { color: inherit; text-decoration: none; }
.ent-card-body h3 a::after { content: ""; position: absolute; inset: -600px -8px -8px; } /* reaches past the plate; the card clips it */
.ent-card-body h3 a:focus-visible { outline: none; }
.ent-card:has(a:focus-visible) { outline: var(--focus-ring); outline-offset: 3px; }
.ent-card-body p { margin: 0; font-size: 0.84rem; line-height: 1.4; color: rgba(255, 255, 255, 0.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ent-card-count { margin-top: 4px; font-size: var(--type-caption); font-weight: 600; color: var(--color-accent-ochre-light); }

.related { padding: 0 0 var(--space-12); }
.related h2 { font-family: var(--font-ui); font-size: 1.1rem; font-weight: 600; margin: 0; }
.related .chip-row { margin-top: var(--space-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .svc-grid, .ent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .page-intro.has-media .intro-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }
@media (max-width: 620px) {
    .page-intro { padding: var(--space-8) 0 var(--space-6); }
    .svc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    /* Place cards stay two across on phones, as in the prototype; the one-line summary gives way to the name. */
    .ent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ent-card-body { left: 6px; right: 6px; bottom: 6px; padding: 10px 12px; }
    .ent-card-body h3 { font-size: 1.05rem; }
    .ent-card-body p { display: none; }
    .search-row { flex-direction: column; }
    .search-row input { flex: none; width: 100%; }
    .search-row .btn, .filter-apply { width: 100%; }
    .explore-form .fsel { flex: 1 1 100%; }
    /* With JS the three selects give way to one Filters button and a sheet. */
    .explore-form.has-sheet .filter-bar { display: none; }
    .explore-form.has-sheet .filter-open { display: inline-flex; width: 100%; }
    .svc-card { height: 420px; }
    .svc-card-title { font-size: 1.35rem; }
    .results-head { align-items: flex-start; flex-direction: column; }
    .pager { flex-direction: column; align-items: flex-start; }
    .state-panel { padding: var(--space-6); }
    .state-actions .btn { width: 100%; }
    .concierge-band-inner .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .svc-card-img, .ent-card-media img { transition: none; } .ent-card:hover .ent-card-media img, .svc-card:has(a):hover .svc-card-img { transform: none; } }