/**
 * Ofertas layout.
 *
 * Gutters and type below are local to Page 05. They are not theme.json tokens
 * when the approved frame differs from a token. The five frames are validation
 * points. Sections grow with the copy. Frame heights are not page heights.
 *
 * FIGMA STATIC CONTENT DIVERGENCE: listing_note and stores_cta_body differ
 * between wide and 390/320 frames. The approved ACF fields are one value each,
 * so every viewport renders that single value.
 *
 * At 1024 the featured card stays 800px and centered. The 120px text gutter
 * would otherwise shrink it to 784px.
 */

.br-offers {
	--br-offers-gutter: 24px;

	background: var(--wp--preset--color--surface-base);
	color: var(--wp--preset--color--text-primary);
}

.br-offers-hero__title,
.br-offers-hero__intro,
.br-offers-listing .br-section-header__title,
.br-offers-listing .br-section-header__description,
.br-offers-note,
.br-offers-empty__title,
.br-offers-empty__intro,
.br-offers-cta__title,
.br-offers-cta__body,
.br-offers .br-offer-card__title,
.br-offers .br-offer-card__validity,
.br-offers .br-offer-card__placeholder-label {
	overflow-wrap: anywhere;
}

.br-offers-hero {
	background: var(--wp--preset--color--surface-subtle);
	padding-bottom: 40px;
}

.br-offers-hero__content,
.br-offers-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.br-offers-hero__content {
	gap: 16px;
}

.br-offers-hero__copy {
	gap: 16px;
	width: 100%;
}

.br-offers-hero__title {
	margin: 0;
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.3px;
	line-height: 36px;
}

.br-offers-hero__intro {
	width: 100%;
	max-width: 720px;
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 15px;
	font-weight: 400;
	line-height: 22px;
	white-space: pre-line;
}

.br-offers-listing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
	padding: 40px 0;
	background: var(--wp--preset--color--surface-base);
	container-type: inline-size;
}

.br-offers-listing > .br-layout-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	gap: inherit;
	width: min(100%, var(--br-layout-max));
	margin-inline: auto;
}

.br-offers-listing__band {
	width: min(1200px, calc(100cqw - (2 * var(--br-offers-gutter))));
	max-width: 100%;
}

.br-offers-listing .br-section-header {
	width: 100%;
	max-width: none;
}

.br-offers-featured {
	display: flex;
	align-self: stretch;
	justify-content: center;
	width: 100%;
	padding-inline: var(--br-offers-gutter);
}

.br-offers-featured .br-offers-card,
.br-offers-featured .br-offer-card {
	width: 100%;
	max-width: 800px;
}

.br-offers-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--lg);
	align-items: start;
	width: 100%;
}

.br-offers-grid .br-offer-card {
	max-width: none;
}

/* 13/20 from 768. 14/20 below. Wide-frame opacity 0.8 fails WCAG 1.4.3, so the note stays solid text-secondary. */

.br-offers-note {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	color: var(--wp--preset--color--text-secondary);
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	text-align: center;
	white-space: pre-line;
}

.br-offers-empty {
	display: flex;
	justify-content: center;
	padding: 40px var(--br-offers-gutter);
	background: var(--wp--preset--color--surface-base);
}

.br-offers-empty > .br-layout-container {
	display: flex;
	justify-content: center;
}

.br-offers-empty__panel {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	align-items: center;
	width: 100%;
	max-width: 600px;
	padding: 48px 40px;
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface-subtle);
	text-align: center;
}

.br-offers-empty__title {
	margin: 0;
	color: var(--wp--preset--color--brand-primary);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 22px;
	font-weight: 600;
	line-height: 28px;
}

.br-offers-empty__intro {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 15px;
	font-weight: 400;
	line-height: 22px;
	white-space: pre-line;
}

.br-offers-cta {
	background: var(--wp--preset--color--brand-primary-light);
	padding: 48px var(--br-offers-gutter);
}

.br-offers-cta__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	align-items: center;
	text-align: center;
}

.br-offers-cta__title {
	width: 100%;
	margin: 0;
	color: var(--wp--preset--color--brand-primary);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 32px;
}

.br-offers-cta__body {
	width: 100%;
	max-width: 640px;
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
	font-size: 15px;
	font-weight: 400;
	line-height: 22px;
	white-space: pre-line;
}

.br-offers-cta .br-button {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 767px) {

	.br-offers-listing .br-section-header__title {
		color: var(--wp--preset--color--brand-primary);
		font-size: 24px;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 30px;
	}

	.br-offers-listing .br-section-header__description {
		font-size: 15px;
		font-weight: 400;
		line-height: 22px;
	}

	.br-offers-note {
		font-size: 14px;
	}
}

@media (min-width: 768px) {

	.br-offers {
		--br-offers-gutter: 40px;
	}

	.br-offers-hero {
		padding-bottom: 64px;
	}

	.br-offers-hero__title {
		color: var(--wp--preset--color--brand-primary);
		font-size: var(--wp--custom--type--display--font-size);
		font-weight: var(--wp--custom--type--display--font-weight);
		letter-spacing: var(--wp--custom--type--display--letter-spacing);
		line-height: var(--wp--custom--type--display--line-height);
	}

	.br-offers-hero__intro {
		font-size: var(--wp--custom--type--body-large--font-size);
		font-weight: var(--wp--custom--type--body-large--font-weight);
		line-height: var(--wp--custom--type--body-large--line-height);
	}

	.br-offers-listing {
		gap: var(--wp--preset--spacing--2-xl);
		padding-block: 80px;
	}

	.br-offers-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--xl);
	}

	.br-offers-empty {
		padding-block: 80px;
	}

	.br-offers-cta {
		padding: 96px var(--br-offers-gutter);
	}

	.br-offers-cta__inner {
		gap: var(--wp--preset--spacing--lg);
	}

	.br-offers-cta__title {
		font-size: 32px;
		font-weight: 700;
		line-height: 40px;
	}

	.br-offers-cta__body {
		font-size: 16px;
		line-height: 24px;
	}

	.br-offers-cta .br-button {
		width: auto;
	}
}

@media (min-width: 1024px) {

	.br-offers {
		--br-offers-gutter: 120px;
	}

	.br-offers-featured {
		padding-inline: max(0px, calc((100% - 800px) / 2));
	}
}