/*
Theme Name: Ski Areál
Theme URI: https://example.com/skiareal
Author: Portfolio demo
Author URI: https://example.com
Description: Vlastní block theme pro malý lyžařský areál a lyžařskou školu. Light alpine editorial. Rychlý, přístupný a plně editovatelný z wp-adminu (vč. denního stavu sněhu). Portfolio demo.
Version: 0.5.4
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skiareal
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--ski-r-sm: 10px;
	--ski-r: 16px;
	--ski-r-lg: 24px;
	--ski-shadow-xs: 0 1px 2px rgba(14, 20, 26, .04), 0 2px 8px rgba(14, 20, 26, .04);
	--ski-shadow: 0 18px 40px -22px rgba(14, 20, 26, .22);
	--ski-shadow-lg: 0 50px 90px -40px rgba(14, 20, 26, .35);
	--ski-header-h: 76px;
	--ski-shell: 1240px;
	--ski-gutter: clamp(1.25rem, 5vw, 3rem);
	--ski-ease: cubic-bezier(.22, .61, .36, 1);
	--ski-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

/* WordPress ships no global box-sizing reset, and the default content-box makes
   `width:100%` + `padding-inline` overflow the parent by exactly the padding.
   Every .ski-shell / .ski-header__inner did this, pushing ~96px of the layout
   off-screen at any viewport below ~1336px — where body{overflow-x:hidden} then
   quietly clipped it, slicing the right edge off the contact form and footer.
   It only ever looked correct at wide viewports where max-width capped it. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

::selection {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

img {
	max-width: 100%;
	height: auto;
}

/* Visually hidden, still announced. Used for the snow panel's heading and for
   the true stat values while the count-up animation plays. */
.ski-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* One focus style, applied consistently. :focus-visible last so it always wins. */
:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
	border-radius: 4px;
}

:where(#snih, #cenik, #skola, #webkamera, #kontakt, #o-arealu) {
	scroll-margin-top: calc(var(--ski-header-h) + 24px);
}

/* Film grain — subtle, sits above everything, never interactive */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: .028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   The grid — ONE left edge, everywhere. Non-negotiable.
   ========================================================================== */
.ski-shell {
	width: 100%;
	max-width: var(--ski-shell);
	margin-inline: auto;
	padding-inline: var(--ski-gutter);
}

/* Grid children default to min-width:auto — they refuse to shrink below their
   content's min-content width. <input> has a large intrinsic minimum, so the
   contact/form/footer grids overflowed the viewport and body{overflow-x:hidden}
   silently CLIPPED the right edge of the form instead of revealing the problem.
   min-width:0 lets tracks actually honour their fr sizing. */
.ski-contact__grid > *,
.ski-form__row > *,
.ski-footer__grid > *,
.ski-school > *,
.ski-pricing > *,
.ski-features > *,
.ski-snowpanel__grid > * {
	min-width: 0;
}

.ski-field input,
.ski-field textarea {
	min-width: 0;
}

.ski-section {
	position: relative;
}

/* Section intro block: eyebrow / heading / lead all share the shell's left edge */
.ski-head {
	max-width: 100%;
}

.ski-head > * {
	margin-inline: 0;
}

.ski-measure {
	max-width: 30ch;
	margin-inline: 0;
}

.ski-measure--wide {
	max-width: 58ch;
}

.ski-eyebrow {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--glacier);
	margin: 0 0 1.6rem;
}

.ski-eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	flex: 0 0 auto;
	background: currentColor;
}

.ski-eyebrow--light {
	color: var(--wp--preset--color--slate);
}

.ski-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--slate);
	max-width: 52ch;
	margin-inline: 0;
}

em {
	font-family: var(--wp--preset--font-family--accent);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.01em;
}

/* ==========================================================================
   Motion primitives

   Every hidden state below is scoped to html.ski-js, which is added by an
   inline script in <head>. No JS (or a failed motion.js) = nothing is ever
   hidden, and the page is plain readable content. This gate is what makes the
   "progressive" claim true — do not remove the .ski-js prefix.
   ========================================================================== */
.ski-js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .9s var(--ski-ease-out), transform .9s var(--ski-ease-out);
	transition-delay: var(--d, 0ms);
	will-change: opacity, transform;
}

.ski-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Headline mask reveal: each line clips its own text upward */
.ski-lines .ski-line {
	display: block;
}

.ski-js .ski-lines .ski-line {
	overflow: hidden;
}

.ski-js .ski-lines .ski-line > span {
	display: block;
	transform: translateY(105%);
	transition: transform 1.05s var(--ski-ease-out);
	transition-delay: var(--d, 0ms);
}

.ski-js .ski-lines.is-in .ski-line > span {
	transform: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
.ski-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251, 252, 253, .72);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ski-ease), background-color .3s var(--ski-ease);
}

.ski-header.is-stuck {
	border-bottom-color: var(--wp--preset--color--line);
	background: rgba(251, 252, 253, .9);
}

.ski-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--ski-header-h);
	width: 100%;
	max-width: var(--ski-shell);
	margin-inline: auto;
	padding-inline: var(--ski-gutter);
}

.ski-brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.ski-brand__mark {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--wp--preset--color--ink);
}

.ski-brand__mark svg {
	width: 18px;
	height: 18px;
}

.ski-brand__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: .98rem;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.ski-brand__sub {
	display: block;
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.ski-header__nav {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.ski-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: .95rem;
}

.ski-header .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	position: relative;
}

/* Link underline that wipes in from the left */
.ski-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--ski-ease-out);
}

.ski-header .wp-block-navigation a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.wp-block-button__link {
	transition: transform .3s var(--ski-ease-out), background-color .3s var(--ski-ease), color .3s var(--ski-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* Outline variant — ink hairline, fills on hover */
.wp-block-button.is-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

.wp-block-button.is-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* ==========================================================================
   Hero — full-bleed photo, white scrim, ink type
   ========================================================================== */
.ski-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--wp--preset--color--frost);
	min-height: min(92svh, 900px);
	display: flex;
	align-items: flex-end;
}

/* WordPress emits `:root :where(.is-layout-flow) > * { margin-block-start: 1.5rem }`,
   which hits every child of a group except the first. Our overlays here are
   position:absolute with inset:0 — and on an abspos box a top margin does NOT
   collapse, it moves the top edge down. The scrim (2nd child) therefore started
   24px below the photo, leaving a band of raw un-scrimmed image under the header.
   The `:root` prefix matches WP's own specificity trick so this reliably wins
   regardless of which stylesheet the browser sees last. */
:root .ski-hero > * {
	margin-block: 0;
}

.ski-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/* No scale here — motion.js scales the .ski-hero__media wrapper for the
   parallax overscan. Scaling both compounded to 1.12 and cropped the photo. */
.ski-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	will-change: transform;
}

.ski-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(96deg, rgba(251, 252, 253, .97) 0%, rgba(251, 252, 253, .88) 34%, rgba(251, 252, 253, .45) 62%, rgba(251, 252, 253, .12) 100%),
		linear-gradient(180deg, rgba(251, 252, 253, .5) 0%, rgba(251, 252, 253, 0) 26%, rgba(251, 252, 253, .75) 100%);
}

.ski-hero .ski-shell {
	position: relative;
	z-index: 2;
	padding-top: clamp(7rem, 13vw, 10rem);
	padding-bottom: clamp(8rem, 15vw, 12rem);
}

.ski-hero__title {
	margin: 0 0 1.8rem;
	max-width: 14ch;
}

.ski-hero__lead {
	max-width: 46ch;
	margin: 0 0 2.4rem;
	color: var(--wp--preset--color--graphite);
}

.ski-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	align-items: center;
}

.ski-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 3rem;
}

.ski-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .9rem;
	font-size: .85rem;
	color: var(--wp--preset--color--graphite);
	background: rgba(251, 252, 253, .75);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.ski-chip strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* Scroll cue */
.ski-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 1.75rem;
	z-index: 2;
	transform: translateX(-50%);
	font-size: .7rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
}

.ski-scroll-cue::after {
	content: "";
	width: 1px;
	height: 34px;
	background: linear-gradient(var(--wp--preset--color--slate), transparent);
	animation: ski-cue 2.4s var(--ski-ease) infinite;
}

@keyframes ski-cue {
	0% { transform: scaleY(0); transform-origin: top; }
	45% { transform: scaleY(1); transform-origin: top; }
	55% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ==========================================================================
   Snow panel
   ========================================================================== */
/* flow-root establishes a BFC so the panel's negative margin lifts the PANEL,
   not the section background (the old margin-collapse bug). */
.ski-snowwrap {
	display: flow-root;
	background: linear-gradient(180deg, var(--wp--preset--color--paper) 0%, var(--wp--preset--color--snow) 100%);
	padding-bottom: var(--wp--preset--spacing--60);
}

.ski-snowwrap__inner {
	margin-top: clamp(-8rem, -10vw, -5rem);
	position: relative;
	z-index: 3;
}

.ski-snowpanel {
	background: rgba(251, 252, 253, .82);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: var(--ski-shadow-lg);
	-webkit-backdrop-filter: saturate(150%) blur(20px);
	backdrop-filter: saturate(150%) blur(20px);
	border-radius: var(--ski-r-lg);
	padding: clamp(1.5rem, 3vw, 2.4rem);
}

.ski-snowpanel__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.8rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ski-snowpanel .ski-eyebrow {
	margin: 0 0 .4rem;
}

.ski-snowpanel__updated {
	margin: 0;
	font-size: .88rem;
	color: var(--wp--preset--color--slate);
}

.ski-status {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .45rem 1rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: .92rem;
}

.ski-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.ski-status--open {
	color: #0b5c2e;
	background: #e3f4e9;
}

.ski-status--open .ski-status__dot {
	animation: ski-pulse 2.4s infinite;
}

.ski-status--closed {
	color: #8f2a17;
	background: #fbe7e2;
}

@keyframes ski-pulse {
	0% { box-shadow: 0 0 0 0 rgba(11, 92, 46, .5); }
	70% { box-shadow: 0 0 0 9px rgba(11, 92, 46, 0); }
	100% { box-shadow: 0 0 0 0 rgba(11, 92, 46, 0); }
}

.ski-snowpanel__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ski-r);
	overflow: hidden;
}

.ski-snow-stat {
	background: var(--wp--preset--color--paper);
	padding: 1.4rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	transition: background-color .35s var(--ski-ease);
}

.ski-snow-stat:hover {
	background: var(--wp--preset--color--frost);
}

.ski-snow-stat__value {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(1.8rem, 2.6vw, 2.4rem);
	line-height: 1;
	color: var(--wp--preset--color--ink);
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}

.ski-snow-stat__value small {
	font-size: .42em;
	font-weight: 500;
	color: var(--wp--preset--color--slate);
	margin-left: .2em;
	letter-spacing: 0;
}

.ski-snow-stat__value--text {
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.ski-snow-stat__label {
	font-size: .8rem;
	color: var(--wp--preset--color--slate);
	line-height: 1.3;
}

.ski-snowpanel__note {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 1.4rem 0 0;
	font-size: .95rem;
	color: var(--wp--preset--color--graphite);
}

.ski-snowpanel__note-icon {
	color: var(--wp--preset--color--glacier);
}

.ski-snow-caption {
	margin-top: 1.4rem;
	color: var(--wp--preset--color--slate);
	font-size: .88rem;
}

/* ==========================================================================
   Features
   ========================================================================== */
.ski-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: 4rem;
	background: var(--wp--preset--color--line);
	border-block: 1px solid var(--wp--preset--color--line);
}

/* The transition list must repeat the reveal's own properties — declaring a
   bare `transition: background-color` here would replace the shorthand set by
   [data-reveal] and the cards would snap in with no fade or stagger. */
.ski-feature {
	background: var(--wp--preset--color--paper);
	padding: 2.2rem 1.8rem;
	transition:
		opacity .9s var(--ski-ease-out),
		transform .9s var(--ski-ease-out),
		background-color .4s var(--ski-ease);
	transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms;
}

.ski-feature:hover {
	background: var(--wp--preset--color--snow);
}

.ski-feature__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: .74rem;
	letter-spacing: .16em;
	color: var(--wp--preset--color--slate);
	display: block;
	margin-bottom: 1.4rem;
}

.ski-feature__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: -.02em;
	margin: 0 0 .5rem;
	color: var(--wp--preset--color--ink);
}

.ski-feature__text {
	margin: 0;
	color: var(--wp--preset--color--slate);
	font-size: .95rem;
	line-height: 1.6;
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.ski-pricing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 4rem);
	margin-top: 4rem;
	align-items: start;
}

.ski-price-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.ski-price-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: -.03em;
	margin: 0;
}

.ski-price-card__tag {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	white-space: nowrap;
}

.ski-price-table {
	margin: 0;
}

.ski-price-table table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
}

.ski-price-table td {
	padding: .95rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: baseline;
	color: var(--wp--preset--color--ink);
}

.ski-price-table td small {
	display: block;
	color: var(--wp--preset--color--slate);
	font-size: .82rem;
	margin-top: .15rem;
}

.ski-price-table tr td:last-child {
	text-align: right;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
	width: 1%;
	font-variant-numeric: tabular-nums;
}

.ski-price-table tr:last-child td {
	border-bottom: 0;
}

.ski-price-note {
	margin: 1.4rem 0 0;
	font-size: .85rem;
	color: var(--wp--preset--color--slate);
}

/* ==========================================================================
   Ski school
   ========================================================================== */
.ski-school {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.ski-school__media {
	position: relative;
	border-radius: var(--ski-r-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.ski-school__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ski-lessons {
	display: grid;
	gap: 0;
	margin-top: 2.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ski-lesson {
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ski-lesson__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: -.02em;
	margin: 0 0 .3rem;
}

.ski-lesson__text {
	margin: 0;
	color: var(--wp--preset--color--slate);
	font-size: .93rem;
	line-height: 1.55;
}

.ski-steps {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.3rem;
	counter-reset: ski-step;
}

.ski-steps li {
	position: relative;
	padding-left: 3rem;
	color: var(--wp--preset--color--slate);
	line-height: 1.6;
}

.ski-steps li::before {
	counter-increment: ski-step;
	content: counter(ski-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: .1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: .78rem;
	letter-spacing: .1em;
	color: var(--wp--preset--color--glacier);
}

.ski-steps li strong {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* ==========================================================================
   Webcam
   ========================================================================== */
.ski-webcam__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--ski-r-lg);
	overflow: hidden;
	margin-top: 3rem;
	background: var(--wp--preset--color--frost);
	box-shadow: var(--ski-shadow);
}

/* The still is IN-FLOW (height:100% of the aspect-ratio frame) — this is the
   version that provably fills. Making it position:absolute broke the fill, and a
   <video> poster never honoured object-fit at all. So: img establishes/fills the
   box, and the video is layered ON TOP, absolutely, revealed only once playing. */
.ski-webcam__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ski-webcam__video,
.ski-webcam__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* Invisible until it genuinely plays; the still beneath covers every other state
   (no-JS, reduced-motion, buffering, autoplay refused). */
.ski-webcam__video {
	opacity: 0;
	background: transparent;
	transition: opacity .7s var(--ski-ease);
	z-index: 1;
}

.ski-webcam__video.is-playing {
	opacity: 1;
}

.ski-webcam__live {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .35rem .75rem;
	border-radius: 999px;
	background: rgba(14, 20, 26, .78);
	color: #fff;
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ski-webcam__live::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff4d4d;
	animation: ski-blink 1.8s infinite;
}

@keyframes ski-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

.ski-webcam__place {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	padding: .35rem .75rem;
	border-radius: 999px;
	background: rgba(14, 20, 26, .68);
	color: #fff;
	font-size: .75rem;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ski-webcam__caption {
	margin-top: 1.2rem;
	font-size: .85rem;
	color: var(--wp--preset--color--slate);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.ski-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(2rem, 6vw, 5rem);
	margin-top: 4rem;
	align-items: start;
}

.ski-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ski-contact__item {
	padding: 1.3rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ski-contact__item h3 {
	margin: 0 0 .3rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.ski-contact__item p,
.ski-contact__item a {
	margin: 0;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	line-height: 1.5;
	font-size: 1.05rem;
}

.ski-contact__item a:hover {
	color: var(--wp--preset--color--glacier);
}

/* Form — reads as an actual, sendable form. Borderless underline fields looked
   editorial but scanned as decoration; visitors didn't register it as a form. */
.ski-form {
	background: var(--wp--preset--color--snow);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ski-r-lg);
	padding: clamp(1.5rem, 3vw, 2.4rem);
	box-shadow: var(--ski-shadow);
}

.ski-form__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -.03em;
	margin: 0 0 .3rem;
	color: var(--wp--preset--color--ink);
}

.ski-form__intro {
	margin: 0 0 1.8rem;
	font-size: .95rem;
	color: var(--wp--preset--color--slate);
}

.ski-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
}

.ski-field {
	display: block;
	margin-bottom: 1.2rem;
}

.ski-field label {
	display: block;
	font-size: .8rem;
	font-weight: 500;
	margin-bottom: .45rem;
	color: var(--wp--preset--color--graphite);
}

.ski-field input,
.ski-field textarea {
	width: 100%;
	padding: .85rem 1rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ski-r-sm);
	transition: border-color .25s var(--ski-ease), box-shadow .25s var(--ski-ease);
}

.ski-field input::placeholder,
.ski-field textarea::placeholder {
	color: #93a3b1;
}

.ski-field input:hover,
.ski-field textarea:hover {
	border-color: var(--wp--preset--color--slate);
}

/* Visible, real focus state — no :where() so it can't be out-specified */
.ski-field input:focus-visible,
.ski-field textarea:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--ink);
	box-shadow: 0 0 0 3px rgba(14, 20, 26, .12);
}

.ski-field textarea {
	min-height: 120px;
	resize: vertical;
}

.ski-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ski-form__actions {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.ski-form__note {
	font-size: .8rem;
	color: var(--wp--preset--color--slate);
	margin: 0;
	max-width: 30ch;
}

.ski-btn-submit {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--ink);
	padding: 1rem 1.9rem;
	border-radius: 999px;
	transition: transform .3s var(--ski-ease-out), background-color .3s var(--ski-ease);
}

.ski-btn-submit:hover {
	transform: translateY(-2px);
	background: var(--wp--preset--color--graphite);
}

.ski-alert {
	border-radius: var(--ski-r-sm);
	padding: 1rem 1.2rem;
	margin-bottom: 1.5rem;
	font-size: .95rem;
}

.ski-alert--ok {
	background: #e3f4e9;
	color: #0b5c2e;
}

.ski-alert--err {
	background: #fbe7e2;
	color: #8f2a17;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ski-footer {
	background: var(--wp--preset--color--ink);
	color: #9fb0bf;
}

.ski-footer a {
	color: #dbe4ec;
	text-decoration: none;
	transition: color .3s var(--ski-ease);
}

.ski-footer a:hover {
	color: #fff;
}

.ski-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 2.5rem;
}

.ski-footer__brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: 1.2rem;
}

.ski-footer__brand .ski-brand__mark {
	background: rgba(255, 255, 255, .1);
}

.ski-footer__brand .ski-brand__name {
	color: #fff;
}

.ski-footer h2 {
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 1.2rem;
}

.ski-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .6rem;
	font-size: .95rem;
}

.ski-footer__bottom {
	margin-top: 3.5rem;
	padding-top: 1.6rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem;
	font-size: .82rem;
	color: #6f8394;
}

/* ==========================================================================
   Intro curtain
   ========================================================================== */
/* Hidden unless JS is confirmed running — otherwise it would cover the site forever. */
#ski-preloader {
	display: none;
}

.ski-js #ski-preloader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: var(--wp--preset--color--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .4rem;
	transition: transform .85s cubic-bezier(.76, 0, .24, 1);
}

#ski-preloader.is-done {
	transform: translateY(-101%);
}

.ski-pre__word {
	overflow: hidden;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(1.7rem, 4vw, 2.8rem);
	letter-spacing: -.035em;
	color: var(--wp--preset--color--ink);
	line-height: 1.1;
}

.ski-pre__word--sub {
	font-size: clamp(1rem, 2vw, 1.3rem);
	color: var(--wp--preset--color--slate);
}

.ski-pre__word span {
	display: block;
	transform: translateY(115%);
	transition: transform .7s var(--ski-ease-out);
}

.ski-pre__word--sub span {
	transition-delay: .12s;
}

#ski-preloader.is-run .ski-pre__word span {
	transform: none;
}

.ski-pre__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--ink);
	transform: scaleX(0);
	transform-origin: left;
}

#ski-preloader.is-run .ski-pre__bar {
	transition: transform 1.05s var(--ski-ease);
	transform: scaleX(1);
}

/* ==========================================================================
   Scroll progress hairline
   ========================================================================== */
#ski-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--wp--preset--color--ink);
	transform: scaleX(0);
	transform-origin: left;
	z-index: 9997;
	pointer-events: none;
}

/* ==========================================================================
   Header hide-on-scroll
   ========================================================================== */
.ski-header {
	transition: border-color .3s var(--ski-ease), background-color .3s var(--ski-ease), transform .5s var(--ski-ease-out);
}

.ski-header.is-hidden {
	transform: translateY(-100%);
}

/* ==========================================================================
   Word-level heading reveals (built by motion.js)
   ========================================================================== */
.ski-js .ski-words .ski-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.ski-js .ski-words .ski-w > span {
	display: inline-block;
	transform: translateY(115%);
	transition: transform .95s var(--ski-ease-out);
	transition-delay: var(--wd, 0ms);
}

.ski-js .ski-words.is-in .ski-w > span {
	transform: none;
}

/* ==========================================================================
   Image reveals — the photo settles out of a slight zoom as its frame fades in.

   This deliberately does NOT use clip-path. A clip-path wipe here silently hid
   both photos outright: the frame keeps its layout box, so nothing looks broken
   — the picture is just gone. It now rides the exact same opacity/transform
   mechanism as every other reveal, so it cannot fail independently of them.
   ========================================================================== */
.ski-js .ski-clip[data-reveal] img {
	transform: scale(1.12);
	transition: transform 1.6s var(--ski-ease-out);
	transition-delay: var(--d, 0ms);
}

.ski-js .ski-clip[data-reveal].is-in img {
	transform: scale(1);
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.ski-marquee {
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
	border-block: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
}

/* Scroll-linked, not auto-playing: motion.js drives translateX from scroll
   position. Nothing moves unless the visitor moves, so WCAG 2.2.2 (pause /
   stop / hide for auto-updating content) simply doesn't apply. */
.ski-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.ski-marquee__half {
	display: flex;
	align-items: center;
	gap: clamp(1.6rem, 4vw, 3rem);
	padding-right: clamp(1.6rem, 4vw, 3rem);
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(2rem, 4.6vw, 3.6rem);
	letter-spacing: -.035em;
	color: var(--wp--preset--color--ink);
}

.ski-marquee__half .o {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--ink);
}

.ski-marquee__half .sep {
	font-size: .4em;
	color: var(--wp--preset--color--glacier);
	-webkit-text-stroke: 0;
}

/* ==========================================================================
   Buttons — arrow slide-in + magnetic return
   ========================================================================== */
.wp-block-button__link,
.ski-btn-submit {
	white-space: nowrap;
}

.wp-block-button__link::after,
.ski-btn-submit::after {
	content: "→";
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	vertical-align: middle;
	transition: max-width .35s var(--ski-ease), opacity .25s var(--ski-ease), margin-left .35s var(--ski-ease);
}

.wp-block-button__link:hover::after,
.ski-btn-submit:hover::after {
	max-width: 1.2em;
	opacity: 1;
	margin-left: .45em;
}

.ski-magnet {
	transition: transform .55s cubic-bezier(.16, 1, .3, 1), background-color .3s var(--ski-ease), color .3s var(--ski-ease);
}

/* ==========================================================================
   Snowfall canvas (hero only)
   ========================================================================== */
.ski-snowfall {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ==========================================================================
   Footer curtain — main content lifts away, footer waits underneath
   ========================================================================== */
/* The root blockGap puts a 24px margin above <main> and above the footer,
   which renders as a stray band under the sticky header. The page sections own
   their own spacing — the root gap is pure seam. Kill it at every breakpoint. */
.wp-site-blocks > main,
.wp-site-blocks > .ski-footer {
	margin-block: 0;
}

/* Only run the curtain where there's room for it: the footer must be shorter
   than the viewport or its top is permanently unreachable. Mobile flows normally. */
@media (min-width: 1001px) {
	.wp-site-blocks {
		position: relative;
	}

	.wp-site-blocks > main {
		position: relative;
		z-index: 2;
		background: var(--wp--preset--color--paper);
		border-radius: 0 0 28px 28px;
		overflow: hidden;
		box-shadow: 0 26px 50px -28px rgba(14, 20, 26, .35);
	}

	.wp-site-blocks > .ski-footer {
		position: sticky;
		bottom: 0;
		z-index: 1;
	}
}

/* Smooth-scroll mode: JS drives the glide, CSS must not double-smooth */
html.ski-smooth {
	scroll-behavior: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
	.ski-snowpanel__grid { grid-template-columns: repeat(2, 1fr); }
	.ski-features { grid-template-columns: 1fr; }
	.ski-pricing { grid-template-columns: 1fr; }
	.ski-school { grid-template-columns: 1fr; }
	.ski-school__media { aspect-ratio: 16 / 10; }
	.ski-contact__grid { grid-template-columns: 1fr; }
	.ski-footer__grid { grid-template-columns: 1fr 1fr; }
	.ski-hero { min-height: auto; }
	.ski-hero__scrim {
		background: linear-gradient(180deg, rgba(251, 252, 253, .82) 0%, rgba(251, 252, 253, .7) 55%, rgba(251, 252, 253, .92) 100%);
	}
	.ski-scroll-cue { display: none; }
}

/* Between the contact grid going 2-column (1001px) and the shell reaching full
   width (1240px) the form column is too narrow for two fields side by side. */
@media (min-width: 1001px) and (max-width: 1240px) {
	.ski-form__row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.ski-form__row { grid-template-columns: 1fr; }
	.ski-footer__grid { grid-template-columns: 1fr; }
	.ski-brand__sub { display: none; }
	.ski-snowwrap__inner { margin-top: -3rem; }
	.ski-snowpanel__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Honour reduced motion — including pseudo-elements, which `*` alone misses */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal],
	.ski-lines .ski-line > span,
	.ski-words .ski-w > span {
		opacity: 1 !important;
		transform: none !important;
	}

	.ski-clip[data-reveal] img {
		transform: none !important;
	}

	.ski-marquee__track {
		animation: none !important;
	}

	#ski-preloader {
		display: none !important;
	}

	.ski-hero__media img { transform: none; }
}