/* =================================================================
   home-resources.css — Sección "Recursos" del home (Figma 2176:1068).
   Solo se encola en is_front_page() (inc/enqueue.php). Breakpoint estándar 80rem (§12).
   ================================================================= */

@layer views {
	.home-resources {
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0; /* el espaciado real lo dan los márgenes negativos del fan, ver abajo */
		padding-block: 4rem 3rem; /* pt-64 / pb-48 del Inspect */
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
		text-align: center;
	}

	/* Tipografía (DIA DS/Label/Featured section) generalizada a .label-featured-section, base.css
	   (2026-07-13, mismo criterio ya usado en home-news/home-stories/related-news) — incluye el
	   shrink mobile a 16px que este eyebrow antes NO tenía (se quedaba en 24px siempre);
	   unificado a pedido explícito del usuario. */

	/* Abanico de tarjetas: placeholder de una sola imagen por ahora (ver home-resources.php).
	   El glow/halo y la sombra ya vienen horneados en el webp. */
	/* La imagen incluye ~205px de glow/halo arriba y abajo (medido: tarjetas reales 634×218 dentro
	   de un webp de 1161×627). Por eso se renderiza casi a ancho nativo (las tarjetas quedan del
	   tamaño de Figma, ~637px) y se "recupera" el espacio del glow con márgenes negativos en % (que
	   escalan con el ancho), para que el eyebrow y el título se acerquen/encimen al glow como en el
	   mock — en vez de quedar a la distancia completa del halo transparente. */
	.home-resources__fan {
		/* clamp(), no un % suelto — bug real encontrado 2026-07-13: un margin-top/bottom en %
		   se resuelve contra el ancho del CONTENEDOR PADRE (.home-resources), no contra el tamaño
		   propio de este elemento ni de la imagen de adentro — ponerle un width con tope acá NO
		   alcanza, el % del margin lo ignora por completo. En pantallas anchas (>~1400px de
		   viewport) el padre seguía creciendo mientras la imagen ya estaba topada en 1161px (ver
		   abajo): el -11% (sobre un padre cada vez más ancho) crecía mucho más que la imagen y el
		   abanico terminaba tapando el eyebrow/título de arriba y abajo. Fix: clamp() con el mismo
		   valor que -11% da a 1161px (11% de 1161px = 127.71px) como piso — se comporta IGUAL que
		   antes en pantallas angostas (ahí -11% nunca llega a ese piso) y deja de crecer pasado el
		   punto donde la imagen deja de crecer. */
		width: 100%;
		margin-top: clamp(-127.71px, -11%, 0px);    /* sube el abanico hacia el eyebrow */
		margin-bottom: clamp(-127.71px, -11%, 0px); /* sube el título hacia el abanico */
	}
	.home-resources__fan img {
		display: block;
		width: min(1161px, 100%);
		height: auto;
		margin-inline: auto;
	}

	/* DIA DS/Heading Sections/H3 L: Noto Serif ExtraLight (200), 66/80, ls -3px.
	   OJO: este heading usa el ancho NORMAL de la fuente (wdth 100 en Figma), por eso NO lleva
	   font-stretch:75% como el resto del tema (ver nota del token --font-serif en base.css). */
	.home-resources__title {
		margin: 0;
		max-width: 1185px;
		font-family: var(--font-serif);
		font-stretch: 100%; /* normal — explícito a propósito, ver nota de arriba */
		font-weight: 200; /* ExtraLight */
		font-size: clamp(2.25rem, 1.4rem + 4vw, 66px);
		line-height: 1.212; /* 80/66 */
		letter-spacing: -3px;
		color: #27221f;
	}
	.home-resources__title em {
		font-style: italic;
	}

	@media (width < 80rem) {
		.home-resources { padding-block: 3rem 2rem; }
		.home-resources__title { letter-spacing: -1px; }
	}

	/* =============================================================
	   Grilla de Recursos (parts/layout/home-resources-grid.php, Figma 2176:1113).
	   Fila 1: card destacada ancha (792) + card con imagen abajo (380).
	   Fila 2: 3 cards estándar (380).
	   ============================================================= */
	.resources-grid {
		background: #fff;
		padding-block: 2rem 8.75rem; /* pt-32 / pb-140 del Inspect */
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	.resources-grid__inner {
		max-width: var(--container);
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}
	.resources-grid__row {
		display: grid;
		gap: 2rem; /* 32px */
		align-items: stretch;
	}
	/* 792 : 380 del mock (≈2.08:1). minmax(0,…) deja que las columnas encojan en vez de desbordar. */
	.resources-grid__row--featured { grid-template-columns: minmax(0, 792fr) minmax(0, 380fr); }
	.resources-grid__row--standard { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* ---- Card base ---- */
	.res-card {
		position: relative;
		border-radius: 12px;
		overflow: hidden;
		transition: filter .3s ease;
	}
	/* Sombra "glass" de 5 capas que ya traía .res-card--featured (Inspect Figma 2329:889), reusada
	   como hover en TODAS las cards de Recursos (incluida la propia --featured, que ya la tiene de
	   base — el hover solo refuerza la sensación de elevación).
	   `filter: drop-shadow(...)` en vez de `box-shadow` (2026-07-15, bug real reportado con
	   captura: se veía una línea de sombra "más dura" justo arriba de la ilustración en
	   .res-card--media al hacer hover) — a diferencia del comentario anterior (ya incorrecto:
	   "overflow:hidden de .res-card no recorta el box-shadow del propio elemento"), acá SÍ lo
	   recortaba (mismo problema de fondo que gotchas §12.2, aunque el elemento con la sombra y el
	   que clippea sean el mismo): el `overflow:hidden` (necesario para redondear la ilustración y
	   el degradado) se comía casi toda la sombra excepto un resto sin difuminar del todo pegado al
	   borde superior, que se veía como una línea dura en vez de una sombra suave. `drop-shadow` (a
	   diferencia de `box-shadow`) se aplica sobre la capa YA COMPUESTA/recortada del elemento — no
	   lo vuelve a pasar por su propio `overflow:hidden` — así que la sombra sale completa y suave
	   sin necesitar separar el recorte a un wrapper aparte (que hubiera implicado tocar el HTML de
	   las 3 variantes de card). Sin `spread` (drop-shadow no lo soporta) — las 5 capas originales
	   tenían spread:0, así que la conversión es 1:1; se omite la 1ª capa (alpha 0, no pinta nada). */
	.res-card:hover {
		filter:
			drop-shadow(0 28px 11px rgba(0, 0, 0, .02))
			drop-shadow(0 16px 9px rgba(0, 0, 0, .05))
			drop-shadow(0 7px 7px rgba(0, 0, 0, .09))
			drop-shadow(0 2px 4px rgba(0, 0, 0, .1));
	}

	/* --featured: pedido explícito 2026-07-15, sin sombra al hover (a diferencia del resto de
	   cards de Recursos, que sí la usan). box-shadow:none también (faltaba, completado 2026-07-15):
	   filter:none solo anula la sombra "glass" que .res-card:hover agrega ARRIBA — --featured trae
	   su PROPIA box-shadow de base (regla de abajo, .res-card--featured), que sigue de pie durante
	   el hover si no se pisa acá también. */
	.res-card--featured:hover {
		filter: none;
		box-shadow: none;
	}

	/* ---- Elementos compartidos ---- */
	.res-card__title-display { /* solo "End It Now": DIA DS/Heading Sections/H2 */
		margin: 0;
		font-family: var(--font-serif);
		font-stretch: 62.5%; /* ExtraCondensed — instancia cargada solo para esto, ver enqueue.php */
		font-weight: 800; /* ExtraBold */
		font-size: 50px;
		line-height: 54px;
		letter-spacing: .4px;
		color: var(--dia-color-text-primary, #121212);
	}
	.res-card__title { /* DIA DS/Heading News/H4 — Noto Sans normal (SemiCondensed descartado, §enqueue) */
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: var(--dia-color-text-primary, #121212);
	}
	.res-card__tag {
		display: flex; align-items: center; gap: 8px;
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.res-card__tag svg { width: 16px; height: 16px; flex-shrink: 0; }
	.res-card__desc {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #4b4b4b;
	}
	.res-card__circle {
		flex-shrink: 0;
		display: inline-flex; align-items: center; justify-content: center;
		width: 40px; height: 40px;
		border: 1px solid #cacaca;
		border-radius: 50%;
		overflow: hidden; /* recorta el icono al salir/entrar */
		color: var(--dia-color-text-primary, #121212);
		text-decoration: none;
		position: relative; z-index: 1; /* queda encima del stretched-link pseudo */
	}

	/* Dos copias del ícono superpuestas (técnica del botón de Framer): se mueven en paralelo
	   en vez de una sola saliendo-y-regresando en secuencia, así nunca hay un instante sin
	   nada visible (lo que se sentía como "tiempo en blanco" en la versión de keyframes). La
	   "b" arranca fuera de cuadro abajo-izquierda; al hover ambas se desplazan a la vez hacia
	   arriba-derecha, así "a" sale justo cuando "b" entra. Es transition (no animation), por
	   lo que el mouse-out revierte el mismo recorrido automáticamente sin JS extra. */
	.res-card__circle-icon {
		position: absolute; inset: 0;
		display: flex; align-items: center; justify-content: center;
		transition: transform .35s cubic-bezier(.4, 0, .2, 1);
	}
	.res-card__circle-icon--a { transform: translate(0, 0); }
	.res-card__circle-icon--b { transform: translate(-140%, 140%); }
	.res-card__circle.is-active .res-card__circle-icon--a { transform: translate(140%, -140%); }
	.res-card__circle.is-active .res-card__circle-icon--b { transform: translate(0, 0); }
	.res-card__circle svg { width: 22px; height: 22px; }

	/* Stretched-link: el ::after del título cubre toda la card (.res-card ya tiene position:relative).
	   Solo en --standard y --media (en --featured el CTA principal es el botón de descarga). */
	.res-card--standard .res-card__title a,
	.res-card--media .res-card__title a {
		color: inherit;
		text-decoration: none;
	}
	.res-card--standard .res-card__title a:hover,
	.res-card--media .res-card__title a:hover {
		color: #767778;
	}
	.res-card--standard .res-card__title a::after,
	.res-card--media .res-card__title a::after {
		content: '';
		position: absolute;
		inset: 0;
	}

	/* Título de la card --featured: link visual limpio, sin stretched */
	.res-card--featured .res-card__title-display a {
		color: inherit;
		text-decoration: none;
	}
	.res-card--featured .res-card__title-display a:hover {
		color: #767778;
	}

	/* ---- Card destacada ancha "End It Now" ---- */
	.res-card--featured {
		min-height: 550px;
		padding: 64px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		/* box-shadow no está en .res-card (transition:filter) — sin esto el "sombra -> sin sombra"
		   del hover (regla .res-card--featured:hover de arriba) se veía de golpe en vez del fade
		   suave que sí tienen las demás cards vía su transition:filter. */
		transition: box-shadow .3s ease;
		box-shadow:
			0 44px 12px 0 rgba(0, 0, 0, 0),
			0 28px 11px 0 rgba(0, 0, 0, .02),
			0 16px 9px 0 rgba(0, 0, 0, .05),
			0 7px 7px 0 rgba(0, 0, 0, .09),
			0 2px 4px 0 rgba(0, 0, 0, .1);
	}
	.res-card__bg {
		position: absolute; inset: 0;
		width: 100%; height: 100%;
		object-fit: cover;
		z-index: 0;
	}
	/* Overlay invisible que hace clickable TODA la card (ver comentario en home-resources-grid.php
	   sobre por qué no alcanza con el patrón ::after de --standard/--media acá). Va DESPUÉS de
	   .res-card__bg en el DOM (mismo z-index:0 — a igualdad, gana el que viene después) para
	   quedar arriba de la imagen y sí capturar el click ahí; .res-card__content (z-index:1) sigue
	   por encima de este overlay, así que el título/botón interceptan su propio click normalmente. */
	.res-card__stretch {
		position: absolute; inset: 0;
		z-index: 0;
	}
	.res-card--featured .res-card__content {
		position: relative; z-index: 1;
		max-width: 26rem;
		display: flex; flex-direction: column; align-items: flex-start;
		gap: 16px;
		/* Bug real reportado: tag/desc (párrafos SIN href) tapaban el click de .res-card__stretch
		   de abajo — no son transparentes al pointer solo por no tener onclick propio, siguen siendo
		   el elemento "topmost" en ese pixel (misma stacking context que el link del título, ambos
		   dentro de este contenedor con z-index:1) y el navegador nunca deja pasar el click al
		   overlay debajo. pointer-events:none acá + :auto en los <a> (título Y botón, únicos
		   descendientes clickables reales) deja que TODO lo demás (tag, desc, los gaps del flex)
		   caiga a través hasta .res-card__stretch. */
		pointer-events: none;
	}
	.res-card--featured .res-card__content a {
		pointer-events: auto;
	}
	/* En el mock el espacio tag→desc es 8px (no 16) — se ajusta el sibling. */
	.res-card--featured .res-card__tag + .res-card__desc { margin-top: -8px; }
	.res-card--featured .res-card__desc { color: var(--dia-color-text-secondary, #767778); }

	/* Botón "Descargar recursos" (DIA DS/CTA/Button Secondary) — mismo look "gris claro" que ya usan
	   otros botones secundarios del tema (p.ej. .home-news__nav-btn:hover, home-news.css;
	   .project-filters__clear:hover, archive-project.css): border #cdd6e1 (sin token propio, se usa
	   como literal en todo el tema — ver esos mismos archivos), fondo degradado F3F5F9→EFF1F4,
	   radius 4px, sombra de 3 capas. position:relative es NECESARIO (no decorativo): sin esto el
	   botón es un elemento estático dentro de .res-card__content (position:relative;z-index:1) y
	   aunque ya queda arriba de .res-card__stretch por el z-index del padre, position:relative acá
	   deja la regla explícita y a prueba de que algún día alguien le agregue z-index propio sin
	   darse cuenta de que necesita quedar posicionado para que aplique. */
	.res-card__btn {
		position: relative;
		display: inline-flex; align-items: center; gap: 12px;
		padding: 16px 33px;
		border: 1px solid #cdd6e1;
		border-radius: 4px;
		box-shadow: var(--dia-btn-gray-shadow);
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 4px;
		text-transform: uppercase;
		color: var(--dia-color-brand-primary-hover, #284a71);
		text-decoration: none;
		background: var(--dia-btn-gray-gradient);
	}
	.res-card__btn svg { width: 24px; height: 24px; flex-shrink: 0; }
	/* Hover: degradado azul de marca (pedido explícito) en vez del gris claro de reposo — texto/ícono
	   pasan a blanco, si no quedarían casi ilegibles sobre este fondo oscuro (no venía especificado,
	   pero sin esto el contraste se rompe). */
	.res-card__btn:hover {
		background:
			linear-gradient(105deg, rgba(0, 0, 0, .2) 1.83%, rgba(62, 131, 145, .2) 60.47%),
			linear-gradient(81deg, #2d5480 3.29%, #224061 65.54%, #1f4249 95.89%);
		color: #fff;
	}

	/* ---- Card destacada con imagen abajo "Discípulas Creativas" ----
	   Degradado de TODA la card (decisión: más simple que el degradado a media card del mock; usa
	   el color de fondo #fafbfd como primer stop). Stops equivalentes al del Figma
	   (linear-gradient(180deg, transparent 0.48%, #C7CADD 51.93%, #CFB8D2 100%) que en el mock
	   ocupaba de y≈156px a 518px de los 550px de alto → 28%, 62.5%, 94%). La ilustración
	   transparente (home_resources_img_2) va encima; el glass (blur+noise) va en los últimos
	   157px, reusando la técnica de .story-card. */
	.res-card--media {
		min-height: 550px;
		padding: 32px;
		background: linear-gradient(180deg,
			#fafbfd 0%,
			#fafbfd 28%,
			#c7cadd 63%,
			#cfb8d2 95%,
			#cfb8d2 100%);
		/* Sin border (2026-07-15, pedido explícito — bug real reportado con captura, costura/línea
		   clara visible en el borde inferior donde .res-card__glass, backdrop-filter+mask-image,
		   se superpone al borde del ancestro overflow:hidden+border-radius, gotchas §12.52). El
		   intento de estabilizar el rasterizado con border:1px solid transparent en el ancestro
		   (.res-card) no lo resolvió — se prefiere quitar el borde antes que seguir iterando. */
		display: flex; flex-direction: column; align-items: flex-start;
	}
	.res-card--media .res-card__content {
		position: relative; z-index: 2;
		display: flex; flex-direction: column; align-items: flex-start;
		gap: 16px;
	}
	.res-card--media .res-card__tag + .res-card__desc { margin-top: -8px; }
	/* Ilustración transparente al fondo (la sube el admin en home_resources_img_2). object-fit
	   contain + bottom: respeta la silueta recortada sin estirarla; el degradado de la card se ve
	   a través de las zonas transparentes. */
	.res-card__media-img {
		position: absolute; left: 0; right: 0; bottom: 0;
		width: 100%; height: 278px;
		object-fit: contain;
		object-position: left bottom; /* anclada a la esquina inferior izquierda (ver instrucción ACF) */
		z-index: 0;
	}
	/* Glass = blur + grano en los últimos 157px (spec de David). Mismo patrón que .story-card__glass
	   en home-stories.css: backdrop-filter desenfoca la ilustración/degradado detrás, mask para
	   desvanecer el efecto hacia arriba, y un grano horneado en el ::after (mismo feTurbulence). */
	.res-card__glass {
		position: absolute; left: 0; right: 0; bottom: 0;
		height: 157px;
		z-index: 1;
		pointer-events: none;
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);
		-webkit-mask-image: linear-gradient(to top, #000 35%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(to top, #000 35%, rgba(0, 0, 0, 0) 100%);
	}
	.res-card__glass::after {
		content: '';
		position: absolute; inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 157' preserveAspectRatio='none'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' result='a'/%3E%3CfeComponentTransfer in='a'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='380' height='157' fill='black' opacity='0.14' filter='url(%23grain)'/%3E%3C/svg%3E");
		background-size: 100% 100%;
	}

	/* ---- Cards estándar (fila 2) ---- */
	.res-card--standard {
		padding: 32px;
		background: #f5f5f1;
		border: 1px solid rgba(208, 209, 211, .4);
		display: flex; flex-direction: column; align-items: flex-start;
		gap: 16px;
	}
	.res-card__head {
		display: flex; align-items: flex-start; justify-content: space-between;
		width: 100%;
		margin-bottom: 4px; /* 16 + 4 = 20px del Inspect entre badge-row y título */
	}
	.res-card__badge {
		display: inline-flex; align-items: center; justify-content: center;
		padding: 10px;
		background: #fdfdfd;
		border-radius: 6px;
		color: var(--dia-color-text-primary, #121212);
	}
	.res-card__badge svg { width: 20px; height: 20px; }

	/* Tablet (768–1280): la fila destacada SIGUE en 2 columnas (asimétrica 792:380, cabe bien hasta
	   768) — solo se reduce el padding y el título escala. Las estándar YA NO entran acá (pedido
	   explícito 2026-07-06: a partir de 1024px pasan a 3 columnas, ver bloque de abajo — antes
	   este rango <80rem las dejaba en 2 desde 768 hasta 1280, ahora esa fila de 2 queda acotada
	   solo a 768–1024). */
	@media (width < 80rem) {
		.resources-grid { padding-block: 1.5rem 4rem; }
		.res-card--featured { padding: 2.5rem; }
		.res-card--media { min-height: 460px; } /* no necesita los 550px, queda muy alta */
		.res-card__title-display { font-size: clamp(1.9rem, 5vw, 50px); line-height: 1.08; }
	}

	/* 768–1024: las destacadas a 50/50 (la asimétrica 792:380 se aprieta de más en este rango) Y
	   las estándar a 2 columnas (por debajo de esto, <768, se apilan a 1 más abajo; en 1024+ ya
	   caen en la regla base de arriba, 3 columnas). */
	@media (48rem <= width < 64rem) {
		.resources-grid__row--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.resources-grid__row--standard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	/* Móvil (<768): todo a 1 columna. La fila destacada se apila, y al apilarse el contenido cae
	   sobre la imagen full-bleed → scrim para legibilidad. */
	@media (width < 48rem) {
		/* 72px (no 40px) — compensa el margin-top más chico (4rem) de .home-projects en este mismo
		   breakpoint (ver home-projects.css), así el gap contra la card que sobresale (-78px) se
		   mantiene ~58px, similar al de tablet/desktop, sin salto visual al cruzar 48rem. */
		.resources-grid { padding-bottom: 72px; }
		.resources-grid__row--featured,
		.resources-grid__row--standard { grid-template-columns: 1fr; }
		.res-card--featured { min-height: 26rem; }

		/* Scrim NEUTRO (blanco) sobre la mitad superior: como los textos de la card son oscuros
		   (#121212 / gris / azul), un velo blanco garantiza legibilidad sobre CUALQUIER imagen de
		   fondo (clara u oscura) — no depende de los tonos de la imagen. Solo cuando está apilada
		   (móvil); en desktop/tablet el contenido va sobre la zona despejada de la imagen. */
		.res-card--featured::before {
			content: '';
			position: absolute; inset: 0;
			z-index: 1; /* sobre la imagen (.res-card__bg z-index:0), bajo el contenido (z-index:2) */
			pointer-events: none;
			background: linear-gradient(180deg,
				rgba(255, 255, 255, .9) 0%,
				rgba(255, 255, 255, .72) 45%,
				rgba(255, 255, 255, 0) 100%);
		}
		.res-card--featured .res-card__content { position: relative; z-index: 2; }
		/* Botón con fondo translúcido como seguro: legible aunque caiga sobre una zona ocupada. */
		.res-card__btn {
			background: rgba(255, 255, 255, .55);
			-webkit-backdrop-filter: blur(2px);
			backdrop-filter: blur(2px);
		}
	}
}