/*
Theme Name: CJS - Coordinadora Juvenil Socialista
Theme URI: https://coordinadorajuvenilsocialista.local
Author: CJS
Description: Tema de bloques para la Coordinadora Juvenil Socialista. Basado en el Manual de Identidad Gráfica CJS.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cjs
*/

/* Page titles: a small kicker line (first word) over a much larger, heavier headline
   word - not just a weight contrast at the same size, a real scale jump (~3.7:1,
   matching the client's Photoshop comp) so the second word dominates the block. */
.wp-block-post-title {
	line-height: 1;
}

.wp-block-post-title .cjs-title-line {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-post-title .cjs-title-medium {
	font-weight: 500;
	line-height: 0.8;
	/* 170pt : 345pt in the client's comp - kicker is about half the headline size. */
	font-size: clamp(1.7rem, 12vw, 4.7rem);
	/* letter-spacing in em is inherited from the h1 as an already-computed px value
	   (based on the h1's own huge font-size), not re-relativized to this span's much
	   smaller size - re-declaring it here recomputes it against the right size,
	   instead of a value ~5-6x too aggressive that collided the letters together. */
	letter-spacing: -0.03em;
}

.wp-block-post-title .cjs-title-black {
	/* Flex (inherited from .cjs-title-line) makes the anonymous text box interact
	   unpredictably with clip-path/line-height - plain block content with
	   text-align crops exactly where expected, verified against an isolated
	   calibration test of the same glyph at the same font/weight. */
	display: block;
	text-align: center;
	font-weight: 800;
	/* A steep vw term (not just the min/max) so a short word like "Política" still
	   spans close to the full screen on mobile, instead of settling near the floor
	   the way a longer, one-line title would - the max keeps it in check past tablet
	   widths, where filling 90%+ of the width would be excessive. */
	font-size: clamp(3.2rem, 22vw, 9.5rem);
	letter-spacing: -0.03em;
	line-height: 1;
	/* Full, uncropped accent (Í) - a shard/crop treatment was tried and dropped. A
	   little breathing room keeps the accent from touching "Propuesta" above it. */
	margin-top: 0.06em;
}

/* Desktop: one clean single line ("Propuesta Política") at one uniform size,
   instead of the mobile kicker-over-headline pyramid - the two-tier contrast
   reads as fussy/cluttered once there's enough width to just say it plainly, and
   a single line lets the size be generous without feeling saturated. */
@media (min-width: 601px) {
	.wp-block-post-title {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: center;
		column-gap: 0.18em;
	}

	.wp-block-post-title .cjs-title-medium,
	.wp-block-post-title .cjs-title-black {
		font-size: clamp(3.4rem, 7.8vw, 8.5rem);
		font-weight: 800;
		line-height: 1;
		margin-top: 0;
	}
}


/* Front page: the icon mark is roughly square, unlike the wide wordmark it swaps
   for - left at the wordmark's width (100px), its height balloons to ~100px too,
   bloating the whole header. Pin it to (near) the wordmark's original height instead
   and let the width follow, so the header keeps its normal slim proportions. */
.cjs-header-logo img {
	width: auto;
	height: 34px;
}

/* The foto-texto patterns (Inicio page) give their text column generous left/right
   padding (spacing tokens 40/50 - 3rem/5rem) to breathe next to the photo on
   desktop. WP stacks columns to full-width below 782px but keeps that padding, so
   on mobile it ate nearly half the screen width and made every paragraph wrap
   after 2-3 words, reading like verse instead of prose. Drop it once stacked - the
   page's own outer margin already keeps the text off the edges. */
@media (max-width: 782px) {
	.wp-block-columns .wp-block-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

.cjs-footer-row {
	align-items: center;
}

.cjs-footer-row .wp-block-navigation .wp-block-navigation__container,
.cjs-footer-row .wp-block-navigation ul.wp-block-navigation__container {
	gap: 0.35rem !important;
}

.cjs-footer-row .wp-block-navigation-item {
	margin: 0 !important;
}

.cjs-footer-brand,
.cjs-footer-brand .wp-block-site-logo,
.cjs-footer-brand img {
	width: 100%;
	max-width: 220px;
	height: auto;
}

.cjs-social-square.wp-block-social-links {
	gap: 0.6rem;
}

.cjs-social-square .wp-social-link {
	background-color: transparent !important;
	border: 1.5px solid currentColor;
	border-radius: 0;
	margin: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cjs-social-square .wp-social-link a,
.cjs-social-square .wp-social-link .wp-block-social-link-anchor {
	color: inherit;
}

.cjs-social-square .wp-social-link:hover {
	background-color: var(--wp--preset--color--coral) !important;
	border-color: var(--wp--preset--color--coral);
}

.cjs-social-square .wp-social-link:hover svg {
	fill: var(--wp--preset--color--negro);
}

/* Mobile footer: the desktop row (space-between + wrap) lets the three groups wrap
   unpredictably at narrow widths - logo and "Navegación" ending up side by side at
   mismatched heights, "Redes" orphaned below. Force a clean single-column stack. */
@media (max-width: 600px) {
	.cjs-footer-row {
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: var(--wp--preset--spacing--30) !important;
	}

	.cjs-footer-brand,
	.cjs-footer-brand .wp-block-site-logo,
	.cjs-footer-brand img {
		max-width: 170px;
	}

	.cjs-footer-row .wp-block-navigation .wp-block-navigation__container,
	.cjs-footer-row .wp-block-navigation ul.wp-block-navigation__container {
		gap: 0.6rem !important;
	}
}

/* Keep the video hero flush against the header - no automatic gap before <main>. */
.wp-site-blocks > main {
	margin-top: 0 !important;
}

/* Background hero video: no picture-in-picture affordance. */
.wp-block-cover__video-background {
	pointer-events: none;
}
.wp-block-cover__video-background::-webkit-media-controls-picture-in-picture-button,
.wp-block-cover__video-background::-webkit-media-controls-overlay-play-button {
	display: none !important;
}

/* News cards: clamp every excerpt to the same number of lines so cards line up evenly. */
.cjs-news-excerpt p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	line-height: 1.45;
	min-height: calc(1.45em * 4);
}

.wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--coral);
	text-decoration: none;
	white-space: nowrap;
}

.wp-block-post-excerpt__more-link:hover {
	color: var(--wp--preset--color--coral-vivo);
}

/* Hero: animated "scroll down" cue over the video. */
.cjs-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: clamp(1.25rem, 4vh, 2.5rem);
	transform: translateX(-50%);
	color: var(--wp--preset--color--turquesa);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	z-index: 5;
	animation: cjs-bounce 1.8s ease-in-out infinite;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

/* Reserve room at the bottom of the hero content so the last line of text never
   sits right on top of the absolutely-positioned scroll-cue arrow, regardless of
   how tall the title/paragraph stack is at a given viewport. */
.cjs-page-hero .wp-block-cover__inner-container {
	padding-bottom: clamp(3rem, 9vh, 5rem);
}

.cjs-page-hero .wp-block-cover__image-background {
	filter: grayscale(1);
}

/* On the narrow mobile crop, the source photo's crowd/flags are centered further
   right - push the visible window as far left as the image allows so more of the
   left side (currently cropped off) shows instead. */
@media (max-width: 600px) {
	.cjs-page-hero .wp-block-cover__image-background {
		object-position: 0% 50%;
	}
}

.cjs-scroll-cue:hover {
	opacity: 1;
}

@keyframes cjs-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
	.cjs-scroll-cue { animation: none; }
}

/* Hero CTA button has custom white/negro colors set inline, which bypasses the global button hover swap - restore a hover state explicitly. */
.cjs-hero-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--coral) !important;
	color: var(--wp--preset--color--blanco) !important;
}

/* Keep the header reachable on every scroll, on every page and width - also what
   pins the coral bar (and its toggle icon) above the mobile dropdown overlay so it
   never gets buried under the dropdown card. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100001;
}

/* Desktop header nav only (the inline list, not the mobile dropdown, which no
   longer shares this breakpoint once collapsed to the hamburger): bigger link
   text, and "Propuesta política" (the current page on that page, but styled
   this way regardless of which item is current) reads as its own inverse-color
   button rather than plain text, echoing the site's coral/negro button swap. */
@media (min-width: 601px) {
	/* The icon is sized for a compact mobile bar (34px) - on a much wider desktop
	   header that reads as tiny next to the nav. Scale both the logo and the nav
	   words up together so the whole bar feels proportional, sitewide (every page
	   shares this header part, not just one page's template). */
	header.wp-block-template-part .wp-block-site-logo img {
		width: auto;
		height: 54px;
	}

	header.wp-block-template-part .wp-block-navigation-item__content {
		font-size: 1.15rem;
	}

	header.wp-block-template-part .current-menu-item > .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--negro);
		color: var(--wp--preset--color--coral) !important;
		padding: 0.5em 1.1em;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	header.wp-block-template-part .current-menu-item > .wp-block-navigation-item__content:hover {
		background-color: var(--wp--preset--color--negro-suave);
	}
}

@media (max-width: 600px) {
	/* The dropdown card is normal-flow content inside the close button's own
	   positioning wrapper, so pushing it down doesn't move the close button (it's
	   absolutely positioned against that wrapper's own top edge, not the card) -
	   this padding just opens a transparent gap the height of the header, letting
	   the header's real coral background show through instead of being covered.
	   Matches the icon-only header height (34px icon) sitewide now. */
	.wp-block-navigation__responsive-dialog {
		padding-top: 5.625rem;
	}
}


/* WordPress's own overlay stays full-viewport (position:fixed, escaping the tiny
   <nav> that would otherwise become its containing block) but we make IT invisible
   and only give the inner content wrapper the card look, top-aligned - so visually
   it reads as a compact dropdown starting under the header, not a full-screen takeover. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: transparent !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-height: 75vh;
	overflow-y: auto;
	background-color: var(--wp--preset--color--negro) !important;
	border-radius: 0 0 20px 20px;
	box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) !important;
	margin: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	background: transparent;
}

/* The WP core "justify right" layout (set for desktop) makes this a column flex
   with align-items:flex-end and an auto (roughly half) width - that's what was
   pinning every row to a narrow box on the right. Force it full-width and left. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	justify-content: flex-start !important;
	align-items: stretch !important;
	width: 100% !important;
	gap: 0 !important;
	counter-reset: cjs-nav-counter;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	counter-increment: cjs-nav-counter;
	margin: 0 !important;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: none;
}

/* Each row is its own full-bleed strip: the coral fill on press/hover runs edge to
   edge, like the "Nuestra propuesta" button, not just a line under the label. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex !important;
	align-items: center;
	width: 100%;
	color: var(--wp--preset--color--blanco) !important;
	font-size: clamp(1.5rem, 7vw, 2rem) !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	text-align: left !important;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
	box-sizing: border-box;
	background-color: transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Discreet numbered index - a small designed touch. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
	content: counter(cjs-nav-counter, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wp--preset--color--coral);
	margin-right: var(--wp--preset--spacing--20);
	flex-shrink: 0;
}

/* Arrow cue that slides in on press/hover, reinforcing the tap feedback. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "\2192";
	margin-left: auto;
	padding-left: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--negro);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Real tap feedback on touch devices, not just :hover - the whole strip goes
   coral, same treatment as the hero CTA button, not just a color/underline change. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--coral) !important;
	color: var(--wp--preset--color--negro) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible::before {
	color: var(--wp--preset--color--negro);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::after,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active::after,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/* Current page: the strip stays permanently filled coral, same language as the
   press state, instead of a thin underline beneath the label. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--coral) !important;
	color: var(--wp--preset--color--negro) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content::before {
	color: var(--wp--preset--color--negro);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: inherit !important;
	width: 28px;
	height: 28px;
}

/* WP core positions the close (X) button flush at top:0/right:0 of its dialog,
   ignoring the header's own padding - it ends up jammed in the literal corner,
   noticeably off from the logo's vertical center. Inset it by the same padding
   the header uses everywhere else so it lines up with the logo/hamburger row. */
.wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--30) !important;
	right: var(--wp--preset--spacing--30) !important;
}

/* WP core normally hides the hamburger simply because its default full-screen modal
   is opaque and paints over it - it never actually sets display:none. Since we made
   that overlay transparent (for the compact-dropdown look), the hamburger was left
   showing underneath the X. Hide it explicitly once its sibling dialog is open. */
.wp-block-navigation__responsive-container-open:has(~ .wp-block-navigation__responsive-container.is-menu-open) {
	display: none !important;
}

/* Real 3-line hamburger (WP core's default icon only draws 2 bars) built in pure
   CSS: two bars via pseudo-elements, the middle one via a background-image line,
   so it lines up perfectly without needing extra markup. */
.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open {
	position: relative;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 22px 2.5px;
	background-position: center;
}

.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 3px;
	right: 3px;
	height: 2.5px;
	background-color: currentColor;
}

.wp-block-navigation__responsive-container-open::before {
	top: 7px;
}

.wp-block-navigation__responsive-container-open::after {
	bottom: 7px;
}

/* The X (close) icon is WP core's own SVG - just line it up in the same box. */
.wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

/* Never let a transformed/glowing element force horizontal scroll on the whole page.
   Use `clip` rather than `hidden`: `hidden` turns html/body into real scroll
   containers (per spec, pairing a non-visible x-axis with a visible y-axis forces
   the y-axis to compute as `auto` too), which silently breaks `position: sticky`
   on the header. `clip` suppresses the overflow without creating that container. */
html, body {
	overflow-x: clip;
}

/* Propuesta política: the booklet mockup floats inside the reading column and the
   paragraph text wraps around its real silhouette (shape-outside reads the PNG's
   alpha channel) instead of sitting in its own isolated block below the copy. */
.cjs-mockup-flow {
	overflow: hidden; /* clip the glow, never the page */
}

.cjs-mockup-stage {
	position: relative;
	float: right;
	width: 44%;
	max-width: 300px;
	margin: 0 0 1rem 1.75rem;
	shape-outside: url("/wp-content/themes/cjs/assets/images/libreto-propuesta.png");
	shape-image-threshold: 0.3;
	shape-margin: 1rem;
}

.cjs-mockup-stage::before {
	content: "";
	position: absolute;
	inset: -20%;
	background: radial-gradient(circle, rgba(245, 73, 73, 0.25) 0%, rgba(245, 73, 73, 0) 70%);
	filter: blur(8px);
	z-index: -1;
}

.cjs-mockup-image {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 6px rgba(245, 73, 73, 0.08));
}

/* Tablet and up: give the mockup more room to breathe alongside the text. */
@media (min-width: 700px) {
	.cjs-mockup-stage {
		width: 38%;
		max-width: 340px;
		margin: 0 0 1rem 2.5rem;
	}
}

/* Phones: keep it inside the copy, just smaller - never its own isolated banner. */
@media (max-width: 480px) {
	.cjs-mockup-stage {
		width: 42%;
		max-width: 170px;
		margin: 0 0 0.75rem 1rem;
	}
}

/* Hueco provisional para las fotos y vídeos que todavía no están (Actualidad y
   tarjetas de noticias): mismo lenguaje que los huecos «FOTO HORIZONTAL» de Inicio. */
.cjs-provisional {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--20);
	border: 2px dashed var(--wp--preset--color--coral);
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
	line-height: 1.35;
}

.cjs-provisional strong {
	color: var(--wp--preset--color--coral);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-post-featured-image a:has(> .cjs-provisional) {
	display: block;
	text-decoration: none;
}

/* Actualidad: cronología por años (blocks/cronologia). */
.cjs-cronologia__anio + .cjs-cronologia__anio {
	margin-top: var(--wp--preset--spacing--50);
}

.cjs-cronologia__titulo {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--10);
	border-bottom: 3px solid var(--wp--preset--color--coral);
	color: var(--wp--preset--color--coral);
	font-size: var(--wp--preset--font-size--huge);
	line-height: 0.85;
}

.cjs-hito {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	padding-block: var(--wp--preset--spacing--30);
}

.cjs-hito + .cjs-hito {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cjs-hito__medios img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.cjs-hito__fecha {
	margin: 0 0 var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--turquesa);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.cjs-hito__titulo {
	margin: 0 0 var(--wp--preset--spacing--20);
	/* Grandes también en móvil (mín. ~34px): el título es lo primero que se lee de cada hito. */
	font-size: clamp(2.1rem, 3.8vw, 3.4rem);
	line-height: 0.92;
	text-wrap: balance;
}

.cjs-hito__titulo a {
	color: inherit;
	text-decoration: none;
}

.cjs-hito__titulo a:hover {
	color: var(--wp--preset--color--coral);
}

.cjs-hito__cuerpo > * {
	margin-block: 0 1em;
}

/* Galerías de los hitos: en la cronología sólo una fila de 3 miniaturas (la entrada las muestra todas).
   !important porque el CSS de la galería de WordPress usa :not(#individual-image), que pesa como un id. */
.cjs-hito__cuerpo .cjs-galeria > figure.wp-block-image:nth-of-type(n+4) {
	display: none !important;
}

.cjs-hito__mas {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cjs-hito__mas a {
	text-decoration: none;
}

@media (max-width: 782px) {
	.cjs-hito {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20);
	}

	/* En móvil, primero fecha y título; la foto debajo. */
	.cjs-hito__medios {
		order: 2;
	}
}

/* Inicio y Únete: datos de contacto y botones de descarga dentro del texto. */
.cjs-contacto p {
	margin: 0;
}

.cjs-contacto strong {
	color: var(--wp--preset--color--turquesa);
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Hero titles of a single word ("Contacto", "Actualidad"): with no second word or
   subtitle beside them they read as lost in the band, so they grow with the screen and
   with how short the word is. Acumin XC Black runs ~0.34em per capital: on phones
   229vw / letters lands the word near 78% of the width; on wider screens 190vw / letters
   (~65%), with a vh cap so it stays well inside the 60vh hero on wide, short screens and a
   rem cap for very large monitors. */
.cjs-page-hero .wp-block-post-title .cjs-title-black:only-child {
	font-size: calc(229vw / var(--cjs-letras, 8));
	line-height: 0.95;
	margin-top: 0;
}

@media (min-width: 601px) {
	.cjs-page-hero .wp-block-post-title .cjs-title-black:only-child {
		font-size: min(calc(190vw / var(--cjs-letras, 8)), 30vh, 20rem);
	}
}

/* Lema de la portada (bajo el logo): mientras esté vacío no ocupa sitio. */
.cjs-hero-lema:empty {
	display: none;
}

/* ===== TEMPORAL huelga 11N =====
   Accesos a https://comitesjuveniles11n.org: enlace destacado en el menú (cjs-nav-11n,
   en el menú «Menú principal»), acceso en la barra del móvil (parts/header.html) y botón
   grande en la portada (templates/front-page.html). Para quitarlos, borra esas tres piezas
   y este bloque. */

/* Menú de escritorio: recuadro negro con texto blanco, distinto de la pestaña activa (negro/coral). */
@media (min-width: 601px) {
	header.wp-block-template-part .cjs-nav-11n > .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--negro);
		color: var(--wp--preset--color--blanco) !important;
		padding: 0.5em 1.1em;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	header.wp-block-template-part .cjs-nav-11n > .wp-block-navigation-item__content:hover {
		background-color: var(--wp--preset--color--blanco);
		color: var(--wp--preset--color--negro) !important;
	}
}

/* Móvil: el menú se pliega en la hamburguesa, así que el acceso va aparte en la barra. */
.cjs-11n-movil {
	display: none;
}

@media (max-width: 600px) {
	header.wp-block-template-part .cjs-11n-movil {
		display: block;
		margin: 0 0 0 auto;
	}

	header.wp-block-template-part .cjs-11n-movil a {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-height: 2.6em;
		/* The condensed caps sit high in their line box: a little extra top padding
		   centers the letters themselves (not the accents) in the box. */
		padding: 0.25em 0.9em 0;
		background-color: var(--wp--preset--color--negro);
		color: var(--wp--preset--color--blanco);
		font-family: var(--wp--preset--font-family--heading);
		font-size: clamp(1rem, 4.6vw, 1.2rem);
		font-weight: 700;
		letter-spacing: 0.02em;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/* Dentro del desplegable ya está el acceso de la barra: no se repite. */
	.wp-block-navigation__responsive-container.is-menu-open .cjs-nav-11n {
		display: none !important;
	}
}

/* Portada: botón grande en coral sobre el vídeo, lo primero que se ve tras el logo.
   Dos líneas con contraste de grosor («Únete a los comités juveniles» en Black, «para la
   huelga general 11N» en Light) y la flecha a la derecha ocupando las dos. Movimiento:
   un destello que cruza el botón cada pocos segundos y la flecha que empuja hacia fuera. */
.cjs-11n-hero .wp-block-button__link {
	position: relative;
	overflow: hidden;
	display: inline-grid;
	grid-template-columns: auto auto;
	column-gap: 0.9em;
	align-items: center;
	text-align: left;
	background-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--blanco);
	padding: 0.75em 1.3em 0.8em;
	max-width: 36rem;
	box-shadow: 6px 6px 0 var(--wp--preset--color--blanco);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cjs-11n-hero__fuerte {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.7rem, 5.2vw, 2.6rem);
	line-height: 0.92;
	letter-spacing: -0.01em;
}

.cjs-11n-hero__suave {
	grid-column: 1;
	grid-row: 2;
	margin-top: 0.3em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	font-size: clamp(1rem, 2.6vw, 1.3rem);
	line-height: 1.1;
	letter-spacing: 0.06em;
}

/* Flecha: ocupa las dos líneas y empuja hacia la derecha. */
.cjs-11n-hero .wp-block-button__link::after {
	content: "\2192";
	grid-column: 2;
	grid-row: 1 / span 2;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(2rem, 6vw, 3rem);
	line-height: 1;
	animation: cjs-11n-empuje 1.6s ease-in-out infinite;
}

/* Destello diagonal que cruza el botón. */
.cjs-11n-hero .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
	transform: skewX(-20deg);
	pointer-events: none;
	animation: cjs-11n-destello 3.6s ease-in-out infinite;
}

.cjs-11n-hero .wp-block-button__link:hover,
.cjs-11n-hero .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--negro);
	box-shadow: 6px 6px 0 var(--wp--preset--color--coral);
	transform: translate(-2px, -2px);
}

@keyframes cjs-11n-empuje {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(6px); }
}

@keyframes cjs-11n-destello {
	0%, 55% { left: -60%; }
	100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
	.cjs-11n-hero .wp-block-button__link::after,
	.cjs-11n-hero .wp-block-button__link::before {
		animation: none;
	}

	.cjs-11n-hero .wp-block-button__link::before {
		display: none;
	}
}

/* Entrada suelta: si la imagen destacada es vertical (cjs-destacada-vertical, la pone
   functions.php), no ocupa todo el ancho: va pequeña a la derecha y el texto la rodea,
   para que el texto mande. La galería de debajo empieza siempre tras la foto. */
.wp-block-post-featured-image.cjs-destacada-vertical {
	float: right;
	width: min(32%, 300px);
	margin: 0.3rem 0 1.5rem 2rem !important;
}

/* El bloque que la contiene la abarca entera aunque el texto sea más corto que la foto. */
.wp-block-group:has(> .cjs-destacada-vertical) {
	display: flow-root;
}

.wp-block-post-featured-image.cjs-destacada-vertical img {
	width: 100%;
	height: auto;
}

.single .wp-block-post-content .cjs-galeria {
	clear: both;
}

@media (max-width: 600px) {
	.wp-block-post-featured-image.cjs-destacada-vertical {
		width: 45%;
		margin: 0.3rem 0 1rem 1rem !important;
	}
}

/* Entrada suelta: el texto manda; algo más grande que el del resto de la web. */
.single .wp-block-post-content > p {
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	line-height: 1.6;
}

/* Vídeos de los hitos: alojados en la web (los reproductores de Instagram incrustados no se ven en
   Firefox), verticales como en Instagram y con «Ver en Instagram» debajo. Uno al lado de otro si caben;
   en la cronología no se cargan: sólo los enlaces «▶ Vídeo» (blocks/cronologia). */
.cjs-videos {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40);
}

.cjs-videos .wp-block-video {
	flex: 0 1 340px;
	margin: 0;
}

.cjs-videos .wp-block-video.cjs-video-horizontal {
	flex: 1 1 560px;
	max-width: 760px;
}

.cjs-videos video {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
}

.cjs-videos figcaption {
	margin-top: 0.5rem;
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cjs-videos figcaption a {
	color: var(--wp--preset--color--turquesa);
	text-decoration: none;
}

.cjs-videos figcaption a::before {
	content: "↗ ";
}

.cjs-hito__cuerpo .cjs-videos {
	display: none;
}

.cjs-hito__videos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: var(--wp--preset--spacing--10) 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cjs-hito__videos a {
	color: var(--wp--preset--color--turquesa);
	text-decoration: none;
}

.cjs-hito__videos a:hover {
	color: var(--wp--preset--color--coral);
}

/* Inicio: los títulos de las secciones foto+texto (01–04) mandan sobre el texto. Antes iban al
   tamaño «large» de los h3 (1.5rem) y se perdían; ahora crecen con la pantalla. El número de la
   sección también gana peso. */
.home .wp-block-post-content h3.wp-block-heading {
	font-size: clamp(2.4rem, 4.6vw, 4.2rem);
	line-height: 0.92;
	letter-spacing: -0.02em;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--20);
	text-wrap: balance;
}

.home .wp-block-post-content h3.wp-block-heading + p {
	margin-top: 0;
}

.home .wp-block-post-content p.has-turquesa-color:first-child {
	font-size: clamp(1.2rem, 1.8vw, 1.6rem) !important;
	letter-spacing: 0.04em !important;
}

/* Inicio: fotos de las secciones 02 y 04 (sustituyen a los huecos provisionales). */
.cjs-foto-seccion img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Inicio: la sección 01 («¿Qué es la Coordinadora Juvenil Socialista?») es la presentación de la
   organización: más grande y con más aire que las demás. Es el primer bloque del contenido de Inicio. */
.home .wp-block-post-content > .wp-block-group:first-child {
	padding-block: var(--wp--preset--spacing--50);
}

.home .wp-block-post-content > .wp-block-group:first-child > * {
	max-width: 1180px;
}

.home .wp-block-post-content > .wp-block-group:first-child h3.wp-block-heading {
	font-size: clamp(3.4rem, 8vw, 8rem);
	line-height: 0.86;
	margin-bottom: var(--wp--preset--spacing--30);
}

.home .wp-block-post-content > .wp-block-group:first-child h3.wp-block-heading + p {
	font-size: clamp(1.45rem, 2.4vw, 2.2rem);
	line-height: 1.3;
	font-weight: 600;
}

.home .wp-block-post-content > .wp-block-group:first-child h3.wp-block-heading + p + p {
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	line-height: 1.6;
}

/* Bloque de la OES: texto y botón junto a su foto (más pequeña que las de las secciones). */
.cjs-oes .cjs-foto-seccion {
	margin: 0;
}