/**
 * Cookie Club block styles.
 * Matches Figma Cookie Club section (node 823:11718).
 */

.cookie-club {
    box-sizing: border-box;
    padding: 21px 40px 25px;
    width: 100%;
}

.cookie-club:not(.has-background) {
	background-color: var(--wp--preset--color--butter-yellow, #f5e29e);
}

.cookie-club:not(.has-text-color) {
	color: var(--wp--preset--color--coffee, #3c1f10);
}

.cookie-club *,
.cookie-club *::before,
.cookie-club *::after {
	box-sizing: border-box;
}

.cookie-club__inner {
	display: flex;
	flex-direction: column;
	gap: 1.4375rem; /* 23px — Figma Content gap */
	margin-left: auto;
	margin-right: auto;
	max-width: 94.5rem; /* 1512px */
	width: 100%;
}

/* -------------------------------------------------------------------------
   Header — spaced title + rule
   ------------------------------------------------------------------------- */

.cookie-club__header,
.cookie-club .wp-block-group.cookie-club__header {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: 1.875rem; /* 30px — Figma Big Header gap */
	margin: 0;
	width: 100%;
}

/* Legacy layouts without header group */
.cookie-club__inner > .cookie-club__title {
	margin-bottom: 0.4375rem; /* 7px + 23px gap = 30px to rule */
}

.cookie-club__title,
.cookie-club h2.cookie-club__title,
.cookie-club .wp-block-heading.cookie-club__title {
	color: inherit;
	font-family: var(--wp--preset--font-family--pp-neue-montreal, sans-serif);
	font-size: var(--wp--preset--font-size--big-ol, clamp(6rem, 13vw, 12.5rem));
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 0.9;
	margin: 5px 0 -11px;
	text-align: justify;
	text-align-last: justify;
	text-transform: uppercase;
	width: 100%;
}

/* -------------------------------------------------------------------------
   Rule under title
   ------------------------------------------------------------------------- */

.cookie-club__rule,
.cookie-club .wp-block-separator.cookie-club__rule {
	background-color: currentColor;
	border: none;
	color: inherit;
	height: 1px;
	margin: 0;
	max-width: 100%;
	opacity: 1;
	width: 100%;
}

.cookie-club__rule::before,
.cookie-club__rule::after {
	display: none;
}

/* -------------------------------------------------------------------------
   Three columns: headline | image | copy
   ------------------------------------------------------------------------- */

.cookie-club__columns,
.cookie-club .wp-block-group.cookie-club__columns {
	--cookie-club-stagger: 140ms;
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 4vw, 3.5rem); /* 56px desktop */
	justify-content: flex-start;
	margin: 0;
	width: 100%;
}

/* -------------------------------------------------------------------------
   Scroll reveal — staggered columns (headline | image | copy)
   Uses clip-path (not opacity) so contrast checkers still see full-opacity text.
   ------------------------------------------------------------------------- */

.cookie-club__columns > *,
.cookie-club .wp-block-group.cookie-club__columns > * {
	clip-path: inset(0 0 100% 0);
	transform: translate3d(0, 1.25rem, 0);
	transition:
		clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: clip-path, transform;
}

.cookie-club__columns.is-revealed > *,
.cookie-club .wp-block-group.cookie-club__columns.is-revealed > * {
	clip-path: inset(0 0 0 0);
	transform: none;
}

.cookie-club__columns.is-revealed > *:nth-child(1),
.cookie-club .wp-block-group.cookie-club__columns.is-revealed > *:nth-child(1) {
	transition-delay: calc(var(--cookie-club-stagger) * 0);
}

.cookie-club__columns.is-revealed > *:nth-child(2),
.cookie-club .wp-block-group.cookie-club__columns.is-revealed > *:nth-child(2) {
	transition-delay: calc(var(--cookie-club-stagger) * 1);
}

.cookie-club__columns.is-revealed > *:nth-child(3),
.cookie-club .wp-block-group.cookie-club__columns.is-revealed > *:nth-child(3) {
	transition-delay: calc(var(--cookie-club-stagger) * 2);
}

/* Desktop: three columns in a row (above 1080px). */
@media (min-width: 67.5625rem) {
	.cookie-club__columns,
	.cookie-club .wp-block-group.cookie-club__columns {
		flex-direction: row;
	}
}

.cookie-club__headline,
.cookie-club h3.cookie-club__headline,
.cookie-club .wp-block-heading.cookie-club__headline {
	color: inherit;
	flex: 1 1 0;
	font-family: var(--wp--preset--font-family--pp-neue-montreal, sans-serif);
	font-size: var(--wp--preset--font-size--h-3, clamp(1.25rem, 2.5vw, 2.25rem));
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0;
	min-width: 0;
	width: 100%;
}

.cookie-club__image,
.cookie-club .wp-block-image.cookie-club__image {
	flex: 0 0 auto;
	margin: 0;
	max-width: 25.125rem; /* 402px */
	width: 100%;
}

.cookie-club__image img,
.cookie-club .wp-block-image.cookie-club__image img {
	aspect-ratio: 402 / 500;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.cookie-club__copy,
.cookie-club p.cookie-club__copy,
.cookie-club .wp-block-paragraph.cookie-club__copy,
.cookie-club p.cookie-club__copy.has-paragraph-m-font-size,
.cookie-club .cookie-club__copy.has-paragraph-m-font-size {
	color: inherit;
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--pp-neue-montreal, sans-serif);
	font-size: 16px !important;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.4;
	margin: 0;
	min-width: 0;
	/* ~11 leading spaces in Figma — first line shifts right */
	text-indent: 3.1em;
	white-space: pre-wrap;
	width: 100%;
}

/*
 * Row layout: image (402px) and copy (474px) hold their Figma widths on wide
 * screens and shrink proportionally as the viewport narrows; the headline
 * takes the remaining space but never drops below its min-width.
 */
@media (min-width: 67.5625rem) {
	.cookie-club__headline,
	.cookie-club h3.cookie-club__headline,
	.cookie-club .wp-block-heading.cookie-club__headline {
		min-width: 15rem;
	}

	.cookie-club__image,
	.cookie-club .wp-block-image.cookie-club__image {
		flex: 0 1 25.125rem; /* 402px */
		width: auto;
	}

	.cookie-club__copy,
	.cookie-club p.cookie-club__copy {
		flex: 0 1 29.625rem; /* 474px */
		max-width: 29.625rem;
		width: auto;
	}
}

/* -------------------------------------------------------------------------
   Buy Now + retailer buttons
   ------------------------------------------------------------------------- */

.cookie-club__cta,
.cookie-club .wp-block-group.cookie-club__cta {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1.25rem; /* 20px */
	margin: 0;
	width: 100%;
}

.cookie-club__buy-label,
.cookie-club h4.cookie-club__buy-label,
.cookie-club .wp-block-heading.cookie-club__buy-label {
	color: inherit;
	font-family: var(--wp--preset--font-family--pp-neue-montreal, sans-serif);
	font-size: var(--wp--preset--font-size--h-4, clamp(1.125rem, 2vw, 1.5rem));
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.1;
	margin: 0;
	text-align: center;
	white-space: nowrap;
	width: 100%;
}

.cookie-club__buttons,
.cookie-club .wp-block-buttons.cookie-club__buttons {
	align-content: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.3125rem; /* 21px */
	justify-content: center;
	margin: 0;
	width: 100%;
}

.cookie-club__buttons .wp-block-button {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	width: auto;
}

.cookie-club__buttons .wp-block-button .wp-block-button__link {
	align-items: center;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 30px;
	box-shadow: none;
	color: inherit;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--gt-maru-mono, ui-monospace, Consolas, Menlo, monospace);
	font-size: var(--wp--preset--font-size--button-m, 1rem);
	font-weight: 500;
	justify-content: center;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
	white-space: nowrap;
	width: auto;
}

/* Large desktop — equal-width row (Figma). */
@media (min-width: 87.5rem) {
	.cookie-club__buttons,
	.cookie-club .wp-block-buttons.cookie-club__buttons {
		flex-wrap: nowrap;
	}

	.cookie-club__buttons .wp-block-button {
		flex: 1 1 0;
		min-width: min(100%, 8.5rem);
		width: auto;
	}

	.cookie-club__buttons .wp-block-button .wp-block-button__link {
		width: 100%;
	}
}

.cookie-club__buttons .wp-block-button .wp-block-button__link:hover,
.cookie-club__buttons .wp-block-button .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--coffee, #3c1f10);
	border-color: var(--wp--preset--color--parchment, #faf9f4);
	color: var(--wp--preset--color--parchment, #faf9f4);
	outline: 2px solid transparent;
	outline-offset: 2px;
	text-decoration: none;
}

.cookie-club__buttons .wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cookie-club__columns > *,
	.cookie-club .wp-block-group.cookie-club__columns > * {
		clip-path: none !important;
		transform: none !important;
		transition: none !important;
	}

	.cookie-club__buttons .wp-block-button .wp-block-button__link {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Editor layout helpers
   ------------------------------------------------------------------------- */

.editor-styles-wrapper .cookie-club .block-editor-inner-blocks,
.editor-styles-wrapper .cookie-club .block-editor-block-list__layout {
	width: 100%;
}

.editor-styles-wrapper .cookie-club__columns > *,
.editor-styles-wrapper .cookie-club .wp-block-group.cookie-club__columns > * {
	clip-path: none;
	transform: none;
	transition: none;
}

.editor-styles-wrapper .cookie-club__image:not(:has(img)),
.editor-styles-wrapper .cookie-club .wp-block-image.cookie-club__image:not(:has(img)) {
	aspect-ratio: 402 / 500;
	background-color: rgba(60, 31, 16, 0.08);
	min-height: 12rem;
}

/* ≤1080px — stacked columns, full width. */
@media (max-width: 67.5rem) {
	.cookie-club__headline,
	.cookie-club h3.cookie-club__headline,
	.cookie-club .wp-block-heading.cookie-club__headline,
	.cookie-club__image,
	.cookie-club .wp-block-image.cookie-club__image,
	.cookie-club__copy,
	.cookie-club p.cookie-club__copy {
		flex: none;
		height: auto;
		max-width: 100%;
		width: 100%;
	}

	.cookie-club__copy,
	.cookie-club p.cookie-club__copy {
		text-indent: 2.5em;
	}

	.cookie-club__buttons .wp-block-button {
		flex: 0 0 auto;
	}

	.cookie-club__buttons .wp-block-button .wp-block-button__link {
		padding: 8px 20px;
	}
}

@media (max-width: 48rem) {
	.cookie-club {
		padding: 20px;
	}

	.cookie-club__title,
	.cookie-club h2.cookie-club__title,
	.cookie-club .wp-block-heading.cookie-club__title {
		font-size: 96px;
	}
}

/* ≤560px — stacked full-width retailer pills (Figma 823:11741). */
@media (max-width: 560px) {
	.cookie-club__buttons,
	.cookie-club .wp-block-buttons.cookie-club__buttons {
		align-items: stretch;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 1rem; /* 16px */
	}

	.cookie-club__buttons .wp-block-button {
		flex: 0 0 auto;
		width: 100%;
	}

	.cookie-club__buttons .wp-block-button .wp-block-button__link {
		padding: 8px 16px;
		width: 100%;
	}
}