/*
Theme Name: Víctor Benavides
Theme URI: /
Author: Víctor Benavides
Description: Tema de bloques (Full Site Editing) para el portfolio de Víctor Benavides, director de fotografía. Fondo lino, titulares en Playfair Display, fichas de película como entradas y una plantilla común por sección. Sin dependencias de plugins.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: victorbenavides
Tags: full-site-editing, block-patterns, portfolio, one-column, custom-colors
*/

/*
 * Solo lo que theme.json no puede expresar: efectos al pasar el ratón,
 * zoom de fotos, flechas animadas, laureles y el orden alterno de filas.
 * Todo se activa con clases CSS que se asignan al bloque en
 * Avanzado → Clases CSS adicionales.
 */

/* Foco: solo al navegar con teclado (:focus-visible, nunca :focus a secas).
 * Enlaces de texto y del menú: subrayado de 2 px en ladrillo, separado 6 px
 * (el color del texto no cambia: el ladrillo marca la sección actual).
 * Botones y enlaces con imagen: contorno fino de 1,5 px que sigue su forma. */
:root a:where(:not(.wp-element-button)):focus-visible {
	outline: none;
	text-decoration-line: underline;
	text-decoration-color: var(--wp--preset--color--ladrillo);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
:root :where(button, summary, .wp-element-button, [tabindex]:not(a)):focus-visible,
:root a:where(:not(.wp-element-button)):has(img):focus-visible {
	outline: 1.5px solid var(--wp--preset--color--ladrillo);
	outline-offset: 3px;
}
/* Sobre la foto de la portada el contorno va en hueso para que se vea. */
:root .wp-block-cover .wp-element-button:focus-visible {
	outline-color: var(--wp--preset--color--hueso);
}

/* Sección actual en el menú (escritorio y móvil). En la página de la sección
 * WordPress no marca los enlaces personalizados, así que functions.php añade
 * al body la clase vb-seccion-<slug> en la sección y en sus fichas. */
.vb-seccion-largometrajes .wp-block-navigation a[href$="/trabajo/largometrajes/"],
.vb-seccion-segunda-unidad .wp-block-navigation a[href$="/trabajo/segunda-unidad/"],
.vb-seccion-cortometrajes .wp-block-navigation a[href$="/trabajo/cortometrajes/"],
.vb-seccion-spots .wp-block-navigation a[href$="/trabajo/spots/"],
.vb-seccion-contacto .wp-block-navigation a[href$="/contacto/"],
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a[aria-current] {
	color: var(--wp--preset--color--ladrillo);
}

/* Cabecera fija al hacer scroll (el ajuste "pegajoso" del editor solo
 * funciona en bloques de primer nivel, no dentro de una parte de plantilla). */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* .vb-zoom — Imagen o Imagen destacada: zoom suave al pasar el ratón. */
.vb-zoom {
	overflow: hidden;
}
.vb-zoom img {
	transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.vb-zoom:hover img,
.vb-tarjeta:hover .vb-zoom img,
.vb-fila:hover .vb-zoom img {
	transform: scale(1.035);
}

/* .vb-flecha — Párrafo con enlace: añade una flecha que avanza al pasar el ratón.
 * Sin subrayado: la flecha ya indica que es un enlace (el foco visible se mantiene). */
.vb-flecha a {
	text-decoration: none;
}
.vb-flecha a::after {
	content: "→";
	display: inline-block;
	margin-left: .4em;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.vb-flecha a:hover::after,
.vb-fila:hover .vb-flecha a::after {
	transform: translateX(8px);
}

/* .vb-fila — Columnas de la portada; .vb-fila-invertida pone la foto a la derecha en escritorio. */
@media (min-width: 782px) {
	.vb-fila-invertida {
		flex-direction: row-reverse;
	}
}
.vb-fila .wp-block-heading a,
.vb-tarjeta .wp-block-post-title a {
	transition: color .3s;
}
.vb-fila:hover .wp-block-heading a {
	color: var(--wp--preset--color--ladrillo);
}

/* .vb-portada — Portada del reel: en móvil, menos alto para que la foto
 * panorámica no se recorte tanto (el valor de escritorio sigue en el bloque). */
@media (max-width: 781px) {
	.wp-block-cover.vb-portada {
		min-height: 70vh !important;
		min-height: 70svh !important;
	}
}

/* .vb-reproducir — Botón del reel: círculo con triángulo de reproducción. */
.vb-reproducir .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: .75em;
	border-style: solid;
	border-width: .45em 0 .45em .75em;
	border-color: transparent transparent transparent currentColor;
	vertical-align: -.05em;
}

/* Grupo con estilo "Premio con laurel": laurel a ambos lados. */
.is-style-premio {
	position: relative;
	text-align: center;
}
.is-style-premio::before,
.is-style-premio::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 30px;
	height: 76px;
	margin-top: -38px;
	background: url("assets/images/laurel.svg") no-repeat center / contain;
}
.is-style-premio::before {
	left: 0;
}
.is-style-premio::after {
	right: 0;
	transform: scaleX(-1);
}

/* .vb-lista-limpia — Lista sin viñetas, con línea fina entre elementos. */
.vb-lista-limpia {
	list-style: none;
}
.vb-lista-limpia li {
	padding-block: .6rem;
	border-top: 1px solid var(--wp--preset--color--borde);
}
.vb-lista-limpia li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

/* Evita desbordes horizontales con títulos largos en móvil. */
.wp-block-post-title,
.wp-block-heading {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* .vb-video-modal — Botón o párrafo con enlace a Vimeo: abre el vídeo en una
 * ventana flotante (assets/js/video-modal.js). La ventana la crea el script. */
.vb-video-dialog {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 72px clamp(16px, 4vw, 56px) clamp(16px, 4vw, 56px);
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--hueso);
}
.vb-video-dialog[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: vb-video-entrada .25s ease-out;
}
.vb-video-dialog::backdrop {
	background: rgba(26, 25, 22, .92); /* tinta */
}
.vb-video-dialog__marco {
	width: min(100%, calc((100dvh - 144px) * 16 / 9), 1600px);
	aspect-ratio: 16 / 9;
	background: #000;
}
.vb-video-dialog__marco iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.vb-video-dialog__cerrar {
	position: absolute;
	top: 16px;
	right: clamp(16px, 4vw, 56px);
	min-width: 44px;
	min-height: 44px;
	padding: .5rem 1rem;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--hueso);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}
.vb-video-dialog__cerrar:hover {
	background: var(--wp--preset--color--hueso);
	color: var(--wp--preset--color--tinta);
}
.vb-video-dialog :focus-visible {
	outline: 1.5px solid var(--wp--preset--color--hueso);
	outline-offset: 3px;
}
html:has(.vb-video-dialog[open]) {
	overflow: hidden;
}
@media (max-width: 781px) {
	/* Móvil: vídeo a todo el ancho. */
	.vb-video-dialog {
		padding-inline: 0;
	}
	.vb-video-dialog__cerrar {
		right: 16px;
	}
}
@media (max-height: 500px) and (orientation: landscape) {
	/* Móvil en horizontal: el vídeo usa todo el alto; «Cerrar» va a un lado. */
	.vb-video-dialog {
		padding: 8px 100px;
	}
	.vb-video-dialog__marco {
		width: min(100%, calc((100dvh - 16px) * 16 / 9));
	}
	.vb-video-dialog__cerrar {
		top: 8px;
		right: 8px;
	}
}
@keyframes vb-video-entrada {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vb-zoom img,
	.vb-flecha a::after {
		transition: none;
	}
	.vb-video-dialog[open] {
		animation: none;
	}
}