/* ==========================================================================
   Grizzly Bears of the Wild — day tour page (page-specific overrides)
   --------------------------------------------------------------------------
   Loaded AFTER assets/css/swa-ds.css, only on template-grizzly-day-tour.php
   (see inc/gbw-tour.php). The design system does the heavy lifting; this
   file holds (1) the frame-breakers that let the page run full-bleed inside
   Astra, (2) page layout one-offs, and (3) the transparent-header fixes.
   Every rule is gated to body.gbw-tour-page or scoped under #gbw-tour.swa.
   ========================================================================== */

/* ---- Frame-breakers ------------------------------------------------------- *
 * The ONLY rules that reach outside the .swa root. Astra's header.php leaves
 * the page inside #content > .ast-container (a flex column that shrink-wraps
 * the main to its content width and left-aligns it). Force the container
 * full-width AND stretch the main, so the full-bleed bands fill the viewport
 * and each section's own .container re-centres the content. Same fix that
 * was needed on the Matt Shannon page (see its ms-workshop.css).           */
body.gbw-tour-page #content.site-content { padding-top: 0; padding-bottom: 0; }
body.gbw-tour-page #content .ast-container {
	max-width: 100%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
}
body.gbw-tour-page #gbw-tour {
	width: 100%;
	max-width: 100%;
	align-self: stretch;
}

/* ---- Intro (paper) -------------------------------------------------------- */
#gbw-tour .gbw-intro-note {
	font-style: italic; color: var(--ink-3); font-size: 15px; line-height: 1.7;
	text-align: center; margin: 0 0 38px;
}
#gbw-tour .gbw-intro-lead {
	font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lead);
	line-height: 1.4; color: var(--ink); text-align: center; margin: 0 0 34px; text-wrap: balance;
}
#gbw-tour .gbw-intro-rule { margin: 0 auto 34px; }
#gbw-tour .gbw-intro-body { color: var(--ink-2); font-size: var(--fs-body); margin: 0 0 22px; }
#gbw-tour .gbw-intro-body:last-child { margin-bottom: 0; }

/* ---- The day: video under the itinerary grid ------------------------------ */
#gbw-tour .gbw-video { max-width: 760px; margin: clamp(40px, 5vw, 64px) auto 0; }

/* ---- Reserve band layout -------------------------------------------------- */
#gbw-tour .reserve .section-head { margin-bottom: 44px; }
/* Two-thirds / one-third, matching the Matt Shannon reserve band: the booking
   column is a fixed 420px (like .ms-reserve__booking) and the facts/pricing
   column takes the rest. The narrower booking card also keeps the CheckFront
   iframe under 450px, where CheckFront's own CSS lets the calendar fill the
   width; at 462px it dropped to a 50% Bootstrap column. */
#gbw-tour .gbw-reserve-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 30px;
	align-items: start;
}
#gbw-tour .gbw-inquiry { margin-top: 22px; }
#gbw-tour .gbw-inquiry h3 { margin: 10px 0 6px; font-size: 21px; }
#gbw-tour .gbw-inquiry .gbw-inquiry-intro { color: var(--on-dark-2); font-size: 14px; margin: 0 0 16px; }
#gbw-tour .gbw-inquiry-embed { width: 100%; }
#gbw-tour .gbw-inquiry-embed iframe { display: block; width: 100%; max-width: 100%; }
#gbw-tour .gbw-reserve-grid .price-grid { margin-top: 22px; }
/* Two ticket cards side by side, each half the column (the design system's
   auto-fit grid would open a third, empty 190px column at this width; the
   charter card spans the full row beneath). */
#gbw-tour .gbw-reserve-grid .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) {
	#gbw-tour .gbw-reserve-grid .price-grid { grid-template-columns: minmax(0, 1fr); }
}
#gbw-tour .reserve-panel .factlist a { color: var(--gold-light); border-bottom: 1px solid rgba(241,193,78,.45); }
#gbw-tour .reserve-panel .factlist a:hover { color: var(--on-dark); border-bottom-color: var(--on-dark); }
#gbw-tour .booking-card .gbw-booking-note { font-size: 13.5px; color: var(--ink-3); margin: 0 0 18px; }
@media (max-width: 900px) {
	#gbw-tour .gbw-reserve-grid { grid-template-columns: minmax(0, 1fr); }
	#gbw-tour .gbw-reserve-grid > div:last-child { max-width: 420px; }
}

#gbw-tour .waitlist-prompt p { max-width: none; flex: 1 1 320px; }
#gbw-tour .waitlist-prompt .btn { flex: 0 0 auto; }

/* ---- Included / bring / good-to-know (sand, three columns) ---------------- */
#gbw-tour .gbw-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(30px, 5vw, 56px);
}
#gbw-tour .gbw-info-grid h2 { font-size: var(--fs-h2-xs); margin: 0 0 22px; }
#gbw-tour .gbw-info-grid .gbw-info-intro { color: var(--ink-2); font-size: 15.5px; margin: 0 0 18px; }
#gbw-tour .gbw-info-grid .factlist { font-size: 15px; }
#gbw-tour .gbw-info-grid .factlist a { color: var(--green); border-bottom: 1px solid var(--green-soft); }

/* ---- Guest reviews -------------------------------------------------------- */
#gbw-tour .gbw-reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
}

/* ---- Transparent header fixes (Astra overlays a ~70px header on the hero) -- */
@media (max-width: 600px) {
	/* Top-align the hero content and pad it clear of the absolute header so
	   the H1 can never sit underneath it; let the hero grow to its content. */
	#gbw-tour .hero {
		min-height: 100vh;
		min-height: 100svh;
		align-items: flex-start;
	}
	#gbw-tour .hero .hero-inner { padding-top: 110px; }
	#gbw-tour .hero .eyebrow { letter-spacing: .2em; }
	/* Full-width CTAs on phones, except the two hero buttons which share a row. */
	#gbw-tour .btn { width: 100%; }
	#gbw-tour .hero .btn-row .btn { width: auto; flex: 1 1 auto; padding-left: 22px; padding-right: 22px; }
	#gbw-tour .waitlist-prompt .btn { width: 100%; }
}