/* =============================================================================
   TSF LISTING — hero + below-the-fold sections
   Direction B, resolved. Source: design-system/components/hero-direction-b.html
   and design-system/components/listing-below-fold.html.

   Everything resolves to the canonical token layer (css/tsf-tokens.css) with
   the canonical value as fallback.

   Reflow is driven by CONTAINER queries on .tsf-hero / .tsf-sections, not
   viewport media queries, so both work inside any column width. The @supports
   block at the bottom is the viewport fallback for browsers without container
   query support.
   ========================================================================== */

.tsf-hero,
.tsf-sections {
  container-type: inline-size;
  --pad: 48px;
  --indent: 278px;
  background: var(--tsf-bg, #131313);
  color: var(--tsf-text, #CBCBCB);
  font-family: var(--tsf-font-body, "Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
}
.tsf-hero *,
.tsf-sections * { box-sizing: border-box; }

/* ── Elementor column-wrap guard — REQUIRED by container-type above ───────── */
/* Elementor ships "--flex-wrap-mobile: wrap" as the DEFAULT on every .e-con
   (custom-frontend.min.css), and activates it with
     @media (max-width:767px){ .e-con.e-flex { --flex-wrap: var(--flex-wrap-mobile) } }
   so below 768px every container becomes a WRAPPING COLUMN flex box.

   A wrapping flex container has to intrinsically size its items to decide where
   to break lines. That intrinsic pass measures our shortcode widget at a width
   that is not its final width — and because .tsf-hero / .tsf-sections declare
   container-type, their @container queries resolve against THAT width and bake
   in the wrong height. Chrome then keeps the bogus height. Measured on
   Black Orchard at 380px: hero widget 1158px -> 2038px, i.e. a ~900px hole
   between the hero and the section below it. Other widgets go the other way and
   come out SHORT, so content overlaps rather than gaps.

   Both ingredients are needed: forcing nowrap fixes it, and so does removing
   container-type — but removing container-type costs us the whole responsive
   hero, so nowrap is the fix. Wrap does nothing useful on an auto-height column
   container anyway.

   Specificity is load-bearing, not decorative: Elementor's rule is .e-con.e-flex
   (0,2,0) and the per-template rules set --flex-wrap-mobile at (0,3,0), so we
   override --flex-wrap (not --flex-wrap-mobile) at (0,3,0) — :has() contributes
   its most specific argument. Do not simplify the selector to .e-con:has(...);
   at (0,2,0) it silently loses. Verified no-op at >=768px. */
@media (max-width: 767px) {
  .e-con.e-flex:has(.tsf-hero),
  .e-con.e-flex:has(.tsf-sections) { --flex-wrap: nowrap; }
}

/* Scrim between the photograph and the content. Without it the title, meta and
   pills are unreadable over light or busy photography. */
.tsf-hero {
  --tsf-hero-scrim: linear-gradient(rgba(0,0,0,.72) 0%, rgba(0,0,0,.60) 55%, rgba(0,0,0,.88) 100%);
}

/* ── Band 1 — identity ──────────────────────────────────────────────────── */
/* 300 / 1fr / 340: the logo column is fixed so every listing frames identically. */
.tsf-hero-band {
  background-image: var(--tsf-hero-scrim), var(--tsf-hero-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 34px var(--pad) 30px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
  border-bottom: 1px solid var(--tsf-line-soft, #2A2A2A);
}

.tsf-hero-logo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--tsf-radius-lg, 13px);
  overflow: hidden;
  background: var(--tsf-surface-raised, #151515);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--tsf-shadow-card, 0 13px 50px -13px #000);
}
/* contain, NOT cover. Measured across 76 logos in the live library, aspect
   ratios run 0.64:1 to 7.89:1 (median 1.49) — there is no house standard, so
   cover was slicing the ends off every wide banner and the top and bottom off
   every square one. contain letterboxes onto the panel surface instead, which
   is the only way the whole mark is guaranteed visible.
   Frame stays 16:9: at object-fit:contain the mean visible logo area across
   that sample is 4:3 70.1% · 3:2 70.0% · 16:9 68.6% · 1:1 66.5%, and a SQUARE
   frame is the worst of the options (7 logos would render under 30% of the
   frame, vs 1 at 16:9). Do not "tidy" this to a square. */
.tsf-hero-logo img {
  width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px;
}
.tsf-hero-logo--empty {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #161616 0 9px, #121212 9px 18px);
}
.tsf-hero-logo--empty span {
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  font-size: 2.4rem; line-height: 1; color: #4A4A4A; letter-spacing: 2px;
}

.tsf-hero-identity { min-width: 0; }
/* White, not red — red is reserved for section rules and scores, so the H1
   stops competing with the nav. */
.tsf-hero-title {
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  color: #fff;
  margin: 0;
  font-size: 3.1rem;
  line-height: 1;
  letter-spacing: .5px;
  text-shadow: var(--tsf-shadow-text, 0 2px 8px rgba(0,0,0,.7));
  text-wrap: balance;
}
.tsf-hero-tagline {
  color: #D9D9D9; font-style: italic; font-size: .98rem; margin: 9px 0 0;
  text-shadow: var(--tsf-shadow-text, 0 2px 8px rgba(0,0,0,.7));
}

.tsf-hero-metarow {
  display: flex; flex-wrap: wrap; gap: 7px 22px; align-items: center;
  margin: 14px 0 0; font-size: .9rem; color: #DEDEDE;
  text-shadow: var(--tsf-shadow-text, 0 2px 8px rgba(0,0,0,.7));
}
.tsf-hero-metaitem { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.tsf-hero-ic { width: 14px; height: 14px; flex: 0 0 auto; fill: currentColor; opacity: .75; position: relative; top: 2px; }
.tsf-hero-metarow a { color: inherit; text-decoration: none; }
.tsf-hero-metarow a:hover { color: var(--tsf-orange, #FF6600); }
.tsf-hero-stars { color: var(--tsf-star, #FFB703); letter-spacing: 1px; }
.tsf-hero-rating b { color: #fff; font-weight: 700; }
.tsf-hero-of { color: #B4B4B4; }
.tsf-hero-norating { color: #ADADAD; font-size: .88rem; }
.tsf-hero-norating a { color: var(--tsf-orange, #FF6600); }

.tsf-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tsf-hero-pill {
  padding: .3em .8em;
  border: 2px solid var(--tsf-orange, #FF6600);
  border-radius: var(--tsf-radius-xl, 31px);
  background: rgba(19,19,19,.72);
  color: #EDEDED;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.tsf-hero-pill.is-lead { border-color: var(--tsf-red, #FF0000); background: rgba(90,0,0,.5); }

.tsf-hero-notice {
  display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 10px 14px;
  border-radius: var(--tsf-radius-sm, 8px);
  background: rgba(255,102,0,.13);
  border: 1px solid rgba(255,102,0,.45);
  color: #FFC08A; font-size: .82rem; font-weight: 600; max-width: 60ch;
}
.tsf-hero-notice svg { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; margin-top: 2px; }

/* aside — review button, link icons, ticket CTA */
.tsf-hero-aside { display: flex; flex-direction: column; align-items: stretch; gap: 13px; min-width: 0; }

/* Review button: the existing 800×250 PNG with the score welded on in %, so it
   stays put at any width. */
.tsf-hero-revbtn {
  position: relative; display: block; width: 100%; aspect-ratio: 800 / 250;
  border-radius: var(--tsf-radius-sm, 8px); overflow: hidden;
  transition: transform var(--tsf-transition, 180ms ease-in-out), filter var(--tsf-transition, 180ms ease-in-out);
}
.tsf-hero-revbtn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tsf-hero-revbtn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.tsf-hero-revscore {
  position: absolute; top: 50%; left: 87.5%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; line-height: 1;
}
.tsf-hero-revscore .n {
  display: block;
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  font-size: 2.1rem; color: #fff; text-shadow: 0 2px 7px rgba(0,0,0,.95);
}
.tsf-hero-revscore .l {
  display: block; font-size: .46rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--tsf-red, #FF0000); font-weight: 700; margin-top: 3px;
}

.tsf-hero-noreview {
  border: 1px dashed var(--tsf-line, #3F3F3F);
  border-radius: var(--tsf-radius-sm, 8px);
  background: rgba(12,12,12,.66);
  padding: 15px 17px; text-align: center;
}
.tsf-hero-noreview-h {
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  color: var(--tsf-text-strong, #F2F2F2); font-size: 1.15rem; letter-spacing: .5px;
}
.tsf-hero-noreview-p { color: var(--tsf-text-muted, #8A8A8A); font-size: .78rem; margin-top: 4px; }

/* align-content is load-bearing: this is a wrapped flex container, so any
   surplus height would otherwise be distributed BETWEEN the icon lines
   (align-content defaults to stretch) rather than left below them. */
.tsf-hero-links { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; justify-content: flex-end; }
.tsf-hero-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--tsf-radius-md, 10px);
  background: rgba(12,12,12,.6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: border-color var(--tsf-transition, 180ms ease-in-out), background var(--tsf-transition, 180ms ease-in-out), transform var(--tsf-transition, 180ms ease-in-out);
}
.tsf-hero-links a:hover { border-color: var(--tsf-red, #FF0000); background: rgba(32,32,32,.9); transform: translateY(-1px); }
/* 28 in a 40px chip (70%), not 22 (55%). The source PNGs are full-bleed —
   measured content bounds are 297-298px inside a 300px canvas, i.e. 1-3px of
   built-in padding — so every bit of the old inset was ours, and the glyphs
   read as small and hard to make out at 22px. */
.tsf-hero-links img { width: 28px; height: 28px; object-fit: contain; display: block; }

.tsf-hero-cta {
  display: block; text-align: center; padding: 11px 18px;
  border-radius: var(--tsf-radius-lg, 13px);
  background: var(--tsf-red-solid, #BB0000);
  color: #fff !important;
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none !important;
  transition: background var(--tsf-transition, 180ms ease-in-out);
}
.tsf-hero-cta:hover { background: var(--tsf-red-hover, #C00000); color: #fff !important; }

/* ── Band 2 — facts strip ───────────────────────────────────────────────── */
.tsf-hero-facts {
  display: flex; flex-wrap: wrap;
  background: var(--tsf-surface-sunken, #0C0C0C);
  border-bottom: 1px solid var(--tsf-line-soft, #2A2A2A);
  padding: 0 var(--pad);
}
.tsf-hero-fact {
  flex: 1 1 0; min-width: 140px;
  padding: 14px 20px 14px 0; margin-right: 20px;
  border-right: 1px solid var(--tsf-line-soft, #2A2A2A);
}
.tsf-hero-fact:last-child { border-right: none; margin-right: 0; }
.tsf-hero-fact .k {
  display: flex; align-items: center; gap: 5px;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--tsf-text-muted, #8A8A8A); font-weight: 700;
}
.tsf-hero-fact .v {
  display: block; color: var(--tsf-text-strong, #F2F2F2);
  font-weight: 700; font-size: 1rem; margin-top: 4px;
}
.tsf-hero-fact .v.is-ok { color: var(--ha-visited, #37D67A); }
.tsf-hero-fact .v.is-na { color: var(--tsf-text-muted, #8A8A8A); font-weight: 400; }

/* ── Band 3 — dates / hours / tickets ───────────────────────────────────── */
.tsf-hero-dates {
  padding: 18px var(--pad) 20px;
  background: var(--tsf-surface, #0F0F0F);
  border-bottom: 1px solid var(--tsf-line-soft, #2A2A2A);
}
.tsf-hero-dates.is-thin { padding: 13px var(--pad); }
.tsf-hero-dates-wrap summary {
  display: flex; align-items: baseline; gap: 12px;
  cursor: pointer; list-style: none;
}
.tsf-hero-dates-wrap summary::-webkit-details-marker { display: none; }
.tsf-hero-dates-h {
  margin: 0 0 8px;
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  color: var(--tsf-red, #FF0000);
  font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 400;
}
/* Label flips with the disclosure state — one element, no JS. */
.tsf-hero-dates-more::after {
  content: "Show all dates & pricing \25BE";
  color: var(--tsf-orange, #FF6600); font-size: .79rem; font-weight: 700;
}
.tsf-hero-dates-wrap[open] .tsf-hero-dates-more::after { content: "Show less \25B4"; }
.tsf-hero-dates-body { font-size: .88rem; line-height: 1.6; color: var(--tsf-text, #CBCBCB); }
.tsf-hero-dates-body p { margin: 0 0 .6em; }
.tsf-hero-dates-body p:last-child { margin-bottom: 0; }
/* Closed: clamp to ~5 lines so a long entry can't blow out the hero. */
.tsf-hero-dates-wrap:not([open]) .tsf-hero-dates-body {
  max-height: 4.8em; overflow: hidden;
}
.tsf-hero-dates.is-thin .tsf-hero-dates-body {
  color: var(--tsf-text-muted, #8A8A8A); font-style: italic;
}

/* ── Calendar image (dates_hours_image) beside the dates text ───────────── */
.tsf-hero-dates-split {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px; align-items: start;
}
.tsf-hero-dates-text { min-width: 0; }
/* REQUIRED, not cosmetic. The closed state above CLAMPS the body (max-height +
   overflow), it does not hide it — so the thumbnail would sit in the visible
   first 4.8em and appear before the visitor ever expands. Collapsing the grid
   to one column at the same time stops the text reserving a dead 190px gutter
   while closed. */
.tsf-hero-dates-wrap:not([open]) .tsf-hero-cal { display: none; }
.tsf-hero-dates-wrap:not([open]) .tsf-hero-dates-split { grid-template-columns: 1fr; }

.tsf-hero-cal { display: block; text-decoration: none; }
.tsf-hero-cal img {
  display: block; width: 100%; height: auto;
  border-radius: var(--tsf-radius-md, 10px);
  border: 1px solid var(--tsf-line, #3F3F3F);
  background: var(--tsf-surface-sunken, #0C0C0C);
  transition: border-color var(--tsf-transition, 180ms ease-in-out);
}
.tsf-hero-cal:hover img { border-color: var(--tsf-red, #FF0000); }
.tsf-hero-cal:focus-visible { outline: 2px solid var(--tsf-red, #FF0000); outline-offset: 3px; }
.tsf-hero-cal-hint {
  display: block; margin-top: 6px; text-align: center;
  color: var(--tsf-text-muted, #8A8A8A); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}

/* ── Coupons & discounts strip ──────────────────────────────────────────── */
/* Gold, not red: red is the section-rule / score colour on this page, and the
   red notice strip above already means "warning". An offer needs to read as
   distinct from both. */
.tsf-hero-coupon {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px var(--pad);
  background: rgba(202, 162, 74, .09);
  border-bottom: 1px solid var(--tsf-line-soft, #2A2A2A);
  border-left: 3px solid var(--tsf-status-lead, #CAA24A);
}
.tsf-hero-coupon-ic {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  fill: var(--tsf-status-lead, #CAA24A);
}
.tsf-hero-coupon-body { flex: 1 1 auto; min-width: 0; }
.tsf-hero-coupon-h {
  display: block; margin-bottom: 3px;
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  color: var(--tsf-status-lead, #CAA24A);
  font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
}
.tsf-hero-coupon-text { font-size: .88rem; line-height: 1.55; color: var(--tsf-text-strong, #F2F2F2); }
.tsf-hero-coupon-text p { margin: 0 0 .5em; }
.tsf-hero-coupon-text p:last-child { margin-bottom: 0; }
.tsf-hero-coupon-exp {
  flex: 0 0 auto; align-self: center;
  color: var(--tsf-text-muted, #8A8A8A); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700; white-space: nowrap;
}

/* =============================================================================
   BELOW-THE-FOLD SECTIONS
   The Review template's section vocabulary, adopted verbatim so the two
   templates read as one product: white display title between two red hairlines
   (fixed 260px stub left, rule filling to the gutter), content hanging at the
   same 278px indent, ONE hairline between sections, no per-section background.
   ========================================================================== */

.tsf-sect { padding: 40px var(--pad); }
.tsf-sect + .tsf-sect { border-top: 1px solid var(--tsf-line-soft, #2A2A2A); }

.tsf-shead { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; }
.tsf-shead .r1 { flex: 0 0 260px; height: 1px; background: var(--tsf-red, #FF0000); }
.tsf-shead .r2 { flex: 1 1 auto; height: 1px; background: var(--tsf-red, #FF0000); }
.tsf-shead h2 {
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  color: #fff; font-size: 2.05rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: .02em; margin: 0; white-space: nowrap; line-height: 1;
}
/* "About <listing title>" is the only header whose text is unbounded — every
   other one is a short fixed string, which is what nowrap + a rigid 260px stub
   assume. A long haunt name would run past the section edge, so this variant
   wraps and takes the narrower stub. */
.tsf-shead.is-long h2 { white-space: normal; line-height: 1.1; }
.tsf-shead.is-long .r1 { flex: 0 0 60px; }
.tsf-shead .chip {
  font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tsf-text-muted, #8A8A8A);
  border: 1px solid var(--tsf-line, #3F3F3F);
  border-radius: var(--tsf-radius-xl, 31px);
  padding: 4px 11px; white-space: nowrap;
}
.tsf-hang { margin-left: var(--indent); }

/* ── Features & Amenities — the Review's red-dot checklist, 3 columns ────── */
.tsf-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 40px; }
.tsf-check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--tsf-text-strong, #F2F2F2); }
.tsf-check i { flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--tsf-red, #FF0000); margin-top: 8px; }
/* "You Will Not Be Touched" and friends read as reassurance, not a warning. */
.tsf-check.is-no i { background: var(--ha-visited, #37D67A); }

/* ── Photos & Videos ───────────────────────────────────────────────────── */
.tsf-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Same 16:9 framing as the hero's logo block. */
.tsf-frame {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--tsf-radius-lg, 13px); overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  background: var(--tsf-surface, #0F0F0F);
}
.tsf-frame iframe,
.tsf-frame img,
.tsf-frame > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tsf-frame img { object-fit: cover; }
.tsf-cap { color: var(--tsf-text-muted, #8A8A8A); font-size: .8rem; margin: 9px 0 0; }
.tsf-cap b { color: var(--tsf-text-strong, #F2F2F2); font-weight: 700; }

.tsf-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.tsf-gallery a {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--tsf-radius-sm, 8px);
  border: 1px solid rgba(255,255,255,.13);
}
.tsf-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--tsf-transition, 180ms ease-in-out); }
.tsf-gallery a:hover img { transform: scale(1.04); }

/* ── Plan Your Visit — dark map + Getting There panel ───────────────────── */
.tsf-plan { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
.tsf-map {
  position: relative; aspect-ratio: 16 / 10;
  border-radius: var(--tsf-radius-lg, 13px); overflow: hidden;
  border: 1px solid var(--tsf-line, #3F3F3F);
  /* Radial wash reads as "a map lives here" without loading one. */
  background: radial-gradient(120% 90% at 30% 20%, #1b1f22 0%, #101315 60%, #0b0d0e 100%);
}
.tsf-map iframe,
.tsf-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Facade — replaced by .tsf-map-canvas on activation (tsf-listing-map.js). */
.tsf-map-facade {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center;
}
/* Faint grid so the placeholder reads as cartography, not an empty box. */
.tsf-map-facade::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
}
.tsf-map-pin {
  width: 34px; height: 34px; fill: var(--tsf-red, #FF0000);
  filter: drop-shadow(0 0 12px rgba(255,0,0,.35)); position: relative;
}
.tsf-map-activate {
  position: relative;
  padding: 11px 22px;
  border: 1px solid var(--tsf-line, #3F3F3F);
  border-radius: var(--tsf-radius-lg, 13px);
  background: rgba(12,12,12,.72);
  color: var(--tsf-text-strong, #F2F2F2);
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  transition: border-color var(--tsf-transition, 180ms ease-in-out), color var(--tsf-transition, 180ms ease-in-out), background var(--tsf-transition, 180ms ease-in-out);
}
.tsf-map-activate:hover { border-color: var(--tsf-red, #FF0000); color: #fff; background: rgba(30,30,30,.9); }
.tsf-map-activate:focus-visible { outline: 2px solid var(--tsf-red, #FF0000); outline-offset: 2px; }
.tsf-map-activate:disabled { opacity: .6; cursor: default; }
.tsf-map-facade .tsf-fine { position: relative; margin: 0; }

.tsf-panel {
  border: 1px solid var(--tsf-line-soft, #2A2A2A);
  border-radius: var(--tsf-radius-lg, 13px);
  background: var(--tsf-surface, #0F0F0F);
  padding: 20px 22px;
}
.tsf-panel + .tsf-panel { margin-top: 20px; }
.tsf-panel h3 {
  margin: 0 0 15px;
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  color: var(--tsf-text-strong, #F2F2F2);
  font-size: 1.15rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
}
.tsf-row {
  display: flex; justify-content: space-between; gap: 18px; padding: 11px 0;
  border-top: 1px solid var(--tsf-line-soft, #2A2A2A); font-size: .9rem;
}
.tsf-row:first-of-type { border-top: none; padding-top: 0; }
.tsf-row .k {
  color: var(--tsf-text-muted, #8A8A8A); font-size: .63rem; text-transform: uppercase;
  letter-spacing: .13em; font-weight: 700; flex: 0 0 96px; padding-top: 3px;
}
.tsf-row .v { color: var(--tsf-text-strong, #F2F2F2); font-weight: 700; text-align: right; }
.tsf-cta {
  display: block; margin-top: 17px; text-align: center; padding: 12px 18px;
  border-radius: var(--tsf-radius-lg, 13px);
  background: var(--tsf-red-solid, #BB0000);
  color: #fff !important; text-decoration: none !important;
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  transition: background var(--tsf-transition, 180ms ease-in-out);
}
.tsf-cta:hover { background: var(--tsf-red-hover, #C00000); color: #fff !important; }

/* Facebook facade — replaces the white Page-plugin slab; the iframe loads on tap. */
.tsf-fb { display: flex; gap: 14px; align-items: center; }
.tsf-fb-avatar {
  flex: 0 0 52px; height: 52px; border-radius: var(--tsf-radius-sm, 8px);
  border: 1px solid rgba(255,255,255,.13);
  background: var(--tsf-surface-raised, #151515);
  display: flex; align-items: center; justify-content: center;
  color: var(--tsf-text-muted, #8A8A8A);
}
.tsf-fb-avatar svg { width: 26px; height: 26px; fill: currentColor; }
.tsf-fb-name { color: var(--tsf-text-strong, #F2F2F2); font-weight: 700; font-size: .98rem; }
.tsf-fb-sub { color: var(--tsf-text-muted, #8A8A8A); font-size: .82rem; margin-top: 2px; }
.tsf-ghost {
  display: block; width: 100%; margin-top: 16px; text-align: center; padding: 10px 18px;
  border: 1px solid var(--tsf-line, #3F3F3F);
  border-radius: var(--tsf-radius-lg, 13px);
  background: transparent;
  color: var(--tsf-text-strong, #F2F2F2);
  font-family: var(--tsf-font-display, "Scare Factor Custom", Impact, sans-serif);
  font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  transition: border-color var(--tsf-transition, 180ms ease-in-out), color var(--tsf-transition, 180ms ease-in-out);
}
.tsf-ghost:hover { border-color: var(--tsf-red, #FF0000); color: #fff; }
.tsf-fine { color: var(--tsf-text-muted, #8A8A8A); font-size: .75rem; margin: 10px 0 0; text-align: center; }
.tsf-fb-embed { margin-top: 16px; }
.tsf-fb-embed iframe { width: 100%; border: 0; display: block; }

/* ── About — long-form summary prose ────────────────────────────────────── */
/* summary_premium is a wysiwyg, so this has to style whatever the editor
   produced (p / ul / ol / a / strong), not a known shape. */
.tsf-prose {
  color: var(--tsf-text, #CBCBCB);
  font-size: var(--tsf-size-sm, 0.95rem);
  line-height: var(--tsf-leading-body, 1.7);
  max-width: 78ch;
}
.tsf-prose p { margin: 0 0 1em; }
.tsf-prose p:last-child { margin-bottom: 0; }
.tsf-prose ul, .tsf-prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.tsf-prose li { margin-bottom: .4em; }
.tsf-prose strong, .tsf-prose b { color: var(--tsf-text-strong, #F2F2F2); }
.tsf-prose a { color: var(--tsf-red, #FF0000); text-decoration: underline; }
.tsf-prose a:hover { color: var(--tsf-red-hover, #C00000); }

/* ── Nearby Haunts card row — the existing listing-card geometry ────────── */
/* Sponsored Haunts keeps its own component ([tsf_dynamic_ad_carousel] +
   css/featured-haunts.css); only the section header around it changes. */
.tsf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tsf-cards.is-two { grid-template-columns: repeat(2, 1fr); max-width: 840px; }

/* ── container queries: tablet ──────────────────────────────────────────── */
@container (max-width: 1080px) {
  .tsf-hero > *, .tsf-sections > * { --pad: 28px; --indent: 0px; }
  .tsf-hero-band { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
  /* wrap is load-bearing: the review button is rigid at 300px and the CTA is
     0 0 auto, so without it the link icons are the only flexible item and get
     crushed to ~2 per row — a 240px column of icons beside a 94px button, which
     reads as dead space in the hero. Wrapping drops the CTA to its own line
     instead. The 240px basis keeps at least six icons per row before that. */
  .tsf-hero-aside { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
  .tsf-hero-revbtn { width: 300px; flex: 0 0 300px; }
  .tsf-hero-noreview { flex: 1 1 240px; text-align: left; }
  .tsf-hero-links { justify-content: flex-start; flex: 1 1 240px; }
  .tsf-hero-cta { flex: 1 1 auto; padding: 11px 22px; }
  .tsf-hero-title { font-size: 2.5rem; }
  .tsf-hero-fact { min-width: 120px; }

  .tsf-shead h2 { font-size: 1.6rem; }
  .tsf-shead .r1 { flex: 0 0 60px; }
  .tsf-hang { margin-left: 0; }
  .tsf-plan { grid-template-columns: 1fr; }
  /* .tsf-plan just dropped to one column, so the Getting There panel is now
     FULL width instead of the 5fr sidebar that `justify-content: space-between`
     was designed for. Left alone, the value is stranded ~475px from its label
     (measured, 900px viewport). Pin the pair together — the 18px row gap is the
     whole separation we want here. */
  .tsf-row { justify-content: flex-start; }
  .tsf-row .v { text-align: left; }
  .tsf-checks { grid-template-columns: 1fr 1fr; }
  .tsf-cards { grid-template-columns: 1fr 1fr; }
  .tsf-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* ── container queries: mobile ──────────────────────────────────────────── */
/* 720px, NOT 640px. This is a CONTAINER width and it has to line up with the
   VIEWPORT breakpoints used by Elementor (767px) and by ha-styles.css. The
   container runs ~46px narrower than the viewport (the Elementor container's
   own padding), so 720px container ~= 766px viewport.
   Firing mobile styles EARLY is always safe; firing LATE leaves a window where
   the hero is still in two-column tablet layout at phone widths, which is what
   produced the 670-765px dead zone. Do not lower this number. */
@container (max-width: 720px) {
  .tsf-hero > *, .tsf-sections > * { --pad: 16px; }
  .tsf-hero-band { grid-template-columns: 1fr; gap: 16px; padding: 20px var(--pad) 22px; }
  .tsf-hero-title { font-size: 1.95rem; }
  /* Back to a column, so the tablet band's flex-BASIS values must be cleared —
     on this axis 240px would be a height, not a width. */
  .tsf-hero-aside { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .tsf-hero-revbtn { width: 100%; flex: 0 0 auto; }
  .tsf-hero-noreview { flex: 0 0 auto; }
  .tsf-hero-cta { flex: 0 0 auto; }
  .tsf-hero-links { justify-content: flex-start; flex-wrap: wrap; flex: 0 0 auto; }
  /* WCAG target size on touch. Icon scales with the chip to hold the 70%. */
  .tsf-hero-links a { width: 44px; height: 44px; }
  .tsf-hero-links img { width: 31px; height: 31px; }
  .tsf-hero-fact { flex: 1 1 44%; min-width: 0; padding: 12px 14px 12px 0; margin-right: 14px; }
  .tsf-hero-fact:nth-child(even) { border-right: none; margin-right: 0; }
  /* Calendar under the text, capped so a tall poster doesn't own the screen. */
  .tsf-hero-dates-split { grid-template-columns: 1fr; gap: 14px; }
  .tsf-hero-cal img { max-width: 320px; margin: 0 auto; }
  /* Expiry drops under the offer rather than squeezing it to a sliver. */
  .tsf-hero-coupon { flex-wrap: wrap; }
  .tsf-hero-coupon-exp { align-self: flex-start; margin-left: 32px; }

  .tsf-sect { padding: 28px var(--pad); }
  .tsf-shead { gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
  .tsf-shead h2 { font-size: 1.3rem; white-space: normal; }
  .tsf-shead .chip { white-space: normal; }
  .tsf-shead .r2 { flex: 1 1 30px; }
  .tsf-mgrid, .tsf-checks, .tsf-cards, .tsf-cards.is-two { grid-template-columns: 1fr; }
  .tsf-gallery { grid-template-columns: repeat(2, 1fr); }
  .tsf-row { flex-direction: column; gap: 3px; }
  /* Same trap as .tsf-hero-aside above: .tsf-row .k is `flex: 0 0 96px`, and on
     THIS axis the basis is a HEIGHT, so every label sat in a 96px-tall box —
     the 96px hole between "ADDRESS" and the street address. padding-top is
     cross-axis optical alignment for row mode only, so it goes too. */
  .tsf-row .k { flex: 0 0 auto; padding-top: 0; }
  .tsf-row .v { text-align: left; }
}

/* ── viewport fallback for browsers without container queries ───────────── */
/* These are VIEWPORT queries, so they use Elementor's own breakpoints (1024 /
   767) rather than the container numbers above (1080 / 720). Same intent, other
   axis -- don't "tidy" the two pairs into matching. */
@supports not (container-type: inline-size) {
  @media (max-width: 1024px) {
    .tsf-hero, .tsf-sections { --pad: 28px; --indent: 0px; }
    .tsf-hero-band { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
    .tsf-hero-aside { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
    .tsf-hero-revbtn { width: 300px; flex: 0 0 300px; }
    .tsf-hero-noreview { flex: 1 1 240px; text-align: left; }
    .tsf-hero-links { justify-content: flex-start; flex: 1 1 240px; }
    .tsf-hero-cta { flex: 1 1 auto; padding: 11px 22px; }
    .tsf-hero-title { font-size: 2.5rem; }
    .tsf-shead h2 { font-size: 1.6rem; }
    .tsf-shead .r1 { flex: 0 0 60px; }
    .tsf-hang { margin-left: 0; }
    .tsf-plan, .tsf-checks { grid-template-columns: 1fr; }
    .tsf-cards { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 767px) {
    .tsf-hero, .tsf-sections { --pad: 16px; }
    .tsf-hero-band { grid-template-columns: 1fr; gap: 16px; padding: 20px var(--pad) 22px; }
    .tsf-hero-title { font-size: 1.95rem; }
    .tsf-hero-aside { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .tsf-hero-revbtn { width: 100%; flex: 0 0 auto; }
    .tsf-hero-noreview { flex: 0 0 auto; }
    .tsf-hero-cta { flex: 0 0 auto; }
    .tsf-hero-links { flex: 0 0 auto; }
    .tsf-hero-links a { width: 44px; height: 44px; }
    .tsf-hero-links img { width: 31px; height: 31px; }
    .tsf-hero-fact { flex: 1 1 44%; }
    .tsf-mgrid, .tsf-cards, .tsf-cards.is-two { grid-template-columns: 1fr; }
    .tsf-gallery { grid-template-columns: repeat(2, 1fr); }
  }
}