/*
 * Inspiraciones — catalog page (template-inspiraciones.php). Scoped under
 * .insp-cat, no global reset. Left sidebar of country accordions (big flags) +
 * a right grid of cards (image · data strip · title/desc/button). Matches the
 * site tokens: cream, espresso headings, navy accents, Playfair, 20px radii.
 */

.insp-cat,
.insp-cat *,
.insp-cat *::before,
.insp-cat *::after { box-sizing: border-box; }

.insp-cat {
	--ic-navy: #1c3f58;
	--ic-badge: #204782;
	--ic-ink: #3e2618;
	--ic-terra: #cf8a44;
	--ic-line: #e6ddcf;
	--ic-body: #4b5563;
	width: 100%;
	background: #f8eee7;
	font-family: var(--nk-font-sans);
	color: var(--ic-body);
	padding-top: 96px; /* clear the fixed site header (light variant) */
	padding-bottom: 72px;
}

/* With the cinematic hero above, the header is already cleared and the title
   lives in the hero — the grid starts right after it. Doubled class so it also
   beats the 140px desktop rule further down. */
.insp-cat.insp-cat--hero { padding-top: 40px; }

.insp-cat__container {
	width: 100%;
	max-width: 96rem; /* wider than the 80rem site grid so the cards don't crowd next to the sidebar */
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* ── Head ── */
.insp-cat__head { padding: 20px 0 26px; }
.insp-cat__title {
	margin: 0 0 8px;
	color: var(--ic-ink);
	font-family: 'Playfair Display', serif !important;
	font-weight: 500;
	font-size: 2.25rem;
	line-height: 1.1;
}
.insp-cat__lead {
	margin: 0;
	max-width: 60ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(28, 63, 88, 0.75);
}

/* ── Layout ── */
.insp-cat__layout {
	display: grid;
	grid-template-columns: 252px 1fr;
	gap: 38px;
	align-items: start;
}

/* ── Sidebar ── */
.insp-cat__side { position: -webkit-sticky; position: sticky; top: 96px; }
.insp-cat__toggle { display: none; }
.insp-cat__side-title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ic-terra);
}

.insp-cat__all {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	padding: 11px 12px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ic-ink);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.insp-cat__all:hover { background: rgba(28, 63, 88, 0.05); }
.insp-cat__all.is-active { background: var(--ic-navy); color: #fff; }
.insp-cat__all.is-active:hover { background: var(--ic-navy); }

/* Una fila por país. El desplegable de lugares se retiró (ago 2026), así que
   ya no hay estado "abierto": el país elegido se marca con el relleno suave que
   antes daba la fila desplegada, que era lo que hacía visible la selección.

   El padding vertical es lo que despega la línea de los botones: sin él el
   relleno redondeado del hover/activo llegaba a tocar la hairline y el redondeo
   se perdía justo donde más se nota. 6px arriba y abajo = 12px de aire a cada
   lado de cada separador. */
.insp-cat__acc { border-bottom: 1px solid var(--ic-line); padding: 6px 0; }
.insp-cat__acc:last-of-type { border-bottom: 0; }

.insp-cat__country {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	padding: 12px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ic-ink);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.insp-cat__country:hover { background: rgba(28, 63, 88, 0.05); color: var(--ic-terra); }
.insp-cat__country.is-active {
	background: rgba(207, 138, 68, 0.14);
	color: #a5641f;
}
.insp-cat__country.is-active:hover { background: rgba(207, 138, 68, 0.2); color: #a5641f; }
/* Las banderas salieron de los filtros: el nombre del país arranca ahora en el
   padding del botón (12px), y el sangrado de los lugares se recalculó abajo
   (era 52px = 12 padding + 28 de la bandera + 12 de gap). */
.insp-cat__cname { flex: 1; }
.insp-cat__cv { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Results bar ── */
.insp-cat__bar { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.insp-cat__crumb { font-family: 'Playfair Display', serif !important; font-size: 20px; color: var(--ic-ink); }
.insp-cat__count { font-size: 13px; color: rgba(28, 63, 88, 0.6); }

/* ── Grid + card (S4) ── */
.insp-cat__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr); /* fixed 3 columns so cards stay roomy, not crowded */
}
@media (max-width: 1024px) {
	.insp-cat__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.insp-cat__grid { grid-template-columns: 1fr; }
}
.insp-cat__card {
	display: flex;
	flex-direction: column;
	background: #fbf4ea;
	border: 1px solid var(--ic-line);
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.insp-cat__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(62, 38, 24, 0.12); }

.insp-cat__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #e5e7eb center / cover no-repeat;
}
/* Badges con el código de cada país (AR, CL, BR, AQ), en el sitio donde antes
   iba la bandera. Los programas que cruzan frontera llevan dos placas seguidas,
   así que quien posiciona es el contenedor y cada placa se apila en fila.
   Placa blanca sobre la foto con el texto en navy de marca; el ancho lo marca el
   contenido, así que un código de 2 letras también queda bien. */
.insp-cat__cbadges {
	position: absolute;
	z-index: 2;
	top: 14px;
	left: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	/* El contenedor no puede pasar del ancho de la foto menos los 14px de cada
	   lado: con tres países (hoy no los hay, pero el dato viene de la taxonomía)
	   las placas bajan de línea en vez de desbordar la tarjeta. */
	max-width: calc(100% - 28px);
}
.insp-cat__cbadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 26px;
	padding: 0 9px;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	color: var(--ic-navy);
	font-family: var(--nk-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
}

/* Etiqueta de marketing ("Popular", "Novedad", "Bucket list"): la MISMA píldora
   que lleva la tarjeta del carrusel de la home (.inprodi-card__badge), con sus
   mismos valores. Aquí va arriba a la DERECHA: la izquierda ya la ocupan las
   placas de país, y así las dos conviven sin pisarse aunque el programa cruce
   frontera y lleve dos códigos. */
.insp-cat__badge {
	position: absolute;
	z-index: 2;
	top: 14px;
	right: 14px;
	max-width: calc(100% - 28px);
	padding: 6px 14px;
	border-radius: 999px;
	background-color: #204782;
	color: #ffffff;
	font-family: var(--nk-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.insp-cat__strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid #f0e9df;
}
.insp-cat__cell { padding: 12px 8px; text-align: center; }
.insp-cat__cell + .insp-cat__cell { border-left: 1px solid #f0e9df; }
.insp-cat__lab {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ic-body);
	opacity: 0.7;
	margin-bottom: 3px;
}
.insp-cat__val {
	font-size: 15px;
	font-weight: 600;
	color: var(--ic-ink);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	justify-content: center;
	line-height: 1.2;
}
.insp-cat__bed { width: 15px; height: 15px; flex-shrink: 0; color: var(--ic-navy); }

.insp-cat__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.insp-cat__ctitle {
	margin: 0;
	font-family: 'Playfair Display', serif !important;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.22;
	color: var(--ic-ink);
}
.insp-cat__cdesc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ic-body);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Ocre de marca, el MISMO token que el botón sólido de la ficha de inspiración
   (.insp-btn--solid en inspiracion-single.css). Antes era el navy --ic-navy, y
   el visitante se encontraba un botón azul en el catálogo y uno ocre al entrar
   en la inspiración. El token vive en style.css (:root), así que cambiar el
   color de botón del sitio ya alcanza a los dos sitios a la vez.
   OJO: esto es el CTA de la tarjeta. El relleno del filtro de la izquierda es
   otra cosa —un estado de selección, no un botón— y se queda como está. */
.insp-cat__btn {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 12px;
	background: var(--nk-btn, #a16921);
	border: 1px solid var(--nk-btn, #a16921);
	color: var(--nk-btn-ink, #fff);
	font-size: 13.5px;
	font-weight: 400;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* La tarjeta entera es el elemento con el que se interactúa (por eso la flecha
   se mueve al pasar por encima de la tarjeta, no del botón): el oscurecido del
   hover sigue el mismo criterio. */
.insp-cat__btn:hover,
.insp-cat__card:hover .insp-cat__btn {
	background: var(--nk-btn-hover, #8e5c1d);
	border-color: var(--nk-btn-hover, #8e5c1d);
}
.insp-cat__btn .insp-cat__cv { transition: transform 0.3s ease; }
.insp-cat__card:hover .insp-cat__btn .insp-cat__cv { transform: translateX(3px); }

.insp-cat__empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--ic-body); }

/* ── Responsive ── */
@media (min-width: 640px) {
	.insp-cat__container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
	.insp-cat { padding-top: 140px; }
	.insp-cat__side { top: 120px; }
	.insp-cat__container { padding-left: 2rem; padding-right: 2rem; }
	.insp-cat__title { font-size: 3rem; }
}

/* Sidebar collapses into a toggle below md */
@media (max-width: 860px) {
	.insp-cat__layout { grid-template-columns: 1fr; gap: 18px; }
	.insp-cat__side { position: static; }
	.insp-cat__toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		justify-content: center;
		padding: 12px;
		border: 1px solid var(--ic-line);
		border-radius: 10px;
		background: #fbf4ea;
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		color: var(--ic-ink);
		cursor: pointer;
	}
	.insp-cat__panel { display: none; margin-top: 12px; }
	.insp-cat__side.is-open .insp-cat__panel { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.insp-cat__card,
	.insp-cat__all,
	.insp-cat__country,
	.insp-cat__btn,
	.insp-cat__btn .insp-cat__cv { transition: none; }
}

/* ── CTA pre-footer (home-CTA base) ─────────────────────────────────────── */
.ic-cta { position: relative; min-height: 56vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 24px 100px; overflow: hidden; background: #f8eee7 center/cover no-repeat; }
/* Fade lands on FLAT cream at 88% so the last ~12% already matches the footer — no visible seam. */
.ic-cta__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.22) 34%, rgba(0,0,0,0.10) 50%, rgba(248,238,231,0.18) 60%, rgba(248,238,231,0.42) 68%, rgba(248,238,231,0.66) 75%, rgba(248,238,231,0.85) 81%, rgba(248,238,231,0.96) 85%, #f8eee7 88%, #f8eee7 100%); }
/* Flat cream strip meeting the footer — insurance against gradient banding. */
.ic-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background-color: #f8eee7; z-index: 1; pointer-events: none; }
.ic-cta__inner { position: relative; z-index: 2; color: #fff; max-width: 620px; display: flex; flex-direction: column; align-items: center; }
.ic-cta__eyebrow { margin: 0 0 10px; font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.85); text-shadow: 0 2px 12px rgba(0,0,0,0.42); }
.ic-cta__title { margin: 0; font-family: 'Geist', sans-serif !important; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; font-size: clamp(28px, 4vw, 44px); line-height: 1.18; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.42); }
.ic-cta__desc { margin: -6px 0 0; font-family: 'Angelface', cursive; -webkit-text-stroke: 0.6px currentColor; color: rgba(255,255,255,0.95); text-shadow: 0 2px 12px rgba(0,0,0,0.42); font-size: clamp(26px, 3.2vw, 32px); line-height: 1.35; }
.ic-cta__mark { display: block; max-height: 76px; width: auto; margin: 26px auto 0; opacity: 0.95; filter: brightness(0) invert(1); pointer-events: none; user-select: none; }
.ic-cta__btn { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 12px; background: var(--nk-btn, #a16921); border: 1px solid var(--nk-btn, #a16921); color: var(--nk-btn-ink, #fff); box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-family: 'Jost', sans-serif; font-size: 15px; letter-spacing: 0.06em; text-decoration: none; transition: background-color 0.3s ease; }
.ic-cta__btn:hover { background: var(--nk-btn-hover, #8e5c1d); border-color: var(--nk-btn-hover, #8e5c1d); }
.ic-cta__btn svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.ic-cta__btn:hover svg { transform: translateX(3px); }