/* Activity detail page composition — shared by zipline.html,
   canopy-walkway.html, hiking.html, birding.html, frogging.html.
   Reusable primitives (route-strip, tag, btn, placeholder chip/block)
   live in style.css; this file is the arrangement common to all five. */

.activity-header {
  position: relative;
  min-height: 80vh; /* ~1.75x the previous 46vh */
  overflow: hidden;
  background: var(--moss);
  border-bottom: 4px solid var(--white);
}
.activity-header noscript {
  position: absolute;
  inset: 0;
}
.activity-header noscript img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.activity-header__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 25, 0, 0) 40%, rgba(20, 25, 0, 0.72) 100%);
  pointer-events: none;
}
/* Same treatment as the home hero's "Get Ready For The" line — Zilla
   Slab, bold, white, same text-shadow — so the two overlaid-title
   moments in the site read as one consistent idea. */
.activity-header__title {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-xl);
  max-width: 900px;
  margin: 0;
  font-family: var(--font-hero);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(2.25rem, 1.5rem + 4vw, 4rem);
  line-height: 1.05;
  text-shadow: 0 2px 16px rgba(20, 20, 0, 0.5), 0 1px 4px rgba(20, 20, 0, 0.4);
}

@media (max-width: 640px) {
  .activity-header__title {
    bottom: var(--space-lg);
  }
}

@media (max-width: 640px) {
  .activity-header {
    min-height: 60vh; /* ~1.75x the previous 34vh */
    max-height: 75vh; /* stays capped well under a full screen so it doesn't force excessive scrolling */
  }
}

.activity-intro {
  max-width: var(--content-width-prose);
  margin-inline: auto;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.detail-grid--single {
  grid-template-columns: 1fr;
  max-width: var(--content-width-prose);
  margin-inline: auto;
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.detail-list li {
  padding-left: var(--space-md);
  position: relative;
}
.detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 2px;
  background: var(--moss);
}

/* The CTA band's wrap sits full-width (1240px) with no narrowing at all,
   so its heading/paragraph/buttons just hug the left edge of the dark
   band instead of reading as a centered column - same underlying bug as
   .activity-intro above, just on a section that has no per-element
   max-width to reveal it (a short h2 and two inline buttons don't visibly
   show a "stuck to the left" problem the way a long paragraph does, but
   the wrap itself is exactly as off-center). Shared by every activity page
   and visit.html (both load this file). */
.booking-cta .wrap {
  max-width: var(--content-width-prose);
  margin-inline: auto;
}
/* Overrides the global p { max-width: var(--measure) } - .booking-cta .wrap
   above already narrows this section to a readable column; --measure-narrow
   on top of that (46ch, meant for a short standalone tagline elsewhere) was
   over-constraining a full sentence to a couple of words per line. */
.booking-cta p {
  max-width: none;
}
.booking-cta .btn {
  margin-top: var(--space-sm);
}
.booking-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.booking-cta__actions .btn {
  margin-top: 0;
}

@media (max-width: 760px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Rates section - the day-type schedule (Mon-Thu standard / Fri-Sun+holiday
   special) plus the capacity/group-discount note beneath it. Narrows and
   centers the same way .activity-intro does; a plain .detail-list gives the
   two schedule lines the same bullet treatment as Requirements/What's
   Included above. .rates-note is a distinct white card against the page's
   cream background (not another .draft-note-style italic aside - this is
   permanent, important information, not a loading placeholder), so it reads
   as a callout worth pausing on rather than another paragraph of body text. */
.activity-rates {
  max-width: var(--content-width-prose);
  margin-inline: auto;
}
.rates-note {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.rates-note p {
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
}
.rates-note p:last-child {
  margin-bottom: 0;
}

/* Policy section - shared by every activity page that shows Annie's live
   Cancellation & Booking Policy (js/policy.js renders into #policy-block-a/b
   here, the same as visit.html). Narrows and centers to a readable column
   the same way .activity-intro above does. .policy-table/.table-scroll
   render policy.js's markdown-table output as a real table; .draft-note is
   the "Loading…" placeholder shown before the fetch resolves. */
.activity-policy {
  max-width: var(--content-width-prose);
  margin-inline: auto;
}
.draft-note {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--moss);
  margin-top: var(--space-sm);
}
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.policy-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  margin-block: var(--space-md);
}
.policy-table th,
.policy-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
}
.policy-table th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--moss);
  border-bottom: 2px solid var(--moss);
}