/* ============================================================
   MIN AVA — PRODUKT page section styles
   Selectors target classes directly so they match in both the
   front-end and the block editor iframe. Tokens live in tokens.css.
   Hero styles intentionally NOT redeclared here — they live in
   campaign.css (.hero, .hero-text, etc.).

   Reveal animations: pattern markup deliberately omits
   .reveal / .reveal-delay-N classes because the IntersectionObserver
   is not wired up under WordPress. If reveals get added later,
   they would attach to: .product-feature, .proof-fact,
   .spec-list, .closing-cta-heading and friends.
   ============================================================ */


/* ============================================================
   2. FUNKTIONER & DETALJER — .product-section, asymmetric grid
   ============================================================ */

.product-section {
	background-color: var(--clay-deep);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
	overflow: hidden;
}

.product-inner {
	max-width: 1300px;
	margin: 0 auto;
}

.product-header {
	margin: 0 0 var(--space-xl);
}

.product-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay-light);
	margin: 0 0 var(--space-sm);
}

.product-heading {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.0;
	color: var(--warm-white);
	max-width: 24ch;
	margin: 0;
}

.product-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

@media (max-width: 860px) {
	.product-layout {
		grid-template-columns: 1fr;
	}
}

.product-feature {
	background-color: oklch(0.42 0.08 42);
	padding: var(--space-md);
	margin: 0;
	display: flex;
	flex-direction: column;
}

.product-feature.feature-wide {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: center;
	background-color: oklch(0.38 0.08 40);
	padding: var(--space-lg);
}

@media (max-width: 860px) {
	.product-feature.feature-wide {
		grid-column: auto;
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

.product-feature.feature-wide .product-feature-text {
	display: flex;
	flex-direction: column;
}

.product-feature.feature-accent {
	background-color: oklch(0.50 0.10 42);
}

.product-feature-num {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 900;
	color: oklch(0.62 0.10 45 / 0.35);
	line-height: 1;
	margin: 0 0 var(--space-xs);
}

.product-feature-title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--warm-white);
	line-height: 1.2;
	margin: 0 0 var(--space-xs);
}

.product-feature-desc {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: oklch(0.75 0.03 55);
	line-height: 1.6;
	max-width: 48ch;
	margin: 0;
}

.product-feature-spec {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--clay-light);
	margin: var(--space-sm) 0 0;
	letter-spacing: -0.01em;
}

/* Image block inside feature-wide */
.product-feature.feature-wide .product-image-block,
.product-feature.feature-wide .wp-block-image.product-image-block {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: oklch(0.38 0.08 40);
	margin: 0;
}

.product-feature.feature-wide .product-image-block img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ============================================================
   3. SPEC SLAB — full-bleed linen-mid, narrow inner column
   ============================================================ */

.spec-slab {
	background-color: var(--linen-mid);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
	border-top: 1px solid var(--linen-dark);
}

.spec-slab-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.spec-slab-header {
	margin: 0 0 var(--space-xl);
	max-width: 60ch;
}

.spec-slab-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay);
	margin: 0 0 var(--space-sm);
}

.spec-slab-heading {
	color: var(--ink);
	max-width: 22ch;
}

.spec-slab-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl);
}

@media (max-width: 860px) {
	.spec-slab-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}
}

.spec-list {
	margin: 0;
	padding: 0;
}

.spec-list-title {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay);
	margin: 0 0 var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--linen-dark);
}

.spec-row {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--space-md);
	align-items: baseline;
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--linen-dark);
}

.spec-row:last-child {
	border-bottom: none;
}

@media (max-width: 520px) {
	.spec-row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

.spec-row dt {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0;
}

.spec-row dd {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--ink);
	line-height: 1.25;
	margin: 0;
}

.spec-row .spec-unit {
	display: inline-block;
	margin-left: 0.4em;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-muted);
	vertical-align: middle;
}


/* ------------------------------------------------------------
   3a. SPEC TABLES — wp:table rendered inside .spec-slab.
   Editor-friendly equivalent of the legacy .spec-list markup.
   ------------------------------------------------------------ */

.spec-slab .wp-block-table {
	margin: 0;
	border: 0;
}

.spec-slab .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	background: transparent;
	font-family: var(--font-body);
}

.spec-slab .wp-block-table thead,
.spec-slab .wp-block-table thead th {
	border: 0;
	background: transparent;
}

.spec-slab .wp-block-table thead th {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay);
	text-align: left;
	padding: 0 0 var(--space-sm);
}

/* Override wp-block-table core's default 1px border on every td/th —
   the spec list uses a single hairline divider between rows, nothing else. */
.spec-slab .wp-block-table tbody tr {
	border: 0;
	border-bottom: 1px solid var(--linen-dark);
}

.spec-slab .wp-block-table tbody tr:last-child {
	border-bottom: 0;
}

.spec-slab .wp-block-table tbody td {
	padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
	border: 0;
	background: transparent;
	vertical-align: baseline;
}

.spec-slab .wp-block-table tbody td:first-child {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-muted);
	width: 42%;
	padding-right: var(--space-md);
}

.spec-slab .wp-block-table tbody td:last-child {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--ink);
	line-height: 1.25;
	padding-right: 0;
}

.spec-slab .wp-block-table figcaption,
.spec-slab .wp-block-table .wp-element-caption {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay);
	text-align: left;
	margin: 0 0 var(--space-md);
	padding: 0;
	caption-side: top;
}

/* Render the figcaption above the table even though the markup
   places it after, by reordering the figure's flex children. */
.spec-slab .wp-block-table {
	display: flex;
	flex-direction: column;
}

.spec-slab .wp-block-table figcaption,
.spec-slab .wp-block-table .wp-element-caption {
	order: -1;
}

@media (max-width: 520px) {
	.spec-slab .wp-block-table tbody td {
		display: block;
		width: 100%;
		padding-right: 0;
	}

	.spec-slab .wp-block-table tbody td:first-child {
		padding-bottom: 0.25rem;
	}

	.spec-slab .wp-block-table tbody td:last-child {
		padding-bottom: var(--space-sm);
	}

	.spec-slab .wp-block-table thead {
		display: none;
	}
}


/* ============================================================
   4. AUDIENCE STRIP — .proof-strip treatment, clay-on-clay 4-up
   ============================================================ */

.audience-strip {
	background-color: var(--clay);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
}

.audience-strip .proof-inner {
	max-width: 1300px;
	margin: 0 auto;
}

.audience-strip .proof-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay-light);
	margin: 0 0 var(--space-sm);
}

.audience-strip .proof-intro {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--warm-white);
	max-width: 56ch;
	margin: 0 0 var(--space-xl);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.audience-strip .proof-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

@media (max-width: 860px) {
	.audience-strip .proof-facts {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.audience-strip .proof-facts {
		grid-template-columns: 1fr;
	}
}

/* Cells share inter-cell vertical dividers only — no outer rectangle.
   The right divider is hidden on the last cell of each row so the strip
   reads as 4 columns separated by hairlines, nothing wrapping it. */
.audience-strip .proof-fact {
	background-color: transparent;
	padding: var(--space-lg) var(--space-md);
	margin: 0;
	border-right: 1px solid oklch(0.72 0.07 48 / 0.35);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.audience-strip .proof-fact:last-child {
	border-right: 0;
}

@media (max-width: 860px) {
	.audience-strip .proof-fact:nth-child(2n) {
		border-right: 0;
	}
	.audience-strip .proof-fact:nth-child(2n+1) {
		border-right: 1px solid oklch(0.72 0.07 48 / 0.35);
	}
	.audience-strip .proof-fact:nth-child(-n+2) {
		border-bottom: 1px solid oklch(0.72 0.07 48 / 0.35);
		padding-bottom: var(--space-xl);
	}
	.audience-strip .proof-fact:nth-child(n+3) {
		padding-top: var(--space-xl);
	}
}

@media (max-width: 520px) {
	.audience-strip .proof-fact {
		border-right: 0 !important;
		border-bottom: 1px solid oklch(0.72 0.07 48 / 0.35);
		padding: var(--space-lg) 0;
	}
	.audience-strip .proof-fact:last-child {
		border-bottom: 0;
	}
}

.audience-strip .audience-label {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.0;
	color: var(--clay-deep);
	margin: 0;
}

.audience-strip .audience-desc {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--ink-soft);
	line-height: 1.6;
	margin: 0;
	max-width: 32ch;
}


/* ============================================================
   4b. PRODUCT GALLERY — full-bleed linen band, 3-column image grid
   ============================================================ */

.product-gallery {
	background-color: var(--linen);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
}

.product-gallery-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.product-gallery-header {
	margin: 0 0 var(--space-xl);
	max-width: 60ch;
}

.product-gallery-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay);
	margin: 0 0 var(--space-sm);
}

.product-gallery-heading {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink);
	margin: 0;
	max-width: 22ch;
}

.product-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

@media (max-width: 860px) {
	.product-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.product-gallery-grid {
		grid-template-columns: 1fr;
	}
}

.product-gallery-grid .wp-block-image,
.product-gallery-grid figure {
	margin: 0;
	background-color: var(--warm-white);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}


/* ============================================================
   5. CLOSING CTA — .closing-cta treatment, full-bleed ink
   ============================================================ */

.closing-cta {
	background-color: var(--ink);
	padding: var(--space-2xl) clamp(1.5rem, 6vw, 5rem);
	margin: 0;
	position: relative;
	overflow: hidden;
}

.closing-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 80% 50%,
		oklch(0.40 0.08 42 / 0.4) 0%,
		transparent 65%
	);
	pointer-events: none;
}

.closing-cta-inner {
	position: relative;
	max-width: 700px;
	margin: 0 auto 0 0;
}

.closing-cta-label {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay-light);
	margin: 0 0 var(--space-md);
}

.closing-cta-heading {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--warm-white);
	margin: 0 0 var(--space-md);
}

.closing-cta-body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: oklch(0.72 0.025 52);
	line-height: 1.7;
	max-width: 55ch;
	margin: 0 0 var(--space-lg);
}

.closing-cta-buttons {
	margin: 0;
}


/* ============================================================
   6. BUTTONS — bridge Gutenberg button blocks to mockup styles
   (only for non-hero buttons; hero buttons handled by campaign.css)
   ============================================================ */

.closing-cta-buttons .wp-block-button > .wp-block-button__link {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.85em 2em;
	border-radius: 0;
	transition:
		background-color 0.3s var(--ease-out-quart),
		border-color 0.3s var(--ease-out-quart),
		color 0.3s var(--ease-out-quart),
		transform 0.3s var(--ease-out-quart);
}

.closing-cta-buttons .wp-block-button.is-style-fill > .wp-block-button__link {
	background-color: var(--clay);
	color: var(--warm-white);
	border: none;
}

.closing-cta-buttons .wp-block-button.is-style-fill > .wp-block-button__link:hover,
.closing-cta-buttons .wp-block-button.is-style-fill > .wp-block-button__link:focus-visible {
	background-color: var(--clay-deep);
	transform: translateY(-2px);
	outline: none;
}

.closing-cta-buttons .wp-block-button.is-style-fill > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--clay-light);
	outline-offset: 3px;
}