/**
 * Product category pages — Estores enrollables, Cortinas verticales,
 * Paneles japoneses, Noche y día. Visually related (shared hero card,
 * feature grid, steps, mini-FAQ, final CTA — all from guide-page.css /
 * cards.css), only the hero photo and copy differ per category.
 *
 * Enqueued only on the 4 top-level category pages (see inc/enqueue.php).
 * Reuses .ed-guide-hero / .ed-guide-breadcrumb / .ed-section__header /
 * .ed-guide-cta / .ed-guide-faq from guide-page.css, and .ed-feature-grid /
 * .ed-steps / .ed-cta-tinted / .ed-pill from cards.css, as-is.
 */

/* -------------------------------------------------------------------- */
/* Hero photo band — full-width product photo right under the hero card  */
/* -------------------------------------------------------------------- */

.ed-cat-hero-image {
	display: block;
	width: min(100% - 2rem, var(--ed-container-width));
	max-width: none;
	margin: calc(-1 * var(--ed-space-lg)) auto var(--ed-space-2xl);
	border-radius: var(--ed-radius-lg);
	overflow: hidden;
}

.ed-cat-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	max-height: 520px;
}

/* -------------------------------------------------------------------- */
/* Fabric intro — 3 mini cards (Screen / Translúcido / Opaco) linking     */
/* out to Guía de tejidos. Reuses .ed-t2-decision-card (guide-page.css)   */
/* as-is, only the grid needs its own 3-column breakpoint.                */
/* -------------------------------------------------------------------- */

.ed-cat-fabric-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-md);
}

@media (min-width: 640px) {
	.ed-cat-fabric-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------- */
/* Difference callout — used by Noche y día to explain how it differs     */
/* from Screen instead of quietly reusing the fabric-intro cards.         */
/* -------------------------------------------------------------------- */

.ed-cat-note {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-sm);
	margin-top: var(--ed-space-lg);
	padding: var(--ed-space-lg);
	background-color: rgba(0, 183, 183, 0.06);
	border-left: 4px solid var(--ed-color-primary);
	border-radius: var(--ed-radius-md);
}

.ed-cat-note__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 0.1em;
	color: var(--ed-color-primary);
}

.ed-cat-note__icon svg {
	width: 100%;
	height: 100%;
}

.ed-cat-note p {
	margin: 0;
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
}

.ed-cat-note strong {
	color: var(--ed-color-heading);
}

/* -------------------------------------------------------------------- */
/* Noche y día — más abierto / más cerrado comparison card (its own,      */
/* since the other 3 categories' fabric-intro cards are photo-less        */
/* .ed-t2-decision-card links, not photo cards).                          */
/* -------------------------------------------------------------------- */

.ed-cat-compare-card {
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: 20px;
	overflow: hidden;
}

.ed-cat-compare-card img {
	display: block;
	width: 100%;
	height: auto;
}

.ed-cat-compare-card__body {
	padding: var(--ed-space-lg);
}

.ed-cat-compare-card__title {
	margin: 0 0 var(--ed-space-2xs);
}

.ed-cat-compare-card__desc {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

/* -------------------------------------------------------------------- */
/* Spacing after a fabric grid / mini-FAQ, before its "ver más" link —    */
/* contextual, so the buttons block itself never needs an inline style.  */
/* -------------------------------------------------------------------- */

.ed-cat-fabric-grid + .wp-block-buttons,
.ed-guide-faq + .wp-block-buttons {
	margin-top: var(--ed-space-lg);
}


/* -------------------------------------------------------------------- */
/* Flat hero — Estores enrollables / Estores Screen                      */
/* -------------------------------------------------------------------- */

/*
 * Modifier on .ed-guide-hero (guide-page.css): no bordered grey card, sits
 * directly on the page background with a tighter vertical rhythm so the
 * product choice comes up sooner. The shared .ed-guide-hero (Cómo medir,
 * Guía de tejidos, other categories) is untouched.
 */
.ed-guide-hero--flat {
	padding-top: var(--ed-space-lg);
	padding-bottom: var(--ed-space-xl);
}

.ed-guide-hero--flat .ed-guide-hero__inner {
	width: 100%;
	max-width: var(--ed-container-width);
	padding: 0 var(--ed-container-gutter);
	background: none;
	border: 0;
	border-radius: 0;
}

@media (min-width: 640px) {
	.ed-guide-hero--flat .ed-guide-hero__inner {
		padding: 0 var(--ed-container-gutter);
		border-radius: 0;
	}
}

.ed-guide-hero--flat .ed-guide-breadcrumb {
	margin-bottom: var(--ed-space-md);
}

.ed-guide-hero--flat .ed-guide-breadcrumb ol {
	justify-content: center;
}

.ed-guide-hero--flat .ed-guide-hero__title {
	margin-bottom: var(--ed-space-sm);
}

.ed-guide-hero--flat .ed-guide-hero__desc {
	margin-bottom: var(--ed-space-md);
}

.ed-guide-hero--flat .wp-block-buttons {
	margin-bottom: var(--ed-space-sm);
}

/* Small secondary text link under the hero CTAs ("Ver guía de medición"). */
.ed-cat-hero-link {
	margin: 0 0 var(--ed-space-md);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

.ed-cat-hero-link a {
	font-weight: 600;
}

/* "Configurar mi estor" scrolls to the fabric choice; smooth unless reduced motion (base.css). */
html {
	scroll-behavior: smooth;
}

.ed-cat-choice {
	scroll-margin-top: var(--ed-space-md);
}

/* -------------------------------------------------------------------- */
/* Compact Muestras gratis strip — right under a photo-card choice       */
/* -------------------------------------------------------------------- */

.ed-cat-samples-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ed-space-sm) var(--ed-space-lg);
	margin-top: var(--ed-space-lg);
	padding: var(--ed-space-md) var(--ed-space-lg);
	background-color: rgba(0, 183, 183, 0.06);
	border: 1px solid rgba(0, 183, 183, 0.18);
	border-radius: var(--ed-radius-md);
}

.ed-cat-samples-strip__title {
	margin: 0 0 var(--ed-space-3xs);
	font-size: var(--ed-font-size-lg);
}

.ed-cat-samples-strip__desc {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

.ed-cat-samples-strip .wp-block-buttons {
	margin: 0;
}

/* Guide link under a photo-card row: centred secondary CTA, outside the scrolling track. */
.ed-photo-cards + .wp-block-buttons {
	justify-content: center;
	margin-top: 0;
}

/* Small help link under the final CTA buttons (WhatsApp is help, not the main CTA). */
.ed-cat-help-link {
	margin: var(--ed-space-md) 0 0;
	font-size: var(--ed-font-size-sm);
}

/* "Ver …" link at the end of a FAQ answer: sits right under the answer text, not a full paragraph gap below. */
.ed-guide-faq__answer .ed-cat-faq-link {
	margin-top: calc(-1 * var(--ed-space-xs));
}

/* Steps that end in a "Ver …" link: link pinned to the card bottom so the three links line up. */
.ed-steps--links .ed-steps__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ed-steps--links .ed-steps__desc {
	margin-bottom: var(--ed-space-sm);
}

/* Narrow 3-column steps (768–1023px): a wrapped link keeps its arrow right after the last word. */
.ed-steps--links .ed-t2-decision-card__link {
	display: block;
}

.ed-steps--links .ed-t2-decision-card__link svg {
	display: inline-block;
	vertical-align: middle;
}

.ed-cat-link-end {
	white-space: nowrap;
}

/* Short explanation under a photo-card choice (Estores Screen: apertura) — plain text, no card. */
.ed-cat-explainer {
	max-width: 720px;
}

.ed-cat-explainer__title {
	margin: 0 0 var(--ed-space-2xs);
	font-size: var(--ed-font-size-lg);
}

.ed-cat-explainer__text {
	margin: 0 0 var(--ed-space-2xs);
	color: var(--ed-color-muted);
}

.ed-cat-explainer__note {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
	font-style: italic;
}

.ed-cat-samples-strip .ed-eyebrow {
	margin-bottom: var(--ed-space-3xs);
}

/* Secondary help links under a FAQ ("Cómo medir · Cómo instalar · …"). */
.ed-cat-help-link--center {
	margin-top: var(--ed-space-lg);
	color: var(--ed-color-muted);
	text-align: center;
}

.ed-cat-help-link--center a {
	font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* FAQ -> final CTA, tighter (Estores enrollables)                        */
/* -------------------------------------------------------------------- */

/* FAQ directly followed by the final CTA: no bottom padding (the CTA section's own top padding is the gap). */
.ed-cat-faq {
	padding-bottom: 0;
}

.ed-cat-faq .ed-guide-faq + .wp-block-buttons {
	margin-top: var(--ed-space-md);
}

/* Compact final CTA card: same content and type sizes, less vertical padding between its parts. */
.ed-guide-cta--compact .ed-guide-cta__inner {
	padding-block: var(--ed-space-md);
}

@media (min-width: 640px) {
	.ed-guide-cta--compact .ed-guide-cta__inner {
		padding-block: var(--ed-space-lg);
	}
}

.ed-guide-cta--compact .ed-guide-cta__title {
	margin-top: var(--ed-space-2xs);
	margin-bottom: var(--ed-space-sm);
}

.ed-guide-cta--compact .ed-guide-cta__desc {
	margin-top: var(--ed-space-sm);
	margin-bottom: var(--ed-space-md);
}

.ed-guide-cta--compact .wp-block-buttons {
	margin-top: var(--ed-space-md);
	row-gap: var(--ed-space-sm);
}

.ed-guide-cta--compact .ed-cat-help-link {
	margin-top: var(--ed-space-sm);
}