/**
 * Trip Experiences — page styles.
 *
 * Loaded only on the Trip Experiences page template. Translated from the
 * Claude Design comp, which was authored entirely with inline styles and no
 * classes; every value here is taken from that comp unless a note says why it
 * differs.
 *
 * Fonts: UtileDisplay and ZeitungPro are already declared site-wide by the
 * theme, so no @font-face here. Real weights available are UtileDisplay
 * 300/500 and ZeitungPro 500/600/700.
 *
 * @package roam-child
 */

.te-page {
	/* ---- Brand ------------------------------------------------------- */
	--te-black:      #221D1C;
	--te-amber:      #A87239;
	--te-amber-300:  #CDA877;
	--te-green:      #878C69;
	--te-oak:        #C6A27C;
	--te-cream:      #F3E9DD;
	--te-paper:      #FAF5EE;
	--te-white:      #FFFFFF;
	--te-border:     #E4D8C8;

	/*
	 * Accent contrast, measured 2026-09-09.
	 *
	 * The comp sets its section eyebrows in amber (#A87239), green (#878C69)
	 * and oak (#B98A5E) at 10–10.5px on white and cream. Measured against
	 * white those are 4.09:1, 3.51:1 and 3.06:1 — all below the 4.5:1 that
	 * WCAG AA requires for text under 24px, and worse again on cream.
	 *
	 * So each accent carries a darkened variant used for small text on light
	 * surfaces. The undarkened values stay for large text, rules and borders,
	 * where 3:1 is the bar and the comp's hue is worth keeping.
	 *
	 *   amber-ink #8A5B2B  5.81 on white / 4.85 on cream
	 *   green-ink #666B4E  5.56 / 4.63
	 *   oak-ink   #8A6238  5.41 / 4.51
	 *
	 * On the dark sections the comp already uses #CDA877 (7.51:1 on
	 * --te-black), which passes, so that one is unchanged.
	 */
	--te-amber-ink:  #8A5B2B;
	--te-amber-700:  #855A2C; /* comp's button hover/pressed amber */

	/* --shadow-sm from the comp's elevation tokens. */
	--te-shadow-sm:  0 2px 6px rgba(34, 29, 28, 0.08);
	--te-green-ink:  #666B4E;
	--te-oak-ink:    #8A6238;
	--te-accent-dark: #CDA877;

	/* ---- Type -------------------------------------------------------- */
	--te-display: UtileDisplay, "Utile Display", sans-serif;
	--te-text:    ZeitungPro, "Zeitung Pro", sans-serif;

	/*
	 * The comp asks for display weight 600. UtileDisplay ships only 300 and
	 * 500, so 600 synthesises a faux-bold that reads heavier than the comp.
	 * 500 is the real face and matches what Cork to Fork settled on.
	 */
	--te-display-weight: 500;

	/* ---- Measure ----------------------------------------------------- */
	--te-wide:   1100px;  /* card grid + trail panels */
	--te-narrow:  780px;  /* running text */

	background: var(--te-paper);
	font-family: var(--te-text);
	color: var(--te-black);
	overflow-x: hidden;
}

/* Sections are full-bleed; each sets its own background so a shared rule
   cannot flatten the dark ones by specificity. */
.te-page section {
	width: 100%;
	box-sizing: border-box;
}

.te-page img { max-width: 100%; }

.te-dark { background: var(--te-black); }

.te-shell-wide   { max-width: var(--te-wide);   margin-inline: auto; }
.te-shell-narrow { max-width: var(--te-narrow); margin-inline: auto; }

/* Shared eyebrow: tracked, uppercase, display face. */
.te-eyebrow {
	font-family: var(--te-display);
	font-weight: var(--te-display-weight);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}


/* =====================================================================
 * Hero
 * ================================================================== */

.te-hero {
	position: relative;
	height: clamp(360px, 46vw, 560px);
	overflow: hidden;
	background: #0B0908;
}

.te-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

.te-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(11, 9, 8, 0.52) 0%,
		rgba(11, 9, 8, 0.18) 40%,
		rgba(11, 9, 8, 0.82) 100%
	);
}

.te-hero__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: clamp(10px, 1.4vw, 16px);
	padding: clamp(28px, 5vw, 72px) clamp(20px, 6vw, 96px);
}

.te-hero__title {
	margin: 0;
	font-family: var(--te-display);
	font-weight: var(--te-display-weight);
	font-size: clamp(30px, 4.6vw, 58px);
	line-height: 1.05;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--te-paper);
	text-shadow: 0 2px 22px rgba(11, 9, 8, 0.55);
}


/* =====================================================================
 * Intro
 * ================================================================== */

.te-intro { padding: clamp(44px, 6vw, 88px) clamp(20px, 6vw, 96px); }

/*
 * Where the sign-up buttons follow the intro, the intro's full bottom padding
 * plus the button row reads as a break between two bands rather than one. The
 * buttons belong to the copy above them, so the gap is pulled in.
 */
.te-intro:has(+ .te-nav) { padding-bottom: clamp(28px, 3.4vw, 48px); }

.te-intro__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2vw, 24px);
}

.te-intro__lead {
	margin: 0;
	font-family: var(--te-display);
	font-weight: var(--te-display-weight);
	font-size: clamp(20px, 2.6vw, 30px);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--te-paper);
	text-wrap: balance;
}

.te-intro__body p {
	margin: 0 0 clamp(18px, 2vw, 24px);
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.72;
	color: rgba(243, 233, 221, 0.8);
	text-wrap: pretty;
}

.te-intro__body p:last-child { margin-bottom: 0; }


/* =====================================================================
 * Comparison cards
 * ================================================================== */

/* Bottom padding carries the gap down to the divider. It was the gap to the
   jump-link pills, which are gone, so it absorbs some of the space they and
   their own padding used to occupy — otherwise the rule crowds the cards. */
.te-cards { padding: 0 clamp(20px, 6vw, 96px) clamp(44px, 6vw, 88px); }

.te-cards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	align-items: stretch;
}

.te-card {
	display: flex;
	flex-direction: column;
	background: var(--te-white);
	border: 1px solid var(--te-border);
	border-radius: 4px;
	box-shadow: var(--te-shadow-sm);
	overflow: hidden;
}

.te-card__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var(--te-black);
}

.te-card__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 22px 24px;
	flex: 1;
}

.te-card__title {
	margin: 0;
	font-family: var(--te-display);
	font-weight: var(--te-display-weight);
	font-size: 21px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--te-black);
}

.te-card__features {
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(34, 29, 28, 0.82);
}

.te-card__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.te-card__price {
	background: var(--te-cream);
	padding: 12px 14px;
	border-radius: 2px;
	font-family: var(--te-display);
	font-size: 11px;
	font-weight: var(--te-display-weight);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(34, 29, 28, 0.75);
}

/*
 * Sign Up is a <button> (Bandwango binds to it) and Learn More is an <a>, so
 * the theme styles them differently. Two consequences had to be designed out:
 *
 * 1. `1fr` is `minmax(auto, 1fr)`, so a track never shrinks below its item's
 *    min-content width. The theme's button padding made the Sign Up track
 *    wider than half, squeezing Learn More until it wrapped. minmax(0, 1fr)
 *    removes that floor, so the two tracks are genuinely equal.
 * 2. The row must stretch, so both controls share a height even when one of
 *    them wraps to two lines.
 */
.te-card__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
}

/* Buttons. `button.te-btn` exists because Bandwango sign-up controls must be
   <button data-bwitemid> for their script to bind; the two render alike. */
.te-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 44px;
	padding: 0 12px;
	font-family: var(--te-display);
	font-size: 11px;
	font-weight: var(--te-display-weight);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/*
 * The theme styles bare <button> and <a> in page content with its own box
 * model — padding, fixed heights, nowrap, min-widths. Left alone that made the
 * two card controls different sizes. These reset the properties the theme sets
 * on both element types so the pair renders as one component.
 *
 * The selector is deliberately specific rather than !important, so a later
 * rule can still override it deliberately. If a control still looks wrong,
 * the theme rule that wins will be more specific than (0,3,1) and should be
 * matched here rather than escalated globally.
 */
.te-page .te-card__actions > .te-btn {
	box-sizing: border-box;
	align-self: stretch;
	width: 100%;
	/* The theme puts a min-width on buttons, which held the Sign Up control
	   wider than its track at some widths even after the track was fixed. */
	min-width: 0;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 9px 8px;
	/* Slightly tighter than the comp: at four-across, "Learn More" needs the
	   room or it wraps. Still reads as the same tracked label. */
	font-size: 10.5px;
	letter-spacing: 0.1em;
	line-height: 1.25;
	white-space: normal;
	text-transform: uppercase;
	overflow-wrap: normal;
}

.te-btn--primary {
	background: var(--te-amber);
	border: 1px solid var(--te-amber);
	color: var(--te-paper);
}

.te-btn--primary:hover,
.te-btn--primary:focus-visible {
	background: #8A5B2B;
	border-color: #8A5B2B;
	color: var(--te-paper);
}

.te-btn--ghost {
	background: transparent;
	border: 1px solid var(--te-border);
	color: var(--te-black);
}

.te-btn--ghost:hover,
.te-btn--ghost:focus-visible {
	border-color: var(--te-amber-ink);
	color: var(--te-amber-ink);
}


/* =====================================================================
 * Divider
 * ================================================================== */

.te-rule { padding: 0 clamp(20px, 6vw, 96px); }

.te-rule__inner {
	display: flex;
	align-items: center;
	gap: 18px;
}

.te-rule__line {
	flex: 1;
	height: 1px;
	background: rgba(250, 245, 238, 0.18);
}

.te-rule__mark { display: block; flex: none; }


/* =====================================================================
 * Trail panels
 * ================================================================== */

.te-trail { padding: clamp(20px, 3vw, 32px) clamp(20px, 6vw, 96px) clamp(28px, 4vw, 48px); }
.te-trail--first { padding-top: clamp(44px, 6vw, 88px); }
.te-trail--last  { padding-bottom: clamp(44px, 6vw, 80px); }

/* Anchor targets sit behind the theme's fixed header without this. */
.te-trail__anchor {
	display: block;
	position: relative;
	top: -110px;
	visibility: hidden;
}

.te-trail__panel {
	display: flex;
	flex-direction: column;
	gap: clamp(22px, 3vw, 34px);
	background: var(--te-white);
	border: 1px solid var(--te-border);
	border-top: 3px solid var(--te-accent, var(--te-amber));
	border-radius: 4px;
	box-shadow: var(--te-shadow-sm);
	overflow: hidden;
}

.te-trail__img {
	width: 100%;
	aspect-ratio: 1280 / 640;
	height: auto;
	object-fit: cover;
	display: block;
	background: var(--te-black);
}

.te-trail__cols {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 56px);
	padding: 0 clamp(22px, 4vw, 48px) clamp(30px, 4vw, 48px);
}

.te-trail__main {
	flex: 2 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.te-trail__eyebrow { color: var(--te-accent-ink, var(--te-amber-ink)); }

.te-trail__title {
	margin: 0;
	font-family: var(--te-display);
	font-weight: var(--te-display-weight);
	font-size: clamp(24px, 3vw, 38px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--te-black);
	text-wrap: balance;
}

.te-trail__body p {
	margin: 0 0 14px;
	font-size: clamp(15.5px, 1.4vw, 17px);
	line-height: 1.7;
	color: rgba(34, 29, 28, 0.78);
	text-wrap: pretty;
}

.te-trail__body p:last-child { margin-bottom: 0; }

.te-trail__side {
	flex: 1 1 230px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.te-facts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px;
	background: var(--te-cream);
	border-radius: 4px;
}

.te-facts__label {
	font-family: var(--te-display);
	font-weight: var(--te-display-weight);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(34, 29, 28, 0.62);
}

.te-facts__item {
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(34, 29, 28, 0.8);
}

/*
 * Sign-up buttons.
 *
 * The comp builds these from its design-system Button: variant="accent",
 * size="lg", uppercase, sized 100% x 48px (180px x 48px for the passport
 * CTA). Values below come from that component's source rather than measured
 * off the render - 15.5px display face, 0.09em tracking, 4px radius
 * (--radius-md), amber fill with cream text, darkening to --twt-amber-700 on
 * hover with a 1px press.
 *
 * These have to be <button> elements — Bandwango's script only binds to
 * button[data-bwitemid], and the theme styles every bare button as its own
 * filled block. So the whole box model is reset here in one place, at a
 * specificity that clears the theme; the few marked !important are the ones
 * the theme also forces. appearance:none keeps native button chrome away.
 */
.te-page .te-trail__cta,
.te-page .te-nav__cta,
.te-page .te-band__cta {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	/*
	 * The comp fixes the height at 48px. Here it is a minimum instead: the
	 * comp's nowrap would overflow the side column on narrow screens, where
	 * "Sign Up for Cork to Fork" is wider than the button. It sits at exactly
	 * 48px wherever the label fits on one line, which is every desktop width.
	 */
	min-height: 48px;
	height: auto;
	margin: 0;
	/*
	 * These four carry !important because the theme's filled-button rule does
	 * too — without it the amber block and its padding come back and the text
	 * sits jammed against the edges. Scoped to these two classes inside this
	 * one page template, so nothing else on the site is affected. Everything
	 * else in this block wins on specificity alone and is left unforced.
	 */
	padding: 12px 24px !important;
	background: var(--te-amber) !important;
	border: 1px solid var(--te-amber) !important;
	box-shadow: none !important;
	border-radius: 4px !important;
	font-family: var(--te-display);
	font-weight: var(--te-display-weight);
	font-size: 15.5px;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-align: center;
	text-transform: uppercase !important;
	text-decoration: none;
	color: var(--te-cream) !important;
	cursor: pointer;
	transition: background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            border-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.te-page .te-trail__cta:hover,
.te-page .te-trail__cta:focus-visible,
.te-page .te-nav__cta:hover,
.te-page .te-nav__cta:focus-visible,
.te-page .te-band__cta:hover,
.te-page .te-band__cta:focus-visible {
	background: var(--te-amber-700) !important;
	border-color: var(--te-amber-700) !important;
	color: var(--te-cream) !important;
}

.te-page .te-trail__cta:active,
.te-page .te-nav__cta:active,
.te-page .te-band__cta:active { transform: translateY(1px); }

/* Per-trail accents. Border keeps the comp's hue; eyebrow uses the AA-safe
   variant because it is 10.5px on white. */
.te-trail--amber { --te-accent: var(--te-amber);     --te-accent-ink: var(--te-amber-ink); }
.te-trail--green { --te-accent: var(--te-green);     --te-accent-ink: var(--te-green-ink); }
.te-trail--oak   { --te-accent: var(--te-oak);       --te-accent-ink: var(--te-oak-ink); }
.te-trail--light { --te-accent: var(--te-amber-300); --te-accent-ink: var(--te-amber-ink); }


/* =====================================================================
 * Passport CTA + social
 * ================================================================== */

.te-cta    { padding: clamp(20px, 3vw, 32px) clamp(20px, 6vw, 96px) clamp(28px, 4vw, 48px); }
.te-social { padding: clamp(40px, 5vw, 76px) clamp(20px, 6vw, 96px); }

.te-hr {
	max-width: var(--te-narrow);
	margin: 0 auto clamp(36px, 5vw, 64px);
	height: 1px;
	background: rgba(243, 233, 221, 0.16);
	border: 0;
}

.te-social .te-hr { margin-bottom: clamp(32px, 4vw, 56px); }

.te-band {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.te-band__eyebrow { color: var(--te-accent-dark); }

.te-band__title {
	margin: 0;
	font-family: var(--te-display);
	font-weight: var(--te-display-weight);
	font-size: clamp(22px, 2.6vw, 34px);
	line-height: 1.16;
	letter-spacing: -0.015em;
	color: var(--te-paper);
	text-wrap: balance;
}

.te-band__body p {
	margin: 0 0 14px;
	font-size: clamp(15.5px, 1.5vw, 17px);
	line-height: 1.7;
	color: rgba(243, 233, 221, 0.76);
	text-wrap: pretty;
}

.te-band__body p:last-child { margin-bottom: 0; }

.te-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding-top: 8px;
}

/* Same accent button as the trail sections, but the comp sizes this one
   180px x 48px rather than full width, so it does not stretch the band. */
.te-page .te-band__cta {
	width: auto;
	min-width: 180px;
}

.te-social__tags {
	margin: 0;
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.6;
	color: rgba(243, 233, 221, 0.72);
}

.te-social__tags b {
	font-weight: inherit;
	color: var(--te-accent-dark);
}

.te-social__links {
	display: flex;
	gap: 14px;
	padding-top: 6px;
}

.te-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	border: 1px solid rgba(243, 233, 221, 0.28);
	color: var(--te-paper);
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.te-social__link:hover,
.te-social__link:focus-visible {
	border-color: var(--te-accent-dark);
	background: rgba(250, 245, 238, 0.06);
	color: var(--te-paper);
}


/* =====================================================================
 * Trail sign-up buttons (te-nav)
 *
 * Replaced the Bandwango pass cards in this slot. A centred row of the same
 * gold sign-up buttons used further down the page, on the dark band the
 * intro above uses.
 *
 * The gold face itself comes from the shared .te-trail__cta / .te-nav__cta /
 * .te-band__cta rule above — including the !important box-model reset the
 * theme's filled-button rule forces. Only what differs in a row is set here.
 * ================================================================== */

.te-nav {
	box-sizing: border-box;
	width: 100%;
	/*
	 * No top padding: the intro above sits on the same dark background and
	 * already ends with its own generous padding, so anything here reads as a
	 * second gap and floats the buttons away from the copy they belong to.
	 */
	padding: 0 max(20px, calc((100% - 1300px) / 2));
	background: var(--te-black);
}

.te-nav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: clamp(12px, 1.6vw, 20px);
	margin: 0 auto;
}

/*
 * The shared rule sets width:100% for the side column these buttons normally
 * sit in. In a row they size to their own labels instead, which run from
 * "Sign Up for the Tail" to "Sign Up for Cork to Fork".
 */
.te-page .te-nav__cta {
	width: auto;
	flex: 0 1 auto;
}

/* Same hairline-and-marker divider the pass cards used to close this band. */
.te-nav__divider {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1300px;
	margin: clamp(48px, 5vw, 80px) auto 0;
}

.te-nav__line {
	flex: 1;
	height: 1px;
	background: rgba(243, 233, 221, 0.18);
}

.te-nav__mark { flex: none; display: block; }

/*
 * Paw after the pet-friendly label. The shared button rule already sets a
 * 10px flex gap, so only the size and optical alignment are set here.
 */
.te-page .te-nav__cta .te-paw {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: -2px; /* the pads sit high in the viewBox; nudges it onto the cap line */
}

@media (max-width: 600px) {
	/* Full-width stacked buttons read better than mid-word wraps in a row. */
	.te-nav__inner { flex-direction: column; align-items: stretch; }
	.te-page .te-nav__cta { width: 100%; }
}


/* =====================================================================
 * Focus + motion
 * ================================================================== */

.te-page a:focus-visible,
.te-page button:focus-visible {
	outline: 2px solid var(--te-accent-dark);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.te-page * { transition: none !important; }
	.te-page { scroll-behavior: auto; }
}


/* =====================================================================
 * Narrow screens
 * ================================================================== */

@media (max-width: 600px) {
	/* Two 11px uppercase buttons side by side wrap mid-word at 390px. */
	.te-card__actions { grid-template-columns: 1fr; }
}