/* ============================================================
   BRIAR PDP — Airbnb-style listing anatomy in the Beacon theme.
   Two-column core with a sticky booking card, hairline section
   rhythm, progressive-disclosure modals.
   Scoped pdp-* / bk-* / cal-* / pol-*.
   ============================================================ */

.pdp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Title block ---------- */
/* The site nav is position:fixed and about 79px tall, so the first section on
   any page has to clear it. .pagehero uses 160px; match that or the h1 sits
   underneath the nav and cannot be read. */
.pdp-title { padding: 160px 0 18px; }
@media (max-width: 700px) { .pdp-title { padding-top: 120px; } }
.pdp-title h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 0 0 8px; }
.pdp-title .pdp-sub { font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--gold-3); font-weight: 500; margin: 0 0 10px; }
.pdp-title .pdp-meta { font-size: .9rem; color: var(--c-ink-mute); margin: 0; }
.pdp-title .pdp-meta b { color: var(--gold-3); font-weight: 600; }

/* ---------- Two-column core ---------- */
/* minmax(0, 1fr) rather than 1fr, at every breakpoint. A bare 1fr resolves its
   minimum to min-content, so one wide descendant pushes the whole column past
   the viewport and the overflow gets silently clipped by body{overflow-x:hidden}.
   min-width:0 on the children is the same guard one level down. */
.pdp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 0 88px; align-items: start; }
.pdp-cols > * { min-width: 0; }
@media (max-width: 1024px) { .pdp-cols { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.pdp-sec { padding: 40px 0; border-bottom: 1px solid var(--c-line-soft); }
.pdp-sec:last-child { border-bottom: 0; }
.pdp-sec > h2 { font-family: var(--font-display); font-size: 1.45rem; color: var(--c-ink);
  font-weight: 500; margin: 0 0 18px; letter-spacing: .01em; }
.pdp-sec > h2.tight { margin-bottom: 10px; }

/* Overview */
.pdp-over h2 { margin-bottom: 6px; font-size: 1.3rem; }
.pdp-over .pdp-facts { color: var(--c-ink-mute); font-size: .96rem; margin: 0; }
.pdp-trust { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 18px; padding: 14px 16px;
  border: 1px solid var(--c-line-soft); border-radius: 12px; background: var(--c-bg-inset); font-size: .88rem; }
.pdp-trust span { display: inline-flex; align-items: center; gap: 9px; color: var(--c-ink-mute); }
.pdp-trust b { color: var(--c-ink); font-weight: 600; }
.pdp-trust svg { color: var(--gold-3); flex: 0 0 auto; }
.pdp-trust a { color: var(--gold-3); }

/* Host strip */
.pdp-hoststrip { display: flex; align-items: center; gap: 15px; }
.pdp-hoststrip img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.pdp-hoststrip .hs-name { color: var(--c-ink); font-weight: 600; font-size: .96rem; }
.pdp-hoststrip .hs-sub { color: var(--c-ink-dim); font-size: .84rem; margin-top: 2px; }

/* Highlights */
.pdp-hi { display: grid; gap: 20px; }
.pdp-hi > div { display: flex; gap: 15px; align-items: flex-start; }
.pdp-hi svg { color: var(--gold-3); flex: 0 0 auto; margin-top: 2px; }
.pdp-hi b { display: block; color: var(--c-ink); font-weight: 600; font-size: .97rem; margin-bottom: 3px; }
.pdp-hi p { margin: 0; color: var(--c-ink-mute); font-size: .9rem; }

/* Description, truncated with a fade */
.pdp-desc { position: relative; max-height: 210px; overflow: hidden; }
.pdp-desc.is-open { max-height: none; }
.pdp-desc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px;
  background: linear-gradient(transparent, var(--c-bg)); pointer-events: none; }
.pdp-desc.is-open::after { display: none; }
.pdp-more { margin-top: 14px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--c-ink); font-family: var(--font-sans); font-size: .95rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; }
.pdp-more:hover { color: var(--gold-3); }

/* Amenity preview + bordered button (Airbnb's Show all pattern) */
.pdp-amlist { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 26px; }
@media (max-width: 560px) { .pdp-amlist { grid-template-columns: 1fr; } }
.pdp-amlist div { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; color: var(--c-ink-mute); }
.pdp-amlist svg { color: var(--gold-3); flex: 0 0 auto; margin-top: 3px; }
.pdp-amlist div.is-off { color: var(--c-ink-dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.pdp-amlist div.is-off svg { color: var(--c-ink-dim); }
.pdp-btn-outline { margin-top: 22px; background: none; border: 1px solid var(--c-ink-mute);
  color: var(--c-ink); border-radius: 10px; padding: 13px 20px; font-family: var(--font-sans);
  font-size: .92rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.pdp-btn-outline:hover { border-color: var(--gold-2); background: var(--c-bg-elev); }

/* ---------- Booking card ---------- */
.pdp-book { position: sticky; top: 92px; }
@media (max-width: 1024px) { .pdp-book { position: static; margin: 34px 0 0; } }
.bk-card { background: var(--c-bg-elev); border: 1px solid var(--gold-2); border-radius: 16px;
  padding: 24px; box-shadow: var(--shadow); }
.bk-price { font-family: var(--font-display); font-size: 1.75rem; color: var(--c-ink); line-height: 1.1; }
.bk-price span { font-family: var(--font-sans); font-size: .88rem; color: var(--c-ink-dim); }
.bk-price .was { font-size: 1.1rem; color: var(--c-ink-dim); text-decoration: line-through;
  text-decoration-thickness: 1px; margin-right: 8px; }
/* "from" prefix, shown only when rates vary by date and there is no single price. */
.bk-price .bk-from { font-family: var(--font-sans); font-size: .8rem; color: var(--c-ink-dim);
  margin-right: 6px; }
.bk-sub { font-size: .82rem; color: var(--c-ink-dim); margin: 6px 0 16px; }

.bk-fields { border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.bk-dates { display: grid; grid-template-columns: 1fr 1fr; }
.bk-f { background: none; border: 0; text-align: left; padding: 11px 14px; cursor: pointer;
  font-family: var(--font-sans); color: var(--c-ink); width: 100%; }
.bk-dates .bk-f:first-child { border-right: 1px solid var(--c-line); }
.bk-fields > .bk-f { border-top: 1px solid var(--c-line); }
.bk-f small { display: block; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--c-ink-dim); margin-bottom: 3px; font-weight: 600; }
.bk-f span { font-size: .9rem; }
.bk-f[aria-expanded="true"] { background: var(--c-bg-inset); }
.bk-f:hover { background: var(--c-bg-inset); }
.bk-f.is-empty span { color: var(--c-ink-dim); }

.bk-cta { width: 100%; margin-top: 16px; justify-content: center; }
.bk-cta[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.bk-note { font-size: .78rem; color: var(--c-ink-dim); text-align: center; margin-top: 11px; line-height: 1.5; }
.bk-warn { font-size: .82rem; color: var(--gold-3); margin-top: 12px; text-align: center; }

.bk-lines { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-line-soft); display: grid; gap: 10px; }
.bk-lines div { display: flex; justify-content: space-between; font-size: .89rem; color: var(--c-ink-mute); }
.bk-lines div.is-disc { color: var(--gold-3); }
.bk-lines .bk-total { border-top: 1px solid var(--c-line-soft); padding-top: 12px; margin-top: 2px;
  color: var(--c-ink); font-weight: 600; font-size: 1rem; }
.bk-lines a { color: var(--c-ink-dim); text-decoration: underline; text-underline-offset: 3px; }
/* The Airbnb figure struck through beside the direct total, then the line that
   explains why it is there. */
.bk-lines .bk-total s { color: var(--c-ink-dim); font-weight: 400; margin-right: 7px;
  text-decoration-thickness: 1px; }
.bk-lines .bk-direct { display: block; font-size: .78rem; line-height: 1.5; color: var(--gold-3);
  margin: -2px 0 0; }

.bk-ota { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--c-line-soft); display: grid; gap: 9px; }
.bk-ota .btn { width: 100%; justify-content: center; }

/* Guest stepper popover */
.bk-pop { position: absolute; z-index: 40; right: 0; margin-top: 8px; background: var(--c-bg-elev);
  border: 1px solid var(--c-line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); min-width: 260px; }
.bk-popwrap { position: relative; }
.bk-step { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.bk-step b { color: var(--c-ink); font-size: .95rem; font-weight: 600; }
.bk-step small { display: block; color: var(--c-ink-dim); font-size: .8rem; font-weight: 400; }
.bk-step div { display: flex; align-items: center; gap: 14px; }
.bk-step button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-ink-mute);
  background: none; color: var(--c-ink); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.bk-step button:hover:not([disabled]) { border-color: var(--gold-2); color: var(--gold-3); }
.bk-step button[disabled] { opacity: .3; cursor: default; }

/* ---------- Calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c-line);
  background: none; color: var(--c-ink); cursor: pointer; display: grid; place-items: center; }
.cal-nav button:hover:not([disabled]) { border-color: var(--gold-2); color: var(--gold-3); }
.cal-nav button[disabled] { opacity: .3; cursor: default; }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
@media (max-width: 720px) { .cal-months { grid-template-columns: 1fr; gap: 26px; } }
.cal-m h4 { font-size: .95rem; color: var(--c-ink); font-weight: 600; text-align: center;
  margin-bottom: 12px; font-family: var(--font-sans); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { font-size: .68rem; color: var(--c-ink-dim); text-align: center; padding-bottom: 6px; }
/* touch-action:manipulation kills the double-tap-to-zoom wait on phones and
   the tap highlight, and :active answers the finger on the very next frame.
   Selection classes deliberately carry NO transition: Airbnb-instant, not a
   fade. Hover only on devices that genuinely hover, or iOS makes it sticky. */
.cal-d { aspect-ratio: 1; display: grid; place-items: center; font-size: .84rem; border: 0;
  background: none; color: var(--c-ink); border-radius: 8px; cursor: pointer; font-family: var(--font-sans);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
@media (hover: hover) { .cal-d:hover:not([disabled]) { background: var(--c-bg-elev-2); } }
.cal-d:active:not([disabled]) { background: rgba(201,162,76,.22); }
.cal-d[disabled] { color: var(--c-ink-dim); cursor: not-allowed; opacity: .35; }
.cal-d.is-pad { visibility: hidden; }
/* A booked night keeps its place with a struck-through number and a dash where
   the price sits: visible, plainly not for sale, and still tappable as a
   check-out morning when it is the first booked night after your check-in. */
.cal-d.is-booked { color: var(--c-ink-dim); opacity: .5; }
.cal-d.is-booked .cal-n, .cal-d.is-booked:not(.has-price) { text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-d.is-booked .cal-p { color: var(--c-ink-dim); }
.cal-d.can-checkout { opacity: 1; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--gold-2); }
.cal-d.can-checkout .cal-n, .cal-d.can-checkout:not(.has-price) { text-decoration: none; }
/* While a check-out is being chosen: past the next booked night is out of
   reach, and closer than the minimum stay is too soon. Both are decided
   before the tap, so the calendar never has to apologise after it. */
.cal-d.is-unreach, .cal-d.is-toosoon { opacity: .35; }
.cal-d.is-unreach { text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-d.in-range { background: rgba(201,162,76,.14); border-radius: 0; }
.cal-d.is-end { background: var(--grad-gold); color: #0A0D12; font-weight: 700; border-radius: 8px; }
.cal-d.is-start.has-range { border-radius: 8px 0 0 8px; }
.cal-d.is-finish.has-range { border-radius: 0 8px 8px 0; }
/* Per-night prices, shown only when PriceLabs is feeding the calendar. The
   square cell has to give a little to fit two lines, so it drops the fixed
   aspect ratio and holds a minimum height instead. */
.cal-d.has-price { aspect-ratio: auto; min-height: 48px; grid-auto-rows: min-content;
  align-content: center; gap: 2px; padding: 5px 0; }
.cal-d .cal-n { line-height: 1.1; }
.cal-d .cal-p { font-size: .62rem; line-height: 1; color: var(--c-ink-dim); font-variant-numeric: tabular-nums; }
.cal-d.is-end .cal-p { color: rgba(10, 13, 18, .74); }
.cal-d.in-range .cal-p { color: var(--c-ink-mute); }
@media (max-width: 380px) { .cal-d .cal-p { font-size: .55rem; } }
.cal-foot { margin-top: 18px; font-size: .82rem; color: var(--c-ink-dim); }

/* The small guidance note that pops up inside the calendar (minimum stay,
   checkout boundary). Sticky, so it stays under the thumb on a phone while
   the guest is scrolling between months. Black card, gold rule: house style. */
.cal-note { position: sticky; bottom: 14px; z-index: 5; margin-top: 14px;
  padding: 11px 15px; border-radius: 12px; background: var(--c-bg-elev-2);
  border: 1px solid var(--gold-2); color: var(--gold-3); font-size: .84rem;
  line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.cal-note.is-in { animation: calNoteIn .18s ease-out both; }
@keyframes calNoteIn { from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; } }

/* ---------- Reviews slot ---------- */
.pdp-rev { border: 1px solid var(--c-line-soft); border-radius: 14px; padding: 24px; background: var(--c-bg-inset); }
.pdp-rev h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--c-ink); margin-bottom: 10px; font-weight: 500; }
.pdp-rev p { color: var(--c-ink-mute); font-size: .93rem; margin: 0 0 8px; }

/* ---------- Policies ---------- */
.pol-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; }
@media (max-width: 860px) { .pol-cols { grid-template-columns: 1fr; gap: 0; }
  .pol-cols section { padding: 22px 0; border-bottom: 1px solid var(--c-line-soft); }
  .pol-cols section:last-child { border-bottom: 0; } }
.pol-cols h3 { font-size: 1rem; color: var(--c-ink); font-weight: 600; margin-bottom: 14px; font-family: var(--font-sans); }
.pol-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pol-cols li { font-size: .89rem; color: var(--c-ink-mute); }

/* ---------- Host card ---------- */
.pdp-host { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center;
  border: 1px solid var(--c-line-soft); border-radius: 16px; padding: 26px; background: var(--c-bg-inset); }
@media (max-width: 720px) { .pdp-host { grid-template-columns: 1fr; gap: 20px; } }
.pdp-host img { width: 100%; border-radius: 14px; object-fit: cover; aspect-ratio: 1; }
.pdp-host h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--c-ink); margin-bottom: 6px; font-weight: 500; }
.pdp-host .ph-rows { display: grid; gap: 7px; margin: 14px 0 18px; }
.pdp-host .ph-rows span { display: flex; gap: 10px; align-items: center; font-size: .88rem; color: var(--c-ink-mute); }
.pdp-host .ph-rows svg { color: var(--gold-3); flex: 0 0 auto; }

/* ---------- Video ---------- */
.pdp-video { display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: center; }
@media (max-width: 780px) { .pdp-video { grid-template-columns: 1fr; gap: 26px; } }
.pv-frame { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--c-line);
  background: #000; aspect-ratio: 9/16; max-width: 340px; width: 100%; margin: 0 auto; }
.pv-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-play { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(10,13,18,.28); border: 0; width: 100%; transition: background .25s; }
.pv-play:hover { background: rgba(10,13,18,.14); }
.pv-play span { width: 66px; height: 66px; border-radius: 50%; background: rgba(10,13,18,.82);
  border: 1px solid var(--gold-2); display: grid; place-items: center; color: var(--gold-3); }
.pdp-video .pv-note { font-size: .82rem; color: var(--c-ink-dim); margin-top: 14px; }

/* ---------- Sticky sub-nav ---------- */
.pdp-subnav { position: sticky; top: 64px; z-index: 30; background: rgba(10,13,18,.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line-soft); }
.pdp-subnav div { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: flex; gap: 26px; overflow-x: auto; }
.pdp-subnav a { padding: 15px 0; font-size: .87rem; color: var(--c-ink-mute); white-space: nowrap;
  border-bottom: 2px solid transparent; }
.pdp-subnav a:hover { color: var(--c-ink); }
.pdp-subnav a.is-active { color: var(--c-ink); border-bottom-color: var(--gold-2); }
@media (max-width: 700px) { .pdp-subnav { display: none; } }

/* ---------- Generic modal ---------- */
.pdp-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(6,8,11,.97);
  backdrop-filter: blur(4px); display: grid; grid-template-rows: auto 1fr; }
.pdp-modal[hidden] { display: none !important; }
.pdp-modal-top { display: flex; justify-content: flex-start; padding: 16px 20px;
  border-bottom: 1px solid var(--c-line-soft); }
.pdp-modal-close { background: none; border: 1px solid var(--c-line); color: var(--c-ink);
  border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: grid; place-items: center; }
.pdp-modal-close:hover { border-color: var(--gold-2); background: var(--c-bg-elev); }
.pdp-modal-body { overflow-y: auto; padding: 34px 20px 60px; }
.pdp-modal-body .inner { max-width: 780px; margin: 0 auto; }
.pdp-modal-body h2 { font-family: var(--font-display); font-size: 1.7rem; color: var(--c-ink);
  font-weight: 500; margin-bottom: 20px; }
.pdp-modal-body h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-3);
  margin: 30px 0 12px; font-weight: 500; }
.pdp-modal-body p { color: var(--c-ink-mute); margin-bottom: 14px; }
.pdp-modal-body ul { color: var(--c-ink-mute); margin: 0 0 14px 20px; }
.pdp-modal-body li { margin-bottom: 7px; }

/* Photo tour modal: Airbnb's ONE / TWO media-block rhythm */
.tour-rooms { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.tour-blocks { display: grid; gap: 12px; }
.tour-one img { width: 100%; border-radius: 12px; display: block; }
.tour-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tour-two img { width: 100%; border-radius: 12px; display: block; aspect-ratio: 3/2; object-fit: cover; }
.tour-blocks img { cursor: pointer; }
.tour-room-h { font-family: var(--font-display); font-size: 1.35rem; color: var(--c-ink);
  font-weight: 500; margin: 38px 0 14px; }
.tour-room-h:first-of-type { margin-top: 0; }

/* Free-cancellation reassurance, directly under the pay button. This is the
   single most asked question before a £500+ booking, so it sits at the point of
   decision rather than only in the policies further down the page. */
.bk-free { display: flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: .84rem; font-weight: 600; color: var(--gold-3); text-align: left; }
.bk-free svg { flex: 0 0 auto; }

/* The walkthrough now sits inside "Where you will sleep", above the room cards,
   in the narrower left column rather than full page width. The video is 9:16,
   so it keeps a fixed, modest width and lets the copy take the rest. */
.pdp-video-inline { grid-template-columns: 240px minmax(0, 1fr); gap: 26px; margin-bottom: 26px; }
@media (max-width: 900px) { .pdp-video-inline { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 900px) { .pdp-video-inline .pv-frame { max-width: 260px; } }