/* ==========================================================================
   FRONT PAGE — hero · intro · Tourenkalender · news band · carousels ·
   Hütten · sponsors (enqueued on the front page only)
   ========================================================================== */

/* ==========================================================================
   HERO
   --------------------------------------------------------------------------
   One grid, three named columns (full / content). The image and the red box
   share grid rows, so they overlap WITHOUT negative margins or absolute
   positioning, and whatever follows always starts below the box.
     Mobile   image 65svh; the box rises --hero-overlap into the photo and
              continues below it (the photo stays visible above).
     ≥768px   image 80svh; the box sits on the photo, inside it.
   ========================================================================== */

.sac-hero {
	--hero-h: 65svh;
	--hero-overlap: 6.5rem;
	position: relative;
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--gutter), 1fr)
		[content-start] minmax(0, var(--container))
		[content-end] minmax(var(--gutter), 1fr)
		[full-end];
	grid-template-rows: calc(var(--hero-h) - var(--hero-overlap)) var(--hero-overlap) auto;
	isolation: isolate;
}

.sac-hero__media {
	position: relative;
	grid-column: full;
	grid-row: 1 / 3;
	overflow: hidden;
	background: var(--c-navy-900);
}

.sac-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: sac-hero-settle 2.6s var(--ease-out) both;
}

@keyframes sac-hero-settle {
	from { transform: scale(1.08); }
}

/* The red box. */
.sac-hero__box {
	position: relative;
	z-index: 2;
	grid-column: content;
	grid-row: 2 / 4;
	align-self: start;
	padding: 3em clamp(1.5rem, 1rem + 2.5vw, 3.5rem) 4.5em;
	color: var(--c-on-accent);
	background: var(--sac-red-panel);
	overflow: hidden;
	isolation: isolate;
	animation: sac-box-in 1.2s var(--ease-out) 0.25s both;
}

@keyframes sac-box-in {
	from {
		clip-path: inset(100% 0 0 0);
		transform: translateY(1.5rem);
	}

	to {
		clip-path: inset(0);
	}
}

.sac-hero__box > :not(.sac-hero__topo) {
	animation: sac-rise 1s var(--ease-out) both;
	animation-delay: calc(0.55s + var(--d, 0) * 0.12s);
}

.sac-hero__headline { --d: 1; }
.sac-hero__lead     { --d: 2; }

/* Faint contours inside the box; they drift against the pointer (motion.js
   sets --mx/--my in -1…1 on the hero). */
.sac-hero__topo {
	position: absolute;
	z-index: -1;
	inset: -24px;
	width: calc(100% + 48px);
	height: calc(100% + 48px);
	color: var(--c-white);
	--topo-minor: 0.45;
	--topo-wi: 1.1;
	--topo-label: 0.5;
	opacity: 0.22;   /* a whisper — the text always wins */
	translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -14px);
	transition: translate 1.2s var(--ease-out);
}

.sac-hero__subline {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	color: inherit;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
}

/* A white trail blaze on red. */
.sac-hero__subline::before {
	content: "";
	flex: none;
	width: 1.6rem;
	height: 0.75rem;
	background: linear-gradient(to bottom, #fff 0 30%, transparent 30% 70%, #fff 70%);
	box-shadow: inset 0 0 0 1px #fff;
}

.sac-hero__headline {
	margin: 0;
	color: inherit;
	font-size: var(--fs-hero);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	hyphens: auto;
	overflow-wrap: break-word;
}

.sac-hero__lead {
	max-width: 34rem;
	margin: var(--space-5) 0 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
	opacity: 0.95;
}

/* Scroll cue — sits on the cloud bank (which is page-coloured). */
.sac-hero__cue {
	display: none;
}

@media (min-width: 768px) {
	.sac-hero {
		--hero-h: 80svh;
		grid-template-rows: max(var(--hero-h), 34rem);
	}

	.sac-hero__media,
	.sac-hero__box,
	.sac-hero__cue {
		grid-row: 1;
	}

	.sac-hero__box {
		align-self: end;
		justify-self: start;
		width: min(100%, max(380px, 46%));
		margin: 0 0 clamp(6rem, 16vh, 11rem) clamp(0rem, 1.5vw, 1.5rem);
	}

	.sac-hero__cue {
		position: relative;
		z-index: 2;
		grid-column: content;
		justify-self: end;
		align-self: end;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
		margin-bottom: var(--space-5);
		color: var(--c-heading);
		font-family: var(--font-mono);
		font-size: var(--fs-xs);
		letter-spacing: var(--ls-mono);
		text-transform: uppercase;
		text-decoration: none;
	}

	.sac-hero__cue-label {
		writing-mode: vertical-rl;
	}

	.sac-hero__cue-line {
		position: relative;
		width: 1px;
		height: 3.5rem;
		overflow: hidden;
		background: color-mix(in srgb, currentColor 25%, transparent);
	}

	.sac-hero__cue-line::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--c-accent);
		animation: sac-cue 2.2s var(--ease-in-out) infinite;
	}

	.sac-hero__cue:hover {
		color: var(--c-accent-text);
	}
}

@keyframes sac-cue {
	0%   { transform: translateY(-100%); }
	60%  { transform: translateY(100%); }
	100% { transform: translateY(100%); }
}

/* --- Intro (front page content) ---------------------------------------- */
.sac-intro {
	padding-top: var(--section-y);
}

/* ==========================================================================
   TOURENKALENDER — a logbook of the next tours
   ========================================================================== */

.sac-tk-section .sac-section__topo {
	color: var(--c-topo);
}

.sac-tk {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-heading);
}

.sac-tk__row {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"date main"
		"date seats";
	gap: var(--space-4) clamp(var(--space-5), 3vw, var(--space-7));
	align-items: center;
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--c-border);
	isolation: isolate;
}

/* Hover: a tinted band sweeps in from the left. */
.sac-tk__row::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 calc(var(--gutter) * -0.5);
	background: var(--c-section);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-2) var(--ease-out);
}

.sac-tk__row:hover::before {
	transform: none;
}

.sac-tk__date {
	grid-area: date;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"day mon"
		"day dow";
	column-gap: var(--space-2);
	align-items: center;
	align-self: start;
	font-variant-numeric: tabular-nums;
}

.sac-tk__day {
	grid-area: day;
	font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--c-heading);
}

.sac-tk__mon,
.sac-tk__dow {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}

.sac-tk__mon {
	grid-area: mon;
	align-self: end;
	color: var(--c-heading);
}

.sac-tk__dow {
	grid-area: dow;
	align-self: start;
	color: var(--c-text-muted);
}

.sac-tk__main {
	grid-area: main;
	min-width: 0;
}

.sac-tk__title {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-h3);
	line-height: 1.12;
	transition: transform var(--dur-2) var(--ease-out);
}

.sac-tk__row:hover .sac-tk__title {
	transform: translateX(0.35rem);
}

.sac-tk__link {
	color: inherit;
	text-decoration: none;
}

.sac-tk__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.sac-tk__link:hover {
	color: inherit;
}

.sac-tk__row:has(.sac-tk__link:focus-visible) {
	outline: 2px solid var(--c-focus);
	outline-offset: 2px;
}

.sac-tk__link:focus-visible {
	outline: 0;
}

.sac-tk__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* SAC grade, coloured by difficulty. */
.sac-tk__grade {
	--diff: var(--c-diff-medium);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--diff);
}

.sac-tk__grade::before {
	content: "";
	width: 0.7em;
	height: 0.6em;
	background: currentColor;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sac-tk__grade--easy { --diff: var(--c-diff-easy); }
.sac-tk__grade--hard { --diff: var(--c-diff-hard); }

.sac-tk__days {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.sac-tk__days svg {
	width: 1rem;
}

/* Seats: one mark per place, taken ones filled. */
.sac-tk__seats {
	grid-area: seats;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.sac-seats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 9.5rem;
}

.sac-seats__seat {
	width: 0.6rem;
	height: 0.6rem;
	border: 1px solid var(--c-border-strong);
	border-radius: 50%;
}

.sac-seats__seat.is-taken {
	background: var(--c-heading);
	border-color: var(--c-heading);
}

.sac-tk__count {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--c-heading);
	font-variant-numeric: tabular-nums;
}

.sac-tk__go {
	display: none;
}

@media (min-width: 900px) {
	.sac-tk__row {
		grid-template-columns: 9rem minmax(0, 1fr) 13rem auto;
		grid-template-areas: "date main seats go";
		padding-block: var(--space-7);
	}

	.sac-tk__date {
		align-self: center;
	}

	.sac-tk__go {
		grid-area: go;
		display: grid;
		place-items: center;
		width: 3.5rem;
		height: 3.5rem;
		color: var(--c-heading);
		border: 1px solid var(--c-border-strong);
		border-radius: 50%;
		transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease, color var(--dur-1) ease;
	}

	.sac-tk__go svg {
		width: 1.15rem;
	}

	.sac-tk__row:hover .sac-tk__go {
		color: var(--c-accent-text);
		border-color: var(--c-accent);
		box-shadow: var(--ring-hover);
	}
}

/* ==========================================================================
   NEWS BAND — photo, veil, two columns of single-card carousels
   ========================================================================== */

.sac-newsband {
	position: relative;
	padding-block: var(--section-y);
	background: var(--c-section);
	isolation: isolate;
}

.sac-newsband.has-bg::before,
.sac-newsband.has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sac-newsband.has-bg::before {
	z-index: -2;
	background: var(--sac-newsband-bg) center / cover no-repeat;
}

/* Veil: the photo reads as a soft atmosphere, cards stay crisp. */
.sac-newsband.has-bg::after {
	z-index: -1;
	background:
		linear-gradient(to bottom, var(--c-bg), transparent 30%, transparent 70%, var(--c-bg)),
		color-mix(in srgb, var(--c-bg) 74%, transparent);
}

.sac-newsband__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--section-y);
}

.sac-newsband__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Both heads stack (title, then link) so the two carousels start level. */
.sac-newsband .sac-shead {
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: var(--space-7);
}

/* Calmer, wider crop for one-at-a-time cards. */
.sac-newsband .sac-card__media {
	aspect-ratio: 16 / 9;
}

.sac-newsband .sac-shead__title {
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.6rem);
}

@media (min-width: 1024px) {
	.sac-newsband__grid {
		--col-gap: clamp(var(--space-7), 5vw, var(--space-9));
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0;
	}

	/* The dividing line, centred between two equally wide columns. */
	.sac-newsband__col:first-child {
		padding-right: var(--col-gap);
	}

	.sac-newsband__col + .sac-newsband__col {
		padding-left: var(--col-gap);
		border-left: 1px solid var(--c-heading);
	}

	.sac-newsband .sac-carousel {
		flex: 1;
	}
}

/* ==========================================================================
   CAROUSEL — native scroll-snap + controls (assets/js/carousel.js)
   ========================================================================== */

.sac-carousel {
	--slide-w: 82%;
	--slide-gap: var(--space-5);
	position: relative;
	display: flex;
	flex-direction: column;
}

.sac-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--slide-w);
	gap: var(--slide-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	flex: 1;
}

.sac-carousel__track::-webkit-scrollbar {
	display: none;
}

.sac-carousel__track:focus-visible {
	outline-offset: 6px;
}

.sac-carousel__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.sac-carousel__slide {
	min-width: 0;
	scroll-snap-align: start;
}

/* Controls: arrows at the far ends, progress + counter between. */
.sac-carousel__controls {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

.sac-carousel__controls[hidden] {
	display: none;
}

.sac-carousel__progress {
	position: relative;
	flex: 1;
	height: 2px;
	overflow: hidden;
	background: var(--c-border);
}

.sac-carousel__progress span {
	position: absolute;
	inset: 0;
	background: var(--c-accent);
	transform-origin: left center;
	transform: scaleX(var(--p, 0));
	transition: transform var(--dur-2) var(--ease-out);
}

.sac-carousel__count {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
}

.sac-carousel__count [data-sac-current] {
	color: var(--c-heading);
}

/* One card at a time (news band). */
.sac-carousel--single {
	--slide-w: 100%;
}

/* Bleed: the row starts at the container edge and runs off the right side of
   the screen (no negative margins — the track is full width and padded). */
.sac-carousel--bleed {
	--bleed: max(var(--gutter), (100% - var(--container)) / 2);
	--slide-w: clamp(15.5rem, 72vw, 23rem);
	--slide-gap: clamp(var(--space-4), 2vw, var(--space-5));
}

.sac-carousel--bleed .sac-carousel__track {
	padding-inline: var(--bleed);
	scroll-padding-inline: var(--bleed);
}

.sac-carousel--bleed .sac-carousel__controls {
	width: min(var(--container), 100% - var(--gutter) * 2);
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.sac-carousel--bleed {
		--slide-w: clamp(16rem, 24vw, 23rem);
	}
}

/* ==========================================================================
   HÜTTEN
   ========================================================================== */

.sac-huetten {
	background: var(--c-section);
}

.sac-huetten > .sac-empty {
	width: min(var(--container), 100% - var(--gutter) * 2);
	margin-inline: auto;
}

/* ==========================================================================
   SPONSORS — seamless marquee
   ========================================================================== */

.sac-sponsors {
	padding-block: var(--space-9);
}

.sac-sponsors__eyebrow {
	justify-content: center;
	margin-bottom: var(--space-7);
}

.sac-marquee {
	--gap: clamp(var(--space-7), 6vw, var(--space-9));
	display: flex;
	gap: var(--gap);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.sac-marquee__track {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--gap);
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: space-around;
	animation: sac-marquee 46s linear infinite;
}

.sac-marquee:hover .sac-marquee__track,
.sac-marquee:focus-within .sac-marquee__track {
	animation-play-state: paused;
}

@keyframes sac-marquee {
	to { transform: translateX(calc(-100% - var(--gap))); }
}

.sac-marquee__item {
	flex: none;
}

.sac-sponsor {
	display: grid;
	place-items: center;
	width: clamp(8rem, 30vw, 11rem);
	height: 5rem;
}

.sac-sponsor__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) invert(var(--dkn));   /* dark logos lifted on the dark page */
	opacity: 0.7;
	transition: filter var(--dur-2) ease, opacity var(--dur-2) ease;
}

.sac-sponsor:hover .sac-sponsor__logo {
	filter: grayscale(var(--dkn)) invert(var(--dkn));
	opacity: 1;
}

/* Reduced motion: a calm, centred, wrapping row (no duplicate). */
@media (prefers-reduced-motion: reduce) {
	.sac-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.sac-marquee__track {
		flex-wrap: wrap;
		flex: 1;
		justify-content: center;
		animation: none;
	}

	.sac-marquee__track[aria-hidden="true"] {
		display: none;
	}
}