/**
 * Cómo instalar — landing (page-como-instalar.html) and the four product guides
 * (como-instalar-{estores-enrollables,cortinas-verticales,paneles-japoneses,noche-y-dia}.html).
 *
 * Reuses como-medir.css for the shared page shell (breadcrumb, page hero,
 * product-selector cards, help CTA); this file only holds what is new:
 *
 *  - .ed-install-step   the REUSABLE step component (label, title, description,
 *                       media slot). To replace a placeholder with a real image,
 *                       swap <div class="ed-install-placeholder" data-install-image="…">
 *                       for an <img> inside the same <figure class="ed-install-step__media">
 *                       — the figure already provides the 4:3 frame, nothing else changes.
 *  - .ed-install-method a pared / a techo / pasos comunes group of steps
 *  - .ed-install-other* other-guides links (product pages)
 *  - .ed-install-*      needs chips, tip note, recommendation callout, sub-navigation,
 *                       "Antes de empezar" cards
 *
 * Placeholder / image slot identifiers (data-install-image, data-install-slot):
 *  enrollables  install-enrollable-{pared|techo}-step-{1,2}, install-enrollable-step-{3,4,5}
 *  verticales   install-vertical-{techo|pared}-step-{1,2,3}, install-vertical-step-{4,5,6,7}
 *  japoneses    install-panel-japones-{techo|pared}-step-{1,2,3}, install-panel-japones-step-{4..8}
 *  noche y día  install-noche-dia-{pared|techo}-step-{1,2}, install-noche-dia-step-{3,4,5}
 */

/* Smooth in-page navigation (base.css already turns it off for reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	html:has(.ed-install) {
		scroll-behavior: smooth;
	}
}

.ed-install-hero__hint {
	margin: var(--ed-space-md) 0 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

/* Anchor targets (sub-navigation chips) sit below the sticky header. */
.ed-install-category,
.ed-install-method {
	scroll-margin-top: calc(var(--ed-space-lg) + var(--ed-header-stack-offset, 0px));
}

/* -------------------------------------------------------------------- */
/* Antes de empezar                                                        */
/* -------------------------------------------------------------------- */

/*
 * Layout only: each item is an editorial feature card, compact modifier
 * (.ed-feature-card--editorial.--compact, components/feature-card.css).
 */
.ed-install-before__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-sm);
}

@media (min-width: 768px) {
	.ed-install-before__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------- */
/* Category intro pieces: needs chips, tip note, callout, sub-navigation   */
/* -------------------------------------------------------------------- */

.ed-install-needs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ed-space-2xs);
	margin: 0 0 var(--ed-space-md);
	padding: 0;
	list-style: none;
}

.ed-install-needs li {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	padding: 6px 14px 6px 10px;
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-full);
	font-size: var(--ed-font-size-sm);
	font-weight: 500;
}

.ed-install-needs li span {
	display: inline-flex;
	color: var(--ed-color-link);
}

.ed-install-needs svg {
	width: 18px;
	height: 18px;
}

.ed-install-note {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-xs);
	margin: 0 0 var(--ed-space-md);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

.ed-install-note__icon {
	display: inline-flex;
	flex: none;
	margin-top: 2px;
	color: var(--ed-color-link);
}

.ed-install-note__icon svg {
	width: 18px;
	height: 18px;
}

.ed-install-callout {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-sm);
	margin: 0 0 var(--ed-space-md);
	padding: var(--ed-space-md);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-left: 4px solid var(--ed-color-primary);
	border-radius: var(--ed-radius-md);
}

.ed-install-callout__icon {
	display: inline-flex;
	flex: none;
	color: var(--ed-color-link);
}

.ed-install-callout__icon svg {
	width: 26px;
	height: 26px;
}

.ed-install-callout__title {
	margin: 0 0 var(--ed-space-2xs);
	font-size: var(--ed-font-size-md);
}

.ed-install-callout p {
	margin: 0 0 var(--ed-space-xs);
	max-width: 68ch;
}

.ed-install-callout p:last-child {
	margin-bottom: 0;
}

.ed-install-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ed-space-2xs);
	margin: 0 0 var(--ed-space-xl);
}

.ed-install-subnav a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--ed-space-sm);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-full);
	color: var(--ed-color-heading);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--ed-transition-fast), color var(--ed-transition-fast);
}

.ed-install-subnav a:hover {
	border-color: var(--ed-color-link);
	color: var(--ed-color-link);
}

.ed-install-subnav a:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
}

/* -------------------------------------------------------------------- */
/* Method group (a pared / a techo / pasos comunes)                        */
/* -------------------------------------------------------------------- */

.ed-install-method + .ed-install-method {
	margin-top: var(--ed-space-2xl);
}

.ed-install-method__head {
	display: flex;
	align-items: center;
	gap: var(--ed-space-sm);
	padding-bottom: var(--ed-space-sm);
	border-bottom: 1px solid var(--ed-color-border);
}

/* .ed-install-method__icon: circle, size and glyph come from the shared .ed-feature-icon (base.css). */

.ed-install-method__title {
	margin: 0;
	font-size: var(--ed-font-size-lg);
}

.ed-install-method__note {
	margin: 2px 0 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

/* -------------------------------------------------------------------- */
/* Installation step — reusable component                                  */
/* -------------------------------------------------------------------- */

.ed-install-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Mobile: one column — label + title, then the image, then the text. */
.ed-install-step {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ed-space-sm);
	padding-block: var(--ed-space-lg);
	border-bottom: 1px solid var(--ed-color-border);
}

.ed-install-step:last-child {
	border-bottom: 0;
}

.ed-install-step__label {
	margin: 0 0 var(--ed-space-3xs);
	color: var(--ed-color-link);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-eyebrow);
	line-height: 1;
	text-transform: uppercase;
}

.ed-install-step__title {
	margin: 0;
	color: var(--ed-color-heading);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-md);
	font-weight: 600;
	line-height: 1.3;
}

.ed-install-step__desc {
	margin: 0;
	max-width: 56ch;
	color: var(--ed-color-text);
}

.ed-install-step__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--ed-color-surface-alt);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

/* A real image dropped into the slot fills the same frame. */
.ed-install-step__media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tablet and desktop (>=768px): image beside the text, alternating sides. */
@media (min-width: 768px) {
	.ed-install-step {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-areas:
			'media head'
			'media desc';
		grid-template-rows: auto auto;
		align-content: center;
		align-items: end;
		column-gap: var(--ed-space-xl);
		row-gap: var(--ed-space-xs);
		padding-block: var(--ed-space-xl);
	}

	.ed-install-step:nth-child(even) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		grid-template-areas:
			'head media'
			'desc media';
	}

	.ed-install-step__head {
		grid-area: head;
	}

	.ed-install-step__media {
		grid-area: media;
	}

	.ed-install-step__desc {
		grid-area: desc;
		align-self: start;
	}

	.ed-install-step__title {
		font-size: var(--ed-font-size-lg);
	}
}

/* -------------------------------------------------------------------- */
/* Placeholder (until the real installation image exists)                  */
/* -------------------------------------------------------------------- */

.ed-install-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ed-space-2xs);
	width: 100%;
	height: 100%;
	padding: var(--ed-space-md);
	color: var(--ed-color-muted);
	text-align: center;
}

.ed-install-placeholder__icon {
	width: 40px;
	height: 40px;
	color: var(--ed-color-border);
	stroke: var(--ed-color-muted);
	opacity: 0.6;
}

.ed-install-placeholder__title {
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.ed-install-placeholder__caption {
	max-width: 30ch;
	font-size: var(--ed-font-size-xs);
	line-height: 1.4;
}

/* -------------------------------------------------------------------- */
/* Back to the selector                                                    */
/* -------------------------------------------------------------------- */

.ed-install-backlink {
	margin: var(--ed-space-xl) 0 0;
}

.ed-install-backlink a {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	min-height: 44px;
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

.ed-install-backlink svg {
	width: 12px;
	height: 12px;
}

/* -------------------------------------------------------------------- */
/* Narrow phones                                                           */
/* -------------------------------------------------------------------- */

@media (max-width: 480px) {
	.ed-install-callout {
		flex-direction: column;
		padding: var(--ed-space-sm);
	}

	.ed-install-step__media {
		aspect-ratio: 16 / 10;
	}
}

/* -------------------------------------------------------------------- */
/* Other installation guides (product pages)                               */
/* -------------------------------------------------------------------- */

.ed-install-others {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.ed-install-other {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-2xs);
	height: 100%;
	padding: var(--ed-space-md);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--ed-transition-fast);
}

.ed-install-other:hover,
.ed-install-other:focus-visible {
	border-color: var(--ed-color-link);
}

.ed-install-other:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-install-other__title {
	color: var(--ed-color-heading);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-md);
	font-weight: 500;
	line-height: 1.2;
}

.ed-install-other__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	color: var(--ed-color-link);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

.ed-install-other__cta svg {
	width: 14px;
	height: 11px;
}