/*
 * Pattern helpers: the few layout details block settings can't express, keyed to the sd-* classes
 * the patterns in patterns/*.php add. Everything else in a pattern is plain block settings.
 * Loaded on every page (small, inlined) and in the editor.
 */

/* ---------- Hero (hero-mountain) ---------- */
.sd-hero {
	overflow: hidden;
}

.sd-hero > .wp-block-cover__inner-container {
	position: static; /* so the ridge below anchors to the whole cover */
}

.sd-hero > .wp-block-cover__inner-container > :not(.sd-ridge) {
	position: relative;
	z-index: 3;
}

/* Mountain ridge layer along the bottom edge (above the photo's dark overlay, below the text),
 * blending into the paper page below. */
.sd-hero .sd-ridge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	margin: 0;
	pointer-events: none;
	z-index: 2;
}

.sd-hero .sd-ridge img {
	display: block;
	width: 100%;
	height: clamp(48px, 9vw, 150px);
}

/* Video hero: footage is mostly bright snow, so a scrim darkens the text side on top of the cover overlay
 * (measured across the loop: gold "Welcome to" 1.6:1 → 3:1+, white text 3.3:1 → 6:1+). Right side stays bright. */
.sd-hero:has(> .wp-block-cover__video-background)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgb(32 28 30 / 0.5) 0%, rgb(32 28 30 / 0.45) 45%, rgb(32 28 30 / 0) 80%);
}

@media (max-width: 781px) {
	.sd-hero:has(> .wp-block-cover__video-background)::after {
		background: linear-gradient(0deg, rgb(32 28 30 / 0.5) 0%, rgb(32 28 30 / 0.45) 70%, rgb(32 28 30 / 0.15) 100%);
	}
}

/* Video hero: the pause button sits just above the ridge. */
.sd-hero > .sd-video-toggle {
	bottom: calc(clamp(48px, 9vw, 150px) + var(--wp--preset--spacing--30));
}

/* Nudge the headline and buttons in from the left edge; scales down to nothing extra on phones. */
.sd-hero .wp-block-column:not(.sd-hero__badge) {
	padding-inline-start: clamp(0px, 3vw, 3rem);
}

.sd-hero__badge {
	display: flex;
	justify-content: flex-end;
}

/* Phones: columns stack, so the badge moves to the top right, above the headline. */
@media (max-width: 781px) {
	.sd-hero__badge {
		order: -1;
	}

	.sd-hero__badge .sd-badge {
		width: 7.5rem;
		margin-inline: auto 0;
	}
}

/* ---------- Rotating badge (spin-badge) ---------- */
.sd-badge {
	width: clamp(8rem, 16vw, 12.5rem);
	aspect-ratio: 1;
	margin-inline: auto;
}

.sd-badge__link {
	display: block;
	border-radius: 50%;
	color: var(--wp--preset--color--black);
	transition: scale 0.2s;
}

.sd-badge__link:hover {
	scale: 1.05;
}

.sd-badge svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.sd-badge__disc {
	fill: var(--wp--preset--color--gold);
}

.sd-badge__ring {
	transform-box: view-box;
	transform-origin: 50% 50%;
	font-family: var(--wp--preset--font-family--subhead);
	font-size: 21px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	fill: currentColor;
}

/* Snowflake, drawn as strokes. */
.sd-badge__icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 6;
	stroke-linecap: round;
}

/* The ring turns, not the icon (global.css rotates img/svg for other badges). */
.sd-motion-spin-badge.sd-badge svg {
	animation: none;
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.sd-motion-spin-badge .sd-badge__ring {
			animation: sd-spin linear both;
			animation-timeline: scroll(root);
		}
	}
}

/* ---------- Conditions strip ----------
 * Each item is a button-like tile: the link's ::after covers the tile, so the whole tile is the tap target.
 * Hover/focus: fills gold (black text 9.6:1); press: orange (black 4.95:1). The lift and tilt come from
 * "Tilt on hover" (sd-motion-tilt, global.css), the same effect as the Happening at Sundown cards. */
.sd-conditions__item {
	--sd-cond-fg: var(--wp--preset--color--white);
	--sd-cond-icon: var(--wp--preset--color--gold);
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem 1fr 1.25rem;
	column-gap: 0.9rem;
	align-items: center;
	padding: 0.9rem 1rem;
	border-radius: var(--wp--preset--border-radius--small);
	background: rgb(255 255 255 / 0.06);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
	color: var(--sd-cond-fg);
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.sd-conditions__item > * {
	grid-column: 2;
	margin: 0 !important;
}

.sd-conditions__item::before,
.sd-conditions__item::after {
	content: "";
	grid-row: 1 / span 2;
	background: var(--sd-cond-icon);
	-webkit-mask: var(--sd-icon) center / contain no-repeat;
	mask: var(--sd-icon) center / contain no-repeat;
}

.sd-conditions__item::before {
	grid-column: 1;
	width: 2.25rem;
	height: 2.25rem;
}

/* Arrow: says "this goes somewhere". */
.sd-conditions__item::after {
	--sd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
	grid-column: 3;
	width: 1.25rem;
	height: 1.25rem;
}

.sd-conditions .sd-icon-snow::before { --sd-icon: var(--sd-icon-snow); }
.sd-conditions .sd-icon-camera::before { --sd-icon: var(--sd-icon-camera); }
.sd-conditions .sd-icon-clock::before { --sd-icon: var(--sd-icon-clock); }
.sd-conditions .sd-icon-map::before { --sd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5 9 4l6 2.5L21 4v13.5L15 20l-6-2.5L3 20z'/%3E%3Cpath d='M9 4v13.5M15 6.5V20'/%3E%3C/svg%3E"); }

.sd-conditions__link {
	font-family: var(--wp--preset--font-family--subhead);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sd-conditions__item a,
.sd-conditions__item a:hover {
	color: inherit;
	text-decoration: none;
}

.sd-conditions__link a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Focus ring on the whole tile, not just the words. */
.sd-conditions__link a:focus-visible {
	outline: none;
}

.sd-conditions__item:has(a:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--dark);
	outline-offset: 3px;
}

.sd-conditions__item:is(:hover, :focus-within) {
	--sd-cond-fg: var(--wp--preset--color--black);
	--sd-cond-icon: var(--wp--preset--color--black);
	background: var(--wp--preset--color--gold);
	box-shadow: none;
}

.sd-conditions__item:active {
	--sd-cond-fg: var(--wp--preset--color--black);
	--sd-cond-icon: var(--wp--preset--color--black);
	background: var(--wp--preset--color--orange);
}

@media (prefers-reduced-motion: no-preference) {
	/* Icon pops and the arrow nudges forward (spring easing with a slight overshoot). */
	.sd-conditions__item::before,
	.sd-conditions__item::after {
		transition: background-color 0.2s, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.sd-conditions__item:is(:hover, :focus-within)::before {
		scale: 1.15;
		rotate: -10deg;
	}

	.sd-conditions__item:is(:hover, :focus-within)::after {
		translate: 0.3rem 0;
	}

	/* Press: the tile squishes down (beats the tilt's hover lift). */
	.sd-conditions__item.sd-motion-tilt:active {
		transform: scale(0.97);
		transition-duration: 0.08s;
	}
}

/* Phones: a 2 × 2 grid of tiles, icon above the label. */
@media (max-width: 599.98px) {
	.sd-conditions > .is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}

	.sd-conditions__item {
		grid-template-columns: 1fr 1rem;
		row-gap: 0.4rem;
		align-items: start;
		padding: 0.8rem;
	}

	.sd-conditions__item > *,
	.sd-conditions__item::before {
		grid-column: 1;
	}

	.sd-conditions__item::before {
		grid-row: auto;
		width: 1.75rem;
		height: 1.75rem;
	}

	.sd-conditions__item::after {
		grid-column: 2;
		grid-row: 1;
		width: 1rem;
		height: 1rem;
	}

	.sd-conditions__link {
		font-size: var(--wp--preset--font-size--large);
	}
}

/* ---------- Arrow links (cards) ---------- */
.sd-arrow-link a::after {
	content: " →";
	display: inline-block;
	transition: translate 0.2s;
}

.sd-arrow-link a:hover::after {
	translate: 4px 0;
}

/* ---------- Feature rows: color tab behind the photo ---------- */
.sd-feature-row .wp-block-media-text__media {
	position: relative;
	z-index: 0;
}

.sd-feature-row .wp-block-media-text__media::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 12% -4% -6% 18%;
	background: var(--sd-tab, var(--wp--preset--color--orange));
	border-radius: var(--wp--preset--border-radius--small);
}

.sd-feature-row.has-media-on-the-right .wp-block-media-text__media::before {
	inset: 12% 18% -6% -4%;
}

.sd-feature-row .wp-block-media-text__media img {
	border-radius: var(--wp--preset--border-radius--small);
}

.sd-tab-orange { --sd-tab: var(--wp--preset--color--orange); }
.sd-tab-teal { --sd-tab: var(--wp--preset--color--teal); }
.sd-tab-gold { --sd-tab: var(--wp--preset--color--gold); }
.sd-tab-navy { --sd-tab: var(--wp--preset--color--navy); }

@media (max-width: 600px) {
	.sd-feature-row .wp-block-media-text__media::before,
	.sd-feature-row.has-media-on-the-right .wp-block-media-text__media::before {
		inset: 10% -2% -4% 10%;
	}

	.sd-feature-row .wp-block-media-text__content {
		padding-inline: 0;
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* ---------- Trail line (story-trail-line): stretches to the text's height ---------- */
.sd-line-art-fill,
.sd-line-art-fill img {
	height: 100%;
	width: 100%;
	margin: 0;
}

.sd-line-art-fill img {
	object-fit: fill;
	min-height: 12rem;
}

/* ---------- Price cards ---------- */
.sd-price-card {
	display: flex;
	flex-direction: column;
}

.sd-price-card > .sd-price-card__cta {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

.sd-price-card__cta .wp-block-button {
	flex: 1 1 100%;
}

.sd-price-card__cta .wp-block-button__link {
	width: 100%;
}

.sd-price-card.is-featured {
	outline: 4px solid var(--wp--preset--color--orange);
	outline-offset: -4px;
}

.sd-price-card .sd-price {
	margin-block: var(--wp--preset--spacing--20);
}

/* Season pass members-only perks (night section): a gold dashed rule over each. */
.sd-perk {
	border-top: 2px dashed var(--wp--preset--color--gold);
	padding-top: var(--wp--preset--spacing--40);
}

/* ---------- Upcoming events (events-feature) ---------- */
.sd-event-card {
	position: relative;
}

/* Cards come from the Query Loop (featured image) or are built by hand (Image block): same look. */
.sd-event-card :is(.wp-block-post-featured-image, .wp-block-image) {
	margin: 0;
}

.sd-event-card :is(.wp-block-post-featured-image, .wp-block-image) img {
	width: 100%;
	border-radius: var(--wp--preset--border-radius--small);
}

/* The title link covers the whole card, so the photo is clickable too (one link per card). */
.sd-event-card :is(.wp-block-heading, .wp-block-post-title) a {
	text-decoration: none;
}

.sd-event-card :is(.wp-block-heading, .wp-block-post-title) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--preset--border-radius--small);
}

.sd-event-card :is(.wp-block-heading, .wp-block-post-title) a:focus-visible {
	outline: none;
}

.sd-event-card:has(:is(.wp-block-heading, .wp-block-post-title) a:focus-visible) {
	outline: 2px solid var(--sd-focus, var(--wp--preset--color--gold));
	outline-offset: 4px;
	border-radius: var(--wp--preset--border-radius--small);
}

.sd-event-card :is(.wp-block-heading, .wp-block-post-title) a:hover {
	text-decoration: underline;
}

/* No photo: a branded placeholder keeps the cards the same shape. */
.sd-event-card:not(:has(.wp-block-post-featured-image, .wp-block-image))::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--preset--border-radius--small);
	background: url("../images/tree-mark-600.webp") center / 62% no-repeat, var(--wp--preset--gradient--night);
}

/* Date as a ticket-stub sticker over the photo. */
.sd-event-card .sd-event-card__date {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	margin: 0;
	padding: 0.35em 0.6em;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--subhead);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
	text-transform: uppercase;
	border-radius: var(--wp--preset--border-radius--small);
	rotate: -4deg;
}

.sd-event-card .sd-event-card__date a {
	color: inherit;
	text-decoration: none;
}

/* Phones: swipe sideways through the events. */
@media (max-width: 781px) {
	.sd-events .sd-events__list {
		display: flex;
		gap: var(--wp--preset--spacing--30);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		margin-inline: calc(var(--wp--style--root--padding-left, 1rem) * -1);
		padding-inline: var(--wp--style--root--padding-left, 1rem);
		padding-bottom: var(--wp--preset--spacing--30);
		scroll-padding-inline: var(--wp--style--root--padding-left, 1rem);
	}

	.sd-events .sd-events__list > * {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}
}

/* ---------- Media gallery cards (media-gallery-grid) ----------
 * Cover photo, gallery name, date below. As on the event cards, the name's link covers the whole card. */
.sd-gallery-card {
	position: relative;
	text-align: center;
}

.sd-gallery-card .wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--small);
}

.sd-gallery-card .wp-block-image img {
	width: 100%;
	transition: scale 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sd-gallery-card .wp-block-heading {
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--subhead);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.05;
	text-transform: uppercase;
}

.sd-gallery-card .wp-block-heading a {
	color: inherit;
	text-decoration: none;
}

.sd-gallery-card .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sd-gallery-card .wp-block-heading a:focus-visible {
	outline: none;
}

.sd-gallery-card:has(.wp-block-heading a:focus-visible) {
	outline: 2px solid var(--sd-focus, var(--wp--preset--color--orange));
	outline-offset: 4px;
	border-radius: var(--wp--preset--border-radius--small);
}

.sd-gallery-card .wp-block-heading a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--orange);
	text-decoration-thickness: 2px;
}

.sd-gallery-card .sd-gallery-card__date {
	margin-top: 0.25rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.sd-gallery-card:hover .wp-block-image img {
		scale: 1.04;
	}
}

/* ---------- Logo grid (partner-logos) ---------- */
.sd-logo-tile {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--preset--border-radius--medium);
}

.sd-logo-tile img {
	max-height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* ---------- Testimonial ---------- */
.wp-block-quote.sd-testimonial {
	border-left-color: var(--wp--preset--color--gold);
	font-weight: 700;
}

.wp-block-quote.sd-testimonial cite {
	color: var(--wp--preset--color--gold);
}

/* ---------- Webcams / 16:9 iframes ---------- */
.sd-frame-16x9 {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--black);
	border-radius: var(--wp--preset--border-radius--small);
	overflow: hidden;
}

.sd-frame-16x9 iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- CTA bands ---------- */
.sd-cta-band .is-style-sd-sticker {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* A sticker on the orange band turns black so it doesn't disappear. */
.is-style-orange .is-style-sd-sticker {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--gold);
}

/* Headline and button side by side on wide screens, stacked on phones and tablets. */
@media (min-width: 782px) {
	.sd-cta-band .wp-block-buttons {
		flex-shrink: 0;
	}
}

@media (max-width: 781px) {
	.sd-cta-band .is-layout-flex.is-nowrap {
		flex-wrap: wrap;
	}
}

/* ---------- Sub-brand rows (subbrand-rows) ----------
 * Base Camp, Sundown Parks and Tips Up as alternating photo + text rows on paper (Basketball Academy kit layout).
 * A sd-brand-* class on each row sets its accent: torn-paper scraps around the photo, the rule under the heading
 * and the button colors. Photo: Cutout + Photo crop; row: "Color in" (global.css).
 * Button contrast: white on teal-deep 4.52:1, white on Parks red only at ≥ 19px bold (large text), black on orange 4.95:1;
 * hover navy/white, black/white, gold/black. */
.sd-brand-basecamp {
	--sd-brand-accent: var(--wp--preset--color--teal);
	--sd-scrap-a: url("../images/texture-paper-tile.webp") center / 180px, var(--wp--preset--color--teal);
	--sd-scrap-blend: multiply; /* the light paper tile tints the teal instead of covering it */
	--sd-scrap-b: var(--wp--preset--color--orange);
	--sd-brand-btn: var(--wp--preset--color--teal-deep);
	--sd-brand-btn-ink: var(--wp--preset--color--white);
	--sd-brand-btn-hover: var(--wp--preset--color--navy);
	--sd-brand-btn-hover-ink: var(--wp--preset--color--white);
}

.sd-brand-parks {
	--sd-brand-accent: var(--wp--preset--color--parks-red);
	--sd-scrap-a: url("../images/texture-grunge-scrap.webp") center / cover, var(--wp--preset--color--black);
	--sd-scrap-b: var(--wp--preset--color--parks-red);
	--sd-brand-btn: var(--wp--preset--color--parks-red);
	--sd-brand-btn-ink: var(--wp--preset--color--white);
	--sd-brand-btn-hover: var(--wp--preset--color--black);
	--sd-brand-btn-hover-ink: var(--wp--preset--color--white);
}

.sd-brand-tipsup {
	--sd-brand-accent: var(--wp--preset--color--orange);
	--sd-scrap-a: url("../images/texture-wood-scrap.webp") center / cover, #5a3a22;
	--sd-scrap-b: var(--wp--preset--color--gold);
	--sd-brand-btn: var(--wp--preset--color--orange);
	--sd-brand-btn-ink: var(--wp--preset--color--black);
	--sd-brand-btn-hover: var(--wp--preset--color--gold);
	--sd-brand-btn-hover-ink: var(--wp--preset--color--black);
}

/* Sundown's own colors, for rows that aren't a sub-brand (Media Gallery). White on navy 13.24:1, black on orange 4.95:1. */
.sd-brand-sundown {
	--sd-brand-accent: var(--wp--preset--color--navy);
	--sd-scrap-a: url("../images/texture-paper-tile.webp") center / 180px, var(--wp--preset--color--navy);
	--sd-scrap-blend: multiply;
	--sd-scrap-b: var(--wp--preset--color--gold);
	--sd-brand-btn: var(--wp--preset--color--navy);
	--sd-brand-btn-ink: var(--wp--preset--color--white);
	--sd-brand-btn-hover: var(--wp--preset--color--orange);
	--sd-brand-btn-hover-ink: var(--wp--preset--color--black);
}

/* Each row is laid out only when it comes near the screen (content-visibility). On Home the rows sit right under the
 * hero, so without this the first paint already downloaded every row's heading font (the Tips Up stand-in, Rubik
 * Dirt, is 182 KB), scrap texture and photo; now rows further down fetch them as they approach (Phase 10,
 * Lighthouse). The clip margin keeps the scraps and slide-in text, which reach past the row, from being cut off. */
.sd-brand-row {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px; /* measured: ~650–810px stacked (phones, tablets), ~460–530px side by side */
	overflow-clip-margin: 10rem;
}

@media (min-width: 782px) {
	.sd-brand-row {
		contain-intrinsic-size: auto 500px;
	}
}

.sd-brand-row__media {
	position: relative;
	isolation: isolate;
	view-timeline: --sd-brand block;
}

.sd-brand-row__media .wp-block-image {
	margin: 0;
	transition: rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sd-brand-row__media .wp-block-image img {
	width: 100%;
}

/* Torn-paper scraps: a big textured one behind the photo's top corner, a small bright one in front of the
 * opposite bottom corner. They swap sides when the photo is in the right-hand column. */
.sd-brand-row__media::before,
.sd-brand-row__media::after {
	content: "";
	position: absolute;
	pointer-events: none;
	-webkit-mask: url("../images/torn-scrap.svg") center / 100% 100% no-repeat;
	mask: url("../images/torn-scrap.svg") center / 100% 100% no-repeat;
	transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sd-brand-row__media::before {
	z-index: -1;
	top: -16%;
	left: -7%;
	width: clamp(7rem, 19vw, 16.5rem);
	aspect-ratio: 1.25;
	background: var(--sd-scrap-a);
	background-blend-mode: var(--sd-scrap-blend, normal);
	rotate: -10deg;
}

.sd-brand-row__media::after {
	z-index: 1;
	right: -4%;
	bottom: -14%;
	width: clamp(4.5rem, 10vw, 8.5rem);
	aspect-ratio: 0.95;
	background: var(--sd-scrap-b);
	-webkit-mask-image: url("../images/torn-scrap-2.svg");
	mask-image: url("../images/torn-scrap-2.svg");
	rotate: 16deg;
}

.sd-brand-row__media:last-child::before {
	left: auto;
	right: -7%;
	rotate: 10deg;
}

.sd-brand-row__media:last-child::after {
	right: auto;
	left: -4%;
	rotate: -14deg;
}

/* Hover (or tab into) a row: the photo tips, the scraps spread. Its color is left to the scroll (sd-motion-colorize). */
@media (prefers-reduced-motion: no-preference) {
	.sd-brand-row:is(:hover, :focus-within) .sd-brand-row__media .wp-block-image {
		rotate: -1.25deg;
	}

	.sd-brand-row:is(:hover, :focus-within) .sd-brand-row__media::before {
		scale: 1.12;
		rotate: -24deg;
	}

	.sd-brand-row:is(:hover, :focus-within) .sd-brand-row__media::after {
		scale: 1.2;
		rotate: 36deg;
	}

	.sd-brand-row:is(:hover, :focus-within) .sd-brand-row__media:last-child::before {
		rotate: 22deg;
	}

	.sd-brand-row:is(:hover, :focus-within) .sd-brand-row__media:last-child::after {
		rotate: -34deg;
	}

	/* Scroll: the scraps drift at their own speeds (depth), against the photo. */
	@supports (animation-timeline: view()) {
		.sd-brand-row__media::before {
			animation: sd-scrap-back linear both;
			animation-timeline: --sd-brand;
		}

		.sd-brand-row__media::after {
			animation: sd-scrap-front linear both;
			animation-timeline: --sd-brand;
		}
	}
}

@keyframes sd-scrap-back { from { translate: 0 45%; } to { translate: 0 -35%; } }
@keyframes sd-scrap-front { from { translate: 0 -40%; } to { translate: 0 60%; } }

.sd-brand-row__text {
	max-width: 32rem;
}

/* Headings take the sub-brand face (Heading → Typography → Font); spacing as in the sub-brand section styles. */
.sd-brand-row__text .wp-block-heading {
	line-height: 1.05;
	letter-spacing: 0.01em;
}

/* Short accent rule under the heading (the kit's red dash), in the row's color. */
.sd-brand-row__text .wp-block-heading::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 5px;
	margin-top: 0.4em;
	border-radius: 3px;
	background: var(--sd-brand-accent);
}

.sd-brand-row .wp-block-button:not([class*="is-style-sd-"]) > .wp-block-button__link:not(.has-background) {
	background: var(--sd-brand-btn);
	color: var(--sd-brand-btn-ink);
}

.sd-brand-row .wp-block-button:not([class*="is-style-sd-"]) > .wp-block-button__link:not(.has-background):hover {
	background: var(--sd-brand-btn-hover);
	color: var(--sd-brand-btn-hover-ink);
}

/* White on Parks red is large text only (4.0:1): keep the button at ≥ 19px bold, as in the Parks section style. */
.sd-brand-parks .wp-block-button__link {
	font-size: max(1.1875rem, 19px);
}

/* Phones and tablets: photo on top, text below, in every row. */
@media (max-width: 781px) {
	.sd-brand-row__media {
		order: -1;
	}

	/* Stacked, the scraps reach into the text: keep the copy above them. */
	.sd-brand-row__text {
		position: relative;
		z-index: 2;
		max-width: none;
	}
}

/* ---------- Sub-brand logos ---------- */
.sd-subbrand-logo {
	margin-bottom: var(--wp--preset--spacing--20);
}

.sd-subbrand-logo img {
	max-width: 100%;
}

/* ---------- Interior page helpers (Phase 6 refine sample pages) ---------- */
/* Heading with a line icon before it (Snow Report: Daily Update, Trail map, Trail Report, Live Webcams).
 * Icons: the header's snow/camera/clock set (parts.css) plus map and signpost. */
.sd-icon-heading {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.sd-icon-heading::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background: var(--wp--preset--color--orange);
	-webkit-mask: var(--sd-icon) center / contain no-repeat;
	mask: var(--sd-icon) center / contain no-repeat;
}

.is-style-night .sd-icon-heading::before {
	background: var(--wp--preset--color--gold);
}

.sd-icon-heading.sd-icon-snow { --sd-icon: var(--sd-icon-snow); }
.sd-icon-heading.sd-icon-camera { --sd-icon: var(--sd-icon-camera); }
.sd-icon-heading.sd-icon-clock { --sd-icon: var(--sd-icon-clock); }
.sd-icon-heading.sd-icon-map { --sd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5 9 4l6 2.5L21 4v13.5L15 20l-6-2.5L3 20z'/%3E%3Cpath d='M9 4v13.5M15 6.5V20'/%3E%3C/svg%3E"); }
.sd-icon-heading.sd-icon-signs { --sd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M12 4h7l2 2.5L19 9h-7M12 12H5l-2 2.5L5 17h7'/%3E%3C/svg%3E"); }

/* Note box: small print that matters (ticket rules, trail notices). */
.sd-note {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 4px solid var(--wp--preset--color--orange);
	background: rgb(255 255 255 / 0.65);
	border-radius: 0 var(--wp--preset--border-radius--small) var(--wp--preset--border-radius--small) 0;
}

/* Mountain stats: two columns of short facts. */
.sd-stats-list {
	columns: 2 14rem; /* one column inside narrow cards */
	column-gap: var(--wp--preset--spacing--40);
}

.sd-stats-list li {
	break-inside: avoid;
}

/* One column, e.g. the snow report's stats card that runs beside the trail report. */
.sd-stats-list.sd-stats-list-single {
	columns: auto;
}

/* Snow report: Daily Update | Trail Report columns. On phones the columns dissolve into one list so the
 * trail report follows the daily update, then the notice, webcams and mountain stats. */
@media (max-width: 781px) {
	.wp-block-columns.sd-snow-columns {
		row-gap: var(--wp--preset--spacing--40);
	}

	.sd-snow-columns > .wp-block-column {
		display: contents;
	}

	.sd-snow-columns > .wp-block-column > * {
		flex-basis: 100%;
		min-width: 0;
		margin-block: 0;
	}

	.sd-snow-update > .sd-note { order: 1; }
	.sd-snow-update > .is-style-sd-torn-card { order: 2; }
	.sd-snow-update > .is-style-sd-card { order: 3; }
}

/* ---------- Hours calendar (Hours of Operation, Phase 7) ----------
 * A grid group (7 columns) of Paragraph "day tiles"; each tile's colors are set in the block sidebar (Color). */
.sd-cal > .sd-cal-day {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border-radius: var(--wp--preset--border-radius--small);
	font-family: var(--wp--preset--font-family--headline);
	font-size: clamp(1rem, 3.6vw, 1.75rem);
	font-weight: 900;
	line-height: 1;
}

.sd-cal-day a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.sd-cal-day a:hover,
.sd-cal-day a:focus-visible {
	text-decoration: underline;
}

.sd-cal-day.is-blank {
	visibility: hidden;
}