/**
 * Guía de tejidos — page-specific component library.
 *
 * Enqueued only on is_page('guia-de-tejidos'). Reuses the shared guide-page
 * primitives as-is (breadcrumb, hero card, sticky nav, diagram/lightbox
 * trigger, checklist, FAQ accordion, final CTA — see guide-page.css/js and
 * project-docs/05-components.md) rather than duplicating them. Only the
 * pieces genuinely new to this page's content (fabric comparison, aperture
 * grid, attribute rows, room/orientation cards, samples callout) live here —
 * same "page-specific stylesheet first, promote once a second page needs
 * it" pattern the guide pages already established.
 */

/* -------------------------------------------------------------------- */
/* Scroll offset for this page's sticky-nav anchor targets                */
/* -------------------------------------------------------------------- */

/*
 * --ed-header-stack-offset (published by header-scroll.js, see header.css)
 * already includes the admin-bar height, so a separate body.admin-bar
 * override isn't needed here any more.
 */
#comparativa,
#screen,
#apertura,
#translucido,
#opaco,
#noche-y-dia,
#estancia,
#faq {
	scroll-margin-top: calc(64px + var(--ed-space-lg) + var(--ed-header-stack-offset, 0px));
}

/* -------------------------------------------------------------------- */
/* "¿Qué necesitas?" quick picker — reuses .ed-t2-decision-card as-is,    */
/* only the grid itself needs a 4-column breakpoint (2-column is the      */
/* existing .ed-t2-decision default).                                     */
/* -------------------------------------------------------------------- */

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

@media (min-width: 640px) {
	.ed-tejidos-need {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ed-tejidos-need {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------------------------------------------------------- */
/* Comparativa rápida — 4 fabric cards, text-forward (no photo, so a      */
/* general "Screen" entry never falsely implies one specific apertura).   */
/* -------------------------------------------------------------------- */

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

@media (min-width: 640px) {
	.ed-tejidos-compare {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ed-tejidos-compare {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ed-tejidos-compare-card {
	display: flex;
	flex-direction: column;
	padding: var(--ed-space-lg);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: 20px;
}

.ed-tejidos-compare-card__title {
	margin: 0 0 var(--ed-space-md);
	padding-bottom: var(--ed-space-sm);
	border-bottom: 1px solid var(--ed-color-border);
}

.ed-tejidos-compare-card__rows {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-sm);
	margin: 0 0 var(--ed-space-md);
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

.ed-tejidos-compare-card__rows dt {
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-eyebrow);
	text-transform: uppercase;
}

.ed-tejidos-compare-card__rows dd {
	margin: 0;
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
}

.ed-tejidos-compare-card__ideal {
	margin: 0;
	padding-top: var(--ed-space-sm);
	border-top: 1px solid var(--ed-color-border);
	color: var(--ed-color-link-hover);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Attribute row — icon + label + value, 3 across with dividers on wide   */
/* screens, stacked on narrow. Reused by Translúcido/Opaco/Noche y día.   */
/* -------------------------------------------------------------------- */

.ed-tejidos-attrs {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-md);
	margin-top: var(--ed-space-lg);
	padding-top: var(--ed-space-lg);
	border-top: 1px solid var(--ed-color-border);
}

@media (min-width: 640px) {
	.ed-tejidos-attrs {
		/*
		 * minmax(0, 1fr), not plain 1fr (== minmax(auto, 1fr)): with the
		 * default auto minimum, a track won't shrink below its content's
		 * min-content width, so at narrower desktop widths (e.g. ~1024px,
		 * where the callout's own column is ~390px) the three unbreakable
		 * labels/values forced the row past its container instead of
		 * wrapping — surfaced by widening the callout's photo elsewhere in
		 * this file, not caused by it (the text column width is unchanged).
		 */
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ed-tejidos-attrs__item {
		padding-inline: var(--ed-space-2xs);
		border-left: 1px solid var(--ed-color-border);
	}

	.ed-tejidos-attrs__item:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

.ed-tejidos-attrs__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-sm);
}

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

.ed-tejidos-attrs__label {
	margin: 0 0 2px;
	color: var(--ed-color-heading);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	overflow-wrap: break-word;
}

.ed-tejidos-attrs__value {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
	overflow-wrap: break-word;
}

/*
 * 3-up layout: stack the icon ABOVE the label instead of beside it.
 * Inside the Translúcido/Opaco callout the attribute row only ever gets
 * the ~46% text column (~130px per track once the container hits its
 * 1200px cap), and an inline 32px icon + gap left too little room for a
 * value such as "Prácticamente nula de día" — its longest word alone
 * (~104px) overflowed the track and crossed the divider into the next
 * column. Stacking frees the full track width for the text; min-width:0
 * on the grid item and its text wrapper lets the flex children actually
 * shrink to the track (they default to min-content); overflow-wrap on the
 * label/value above is the last-resort guard so no single word can ever
 * cross the divider at the narrowest 3-up widths. Declared after the base
 * .ed-tejidos-attrs__item rule so these win the cascade at >=640px.
 */
@media (min-width: 640px) {
	.ed-tejidos-attrs__item {
		flex-direction: column;
		gap: var(--ed-space-2xs);
		min-width: 0;
	}

	.ed-tejidos-attrs__item > div {
		width: 100%;
		min-width: 0;
	}
}

/* -------------------------------------------------------------------- */
/* Note callout — single-column tinted note (privacidad día/noche,        */
/* matices de Opaco, matices de Noche y día). Same tint recipe as         */
/* guide-page.css's .ed-t2-tip, its own class since .ed-guide-callout's   */
/* shared shell assumes a 2-column text+media layout.                     */
/* -------------------------------------------------------------------- */

.ed-tejidos-note {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-sm);
	margin-top: var(--ed-space-xl);
	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-tejidos-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-tejidos-note__icon svg {
	width: 100%;
	height: 100%;
}

.ed-tejidos-note p {
	margin: 0 0 var(--ed-space-2xs);
	color: var(--ed-color-text);
	font-size: var(--ed-font-size-sm);
}

.ed-tejidos-note p:last-child {
	margin-bottom: 0;
}

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

/* -------------------------------------------------------------------- */
/* Grado de apertura — 4 real photos, large, no forced crop. 1 column     */
/* below 640px (readability over density), 2×2 tablet, 4-across desktop.  */
/* -------------------------------------------------------------------- */

.ed-tejidos-aperture {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-lg);
}

@media (min-width: 640px) {
	.ed-tejidos-aperture {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ed-tejidos-aperture {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--ed-space-md);
	}
}

.ed-tejidos-aperture-card {
	display: flex;
	flex-direction: column;
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: 20px;
	overflow: hidden;
}

.ed-tejidos-aperture-card .ed-guide-diagram {
	border-radius: 0;
	/*
	 * The 4 source photos (screen-1/3/5/10.webp) don't share one exact
	 * intrinsic aspect ratio (0.603–0.616) — at equal card widths that
	 * produced a slightly different media-block height per card (up to
	 * ~18px), so the "1% / 3% / 5% / 10%" row, the divider and the stat
	 * lines below never lined up across the 4 columns even though each
	 * card's own text content was identical in length. Fixing the media
	 * block to one shared aspect-ratio (the average of the 4, so the
	 * object-fit: cover crop stays imperceptible — under ~1.3% off any
	 * single photo's own ratio) makes all 4 cards the same height via
	 * ordinary CSS layout instead of per-card overrides.
	 */
	aspect-ratio: 0.608;
}

.ed-tejidos-aperture-card .ed-guide-diagram img {
	height: 100%;
	object-fit: cover;
}

.ed-tejidos-aperture-card__body {
	padding: var(--ed-space-md) var(--ed-space-lg) var(--ed-space-lg);
}

/*
 * Mobile: the card previously filled the grid track exactly (~92% of the
 * viewport once the page's own container gutter is accounted for), which
 * read as edge-to-edge. Inset it a little further within its already-
 * inset container so there's visible breathing room on both sides —
 * expressed as a percentage of the grid's own box (not a fixed px hack
 * tied to one device width), so it scales the same way at 360–430px.
 */
@media (max-width: 639px) {
	.ed-tejidos-aperture {
		max-width: 98%;
		margin-inline: auto;
	}
}

.ed-tejidos-aperture-card__value {
	display: block;
	color: var(--ed-color-heading);
	font-family: var(--ed-font-heading);
	font-size: clamp(1.75rem, 1.55rem + 0.9vw, 2.125rem);
	font-weight: 500;
	line-height: 1;
}

.ed-tejidos-aperture-card__tag {
	display: inline-block;
	margin: var(--ed-space-2xs) 0 var(--ed-space-sm);
	color: var(--ed-color-link);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-eyebrow);
	text-transform: uppercase;
}

.ed-tejidos-aperture-card__stats {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-xs);
	margin: 0;
	padding-top: var(--ed-space-sm);
	border-top: 1px solid var(--ed-color-border);
}

.ed-tejidos-aperture-card__stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ed-space-xs);
	font-size: var(--ed-font-size-xs);
}

.ed-tejidos-aperture-card__stat dt {
	color: var(--ed-color-muted);
}

.ed-tejidos-aperture-card__stat dd {
	margin: 0;
	color: var(--ed-color-heading);
	font-weight: 600;
	text-align: right;
}

/* Menor / mayor apertura explainer — two compact columns */

.ed-tejidos-apertura-guide {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-md);
	margin-top: var(--ed-space-xl);
}

@media (min-width: 640px) {
	.ed-tejidos-apertura-guide {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ed-tejidos-apertura-guide__item {
	padding: var(--ed-space-lg);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-md);
}

.ed-tejidos-apertura-guide__heading {
	display: flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	margin: 0 0 var(--ed-space-sm);
	color: var(--ed-color-heading);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-eyebrow);
	text-transform: uppercase;
}

.ed-tejidos-apertura-guide__heading svg {
	width: 16px;
	height: 16px;
	color: var(--ed-color-link);
}

.ed-tejidos-apertura-guide__item ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-2xs);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

/* -------------------------------------------------------------------- */
/* Noche y día — abierto/cerrado comparison grid                          */
/* -------------------------------------------------------------------- */

.ed-tejidos-day-night {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-lg);
}

@media (min-width: 768px) {
	.ed-tejidos-day-night {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

.ed-tejidos-day-night-card .ed-guide-diagram {
	border-radius: 0;
}

.ed-tejidos-day-night-card__body {
	padding: var(--ed-space-lg);
}

.ed-tejidos-day-night-card__title {
	margin: 0 0 var(--ed-space-2xs);
}

.ed-tejidos-day-night-card__desc {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

/* -------------------------------------------------------------------- */
/* Por estancia — room recommendation cards                               */
/* -------------------------------------------------------------------- */

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

@media (min-width: 640px) {
	.ed-tejidos-rooms {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ed-tejidos-rooms {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ed-tejidos-room-card {
	padding: var(--ed-space-lg);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

.ed-tejidos-room-card__title {
	margin: 0 0 var(--ed-space-sm);
}

.ed-tejidos-room-card__desc {
	margin: 0 0 var(--ed-space-sm);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

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

.ed-tejidos-tag {
	display: inline-block;
	padding: var(--ed-space-3xs) var(--ed-space-sm);
	background-color: rgba(0, 183, 183, 0.08);
	border-radius: var(--ed-radius-full);
	color: var(--ed-color-link-hover);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
}

/* "Ideal para" label inside a fabric callout (Translúcido/Opaco) — reuses
   .ed-t2-case-tag's text styling, just needs its own block/spacing context. */
.ed-tejidos-ideal-label {
	display: block;
	margin-top: var(--ed-space-lg);
}

/* Spacing for the "Orientación" subheading and "Color" subsection sitting
   inside the shared #estancia section, after the room-card grid. */
.ed-tejidos-subheading {
	margin-top: var(--ed-space-2xl);
}

.ed-tejidos-subsection {
	margin-top: var(--ed-space-2xl);
}

/* -------------------------------------------------------------------- */
/* Orientación de la ventana — compact 4-up row                           */
/* -------------------------------------------------------------------- */

.ed-tejidos-orientation {
	display: grid;
	/*
	 * minmax(0, 1fr), not a bare 1fr: a plain 1fr track still respects its
	 * content's min-content width, so at 360px the two card descriptions
	 * refused to shrink below their intrinsic width and pushed the grid
	 * ~16px past the viewport. minmax(0, ...) lets the track — and the
	 * text wrapping inside it — actually shrink to the available space.
	 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ed-space-md);
	margin-top: var(--ed-space-lg);
}

@media (min-width: 768px) {
	.ed-tejidos-orientation {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ed-tejidos-orientation-card {
	padding: var(--ed-space-md);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

.ed-tejidos-orientation-card__title {
	margin: 0 0 var(--ed-space-3xs);
	color: var(--ed-color-heading);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

.ed-tejidos-orientation-card__desc {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
}

/* -------------------------------------------------------------------- */
/* Muestras gratis — centered tinted CTA card                             */
/* -------------------------------------------------------------------- */

.ed-tejidos-samples {
	max-width: 720px;
	margin-inline: auto;
	padding: var(--ed-space-xl);
	background-color: rgba(0, 183, 183, 0.06);
	border-left: 5px solid var(--ed-color-primary);
	border-radius: 20px;
	text-align: center;
}

.ed-tejidos-samples__title {
	margin: 0 0 var(--ed-space-sm);
}

.ed-tejidos-samples__desc {
	margin: 0 auto var(--ed-space-lg);
	max-width: 56ch;
	color: var(--ed-color-text);
}

.ed-tejidos-samples .wp-block-buttons {
	justify-content: center;
}

/* -------------------------------------------------------------------- */
/* Translúcido / Opaco — photo sizing + Opaco's mobile reorder            */
/* -------------------------------------------------------------------- */

/*
 * guide-page.css's shared .ed-guide-callout .ed-guide-diagram sizing
 * (width: 84%; max-width: 460px) is meant to go full-width below 768px via
 * its own @media (max-width: 767px) override — but that override is
 * declared BEFORE the unconditional 84%/460px rule later in the same
 * file, so at equal specificity the later, unconditional rule always wins
 * the cascade regardless of viewport. The SAME order bug also affects
 * guide-page.css's own `.ed-guide-callout { padding: var(--ed-space-lg) }`
 * mobile override (declared in the same early block) — so on mobile this
 * page's callouts were actually rendering at the desktop 48px padding
 * (var(--ed-space-xl)), not the intended 32px, which ate into the content
 * column both the text and the photo have to share (measured: at 390px
 * wide, the callout's usable content width was only 247px, not the ~279px
 * it should have been). That's a pre-existing bug in the shared file (also
 * affects the ancho-tela callout on the measuring-guide pages), out of
 * scope to fix there since guide-page.css is shared with pages this task
 * must not touch. Both overridden here instead, scoped to only this
 * page's two callouts, since guia-de-tejidos.css loads after
 * guide-page.css and only enqueues on this page.
 */
@media (max-width: 899px) {
	#translucido .ed-guide-callout,
	#opaco .ed-guide-callout {
		padding: var(--ed-space-lg);
	}
}

/*
 * Mobile/tablet (<900px, single-column callout): the photo now matches the
 * text column's own width/edges exactly, instead of sitting 4% narrower
 * and centered — "practically full content-width", left/right edges
 * aligned with the paragraph above it.
 */
#translucido .ed-guide-diagram,
#opaco .ed-guide-diagram {
	width: 100%;
	max-width: none;
	margin-inline: auto;
}

@media (min-width: 900px) {
	/*
	 * Desktop: the callout's own two columns are no longer an equal 50/50
	 * split — the text column gets 57fr, the photo column 43fr (fr units,
	 * not raw percentages, so CSS Grid still subtracts the row gap
	 * correctly instead of risking an overflow past 100%). Translúcido
	 * uses --media-right's named grid-template-areas ("text media"), so
	 * the first fr value is always the TEXT column there; Opaco has no
	 * modifier and keeps plain source order (image first child), so the
	 * first fr value is the IMAGE column there — each rule below assigns
	 * fr values in the order that actually lands the photo at ~43% for
	 * both sections without disturbing which side it's visually on.
	 */
	#translucido .ed-guide-callout {
		grid-template-columns: 46fr 54fr;
	}

	#opaco .ed-guide-callout {
		grid-template-columns: 54fr 46fr;
	}

	/*
	 * Within its now-43fr column, the photo fills almost all of it — the
	 * column itself, not this width/max-width pair, is what's actually
	 * setting the visible size now.
	 */
	#translucido .ed-guide-diagram,
	#opaco .ed-guide-diagram {
		width: 96%;
		max-width: 640px;
	}
}

/*
 * Opaco has no --media-right modifier (unlike Translúcido), so its two
 * children keep plain source order: image first, text second. That's
 * exactly "image left / text right" at the ≥900px 2-column layout and
 * must stay untouched there. Below 900px the callout stacks to a single
 * column, where the same source order previously put the image above the
 * heading — moved after the text block (heading/description/attrs/Ideal
 * para) via `order` instead of reordering the markup, so desktop's
 * left/right composition never has to depend on a breakpoint-conditional
 * DOM order.
 */
#opaco .ed-guide-diagram {
	order: 2;
}

@media (min-width: 900px) {
	#opaco .ed-guide-diagram {
		order: 0;
	}
}

/* -------------------------------------------------------------------- */
/* Errores frecuentes — reuses .ed-guide-checklist / --warning as-is      */
/* (see guide-page.css), no page-specific override required.              */
/* -------------------------------------------------------------------- */