/* ==========================================================================
   FARRAR & FORBES — Page layouts (search + property detail + home strips)
   ========================================================================== */

/* ---------- search results page ---------- */
.filter-bar { position: sticky; top: calc(var(--header-h) + 8px); z-index: 60; margin-top: calc(var(--header-h) + var(--sp-4)); }
.fbwrap {
  background: var(--glass-card); border: 1px solid var(--glass-card-line);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: .55rem;
}
.fb-row { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) max-content; gap: .55rem; align-items: center; }
.fb-adv { grid-template-columns: repeat(5, 1fr); padding-top: .55rem; border-top: 1px solid var(--glass-line); margin-top: .55rem; display: none; }
.filter-bar.open .fb-adv { display: grid; animation: modalIn .3s var(--ease-out); }
.fb-row .sb-field { display: grid; gap: .1rem; }
.fb-row .sb-field label { font-size: var(--step--2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fb-row select, .fb-row input { width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-strong); border-radius: var(--r-md); padding: .62em .9em; font-size: var(--step-0); font-weight: 500; }
.fb-row select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2em; }
.fb-row select:focus-visible, .fb-row input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.fb-actions { display: flex; gap: .55rem; padding-top: 1.1rem; }
@media (max-width: 1180px) { .fb-row { grid-template-columns: 1fr 1fr; } .fb-actions { grid-column: 1 / -1; } .fb-adv { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .filter-bar { position: static; margin-top: var(--sp-3); } .fb-row { grid-template-columns: 1fr; } .fb-adv { grid-template-columns: 1fr; } }

.results-shell { display: grid; gap: var(--sp-4); }
.no-results {
  text-align: center; padding: var(--sp-7) var(--sp-4); background: var(--surface);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.no-results h3 { margin-bottom: .5rem; }
.no-results p { color: var(--muted); margin-bottom: 1.4rem; }
.api-note { font-size: var(--step--2); color: var(--muted); text-align: center; margin-top: 1rem; }

/* ---------- property detail ---------- */
.pd-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.pd-title h1 { font-size: var(--step-4); margin: .55rem 0 .35rem; }
.pd-title .pd-addr { color: var(--muted); display: flex; gap: .45em; align-items: center; flex-wrap: wrap; }
.pd-price { text-align: right; }
.pd-price .figure { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 2.9rem); color: var(--ink); line-height: 1; }
.pd-price .qual { display: block; font-size: var(--step--2); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-top: .45rem; }

.pd-gallery { display: grid; grid-template-columns: 2.2fr 1fr; gap: 14px; }
.pd-gallery .g-main { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9.2; background: var(--bg-deep); cursor: zoom-in; }
.pd-gallery .g-side { display: grid; gap: 14px; grid-template-rows: 1fr 1fr; }
.pd-gallery .g-side > * { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--bg-deep); cursor: zoom-in; }
.pd-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.pd-gallery figure:hover img { transform: scale(1.05); }
.pd-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .9rem; font-size: var(--step--2); color: #fff; background: linear-gradient(transparent, rgba(6,16,20,.75)); opacity: 0; transition: opacity var(--speed-2); }
.pd-gallery figure:hover figcaption, .pd-gallery figure:focus-within figcaption { opacity: 1; }
.pd-count {
  position: absolute; right: .8rem; bottom: .8rem; z-index: 2;
  background: rgba(9,24,31,.7); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-sm); font-size: var(--step--2); padding: .35em .8em; letter-spacing: .08em;
}
@media (max-width: 860px) {
  .pd-gallery { grid-template-columns: 1fr; }
  .pd-gallery .g-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; max-height: 220px; overflow: hidden; }
  .pd-topbar { flex-direction: column; align-items: flex-start; }
  .pd-price { text-align: left; }
}

.pd-body { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px, .9fr); gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-7); }
@media (max-width: 1000px) { .pd-body { grid-template-columns: 1fr; } }
.pd-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-block: 1.6rem; }
.pd-spec {
  border: 1px solid var(--line-soft); background: var(--surface); border-radius: var(--r-md);
  padding: 1rem 1.1rem; display: grid; gap: .3rem;
}
.pd-spec svg { width: 1.25em; height: 1.25em; color: var(--accent-text); }
.pd-spec b { font-size: var(--step-0); color: var(--ink); font-weight: 600; }
.pd-spec span { font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pd-features { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.6rem; margin-top: 1rem; }
@media (max-width: 620px) { .pd-features { grid-template-columns: 1fr; } }
.pd-section-title { display: flex; align-items: baseline; gap: .8em; font-size: var(--step-2); margin: 2.2em 0 .8em; }
.pd-section-title::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.room-desc p { margin-bottom: 1em; }
.room-desc .room { font-weight: 600; color: var(--ink); }
.pd-docs { display: grid; gap: .7rem; }
.pd-doc {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: .95em 1.15em;
  background: var(--surface); color: var(--ink); font-weight: 500; font-size: var(--step--1);
  transition: border-color var(--speed-1), transform var(--speed-1);
}
.pd-doc:hover { border-color: var(--accent); color: var(--ink); transform: translateX(3px); }
.pd-doc svg { width: 1.1em; height: 1.1em; color: var(--accent-text); }

/* enquiry card */
.enquiry-card { position: sticky; top: calc(var(--header-h) + 18px); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--line) 48%, transparent); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 1.6rem 1.6rem 1.3rem; display: grid; gap: 1rem; }
.enquiry-card h3 { font-size: var(--step-2); }
.enquiry-card .ec-price { font-family: var(--font-serif); font-size: var(--step-3); color: var(--ink); }
.enquiry-card .ec-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; font-size: var(--step--2); color: var(--muted); text-align: center; }
.enquiry-card .ec-grid b { display: block; color: var(--ink); font-size: var(--step-0); font-family: var(--font-serif); font-weight: 400; }
.enquiry-card .btn { width: 100%; }
.enquiry-card .agents-line { display: flex; align-items: center; gap: .7rem; font-size: var(--step--1); color: var(--muted); }
.enquiry-card .agents-line img { width: 34px; height: 34px; border-radius: 50%; }
@media (max-width: 1000px) { .enquiry-card { position: static; } }

/* map */
.map-frame { border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); aspect-ratio: 21/9; background: var(--bg-deep); position: relative; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.map-privacy { display: grid; place-items: center; height: 100%; gap: .7rem; background: var(--surface-2, var(--bg-alt)); color: var(--muted); font-size: var(--step--1); text-align: center; padding: 1rem; }

/* lightbox */
.ff-lightbox { border: 0; padding: 0; background: rgba(5, 14, 18, .94); color: #eef2f3; width: 100vw; height: 100dvh; max-width: none; margin: 0; }
.ff-lightbox::backdrop { background: rgba(5,14,18,.94); }
.ff-lightbox figure { position: absolute; inset: 4.5rem 1rem 4.6rem; display: grid; place-items: center; }
.ff-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lb-bar { position: absolute; top: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.lb-nav { position: absolute; bottom: 1.1rem; left: 50%; translate: -50% 0; display: flex; gap: .6rem; z-index: 5; }
.lb-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(238,242,243,.3); color: #eef2f3; display: grid; place-items: center; transition: background var(--speed-1); }
.lb-btn:hover { background: rgba(238,242,243,.14); }
.lb-count { min-width: 70px; height: 46px; border-radius: var(--r-pill); border: 1px solid rgba(238,242,243,.3); display: grid; place-items: center; font-size: var(--step--1); letter-spacing: .1em; }

/* related */
.related-strip { margin-top: var(--sp-6); }

/* home — partners & awards strip */
.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3.4rem); }
.partners img { height: 26px; width: auto; opacity: .55; filter: grayscale(1) contrast(1.2); transition: opacity var(--speed-2), filter var(--speed-2); }
.partners img:hover { opacity: 1; filter: none; }
[data-theme="dark"] .partners img { filter: grayscale(1) brightness(2); }
[data-theme="dark"] .partners img:hover { filter: brightness(2.3); }

/* team cards */
.team-card { display: grid; grid-template-columns: 96px 1fr; gap: 1.3rem; background: var(--glass-card); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); border: 1px solid var(--glass-card-line); border-radius: 18px; padding: 1.6rem; box-shadow: var(--shadow-1); }
.team-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--bg-deep); }
.team-card h3 { font-size: var(--step-2); }
.team-card .role { color: var(--accent-text); font-size: var(--step--2); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: .15rem 0 .55rem; }
.team-card p { font-size: var(--step--1); color: var(--muted); }

/* 404 */
.err404 { min-height: 74svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 3rem) 0 4rem; }
.err404 h1 { font-size: var(--step-6); margin: .6rem 0 1rem; }
.err404 p { color: var(--muted); max-width: 46ch; margin: 0 auto 2rem; }

/* USP icons on home */
.usp { display: grid; grid-template-columns: 44px 1fr; gap: 1.1rem; align-items: start; }
.usp__icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent-text); }
.usp__icon svg { width: 20px; height: 20px; }
.usp h3 { font-size: var(--step-1); margin-bottom: .25rem; }
.usp p { font-size: var(--step--1); color: var(--muted); }

/* quote CTA band */
.cta-band { position: relative; isolation: isolate; border-radius: var(--r-lg); overflow: hidden; padding: clamp(2.2rem, 6vw, 5rem); color: #fff; display: grid; place-items: center; text-align: center; }
.cta-band picture, .cta-band img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(9,26,34,.92) 18%, rgba(26,64,82,.66) 60%, rgba(26,64,82,.35)); }
.cta-band h2 { color: #fff; max-width: 26ch; margin-inline: auto; }
.cta-band p { color: rgba(240,246,247,.85); max-width: 54ch; margin: .8rem auto 1.6rem; }
.cta-band .btns { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* small helper for anchor offset under fixed header */
:target { scroll-margin-top: calc(var(--header-h) + 24px); }