/* =============================================================================
   Adventures page (Claude Design Adventures.dc.html). Tokens only; motion on --m-* / --e-*.
   Breakpoints: the shared tokens (theme.json, theme.css). Behaviour: assets/js/pages/adventures.js.
   ============================================================================= */

.ad-wrap { max-width: var(--wp--custom--maxw--content); margin: 0 auto; }
.ad-btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.ad-btn-row.is-center { justify-content: center; }

/* ---- Hero: copy + two photo columns scrolling in opposite directions ------ */
.wsp-sec.ad-hero { background-color: var(--c-navy); color: var(--c-cream); padding: 0 var(--s-8); overflow: hidden; }
.ad-hero-grid {
	max-width: var(--wp--custom--maxw--content); margin: 0 auto; min-height: 760px;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-12); align-items: center;
}
/* Side by side from desktop (900): copy left, the two scrolling photo columns right. */
@media (min-width: 900px) { .ad-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-hero-copy { padding: calc(var(--s-24) + var(--s-8)) 0; }
.ad-hero-eyebrow {
	display: inline-block; font-family: var(--f-label); font-size: var(--fs-md); letter-spacing: var(--wp--custom--ls--greeting);
	border-bottom: 2px solid var(--c-cream); padding-bottom: var(--s-1); margin-bottom: var(--s-5);
}
.ad-hero-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--wp--preset--font-size--display-band); line-height: 1;
	letter-spacing: var(--wp--custom--ls--hero); color: var(--c-white); margin: 0 0 var(--s-6);
}
.ad-hero-lede { font-size: var(--fs-body); line-height: 1.65; max-width: 500px; margin: 0 0 var(--s-8); opacity: 0.92; }
.ad-cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); height: 760px; overflow: hidden; }
/* Two copies of each column; the trailing padding equals the gap, so -50% is exactly one set (seamless loop). */
.ad-col-track { display: flex; flex-direction: column; gap: var(--s-5); padding-bottom: var(--s-5); }
.ad-cols.is-moving .ad-col-track.is-up { animation: ad-up var(--wsp-marquee-duration) var(--e-linear) infinite; }
.ad-cols.is-moving .ad-col-track.is-down { animation: ad-down var(--wsp-marquee-duration) var(--e-linear) infinite; }
.ad-cols.is-paused .ad-col-track, .ad-cols.is-held .ad-col-track { animation-play-state: paused; }
@keyframes ad-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes ad-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.ad-col-photo {
	aspect-ratio: 4 / 4.4; flex-shrink: 0; overflow: hidden; background-color: var(--c-sand);
	border: 3px solid var(--c-cream); box-shadow: var(--wp--custom--shadow--pink-lg);
}
.ad-col-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-cols-toggle {
	position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: calc(3 * var(--wp--custom--z--raised));
	width: 44px; height: 44px; cursor: pointer; background-color: var(--c-cream); border: 2px solid var(--c-navy); color: var(--c-navy);
	font-size: var(--fs-sm); box-shadow: var(--wp--custom--shadow--pink-sm);
	transition: background-color var(--m-fast) var(--e-std), color var(--m-fast) var(--e-std);
}
.ad-cols-toggle:hover { background-color: var(--c-pink); color: var(--c-cream); }
.ad-cols-toggle[hidden] { display: none; }
@media (max-width: 899px) {
	.wsp-sec.ad-hero { padding: 0 var(--wp--custom--section--pad-x-tablet); }
	.ad-hero-grid { min-height: 0; }
	.ad-hero-copy { padding: var(--s-16) 0; }
	.ad-cols { display: none; }
}
@media (max-width: 640px) {
	.wsp-sec.ad-hero { padding: 0 var(--wp--custom--section--pad-x-mobile); }
	.ad-hero-copy { padding: var(--s-12) 0 var(--wp--custom--section--pad-y-mobile); }
}

/* ---- From the field: featured story, search, filters, story cards --------- */
.ad-stretch::after { content: ""; position: absolute; inset: 0; z-index: var(--wp--custom--z--raised); }
.ad-stretch { transition: color var(--m-fast) var(--e-std); }
.ad-stretch:hover, .ad-featured:hover .ad-stretch, .ad-card:hover .ad-stretch { color: var(--c-pink); }
.ad-city { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); color: var(--c-navy); margin-bottom: var(--s-2); }
.ad-org { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); color: var(--c-pink-text); }
.ad-read {
	font-family: var(--f-label); font-size: var(--fs-md); letter-spacing: var(--wp--custom--ls--button);
	color: var(--c-pink-text); border-bottom: 2px solid var(--c-pink); padding-bottom: var(--s-1);
}

.ad-featured {
	position: relative; margin-bottom: var(--s-8); background-color: var(--c-white);
	display: grid; grid-template-columns: minmax(0, 1fr);
	border: 3px solid var(--c-navy); box-shadow: var(--sh-hover-lg);
	transition: transform var(--m-base) var(--e-std), box-shadow var(--m-base) var(--e-std);
}
@media (min-width: 900px) { .ad-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-featured:hover { transform: var(--lift-lg); box-shadow: var(--wp--custom--shadow--pink-11); }
.ad-featured-photo { position: relative; min-height: 340px; overflow: hidden; background-color: var(--c-sand); border-right: 3px solid var(--c-navy); }
.ad-featured-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-featured-photo .wsp-frame-dash { border-color: var(--wp--custom--alpha--sand-80); }
.ad-tag {
	position: absolute; top: var(--s-4); left: var(--s-4);
	font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); line-height: 1.2;
	background-color: var(--c-pink); color: var(--c-white); border: 2px solid var(--c-navy); padding: var(--s-1) var(--s-3);
}
.ad-featured-body { padding: calc(var(--s-10) + var(--s-1)) var(--s-10); }
.ad-featured .ad-city { font-size: var(--fs-button); }
.ad-featured-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.1; color: var(--c-navy); margin: 0 0 var(--s-1); }
.ad-featured .ad-org { margin-bottom: var(--s-4); }
.ad-featured-text { font-size: var(--fs-md); line-height: var(--wp--custom--lh--body); color: var(--c-body); margin: 0 0 var(--s-5); }
.ad-featured-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.ad-plan {
	position: relative; z-index: calc(2 * var(--wp--custom--z--raised));
	font-family: var(--f-label); font-size: var(--fs-md); letter-spacing: var(--wp--custom--ls--button);
	color: var(--c-navy); border-bottom: 2px solid var(--c-navy); padding-bottom: var(--s-1);
	transition: color var(--m-fast) var(--e-std), border-color var(--m-fast) var(--e-std);
}
.ad-plan:hover { color: var(--c-pink); border-color: var(--c-pink); }

.ad-controls[hidden] { display: none; }
.ad-search {
	display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); padding: 0 var(--s-5);
	background-color: var(--c-cream); border: 3px solid var(--c-navy); box-shadow: var(--sh-lg);
	outline: var(--wp--custom--focus--width) solid transparent;
	transition: border-color var(--m-fast) var(--e-std), outline-color var(--m-fast) var(--e-std);
}
/* The DS field treatment (pink border + ring) on the whole field (Dev Context). */
.ad-search:focus-within { border-color: var(--c-pink); outline-color: var(--wp--custom--alpha--pink-60); }
.ad-search input {
	flex: 1; min-width: 0; border: none; background: transparent; padding: var(--s-4) 0;
	font-family: var(--f-body); font-size: var(--fs-md); color: var(--c-ink); outline: none;
}
.ad-search-icon { font-size: var(--fs-lede); color: var(--c-navy); }
.ad-filters { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-8); }
.ad-filter {
	min-height: 44px; cursor: pointer; padding: var(--s-2) var(--s-4);
	font-family: var(--f-label); font-size: var(--fs-button); letter-spacing: var(--wp--custom--ls--button);
	border: 2px solid var(--c-navy); background-color: var(--c-white); color: var(--c-navy);
	transition: background-color var(--m-base) var(--e-std), color var(--m-base) var(--e-std);
}
.ad-filter:hover { background-color: var(--c-sand); }
.ad-filter[aria-pressed="true"] { background-color: var(--c-navy); color: var(--c-cream); }

/* Story cards: one column on phones and tablets; from desktop (900) the visible cards share one row, so the three
   stories are three across and a filtered 2 or 1 fills the row (as before), never an empty column. */
.ad-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--custom--gap--grid); }
@media (min-width: 900px) { .ad-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.ad-card {
	position: relative; display: flex; flex-direction: column; background-color: var(--c-white);
	border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--card);
	transition: transform var(--m-base) var(--e-std), box-shadow var(--m-base) var(--e-std);
}
.ad-card:hover { transform: var(--lift-lg); box-shadow: var(--wp--custom--shadow--pink-9); }
/* Filtering animates in adventures.js (Web Animations, timed by the motion tokens). */
.ad-card[hidden] { display: none; }
.ad-card-photo { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 3px solid var(--c-navy); background-color: var(--c-sand); }
.ad-card-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--wsp-pos, center); display: block; }
.ad-card-body { padding: var(--s-6) var(--s-6) var(--s-8); display: flex; flex-direction: column; flex: 1; }
.ad-card-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: var(--wp--custom--lh--tight); color: var(--c-navy); margin: 0 0 var(--s-1); }
.ad-card .ad-org { margin-bottom: var(--s-3); }
.ad-card-text {
	font-size: var(--fs-button); line-height: var(--wp--custom--lh--body); color: var(--c-body); margin: 0; flex: 1;
	display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ad-card .ad-read { margin-top: var(--s-5); align-self: flex-start; }
.ad-empty { text-align: center; font-size: var(--fs-md); color: var(--c-muted); margin: 0; padding: var(--s-10) 0; opacity: 0; transition: opacity var(--m-base) var(--e-enter); }
.ad-empty.is-shown { opacity: 1; }
.ad-empty[hidden] { display: none; }

/* ---- CTA ------------------------------------------------------------------ */
.ad-cta {
	text-align: center; color: var(--c-cream);
	background: var(--c-pink) repeating-linear-gradient(115deg, transparent, transparent 60px, var(--wp--custom--alpha--sand-07) 60px, var(--wp--custom--alpha--sand-07) 62px);
}
.ad-cta-inner { max-width: var(--wp--custom--maxw--text); margin: 0 auto; }
.ad-cta .wsp-pinky-badge { margin-bottom: var(--s-6); }
.ad-cta-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--wp--preset--font-size--display-band); line-height: 1.02;
	letter-spacing: var(--wp--custom--ls--hero); color: inherit; margin: 0 0 var(--s-6); text-wrap: balance;
}
.ad-cta-text { font-size: var(--fs-body); line-height: 1.65; color: var(--c-white); margin: 0 0 var(--s-8); text-wrap: pretty; }