/*
 * Blocs concrets del contingut.
 *
 * AQUEST FITXER ES CARREGA DUES VEGADES, com contingut.css: al web i dins de
 * l'editor de wp-admin. Són coses que l'editora insereix i mou, i que per tant
 * ha de veure mentre escriu tal com sortiran publicades.
 *
 * ── Per què no va al style.css ─────────────────────────────────────────────
 * El style.css és el CHROME: capçalera, peu, llistats, botons de descàrrega.
 * Coses que envolten el contingut i que l'editora no veu mai des de l'editor.
 * La convocatòria no és chrome: és un grup de blocs que viu dins de la portada,
 * a la base de dades. Si el seu estil es queda al style.css, a l'editor surt
 * com tres paràgrafs solts i no s'assembla gens al que es publica.
 *
 * ── Per què no va al contingut.css ─────────────────────────────────────────
 * Aquell fitxer és només ritme vertical amb selectors d'element, i aquí hi ha
 * famílies, mides i colors. Barrejar-los faria que cap dels dos tingués una
 * regla clara sobre què hi cap.
 *
 * ── Què s'hi pot posar i què no ────────────────────────────────────────────
 * L'editor anteposa `.editor-styles-wrapper` a cada selector. Això vol dir que
 * aquí SÍ que es poden fer servir classes, però només les que existeixen DINS
 * del contingut (`.convocatoria`, `.wp-block-separator`). Una classe del
 * chrome com `.comunicat` o `.site` no existeix a l'editor i la regla no
 * enganxaria mai.
 *
 * Els colors i les mides s'invoquen per variable de theme.json, mai per valor.
 */

/* ── La convocatòria ────────────────────────────────────────────────────────
   El bloc del 3 d'octubre, maquetat com el cartell. El TEXT viu a la portada,
   a la base de dades (el sembra el mu-plugin el primer cop): l'editora en pot
   corregir l'hora, o esborrar-lo el 4 d'octubre, sense esperar cap
   desplegament. Aquí només hi ha com es veu. */

.convocatoria {
	margin: 0 0 3.5rem;
	padding: 1.25rem 0 1.5rem;
	border-top: var(--wp--custom--filet, 4px) solid var(--wp--preset--color--burdeus, #9e303e);
	border-bottom: var(--wp--custom--filet, 4px) solid var(--wp--preset--color--burdeus, #9e303e);
	text-align: center;
}

.convocatoria > * {
	margin-block: 0;
}

/* El títol del bloc («Manifestació»). L'h2 ja ve condensat, en caixa alta i
   burdeus de theme.json: aquí només se n'ajusta l'aire. */
.convocatoria h2 {
	margin-bottom: 0.75rem;
}

.convocatoria-quan {
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--burdeus, #9e303e);
	font-family: var(--wp--custom--familia--titol);
	font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--burdeus, #9e303e);
}

.convocatoria-on {
	margin-top: 0.35rem;
	font-family: var(--wp--custom--familia--titol);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--burdeus, #9e303e);
}

/* ── El separador ──────────────────────────────────────────────────────────
   El bloc «Separador» del nucli arriba amb `.wp-block-separator` i unes regles
   pròpies que guanyen per especificitat a l'`hr` del contingut.css. Aquí se'l
   torna a deixar com el filet del cartell.

   El `!important` és de les poques vegades que es justifica: el nucli fixa
   `border-top: none` en una regla amb la mateixa especificitat que aquesta, i
   sense això mig filet desapareix segons l'ordre de càrrega. */

.wp-block-separator {
	max-width: var(--wp--style--global--content-size, 38rem);
	margin: 3rem auto;
	border: 0;
	border-top: var(--wp--custom--filet, 4px) solid var(--wp--preset--color--burdeus, #9e303e) !important;
	opacity: 1;
}

/* ── Vídeos incrustats ──────────────────────────────────────────────────────
   Els vídeos d'Abel Cutillas no s'allotgen aquí: són a YouTube i s'incrusten
   amb el bloc «Incrusta». La raó és de capacitat, no de gust — un vídeo de
   128 MB equival a 3.200 visites de portada, i el dia del pic això tomba
   l'allotjament compartit.

   La proporció la resol el nucli: el tema declara `responsive-embeds` i
   WordPress hi posa les classes `wp-embed-aspect-16-9` i `wp-has-aspect-ratio`.
   Aquí només hi ha l'aire i el peu.

   Va a blocs.css i no al style.css perquè és un bloc que insereix l'editora, i
   l'ha de veure igual mentre escriu. */

.wp-block-embed {
	margin: 2.5rem 0;
}

/* El botó que substitueix l'iframe fins que algú hi clica (vegeu
   inc/video.php). Ocupa exactament el mateix espai que ocuparà el reproductor,
   perquè en clicar-hi la pàgina no faci cap salt. */

.video-sota-demanda {
	margin: 2.5rem 0;
}

.video-obre {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 1.5rem;
	border: 2px solid var(--wp--preset--color--burdeus, #9e303e);
	background: none;
	color: var(--wp--preset--color--burdeus, #9e303e);
	font-family: var(--wp--custom--familia--titol);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.video-obre:hover,
.video-obre:focus-visible {
	background: var(--wp--preset--color--burdeus, #9e303e);
	color: #fff;
}

/* El triangle de reproducció, dibuixat amb vores: ni imatge ni SVG per a una
   forma que són tres línies de CSS. */
.video-play {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1.6rem 0 1.6rem 2.6rem;
	border-color: transparent transparent transparent currentColor;
}

.video-sense-js {
	margin: 1rem 0 0;
	text-align: center;
}

.wp-block-embed iframe,
.video-sota-demanda iframe {
	display: block;
	width: 100%;
	/* Xarxa de seguretat: si per algun motiu no arriben les classes de
	   proporció del nucli, l'iframe es queda en 16:9 igualment en comptes de
	   caure als 150 px d'alçada que porta per defecte. */
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.wp-block-embed figcaption {
	margin-top: 0.6rem;
	text-align: center;
}

/* ── L'adreça de contacte ───────────────────────────────────────────────────
   És l'única cosa que algú ve a buscar en aquella pàgina: que es vegi d'una
   ullada i sigui prou grossa per encertar-hi el dit al mòbil. */

.contacte-adreca {
	margin: 2rem 0;
	font-family: var(--wp--custom--familia--titol);
	font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
}

/* Al mòbil, la mateixa retallada d'espai vertical que fa style.css a la resta:
   els 3,5 rem de sota la convocatòria són una respiració en pantalla ampla i
   un forat en un telèfon. */
@media (max-width: 40rem) {
	.convocatoria {
		margin-bottom: 2rem;
		padding: 1rem 0 1.25rem;
	}
}