/* =============================================================================
   Story pages (Claude Design Story.dc.html + story-data.js). Tokens only (guard: npm run guard:tokens).
   Article column: the 808px text width. Breakpoints 480 / 640 / 1024 only.
   ============================================================================= */

/* ---- Breadcrumb + article -------------------------------------------------- */
.wsp-st-crumbs {
	max-width: var(--wp--custom--maxw--text); margin: 0 auto; padding: var(--s-12) var(--s-5) 0;
	display: flex; flex-wrap: wrap; gap: var(--s-2);
	font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); text-transform: uppercase; color: var(--c-muted);
}
.wsp-st-crumbs a { color: var(--c-muted); }
.wsp-st-crumbs a:hover { color: var(--c-pink-text); }
.wsp-st-crumb-current { color: var(--c-navy); }

.wsp-st-article { max-width: var(--wp--custom--maxw--text); margin: 0 auto; padding: var(--wp--custom--gap--grid) var(--s-5) 0; }
.wsp-st-eyebrow { margin-bottom: var(--s-4); }
.wsp-st-eyebrow .wsp-eyebrow { font-size: var(--fs-md); }
.wsp-st-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--wp--preset--font-size--display-hero); line-height: 1.04;
	letter-spacing: var(--wp--custom--ls--hero); color: var(--c-navy); margin: 0 0 var(--s-3); text-wrap: balance;
}
.wsp-st-meta {
	font-family: var(--f-label); font-size: var(--fs-button); letter-spacing: var(--wp--custom--ls--button); text-transform: uppercase;
	color: var(--c-muted); margin: 0 0 var(--wp--custom--gap--grid);
}

/* Hero photo: <img> cover in a 16:9 frame, the dashed inner rule and the rotated giveback stamp. */
.wsp-st-hero {
	position: relative; aspect-ratio: 16 / 9; margin: 0 var(--s-2) var(--s-10) 0;
	border: 3px solid var(--c-navy); box-shadow: var(--sh-hover-lg); background: var(--c-sand);
}
.wsp-st-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--wsp-pos, center); display: block; }
.wsp-st-stamp {
	position: absolute; right: calc(-1 * var(--s-4)); bottom: var(--s-6); z-index: var(--wp--custom--z--raised); transform: rotate(6deg);
	background: var(--c-cream); border: 2px solid var(--c-navy); box-shadow: var(--sh-sm); padding: var(--s-2) var(--s-4); text-align: center;
}
.wsp-st-stamp-top { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); color: var(--c-pink-text); line-height: 1.1; }
.wsp-st-stamp-city { font-family: var(--f-label); font-size: var(--fs-lede); letter-spacing: var(--wp--custom--ls--button); color: var(--c-navy); line-height: 1.1; margin-top: calc(var(--s-1) / 2); }

/* Stats: value over label (dl: the label is the term, shown under its value). */
.wsp-st-stats {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3);
	margin: 0 0 var(--s-10); padding: 0;
}
/* Stories have two or three stats: two columns on a phone, one row of however many there are from 641. */
@media (min-width: 641px) { .wsp-st-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.wsp-st-stat {
	display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; min-width: 0; text-align: center;
	background: var(--c-sand); border: 3px solid var(--c-navy); box-shadow: var(--sh-md); padding: var(--s-4) var(--s-3);
}
.wsp-st-stat-v {
	margin: 0 0 var(--s-1); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--wp--custom--lh--tight);
	color: var(--c-pink-text); overflow-wrap: anywhere;
}
.wsp-st-stat-l { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); text-transform: uppercase; color: var(--c-navy); }

/* Event partner logo (G2): a navy panel, because three of the four supplied logos are white. Logos use contain.
   K7 (Casey, 2026-10-19): the logo is centred, with the "Event Partner" label centred above it, at every width. */
.wsp-st-partner {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); text-align: center;
	margin: calc(-1 * var(--s-4)) var(--s-2) var(--s-10) 0; padding: var(--s-5) var(--s-6);
	background: var(--c-navy); border: 3px solid var(--c-navy); box-shadow: var(--sh-md);
}
.wsp-st-partner-l { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); text-transform: uppercase; color: var(--wp--custom--alpha--sand-85); }
.wsp-st-partner-logo { display: block; width: auto; height: auto; max-height: var(--s-16); max-width: min(100%, 280px); object-fit: contain; }

.wsp-st-intro { font-size: var(--fs-quote); line-height: var(--wp--custom--lh--body); font-weight: 500; color: var(--c-ink); margin: 0 0 var(--wp--custom--gap--grid); text-wrap: pretty; }
.wsp-st-p { font-size: var(--fs-body); line-height: 1.75; color: var(--c-ink); margin: 0 0 var(--s-6); text-wrap: pretty; }

.wsp-st-quote {
	position: relative; margin: var(--s-10) var(--s-2) var(--s-10) 0; padding: var(--s-8) var(--s-8) var(--wp--custom--gap--grid);
	background: var(--c-pink); color: var(--c-white); border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--navy-6);
}
.wsp-st-quote > .wsp-frame-dash { border-color: var(--wp--custom--alpha--sand-50); }
.wsp-st-quote p { position: relative; font-size: var(--fs-quote); font-style: italic; line-height: var(--wp--custom--lh--body); margin: 0 0 var(--s-4); color: var(--c-white); }
.wsp-st-quote footer {
	position: relative; font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button);
	text-transform: uppercase; color: var(--c-white);
}

/* Inline CTA: white on ocean fails AA (4.29:1), so the band uses ocean-deep (4.61:1). */
.wsp-st-inline-cta {
	margin: var(--s-2) var(--s-2) var(--s-16) 0; padding: var(--s-6);
	background: var(--wp--preset--color--ocean-deep); color: var(--c-white); border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--navy-6);
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
}
.wsp-st-inline-cta-text { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-quote); }
/* Button size sm (DS Button: 12px 22px, 14px). */
.wsp-btn.is-sm { padding: var(--s-3) var(--s-6); font-size: var(--fs-sm); }

/* ---- Related adventures ---------------------------------------------------- */
.wsp-st-related { background: var(--c-sand); border-top: 3px dashed var(--c-navy); padding: var(--s-24) var(--s-5); }
.wsp-st-related-inner { max-width: var(--wp--custom--maxw--content); margin: 0 auto; }
.wsp-st-cards {
	list-style: none; margin: 0 0 var(--s-12); padding: 0;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--custom--gap--grid);
}
/* Three related stories: one column on phones and tablets, three across from desktop (900). */
@media (min-width: 900px) { .wsp-st-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wsp-st-related .wsp-cta-row.is-near { margin-top: 0; }
/* One link per card: the title, stretched over the whole card. The card lifts on hover and focus. */
.wsp-st-card {
	position: relative; display: flex; flex-direction: column; background: var(--c-white);
	border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--navy-6);
	transition: transform var(--m-base) var(--e-std), box-shadow var(--m-base) var(--e-std);
}
.wsp-st-card:hover, .wsp-st-card:focus-within { transform: var(--lift); box-shadow: var(--sh-hover-lg); }
.wsp-st-card:focus-within { outline: var(--wp--custom--focus--width) solid var(--wsp-focus); outline-offset: var(--wp--custom--focus--offset); }
.wsp-st-card-title a:focus-visible { outline: none; }
.wsp-st-card-img { position: relative; aspect-ratio: 16 / 10; border-bottom: 3px solid var(--c-navy); background: var(--c-sand); overflow: hidden; }
.wsp-st-card-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--wsp-pos, center); display: block; }
.wsp-st-card-body { padding: var(--s-5) var(--s-5) var(--s-6); }
.wsp-st-card-meta { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); text-transform: uppercase; color: var(--c-navy); margin-bottom: var(--s-2); }
.wsp-st-card-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--wp--custom--lh--tight); color: var(--c-navy); margin: 0 0 var(--s-3); }
.wsp-st-card-title a { color: inherit; }
.wsp-st-card-title a::after { content: ""; position: absolute; inset: 0; }
.wsp-st-card:hover .wsp-st-card-title a { color: var(--c-pink-text); }
.wsp-st-card-text { font-size: var(--fs-button); line-height: 1.55; color: var(--c-muted); margin: 0; }

/* ---- Your turn (pink band) ------------------------------------------------- */
.wsp-st-cta {
	background: var(--c-pink); color: var(--c-white); text-align: center;
	padding: var(--s-24) var(--s-5);
}
.wsp-st-cta-inner { max-width: var(--wp--custom--maxw--text); margin: 0 auto; }
.wsp-st-cta .wsp-section-head { margin-bottom: var(--s-8); }
.wsp-st-cta .wsp-eyebrow { font-size: var(--fs-md); }
.wsp-st-cta .wsp-section-title { font-size: var(--fs-h2); line-height: 1.08; max-width: var(--wp--custom--maxw--prose); margin-inline: auto; text-wrap: balance; }
.wsp-st-cta .wsp-section-sub { font-size: var(--fs-body); max-width: none; }
.wsp-st-cta-row { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }

@media (min-width: 641px) and (max-width: 899px) {
	.wsp-st-related, .wsp-st-cta { padding: var(--s-20) var(--wp--custom--section--pad-x-tablet); }
}
@media (max-width: 640px) {
	.wsp-st-crumbs { padding-top: var(--s-8); }
	.wsp-st-related, .wsp-st-cta { padding: var(--wp--custom--section--pad-y-mobile) var(--wp--custom--section--pad-x-mobile); }
	.wsp-st-quote { padding: var(--s-6) var(--s-5) var(--s-5); }
	.wsp-st-cta-row > * { flex: 1 1 100%; }
}

/* ---- Sticky inquire bar (≤640): slides up once the hero photo has gone ----- */
.wsp-st-sticky { display: none; }
@media (max-width: 640px) {
	body { padding-bottom: calc(var(--s-16) + var(--s-3)); }
	.wsp-st-sticky {
		display: block; position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: var(--wp--custom--z--header);
		background: var(--c-pink); color: var(--c-white); text-align: center; text-transform: uppercase;
		font-family: var(--f-label); font-size: var(--fs-md); letter-spacing: var(--wp--custom--ls--button);
		padding: var(--s-4) var(--s-5); border: 3px solid var(--c-navy); box-shadow: var(--sh-md);
		transform: translateY(calc(100% + var(--s-6))); opacity: 0; visibility: hidden;
		transition: transform var(--m-base) var(--e-exit), opacity var(--m-fast) var(--e-exit), visibility var(--m-base) var(--e-exit);
	}
	.wsp-st-sticky.is-shown {
		transform: none; opacity: 1; visibility: visible;
		transition: transform var(--m-slow) var(--e-enter), opacity var(--m-base) var(--e-enter), visibility var(--m-slow) var(--e-enter);
	}
	.wsp-st-sticky:hover { color: var(--c-white); }
}