/* ===================================================================
   StrikePoint Laser Tag — attractions page styles.
   Loads after /pages.css and only adds what the attractions layout and
   its image viewer need. Colors, fonts, and spacing all come from
   pages.css. No build step, no dependencies.
   =================================================================== */

/* The attractions page leads with an h1; pages.css only styles
   h2.section-title. */
.att-hero h1.section-title {
  font-family: 'Black Ops One', sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.0;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
  color: var(--ink);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* .btn-primary and .btn-secondary live in the homepage's inline stylesheet,
   so the shared definitions are copied here the same way pages.css and
   gallery.css copy components. */
.btn-primary {
  background: var(--red); color: white; border: none;
  padding: 18px 36px; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 16px; text-transform: uppercase; letter-spacing: 0.16em;
  cursor: pointer; text-decoration: none; position: relative;
  display: inline-block;
  box-shadow: 0 0 0 1px var(--red), 0 8px 32px rgba(255,42,60,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: all 0.2s;
}
.btn-primary:hover {
  background: var(--red-glow);
  box-shadow: 0 0 0 1px var(--red-glow), 0 12px 48px rgba(255,69,84,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
.btn-primary:focus-visible { outline: 3px solid var(--blue-glow); outline-offset: 3px; }

/* ============ HERO ============ */
.att-hero { padding: 72px 0 0; }
.att-hero .section-intro { max-width: 46rem; text-wrap: balance; }

/* ============ PROMINENT PLANNING NOTICE ============ */
/* Full-width, high-contrast, and directly below the hero. Deliberately not
   fine print: it carries the amber alert accent used by the waiver page. */
.att-alert {
  margin-top: 40px;
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px 26px;
  background: linear-gradient(90deg, rgba(255,176,32,0.12), rgba(255,176,32,0.04) 60%, transparent);
  border: 1px solid rgba(255,176,32,0.45);
  border-left: 4px solid var(--amber);
}
.att-alert-icon {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px;
  color: var(--amber);
}
.att-alert-icon svg { width: 100%; height: 100%; display: block; }
.att-alert-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  color: var(--amber); letter-spacing: 0.28em; text-transform: uppercase;
  margin-bottom: 8px;
}
.att-alert p {
  color: var(--ink); font-size: 17px; line-height: 1.6; font-weight: 500;
  margin: 0;
}

/* ============ IPS INTRODUCTION ============ */
.att-intro-block {
  margin-top: 24px;
  padding: 36px 34px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-bright);
}
.att-intro-block h2 {
  font-family: 'Black Ops One', sans-serif;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.1; letter-spacing: 0.02em;
  color: var(--ink); margin-bottom: 14px; text-transform: uppercase;
}
.att-intro-block > p {
  color: var(--ink-dim); font-size: 17px; line-height: 1.75; max-width: 60rem;
}
.att-intro-block .att-note { margin-top: 22px; }

/* ============ SHARED NOTE BLOCKS ============ */
/* Amber = scheduling / planning. Blue = Water Tag site and season needs.
   The two categories never share a color, so the requirements stay
   visually distinct at a glance. */
.att-note {
  padding: 16px 18px;
  font-size: 15px; line-height: 1.65; color: var(--ink);
  border-left: 3px solid var(--amber);
  background: rgba(255,176,32,0.07);
}
.att-note--water {
  border-left-color: var(--blue);
  background: rgba(30,136,255,0.08);
}
.att-note-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--amber); display: block; margin-bottom: 6px;
}
.att-note--water .att-note-label { color: var(--blue-glow); }

/* ============ PRICING QUALIFIER ============ */
.att-qualifier {
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px dashed var(--line-bright);
  background: rgba(10,15,28,0.6);
  color: var(--ink-dim); font-size: 15px; line-height: 1.7;
  max-width: 70rem;
}

/* ============ PRODUCT LIST ============ */
.att-list { display: flex; flex-direction: column; gap: 28px; margin-top: 40px; }

.attraction {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 34px;
  padding: 30px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  transition: border-color 0.2s;
}
.attraction:hover { border-color: var(--line-bright); border-top-color: var(--red-glow); }
/* Water Tag is not an IPS attraction; the blue accent marks that split. */
.attraction--water { border-top-color: var(--blue); }
.attraction--water:hover { border-top-color: var(--blue-glow); }

.attraction-body { min-width: 0; display: flex; flex-direction: column; }
.attraction-code {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--ink-mute); letter-spacing: 0.22em; margin-bottom: 12px;
}
.attraction-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  color: var(--red-glow); letter-spacing: 0.26em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.attraction-label::before { content: ""; width: 22px; height: 2px; background: var(--red); flex: 0 0 auto; }
.attraction--water .attraction-label { color: var(--blue-glow); }
.attraction--water .attraction-label::before { background: var(--blue); }

.attraction-name {
  font-family: 'Black Ops One', sans-serif;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.08; letter-spacing: 0.02em;
  color: var(--ink); text-transform: uppercase; margin-bottom: 16px;
}

.attraction-price-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.attraction-price {
  font-family: 'Black Ops One', sans-serif; font-size: 26px;
  color: var(--ink); letter-spacing: 0.01em; line-height: 1.1;
}
.attraction-duration {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--ink-dim); letter-spacing: 0.1em; text-transform: uppercase;
}

.attraction-desc { color: var(--ink-dim); font-size: 16px; line-height: 1.75; margin-bottom: 20px; }

.attraction-facts { margin-bottom: 20px; }
.attraction-facts dt {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--red-glow); letter-spacing: 0.24em; text-transform: uppercase;
  margin-bottom: 6px;
}
.attraction--water .attraction-facts dt { color: var(--blue-glow); }
.attraction-facts dd {
  color: var(--ink-dim); font-size: 15px; line-height: 1.65;
  margin: 0 0 16px; padding-left: 16px; position: relative;
}
.attraction-facts dd::before {
  content: ">"; position: absolute; left: 0; top: 0;
  color: var(--ink-mute); font-family: 'JetBrains Mono', monospace; font-weight: 700;
}
.attraction-facts dd:last-child { margin-bottom: 0; }

.attraction-cta-row { margin-top: auto; padding-top: 24px; }
.attraction .att-note + .attraction-cta-row { padding-top: 20px; }
.attraction-cta-row .btn-primary { font-size: 14px; padding: 16px 28px; letter-spacing: 0.14em; }

/* ============ PRODUCT IMAGERY ============ */
.attraction-media { min-width: 0; }

/* Several supplied product photographs are studio shots on white seamless.
   A consistent dark frame, hairline inner rule, and mono caption strip keep
   them from floating as bright rectangles — the image files are untouched. */
.att-frame {
  margin: 0; position: relative;
  border: 1px solid var(--line-bright);
  background: var(--bg-0);
  padding: 8px;
}
.att-frame::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px;
  height: 2px; background: linear-gradient(90deg, var(--red), transparent 65%);
  pointer-events: none; z-index: 2;
}
.attraction--water .att-frame::before {
  background: linear-gradient(90deg, var(--blue), transparent 65%);
}

.att-shot {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; font: inherit; color: inherit;
  position: relative;
}
.att-shot:focus-visible { outline: 3px solid var(--blue-glow); outline-offset: 4px; }
/* height:auto keeps every photograph at its natural aspect ratio while the
   width/height attributes reserve the correct box before load. Nothing is
   cropped: no object-fit, no fixed aspect-ratio box. */
.att-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(26,37,65,0.9);
}
.att-shot .att-zoom {
  position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,13,0.78); border: 1px solid var(--line-bright);
  color: var(--steel); opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.att-shot .att-zoom svg { width: 16px; height: 16px; }
.att-shot:hover .att-zoom,
.att-shot:focus-visible .att-zoom { opacity: 1; }

.att-thumbs {
  margin-top: 12px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.att-thumbs .att-frame { padding: 6px; }

/* Two of the approved photographs are portrait (1067x1600). Capping them stops
   a portrait card towering over its landscape neighbours.
   The cap is expressed as a WIDTH, not a height: 520px tall at this ratio is
   347px wide. A definite width plus height:auto is the one form that both
   reserves the box before the lazy file arrives and keeps the natural ratio —
   capping the height instead leaves an unloaded image with no intrinsic size
   (collapsed frame), and a fixed height with max-width stretches the photo. */
.att-frame--tall .att-shot img {
  width: min(100%, 347px); height: auto; margin-inline: auto;
}

/* ============ STATUS BADGES ============ */
/* The seven original attractions carry no badge, because a starting price
   next to a request button already says "available." Badges exist to mark
   what is NOT bookable, so the amber and gray variants do the real work and
   the green one appears only where a status line has to be spelled out. */
.att-status {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 6px 11px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.att-status::before {
  content: ""; flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.att-status--available { color: var(--good);    background: rgba(44,214,115,0.09); }
.att-status--soon      { color: var(--amber);   background: rgba(255,176,32,0.10); }
.att-status--review    { color: var(--ink-dim); background: rgba(90,106,143,0.12); }

/* Bookable products carry the badge in the price row. Everything that is not
   bookable carries it directly above the product name, so "COMING SOON" can
   never be read apart from the title it qualifies. */
.attraction-price-row .att-status { align-self: center; margin-left: auto; }
.attraction-body > .att-status { margin-bottom: 14px; }

/* ============ PRODUCTS THAT ARE NOT BOOKABLE YET ============ */
/* Amber top rule = planned. Steel top rule = still being evaluated. Neither
   gets the red accent the bookable attractions use. */
.attraction--soon,
.attraction--soon:hover { border-top-color: var(--amber); }
.attraction--review,
.attraction--review:hover { border-top-color: var(--line-bright); }

.att-unavailable {
  margin-top: 4px; padding: 14px 16px;
  border-left: 3px solid var(--amber);
  background: rgba(255,176,32,0.07);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  line-height: 1.6; text-transform: uppercase; color: var(--ink);
}
.attraction--review .att-unavailable {
  border-left-color: var(--line-bright);
  background: rgba(90,106,143,0.10);
}

/* Deliberately a link and not a .btn-primary: nothing on an unavailable
   product should carry the visual weight of a booking control. */
.att-inquiry { margin-top: auto; padding-top: 22px; }
.att-inquiry-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 0;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--blue-glow);
  border-bottom: 1px solid rgba(30,136,255,0.5);
  transition: color 0.2s, border-color 0.2s;
}
.att-inquiry-link::after { content: "\2192"; }
.att-inquiry-link:hover { color: var(--ink); border-bottom-color: var(--blue-glow); }
.att-inquiry-link:focus-visible { outline: 3px solid var(--blue-glow); outline-offset: 4px; }
.att-inquiry-note { margin-top: 10px; color: var(--ink-dim); font-size: 14px; line-height: 1.6; }

/* ============ BRANDED PLACEHOLDER (NO PHOTOGRAPH) ============ */
/* Products StrikePoint does not own yet get a branded panel rather than a
   supplier photograph that would misrepresent the final equipment. It is a
   div, not a button, and carries no viewer trigger, so nothing implies there
   is a gallery behind it. The visible wording is repeated from the card body,
   so the panel is aria-hidden and announces nothing twice. */
.att-ph {
  position: relative; overflow: hidden;
  aspect-ratio: 1156 / 802;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  padding: 26px 22px; text-align: center;
  border: 1px solid rgba(26,37,65,0.9);
  background:
    repeating-linear-gradient(135deg, rgba(255,176,32,0.05) 0 10px, transparent 10px 22px),
    radial-gradient(ellipse 75% 65% at 50% 8%, rgba(30,136,255,0.18), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg-0));
}
.att-ph::before, .att-ph::after {
  content: ""; position: absolute; width: 34px; height: 34px;
  pointer-events: none; opacity: 0.7;
}
.att-ph::before { top: 10px; left: 10px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); }
.att-ph::after { bottom: 10px; right: 10px; border-bottom: 2px solid var(--amber); border-right: 2px solid var(--amber); }
.att-ph-mark {
  font-family: 'Black Ops One', sans-serif; font-size: 13px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-mute);
}
.att-ph-title {
  font-family: 'Black Ops One', sans-serif;
  font-size: clamp(15px, 2vw, 22px); line-height: 1.25;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink);
  max-width: 24ch;
}
.att-ph-status {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--amber);
  padding: 6px 12px;
  border: 1px solid rgba(255,176,32,0.5); background: rgba(255,176,32,0.08);
}
.att-ph--review::before, .att-ph--review::after { border-color: var(--line-bright); }
.att-ph--review .att-ph-status {
  color: var(--ink-dim); border-color: var(--line-bright);
  background: rgba(90,106,143,0.12);
}
.att-ph--glow {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 22px),
    radial-gradient(circle at 22% 78%, rgba(255,42,60,0.26), transparent 46%),
    radial-gradient(circle at 78% 26%, rgba(30,136,255,0.30), transparent 48%),
    radial-gradient(circle at 52% 54%, rgba(150,90,255,0.22), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg-0));
}
.att-ph--water {
  background:
    repeating-linear-gradient(135deg, rgba(30,136,255,0.06) 0 10px, transparent 10px 22px),
    radial-gradient(ellipse 75% 65% at 50% 10%, rgba(30,136,255,0.26), transparent 64%),
    linear-gradient(180deg, var(--bg-2), var(--bg-0));
}
.att-ph--water::before, .att-ph--water::after { border-color: var(--blue); }
.att-ph--water .att-ph-status {
  color: var(--blue-glow); border-color: rgba(30,136,255,0.5);
  background: rgba(30,136,255,0.10);
}

/* ============ WATER ZONE POINTER ============ */
/* Points at the existing Water Tag card instead of restating its price,
   photographs or copy anywhere else on the page. */
.att-zone-live {
  margin-top: 22px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
}
.att-zone-live a {
  color: var(--blue-glow); font-size: 16px; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid rgba(30,136,255,0.5);
  min-height: 44px; display: inline-flex; align-items: center;
}
.att-zone-live a:hover { color: var(--ink); border-bottom-color: var(--blue-glow); }
.att-zone-live a:focus-visible { outline: 3px solid var(--blue-glow); outline-offset: 4px; }

/* ============ THE TWO PLANNED SLIDES ============ */
/* Both slides share one description, so it is printed once and the pair sits
   side by side underneath it rather than repeating the same paragraph twice. */
.att-pair-lead {
  padding: 20px 22px;
  border: 1px dashed var(--line-bright); background: rgba(10,15,28,0.6);
  color: var(--ink-dim); font-size: 16px; line-height: 1.75;
}
.att-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.att-pair .attraction { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.att-pair .attraction-media { order: -1; }

/* ============ BOOKING PANEL ============ */
.att-book {
  margin-top: 12px;
  padding: 44px 38px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-bright);
}
.att-book h2 {
  font-family: 'Black Ops One', sans-serif;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.05; letter-spacing: 0.01em;
  color: var(--ink); margin-bottom: 16px; text-transform: uppercase;
}
.att-book > p { color: var(--ink-dim); font-size: 17px; line-height: 1.75; max-width: 60rem; }
.att-book .att-note { margin-top: 24px; }
.att-book-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.att-book-help { color: var(--ink-dim); font-size: 15px; line-height: 1.65; }
.att-book-help strong { color: var(--ink); font-weight: 600; }
/* Same helper text, used under a product CTA rather than the booking panel. */
.att-cta-help { margin-top: 14px; }

/* ============ IMAGE VIEWER ============ */
.att-viewer {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.att-viewer[hidden] { display: none; }

.att-viewer-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 7, 13, 0.92);
  backdrop-filter: blur(6px);
}
.att-viewer-dialog {
  position: relative; z-index: 1;
  width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.att-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.att-viewer-counter {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--ink-mute); letter-spacing: 0.2em; text-transform: uppercase;
}
/* Every control clears the 44 x 44 CSS pixel minimum touch target. */
.att-viewer-btn {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink);
  background: rgba(17, 26, 46, 0.92);
  border: 1px solid var(--line-bright);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.att-viewer-btn:hover { background: rgba(30, 136, 255, 0.16); border-color: var(--blue); }
.att-viewer-btn:focus-visible { outline: 3px solid var(--blue-glow); outline-offset: 3px; }
.att-viewer-close span[aria-hidden] { font-size: 24px; line-height: 1; }
.att-viewer-btn-text { line-height: 1; }

.att-viewer-stage { display: flex; align-items: center; gap: 12px; min-height: 0; }
.att-viewer-nav { flex: 0 0 auto; width: 52px; height: 52px; padding: 0; font-size: 30px; line-height: 1; }
.att-viewer-figure { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.att-viewer-figure img {
  display: block; max-width: 100%; max-height: 72vh;
  width: auto; height: auto;          /* natural aspect ratio, never stretched */
  border: 1px solid var(--line-bright); background: var(--bg-1);
}
.att-viewer-figure figcaption {
  color: var(--ink-dim); font-size: 15px; line-height: 1.6; text-align: center;
  max-width: 720px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .attraction { grid-template-columns: 1fr; gap: 26px; }
  /* Media leads on narrow layouts so each product still opens with its photo. */
  .attraction-media { order: -1; }
  .attraction-cta-row { margin-top: 24px; }
  .att-pair { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .att-intro-block { padding: 30px 24px; }
  .att-book { padding: 36px 24px; }
}

@media (max-width: 640px) {
  .att-hero { padding-top: 52px; }
  .att-alert { flex-direction: column; gap: 12px; padding: 20px 18px; }
  .att-alert p { font-size: 16px; }
  .attraction { padding: 20px 16px; gap: 22px; }
  .att-list { gap: 20px; }
  .attraction-price-row { gap: 4px 12px; }
  .att-thumbs { gap: 8px; }
  .att-frame { padding: 6px; }
  .att-thumbs .att-frame { padding: 4px; }
  .attraction-cta-row .btn-primary,
  .att-book-cta .btn-primary {
    display: block; width: 100%; text-align: center;
    padding-left: 20px; padding-right: 20px;
  }
  .att-book { padding: 28px 18px; }
  .att-book-cta { align-items: stretch; }
  .att-frame--tall .att-shot img { width: min(100%, 253px); }
  .att-ph { padding: 20px 16px; gap: 10px; }
  .att-ph::before, .att-ph::after { width: 24px; height: 24px; }
  .att-pair-lead { padding: 16px 18px; font-size: 15px; }
  .att-pair { gap: 16px; }
  .att-unavailable { letter-spacing: 0.1em; }
  .att-viewer { padding: 12px; }
  /* Controls move below the photograph so the image keeps the full width. */
  .att-viewer-stage { flex-wrap: wrap; justify-content: center; }
  .att-viewer-figure { order: -1; flex: 1 0 100%; }
  .att-viewer-figure img { max-height: 58vh; }
  .att-viewer-nav { width: 64px; height: 48px; }
}

@media (max-width: 380px) {
  /* Two thumbnails side by side get too small to read below ~380px. */
  .att-thumbs { grid-template-columns: 1fr; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .attraction,
  .att-shot,
  .att-shot .att-zoom,
  .att-viewer-btn,
  .att-inquiry-link,
  .btn-primary {
    transition: none;
  }
  .btn-primary:hover { transform: none; }
}