/**
 * Promo gifts block styles (block-scoped; enqueued only when the block is present).
 */

.sws-promo-gifts {
	container: sws-promo-gifts / inline-size;
	background: #FBF7F1;
	color: #241E1A;
}

.sws-promo-gifts__inner {
	max-width: 73.75rem;
	margin-inline: auto;
	padding: 3rem 1rem 0;
}

.sws-promo-gifts__panel {
	display: grid;
	gap: 2.25rem;
	padding: 1.75rem;
	background: #FBEDE4;
	border: 1px solid #F3DAC8;
	border-radius: 2rem;
}

.sws-promo-gifts__badge {
	display: inline-flex;
	margin: 0;
	padding: 0.4375rem 0.875rem;
	border-radius: 999px;
	background: #C2542B;
	color: #FFFFFF;
	font-size: 0.8125rem;
	font-weight: 700;
}

.sws-promo-gifts__heading {
	margin: 1.125rem 0 0;
	max-width: 29.375rem;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.024em;
	text-wrap: balance;
}

.sws-promo-gifts__lead {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #5B5049;
}

.sws-promo-gifts__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.875rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Client's edit, 12.08.2026: the promo runs five gifts instead of four. Two per
 * row still fits the phone - a third column would cut the card to 91px and break
 * every name over three lines - so the odd fifth card is what needs handling. It
 * centres itself instead of hugging the left edge: four tracks, every card spans
 * two, and the last one starts on track 2.
 *
 * :has( > :nth-child(5):last-child ) reads "exactly five cards", so four or six
 * gifts keep the plain two-column grid above. Without :has() the fifth simply
 * stays on the left - a hole on the right, not a broken layout.
 */
.sws-promo-gifts__grid:has( > :nth-child(5):last-child ) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sws-promo-gifts__grid:has( > :nth-child(5):last-child ) > .sws-promo-gifts__gift {
	grid-column: span 2;
}

.sws-promo-gifts__grid:has( > :nth-child(5):last-child ) > .sws-promo-gifts__gift:nth-child(5) {
	grid-column: 2 / span 2;
}

.sws-promo-gifts__gift {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	background: #FFFFFF;
	border: 1px solid #F3DAC8;
	border-radius: 1.25rem;
}

/*
 * A button since 12.08.2026 - the picture opens full size, and a control has to
 * answer the keyboard. The tile itself is unchanged; the rest is the reset a
 * button needs so it keeps looking like part of the card.
 */
.sws-promo-gifts__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 4.625rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.sws-promo-gifts__media:focus-visible {
	outline: 2px solid #C2542B;
	outline-offset: 3px;
	border-radius: 0.5rem;
}

.sws-promo-gifts__media img {
	display: block;
	max-height: 4.625rem;
	width: auto;
	object-fit: contain;
}

.sws-promo-gifts__gift-name {
	font-size: 0.84375rem;
	font-weight: 700;
	line-height: 1.35;
}

.sws-promo-gifts__gift-note {
	margin-top: auto;
	font-size: 0.78125rem;
	color: #6E635B;
}

/* Form card */

.sws-promo-gifts__card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: #FFFFFF;
	border: 1px solid #F3DAC8;
	border-radius: 1.5rem;
}

.sws-promo-gifts__card-title {
	margin: 0;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 1.3125rem;
	line-height: 1.2;
	letter-spacing: -0.019em;
}

.sws-promo-gifts__steps {
	display: grid;
	gap: 0.5625rem;
	margin: 1rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid #F0E6D9;
	list-style: none;
	counter-reset: sws-promo-step;
}

.sws-promo-gifts__step {
	display: flex;
	gap: 0.625rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #4A403A;
	counter-increment: sws-promo-step;
}

.sws-promo-gifts__step::before {
	content: counter(sws-promo-step);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.1875rem;
	height: 1.1875rem;
	margin-top: 0.0625rem;
	border-radius: 999px;
	background: #FBEDE4;
	color: #C2542B;
	font-size: 0.65625rem;
	font-weight: 800;
}

.sws-promo-gifts__cta {
	margin-top: auto;
	padding-top: 1.125rem;
}

.sws-promo-gifts__button {
	width: 100%;
	padding: 0.9375rem;
	border: 0;
	border-radius: 0.875rem;
	background: #C2542B;
	color: #FFFFFF;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 14px 28px -14px rgba(194, 84, 43, .8);
}

.sws-promo-gifts__button:hover,
.sws-promo-gifts__button:focus-visible {
	background: #A8441F;
}

.sws-promo-gifts__card-note {
	margin: 0.625rem 0 0;
	font-size: 0.78125rem;
	color: #8C8078;
	text-align: center;
}

/*
 * 782px is where the panel gets its roomy padding and type - but NOT its second
 * column. The form card is a fixed 18.75rem, and between 782 and 950 that column
 * leaves the gifts under 400px: measured on the live site, four cards came out
 * 88px wide with every name broken over three lines. So the panel stays one
 * column here, the gifts take the full width and the form sits below them, as
 * the client asked on 12.08.2026.
 *
 * auto-fit rather than a fixed four tracks: whatever number of gifts the editor
 * leaves, a card is never narrower than 8.75rem and the rest wrap. That is what
 * keeps the squeeze from coming back the next time the count changes.
 */
@container sws-promo-gifts (min-width: 782px) {

	.sws-promo-gifts__inner {
		padding: 5.5rem 2rem 0;
	}

	.sws-promo-gifts__panel {
		gap: 2.25rem;
		padding: 2.75rem;
	}

	.sws-promo-gifts__heading {
		font-size: 1.8125rem;
	}

	.sws-promo-gifts__grid {
		grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
		margin-top: 1.875rem;
	}

	/*
	 * Five gifts: three on top, two centred below - the same figure as the hero
	 * strip. Six tracks, every card spans two, and pinning the fourth to track 2
	 * lets the fifth follow it into track 4 with half a card of slack on each
	 * side. The fifth is reset to span 2, never to auto: auto means span 1 and
	 * would leave it half the width of its neighbours.
	 */
	.sws-promo-gifts__grid:has( > :nth-child(5):last-child ) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.sws-promo-gifts__grid:has( > :nth-child(5):last-child ) > .sws-promo-gifts__gift:nth-child(5) {
		grid-column: span 2;
	}

	.sws-promo-gifts__grid:has( > :nth-child(5):last-child ) > .sws-promo-gifts__gift:nth-child(4) {
		grid-column: 2 / span 2;
	}

	/*
	 * The card is the full panel width here, and a form is not prose - a 795px
	 * button reads as a mistake. The theme has no global box-sizing, so 24rem of
	 * content plus padding and border lands at 434px.
	 */
	.sws-promo-gifts__card {
		padding: 1.5rem;
		max-width: 24rem;
	}
}

/*
 * From 950px the left column can feed three cards (146px and up), so the
 * two-column panel comes back and the form returns to the right.
 *
 * align-items: start, not stretch: with the gifts on two rows the left column
 * runs to 616px, and a stretched form card spends 330px of that on white space
 * between the steps and the button. Stretch is restored at 1180px below, where
 * the gifts are back on one row and the two columns match by themselves.
 */
@container sws-promo-gifts (min-width: 950px) {

	.sws-promo-gifts__panel {
		grid-template-columns: minmax(0, 1fr) 18.75rem;
		align-items: start;
	}

	.sws-promo-gifts__card {
		max-width: none;
	}
}

/*
 * From 1180px the panel is wide enough for the figure the client drew on the
 * screenshot: four gifts in the row and the fifth lifted into the empty corner
 * beside the heading. Five in a row would fit too, but only by cutting every
 * card to 127px - this keeps them at the original 162-178px and fills a corner
 * that was standing empty.
 *
 * The body has to become the four-column grid, because the lifted card shares a
 * row with the intro and nothing can reach out of a nested grid. So the list
 * dissolves into that grid with display: contents. Browsers stopped dropping
 * list semantics through display: contents years ago, and the theme already
 * leans on the property in the header - but it is worth re-checking in the
 * accessibility tree if this markup is ever touched again.
 *
 * Every rule that rearranges cards is scoped to "exactly five gifts". With any
 * other count the list stays a grid of its own and the intro spans the full
 * width, which is the layout that shipped before.
 */
@container sws-promo-gifts (min-width: 1180px) {

	.sws-promo-gifts__panel {
		align-items: stretch;
	}

	.sws-promo-gifts__body {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.875rem 0.875rem;
		align-content: start;
	}

	.sws-promo-gifts__intro,
	.sws-promo-gifts__grid {
		grid-column: 1 / -1;
	}

	/* The row gap replaces it now that the list is a grid item. */
	.sws-promo-gifts__grid {
		margin-top: 0;
	}

	.sws-promo-gifts__body:has( .sws-promo-gifts__grid > :nth-child(5):last-child ) .sws-promo-gifts__intro {
		grid-column: 1 / 4;
	}

	.sws-promo-gifts__grid:has( > :nth-child(5):last-child ) {
		display: contents;
	}

	/*
	 * Both selectors are needed: the fourth card is pinned to track 2 by the 3 + 2
	 * rules above, and that rule outweighs the plain one here on specificity.
	 */
	.sws-promo-gifts__grid:has( > :nth-child(5):last-child ) > .sws-promo-gifts__gift,
	.sws-promo-gifts__grid:has( > :nth-child(5):last-child ) > .sws-promo-gifts__gift:nth-child(4) {
		grid-row: 2;
		grid-column: auto;
	}

	.sws-promo-gifts__grid:has( > :nth-child(5):last-child ) > .sws-promo-gifts__gift:nth-child(5) {
		grid-column: 4;
		grid-row: 1;
		align-self: start;
	}
}