/*
 * Gift-voucher band. design/PAGE-STRUCTURE.md §4.3, DESIGN-SYSTEM.md §4.19
 * (voucher amount chip), §5.3 (scrim over photo), §4.22 (rotated card).
 *
 * A full-bleed grayscaled photo under a left-weighted scrim, copy and amount
 * chips on the left, the rotated voucher-card mock on the right.
 *
 * The chips are buttons because they are a choice, not decoration: cennik.js
 * marks the pressed one and mirrors its `data-sp-voucher-amount` (cents) onto
 * the CTA. Without JS they read as a price list, exactly like the prototype's
 * divs, so the section still works.
 */

.sp-vouchers {
	border-top: 1px solid var(--sp-line-faint);
}

.sp-vouchers__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.35);
}

.sp-vouchers__scrim {
	position: absolute;
	inset: 0;
	background: var(--sp-scrim-left);
}

.sp-vouchers__grid {
	position: relative;
	z-index: var(--sp-z-raised);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	/* TODO token: --sp-grid-gap-xl, DESIGN-SYSTEM §3.4 split-band gap clamp(24px,4vw,60px) */
	gap: clamp(24px, 4vw, 60px);
	align-items: center;
}

.sp-vouchers__text {
	margin: var(--sp-5) 0 0;
	max-width: 520px;
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	/* TODO token: --sp-text-65, DESIGN-SYSTEM §1.1 "Voucher band paragraph" */
	color: rgba(255, 255, 255, 0.65);
}

.sp-vouchers__amounts {
	display: flex;
	flex-wrap: wrap;
	/* TODO token: 10px step, DESIGN-SYSTEM §1.3 lists it, tokens.css jumps 8 -> 12 */
	gap: 10px;
	margin-top: var(--sp-10);
}

.sp-vouchers__cta {
	margin-top: var(--sp-10);
}

/* ------------------------------------------------------------ amount chip */

.sp-voucher-chip {
	display: block;
	min-width: 120px;
	padding: var(--sp-6) var(--sp-10);
	/* TODO token: --sp-line-chip, DESIGN-SYSTEM §4.19 pins this chip at 0.18 */
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--sp-radius);
	background: var(--sp-chip-fill);
	color: var(--sp-text);
	text-align: center;
	cursor: pointer;
	transition:
		border-color var(--sp-dur-fast) var(--sp-ease),
		background var(--sp-dur-fast) var(--sp-ease);
}

.sp-voucher-chip:hover,
.sp-voucher-chip:focus-visible {
	border-color: var(--sp-red);
}

/* Selected option fill, standardised at 0.16 per DESIGN-SYSTEM §1.1. */
.sp-voucher-chip[aria-pressed="true"] {
	border-color: var(--sp-red);
	background: var(--sp-tint-red-16);
}

.sp-voucher-chip__amount {
	display: block;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	/* TODO token: --sp-fs-chip-amount, DESIGN-SYSTEM §1.2 "voucher amount chip" 30px */
	font-size: 30px;
	line-height: var(--sp-lh-display);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-voucher-chip__label {
	display: block;
	margin-top: var(--sp-1);
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-micro);
	letter-spacing: var(--sp-ls-eyebrow-lg);
	text-transform: uppercase;
	color: var(--sp-text-50);
}

/* --------------------------------------------------------- card mock (art) */

.sp-vouchers__art {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 230px;
	min-width: 0;
}

.sp-voucher-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	max-width: 430px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	padding: var(--sp-10);
	background: linear-gradient(120deg, var(--sp-surface), var(--sp-bg-deep));
	border: 1px solid var(--sp-line-hover-sub);
	border-radius: var(--sp-radius);
	transform: rotate(-3deg);
	box-shadow: var(--sp-shadow-card);
}

/* The tighter, faster streak pair variant from §4.21. */
.sp-voucher-card__streak {
	left: -10%;
	bottom: 18px;
	width: 120%;
	height: 30px;
	transform: rotate(-7deg);
	background: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.07) 0 12px,
		rgba(255, 255, 255, 0.015) 12px 21px
	);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 74%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 28%, #000 74%, transparent);
}

.sp-voucher-card__logo {
	position: relative;
	display: block;
	width: 170px;
	max-width: 60%;
	height: auto;
}

.sp-voucher-card__foot {
	position: relative;
}

.sp-voucher-card__title {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	/* TODO token: --sp-fs-voucher-title, DESIGN-SYSTEM §1.2 clamp(22px,2.8vw,34px) */
	font-size: clamp(22px, 2.8vw, 34px);
	line-height: var(--sp-lh-display);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-voucher-card__meta {
	margin-top: 6px; /* TODO token: 6px step, see pricing-perks.css */
	font-size: var(--sp-fs-xs);
	letter-spacing: var(--sp-ls-label);
	text-transform: uppercase;
	color: var(--sp-text-45);
}