/* ==========================================================================
   Offer views, part 1: tokens, section helpers, breadcrumbs, page hero, page intro
   (jump links, voucher steps), season notes, tiles, offer cards, home additions.
   Part 2 (offer-parts.css): packages, locations, price tables, rules, voucher scan.
   ========================================================================== */

:root {
	/* Winter secondary tint: used sparingly, orange stays the signal colour. */
	--ice: #a3c9dc;
	--ice-line: rgb(163 201 220 / 0.35);
	--ice-wash: rgb(163 201 220 / 0.07);
	--ice-stripe: repeating-linear-gradient(-45deg, var(--ice) 0 12px, transparent 12px 24px);
	--block-gap: clamp(2.5rem, 2rem + 2vw, 4rem);
	--topo: url("../img/topo.svg");
}

/* Shared section pieces ------------------------------------------------------ */

.section--tight {
	padding-block: clamp(2.75rem, 2rem + 3vw, 5rem);
}

.section--tight + .section--tight {
	border-top: 1px solid var(--line);
}

.section-head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.25rem 2rem;
}

.section-title--sm {
	font-size: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
	line-height: 1;
}

.tiles,
.locations {
	background: var(--coal-950);
}

.pricelist {
	background: var(--coal-900) var(--grain);
}

.featured,
.packages {
	overflow: hidden;
	background: var(--coal-850);
}

.featured::before,
.packages::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--topo) center / 900px auto repeat;
	opacity: 0.06;
	pointer-events: none;
}

.featured > .wrap,
.packages > .wrap {
	position: relative;
}

/* Breadcrumbs ------------------------------------------------------------------ */

.breadcrumbs {
	margin: -0.5rem 0 0.5rem;
	font: 600 0.875rem / 1.2 var(--font-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cream-muted);
}

.breadcrumbs ol {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li {
	display: flex;
	flex: none;
	align-items: center;
}

.breadcrumbs li:last-child {
	flex: 0 1 auto;
	min-width: 0;
}

.breadcrumbs li + li::before {
	content: "";
	flex: none;
	width: 2px;
	height: 0.95em;
	margin-inline: 0.75rem;
	background: var(--orange);
	transform: skewX(-20deg);
}

.breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--cream);
	text-decoration: none;
	transition: color var(--dur-fast);
}

.breadcrumbs [aria-current] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.breadcrumbs a:hover {
	color: var(--orange-hot);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Page hero (offer and location pages) --------------------------------------- */

.hero--page {
	min-height: min(92svh, 52rem);
}

.hero__title--page {
	font-size: clamp(2.75rem, 1rem + 4.6vw, min(5.5rem, 11svh));
	line-height: 1.1; /* room for Polish accents (Ś, Ż) between lines */
	text-wrap: balance;
}

@media (min-width: 1024px) {
	.hero--page {
		min-height: min(100svh, 50rem);
	}
}

/* Page intro (price list, vouchers, booking) ---------------------------------- */

.page-intro {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: calc(var(--header-h) + clamp(1.5rem, 0.5rem + 3.5vw, 4rem)) clamp(2.75rem, 2rem + 3vw, 5rem);
	background: var(--coal-950);
}

.page-intro::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--topo) 70% 20% / 1100px auto repeat;
	opacity: 0.07;
	mask-image: linear-gradient(to left, #000 20%, transparent 85%);
}

.page-intro::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 6px;
	background: var(--hazard), var(--coal-950);
}

.page-intro .page-title {
	margin: 0;
	font-size: clamp(3rem, 1.8rem + 5vw, 6rem);
	line-height: 0.9;
}

.page-intro--compact {
	padding-bottom: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
}

.page-intro--compact + .booking {
	padding-top: clamp(3rem, 2rem + 3vw, 5.5rem);
}

@media (min-width: 1200px) {
	.page-intro .wrap {
		display: grid;
		grid-template-columns: minmax(0, auto) minmax(20rem, 36rem);
		justify-content: space-between;
		align-items: end;
		column-gap: 4rem;
	}

	.page-intro .wrap > * {
		grid-column: 1 / -1;
	}

	.page-intro .page-title {
		grid-column: 1;
	}

	.page-intro .page-title + .section-lead {
		grid-column: 2;
		margin: 0;
	}
}

/* Pill links: price-list jump links and "what rides here" on location cards */
.jump-links {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.jump-links ul,
.location-card__offer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jump-links a,
.location-card__offer a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0.5rem 1rem 0.5rem 0.8rem;
	font: 600 0.9375rem / 1 var(--font-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cream);
	background: var(--coal-900);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	touch-action: manipulation;
	transition:
		border-color var(--dur-fast),
		background-color var(--dur-fast),
		transform var(--dur-fast) var(--ease-out);
}

.jump-links .icon,
.location-card__offer .icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--orange);
	transition: transform var(--dur) var(--ease-out);
}

.jump-links a:active,
.location-card__offer a:active {
	transform: scale(0.97);
}

@media (hover: hover) {
	.jump-links a:hover,
	.location-card__offer a:hover {
		background: var(--coal-800);
		border-color: var(--orange);
	}

	:is(.jump-links, .location-card__offer) a:hover .icon {
		transform: translateX(2px);
	}
}

/* Voucher shop steps (page intro) ----------------------------------------------- */

.voucher-steps {
	counter-reset: voucher-step;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
	background: var(--line-strong);
	border: 1px solid var(--line-strong);
}

.voucher-steps li {
	counter-increment: voucher-step;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1.1rem 1rem 1.25rem;
	font: 600 1rem / 1.25 var(--font-label);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--coal-950);
}

.voucher-steps li::before {
	content: counter(voucher-step, decimal-leading-zero);
	content: counter(voucher-step, decimal-leading-zero) / "";
	position: absolute;
	top: 1rem;
	right: 1rem;
	font: 400 1.5rem / 1 var(--font-display);
	color: transparent;
	-webkit-text-stroke: 1px var(--orange);
}

.voucher-steps .icon {
	width: 2rem;
	height: 2rem;
	color: var(--orange);
}

@media (min-width: 900px) {
	.voucher-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.voucher-steps li {
		padding: 1.5rem 1.5rem 1.6rem;
		font-size: 1.125rem;
	}

	.voucher-steps li:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -0.35rem;
		z-index: 1;
		width: 0.65rem;
		height: 1.1rem;
		background: var(--orange);
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		transform: translate(0.3rem, -50%);
	}
}

/* Season note and badges --------------------------------------------------------- */

.season-note {
	position: relative;
	background: linear-gradient(var(--ice-wash), var(--ice-wash)), var(--coal-900);
	border-bottom: 1px solid var(--ice-line);
}

.season-note::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--ice-stripe);
	opacity: 0.7;
}

.season-note__inner {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding-block: 1.25rem 1.1rem;
}

.season-note__icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.1rem;
	color: var(--ice);
}

.season-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: 0.35rem;
	padding: 0.4rem 0.6rem;
	font: 600 0.875rem / 1 var(--font-label);
	letter-spacing: 0.1em;
	white-space: nowrap;
	vertical-align: middle;
	color: var(--ice);
	background: var(--ice-wash);
	border: 1px solid var(--ice-line);
	border-radius: var(--radius);
	transform: translateY(-0.12em);
}

.season-badge .icon {
	width: 1rem;
	height: 1rem;
}

/* Category tiles (bento: first tile large, grid always closes) ----------------- */

.tile-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: 0.5rem;
	margin: var(--block-gap) 0 0;
	padding: 0;
	list-style: none;
}

.tile {
	min-width: 0;
}

.tile:first-child,
.tile-grid:has(> .tile:nth-child(8):last-child) > .tile:last-child {
	grid-column: span 2;
}

.tile__link {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 12.5rem;
	padding: 1rem;
	overflow: hidden;
	color: var(--cream);
	text-decoration: none;
	background: var(--coal-800);
	border-radius: var(--radius);
	touch-action: manipulation;
	transition: transform var(--dur-fast) var(--ease-out);
}

.tile:first-child .tile__link {
	min-height: 17rem;
}

.tile__link::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 6px;
	background: var(--hazard), var(--coal-950);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease-out);
}

.tile__link:active {
	transform: scale(0.985);
}

.tile__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.tile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(13 16 19 / 0.96) 8%, rgb(13 16 19 / 0.55) 55%, rgb(13 16 19 / 0.1));
}

.tile__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
}

.tile__icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 0.35rem;
	color: var(--coal-950);
	background: var(--orange);
	border-radius: var(--radius);
}

.tile__icon .icon {
	width: 1.3rem;
	height: 1.3rem;
}

.tile__name {
	font: 400 clamp(1.5rem, 1.25rem + 1vw, 2.125rem) / 1 var(--font-display);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.tile:first-child .tile__name {
	font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4.25rem);
}

.tile__meta {
	font: 600 0.875rem / 1.3 var(--font-label);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tile--vouchery .tile__media::after {
	background: linear-gradient(to right, rgb(13 16 19 / 0.97) 30%, rgb(13 16 19 / 0.35));
}

.tile__badge {
	order: -1;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0.3rem;
	padding: 0.35rem 0.55rem;
	font: 600 0.8125rem / 1 var(--font-label);
	letter-spacing: 0.08em;
	color: var(--coal-950);
	background: var(--ice);
	border-radius: var(--radius);
}

.tile__badge .icon {
	width: 0.95rem;
	height: 0.95rem;
}

.tile__arrow {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.6rem;
	color: var(--cream);
	background: rgb(13 16 19 / 0.6);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	transition:
		background-color var(--dur-fast),
		border-color var(--dur-fast),
		color var(--dur-fast),
		transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.tile__link:hover .tile__arrow {
		color: var(--coal-950);
		background: var(--orange);
		border-color: var(--orange);
		transform: translateX(3px);
	}

	.tile__link:hover::after {
		transform: scaleX(1);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tile__link:hover .tile__media img {
		transform: scale(1.06);
	}
}

@media (max-width: 767px) {
	.tile:not(:first-child) .tile__icon {
		display: none;
	}
}

@media (min-width: 768px) {
	.tile-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: minmax(13rem, auto);
	}

	.tile:first-child {
		grid-row: span 2;
	}

	.tile__link,
	.tile:first-child .tile__link {
		min-height: 0;
		padding: 1.25rem;
	}

	.tile:first-child .tile__link {
		padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	}
}

@media (min-width: 1100px) {
	.tile-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(14rem, auto);
	}
}

/* Offer cards (featured offers, voucher shop) -------------------------------------- */

.offer-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
	gap: 1rem;
	margin: var(--block-gap) 0 0;
	padding: 0;
	list-style: none;
}

.section-head--row + .offer-cards {
	margin-top: 1.75rem;
}

@media (min-width: 1200px) {
	.voucher-offers .wrap {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		align-items: start;
		column-gap: 2.5rem;
	}

	.voucher-offers .section-head--row {
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
	}

	.voucher-offers .section-head--row + .offer-cards {
		margin-top: 0;
	}
}

.offer-card {
	--card-pad: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: calc(var(--card-pad) + 0.75rem) var(--card-pad) var(--card-pad);
	background: var(--coal-800);
	border: 1px solid var(--line);
	transition:
		border-color var(--dur-fast),
		box-shadow var(--dur) var(--ease-out);
}

/* Badge sits on the top edge, so names line up across a row of cards */
.offer-card > .plan__badge {
	position: absolute;
	top: -1px;
	left: -1px;
}

.offer-card__name {
	padding-right: 2rem;
	font: 400 clamp(1.625rem, 1.35rem + 1vw, 2.125rem) / 1 var(--font-display);
	text-transform: uppercase;
}

.offer-card__desc {
	font-size: var(--text-sm);
	color: var(--cream-muted);
}

.offer-card .price {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px dashed var(--line-strong);
}

.offer-card .price__amount {
	font-size: clamp(2.75rem, 2.35rem + 1.4vw, 3.5rem);
}

.offer-card__note {
	font: 600 0.875rem / 1.35 var(--font-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cream-muted);
}

.package__regular {
	font: 600 1.0625rem / 1 var(--font-label);
	letter-spacing: 0.04em;
	color: var(--cream-muted);
	text-decoration-color: var(--orange);
	text-decoration-thickness: 2px;
}

/* Featured: the badged offer carries the signal colour */
.featured .offer-cards {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.featured .offer-card:has(.plan__badge) {
	background: var(--coal-900);
	border-color: rgb(232 98 26 / 0.5);
}

.featured .offer-card:has(.plan__badge) .price__amount {
	color: var(--orange);
}

@media (min-width: 900px) {
	.featured .offer-card__cta {
		align-self: flex-start;
		width: auto;
		min-width: 14rem;
	}
}

/* Voucher shop: picked card */
.offer-card.is-selected {
	border-color: var(--orange);
	box-shadow:
		0 0 0 1px var(--orange),
		0 24px 48px -28px rgb(232 98 26 / 0.55);
}

.offer-card.is-selected::before,
.offer-card.is-selected::after {
	content: "";
	position: absolute;
}

.offer-card.is-selected::before {
	top: 0;
	right: 0;
	width: 2.25rem;
	height: 2.25rem;
	background: var(--orange);
}

.offer-card.is-selected::after {
	top: 0.45rem;
	right: 0.85rem;
	width: 0.55rem;
	height: 1rem;
	border: solid var(--coal-950);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.offer-card.is-selected .offer-card__cta {
	color: var(--coal-950);
	background: var(--orange);
	border-color: var(--orange);
}

.offer-card.is-selected .offer-card__cta:focus-visible {
	outline-color: var(--cream);
}

/* Home section additions ------------------------------------------------------------ */

.step__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.step__icon {
	width: 1.4rem;
	height: 1.4rem;
	color: var(--orange);
}

.voucher__points {
	display: grid;
	gap: 0.65rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.voucher__points li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.voucher__points .icon {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.55rem;
	color: var(--orange);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
}