/* Attraction detail page */

.attr-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:46px;align-items:start;padding-top:34px}
@media(max-width:1100px){.attr-grid{grid-template-columns:minmax(0,1fr) 300px;gap:32px}}
@media(max-width:940px){.attr-grid{grid-template-columns:minmax(0,1fr);gap:0}}

.hero-shot{margin:0 0 26px;border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh-md);background:var(--mist)}
.hero-shot img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* ==========================================================================
   Editor-supplied body copy (tbl_offer.offer_desc)

   This content is written in a WYSIWYG, so it arrives as plain <p>, <strong>,
   <ul> and nested <ul>. Nothing here relies on the editor adding classes —
   the styling reads the shape of the markup instead.
   ========================================================================== */
.attr-body{display:block;max-width:none}
.attr-body > *{max-width:74ch}
.attr-body > ul,.attr-body > ol,.attr-body > table,.attr-body > .tablewrap{max-width:none}

.attr-body h2{font-size:clamp(1.25rem,2.3vw,1.6rem);margin:1.9em 0 .5em;scroll-margin-top:92px}
.attr-body h3{font-size:clamp(1.15rem,2vw,1.4rem);color:var(--ink);margin:1.7em 0 .5em;scroll-margin-top:92px}
.attr-body h4{font-size:1.08rem;color:var(--sea);margin:1.5em 0 .4em}
.attr-body > h2:first-child,.attr-body > h3:first-child{margin-top:0}
.attr-body p{margin:0 0 1.1em;line-height:1.78}

/* The editor writes section labels as a paragraph containing only bold text.
   Promote those to look like real subheadings instead of stray bold lines. */
.attr-body p:has(> strong:only-child){
  margin:1.9em 0 .5em;
  font-family:var(--disp);
  font-size:1.12rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
  padding-left:14px;
  border-left:3px solid var(--gold);
}
.attr-body p:has(> strong:only-child) > strong{font-weight:inherit;color:inherit}
.attr-body p:has(> strong:only-child) + p,
.attr-body p:has(> strong:only-child) + ul{margin-top:0}

/* Lists, including the nested ones the editor produces for ticket tiers */
.attr-body ul{list-style:none;padding:0;margin:0 0 1.3em}
.attr-body ul li{position:relative;padding-left:26px;margin-bottom:8px;line-height:1.65}
.attr-body ul li::before{content:"";position:absolute;left:6px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--tide)}
.attr-body ul ul{margin:9px 0 4px;padding-left:4px}
.attr-body ul ul li{font-size:.95rem;color:var(--muted);margin-bottom:5px}
.attr-body ul ul li::before{width:5px;height:5px;background:none;border:1.5px solid var(--tide);top:.62em}
.attr-body ol{list-style:none;counter-reset:n;padding:0;margin:0 0 1.3em}
.attr-body ol li{position:relative;padding-left:34px;margin-bottom:8px;counter-increment:n;line-height:1.65}
.attr-body ol li::before{content:counter(n);position:absolute;left:0;top:.1em;width:23px;height:23px;border-radius:50%;
  background:var(--foam);border:1px solid var(--line);color:var(--sea);font-size:.76rem;font-weight:700;display:grid;place-items:center}

.attr-body a{color:var(--tide);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(27,123,184,.35)}
.attr-body a:hover{text-decoration-color:var(--tide)}
.attr-body strong{color:var(--ink);font-weight:650}
.attr-body br{line-height:2}
.attr-body img{max-width:100%;height:auto;border-radius:10px;margin:1.4em 0}
.attr-body hr{border:0;height:1px;background:var(--line);margin:2.2em 0}
.attr-body blockquote{margin:1.6em 0;padding:18px 24px;background:var(--foam);border-left:4px solid var(--gold);
  border-radius:0 var(--rad) var(--rad) 0}
.attr-body blockquote > :last-child{margin-bottom:0}

/* Tables — scroll on mobile rather than blowing out the layout */
.attr-body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.92rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.attr-body th{background:var(--sea);color:#fff;padding:11px 14px;text-align:left;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;font-weight:650}
.attr-body td{padding:11px 14px;border-bottom:1px solid var(--mist);vertical-align:top}
.attr-body tr:last-child td{border-bottom:0}
.attr-body tbody tr:nth-child(even){background:#FAFCFE}

@media(max-width:680px){
  .attr-body{font-size:16px}
  .attr-body p:has(> strong:only-child){font-size:1.05rem;padding-left:12px}
  .attr-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:12px;white-space:nowrap}
  .attr-body th,.attr-body td{padding:8px 10px}
}

/* ==========================================================================
   Enquiry form
   ========================================================================== */
.enq{background:var(--foam);border:1px solid var(--line);border-radius:var(--rad);padding:clamp(24px,3vw,34px);margin-top:44px;scroll-margin-top:92px}
.enq h2{font-size:1.35rem}
.enq > p{font-size:.94rem;color:var(--muted);max-width:66ch}

.field{position:relative}
.inp.bad{border-color:var(--coral);background:#FEF7F5}
.inp.bad:focus{box-shadow:0 0 0 3px rgba(226,89,63,.14)}
.err{display:none;margin:6px 0 0;font-size:.8rem;font-weight:600;color:var(--coral-dk);line-height:1.4}
.err.on{display:flex;align-items:flex-start;gap:6px}
.err.on::before{content:"!";flex:none;width:14px;height:14px;border-radius:50%;background:var(--coral);color:#fff;
  font-size:.62rem;font-weight:800;display:grid;place-items:center;margin-top:1px}
.errlist{margin:0 0 6px;padding-left:18px;font-size:.86rem}
.errlist li{margin-bottom:3px}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.side{position:sticky;top:88px;max-height:calc(100vh - 108px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}
.side::-webkit-scrollbar{width:5px}
.side::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px}
@media(max-width:940px){.side{position:static;max-height:none;overflow:visible;margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}}

.sbox{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:20px 22px;margin-bottom:22px;box-shadow:var(--sh-sm)}
.sbox > h2{font-family:var(--disp);font-size:1.05rem;color:var(--ink);margin:0 0 15px;padding-bottom:11px;
  border-bottom:1px solid var(--mist);display:flex;align-items:center;gap:9px}
.sbox > h2 .ico{color:var(--gold);flex:none}
.sbox--cta{background:linear-gradient(168deg,#0B2947,#0E3A63);border-color:#16324f;text-align:center}
.sbox--cta h2{color:#fff;border-bottom-color:rgba(255,255,255,.12);justify-content:center}
.sbox--cta p{color:#A8BCD1;font-size:.88rem;margin:0 0 16px}
.sbox--cta .fare{display:block;font-family:var(--mono);font-size:1.7rem;font-weight:700;color:var(--gold);margin-bottom:2px}
.sbox--cta small{display:block;font-size:.74rem;color:#8FA6BE;margin-bottom:16px}

/* Related posts — titles run long (some bilingual), so they're clamped to
   three lines. Rows then match the thumbnail height instead of leaving a
   small image stranded beside a five-line block of text. */
.rel{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--mist)}
.rel:last-child{border-bottom:0;padding-bottom:2px}
.rel:first-of-type{padding-top:0}
.rel .thumb{flex:none;display:block;width:88px;border-radius:8px;overflow:hidden;background:var(--mist);line-height:0}
.rel .thumb img{width:88px;height:66px;object-fit:cover;display:block;transition:transform .35s}
.rel:hover .thumb img{transform:scale(1.06)}
.rel h3{font-family:var(--sans);font-size:.855rem;font-weight:600;line-height:1.4;margin:0;min-width:0}
.rel h3 a{color:var(--slate);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rel h3 a:hover{color:var(--tide);text-decoration:none}

/* Add class="sbox sbox--textonly" to drop the thumbnails entirely */
.sbox--textonly .rel .thumb{display:none}
.sbox--textonly .rel{padding:10px 0 10px 20px;position:relative}
.sbox--textonly .rel::before{content:"";position:absolute;left:4px;top:1.15em;width:6px;height:6px;border-radius:50%;background:var(--tide)}
.sbox--textonly .rel h3 a{-webkit-line-clamp:2}

/* Nearby attractions grid */
.attr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.attr figure{margin:0;border-radius:9px;overflow:hidden;position:relative;background:var(--ink)}
.attr img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s}
.attr a:hover img{transform:scale(1.06)}
.attr figcaption{position:absolute;inset:auto 0 0 0;padding:16px 9px 8px;
  background:linear-gradient(180deg,transparent,rgba(7,26,47,.88));color:#fff;font-size:.72rem;font-weight:600;line-height:1.35}