/*
 * Structural styling for the lists the plugin renders through shortcodes.
 *
 * Only what the markup needs to stop looking like a default browser list: no
 * bullets, no stray indentation, laurels in a row, and the colour of the kit
 * rather than the browser's near-black default, which is unreadable on this
 * site's background.
 *
 * The selectors are doubled up on purpose. Elementor ships `.elementor img` and
 * `.elementor a`, which are more specific than a lone class and would otherwise
 * win — repeating the block class beats them without resorting to !important.
 */

/*
 * Every list the plugin renders takes the kit's «Text» typography and colour.
 *
 * Inheriting is not enough: Hello Elementor leaves the kit's font on the body
 * alone, so anything that only inherits comes out in the browser's own face at
 * 16px and in #333 — a near-black that is unreadable on this site's black
 * background. The variables are the same ones the kit hands its own widgets, so
 * changing the kit still changes these.
 */
.testaferro-filmography,
.testaferro-awards,
.testaferro-laurels,
.testaferro-selections,
.testaferro-supporters,
.testaferro-crew,
.testaferro-funding,
.testaferro-languages {
	font-family: var(--e-global-typography-text-font-family, inherit);
	font-size: var(--e-global-typography-text-font-size, inherit);
	font-weight: var(--e-global-typography-text-font-weight, inherit);
	color: var(--e-global-color-text, inherit);
}

/* And no list of ours keeps the browser's bullets or its 40px of indentation. */
.testaferro-filmography,
.testaferro-awards,
.testaferro-laurels,
.testaferro-selections,
.testaferro-supporters,
.testaferro-languages {
	margin: 0;
	padding: 0;
	list-style: none;
}

.testaferro-filmography .testaferro-filmography__item,
.testaferro-awards .testaferro-award {
	margin: 0;
	color: inherit;
}

.testaferro-filmography .testaferro-filmography__link {
	color: inherit;
	text-decoration: underline;
}

/* The laurels sit side by side, as they do on every card of the design. */
.testaferro-laurels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

.testaferro-laurels .testaferro-laurels__item {
	margin: 0;
	line-height: 0;
}

/* One shared height keeps logos of very different proportions in line. */
.testaferro-laurels .testaferro-laurels__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--testaferro-laurel-height, 34px);
	object-fit: contain;
}

/* ---- Film sheet ---- */

.testaferro-selections,
.testaferro-supporters {
	margin-bottom: 2rem;
}

.testaferro-selections .testaferro-selection {
	margin: 0 0 2rem;
}

.testaferro-selections .testaferro-selection:last-child {
	margin-bottom: 0;
}

.testaferro-selection__festival {
	margin: 0 0 0.75rem;
	font-size: inherit;
	text-transform: uppercase;
}

.testaferro-selection__section,
.testaferro-selection__where,
.testaferro-selection__award {
	margin: 0;
}

.testaferro-selection__award {
	font-style: italic;
}

/* Crew: role on the left, name on the right, as two aligned columns. */
.testaferro-crew {
	margin: 0;
}

.testaferro-crew__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin: 0 0 0.75rem;
}

.testaferro-crew__role {
	flex: 0 0 16rem;
	margin: 0;
	font-weight: inherit;
	text-transform: uppercase;
}

.testaferro-crew__name {
	margin: 0;
}

.testaferro-funding__block {
	margin: 0 0 2rem;
}

.testaferro-funding__block:last-child {
	margin-bottom: 0;
}

.testaferro-funding__heading {
	margin: 0 0 0.5rem;
	font-size: inherit;
	text-transform: uppercase;
}

.testaferro-funding__body {
	margin: 0;
}

.testaferro-supporters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
}

.testaferro-supporters .testaferro-supporters__item {
	margin: 0;
	line-height: 0;
}

.testaferro-supporters .testaferro-supporters__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--testaferro-supporter-height, 44px);
	object-fit: contain;
}

/* ---- Gallery ---- */

/*
 * One photograph at full width and a strip of the others under it, the way the
 * «Galeria» component of the design is built. Picking one from the strip swaps
 * it with the big one; the script does the moving, this only says how each of
 * the two places looks.
 */
.testaferro-gallery {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.testaferro-gallery .testaferro-gallery__stage {
	display: block;
	line-height: 0;
	cursor: zoom-in;
}

.testaferro-gallery .testaferro-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

/*
 * The strip is one row that scrolls sideways, so a project with twenty stills
 * keeps the height the design draws. Each thumbnail is a quarter of the row
 * minus its share of the gaps, which is what puts four of them across.
 */
.testaferro-gallery .testaferro-gallery__strip {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.testaferro-gallery .testaferro-gallery__item {
	flex: 0 0 calc((100% - 1.5rem) / 4);
	margin: 0;
	scroll-snap-align: start;
}

/* The thumbnail is a button, so its own chrome has to go. */
.testaferro-gallery .testaferro-gallery__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
	aspect-ratio: 16 / 9;
}

.testaferro-gallery .testaferro-gallery__thumb:hover .testaferro-gallery__image,
.testaferro-gallery .testaferro-gallery__thumb:focus-visible .testaferro-gallery__image {
	opacity: 0.75;
}

/*
 * The slides are what the lightbox walks through, and they keep the stills in
 * the order they were uploaded no matter how the strip has been shuffled.
 * Nobody is meant to see them.
 */
.testaferro-gallery .testaferro-gallery__slide {
	display: none;
}

@media (max-width: 767px) {
	.testaferro-gallery .testaferro-gallery__item {
		flex-basis: calc((100% - 0.5rem) / 2);
	}

	.testaferro-crew__role {
		flex-basis: 100%;
	}
}

/* ---- Empty sections ---- */

/*
 * A list that has nothing to render leaves an invisible marker behind, and the
 * section around it disappears — heading included. Without this, a project with
 * no team still prints the word EQUIPO over a gap, because the heading is a
 * separate Elementor widget that knows nothing about the field.
 *
 * The section is whatever ancestor carries `testaferro-section`; that class is
 * set on the container in Elementor, so the rule never has to guess at the
 * page's structure.
 *
 * A section made of several lists needs the other pair, because there the two
 * questions come apart: one list being empty must not take the rest of the
 * section down with it. `testaferro-group` waits for the marker that
 * `[testaferro_requires]` leaves, which is only there once every field the
 * section is made of is empty.
 *
 * The editor is exempt: inside Elementor every section has to stay reachable,
 * even while previewing a project that has nothing in it.
 */
.testaferro-empty,
.testaferro-missing {
	display: none;
}

body:not(.elementor-editor-active) .testaferro-section:has(.testaferro-empty),
body:not(.elementor-editor-active) .testaferro-group:has(.testaferro-missing) {
	display: none;
}

/*
 * And the case where there is no container to mark: an encabezado sitting
 * straight before its own list, with nothing wrapping the pair.
 *
 * That is how the filmmaker sheet is laid out — heading, shortcode, heading,
 * shortcode, all of them siblings— and PREMIOS was printed over a gap on every
 * filmmaker with no awards. Wrapping each pair in a container of its own would
 * have meant rebuilding the client's layout and its spacing; this reads the
 * same relationship straight from the markup.
 *
 * It only ever hides a heading, and only when the very next widget is a
 * shortcode of ours that rendered nothing.
 */
body:not(.elementor-editor-active)
	.elementor-widget-heading:has(+ .elementor-widget-shortcode .testaferro-empty) {
	display: none;
}

/* ---- Teaser ---- */

/* The provider's player comes at its own size; this holds it to the column. */
.testaferro-trailer {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.testaferro-trailer iframe,
.testaferro-trailer video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.testaferro-trailer__fallback {
	margin: 0;
	color: var(--e-global-color-text, inherit);
}

/* ---- Language switcher ---- */

/*
 * GL · ES · EN, the three of them in a row as the design draws them in the
 * corner of the header. It replaces a nav menu widget, which could not do the
 * job: a menu item is a fixed address and cannot know which page it is being
 * printed on, so switching language always threw the visitor back to the home
 * page. The shortcode builds each link from the page being read.
 */
.testaferro-languages {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: center;
}

.testaferro-languages .testaferro-languages__item {
	margin: 0;
}

.testaferro-languages .testaferro-languages__link {
	color: inherit;
	text-decoration: none;
	text-transform: uppercase;
}

/* The one being read is the one that is not dimmed. */
.testaferro-languages .testaferro-languages__link:not(.testaferro-languages__link--current) {
	opacity: 0.5;
}

.testaferro-languages .testaferro-languages__link:hover,
.testaferro-languages .testaferro-languages__link:focus-visible {
	opacity: 1;
}

/*
 * Las dos páginas legales.
 *
 * Son un documento largo dentro de un widget de texto, y el kit solo estiliza
 * el párrafo: sin esto los apartados no se distinguen del cuerpo, la tabla de
 * datos del formulario sale sin una sola línea y las listas pierden el sangrado
 * que necesitan para leerse como lo que son.
 *
 * Aquí las viñetas SÍ se conservan, al revés que en el resto del plugin: una
 * lista de datos identificativos se lee como lista, no como párrafos sueltos.
 */
.testaferro-legal .elementor-widget-text-editor {
	line-height: 1.65;
}

.testaferro-legal h3 {
	margin: 2em 0 .6em;
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--e-global-color-text, inherit);
}

.testaferro-legal .elementor-widget-text-editor > *:first-child,
.testaferro-legal h3:first-child {
	margin-top: 0;
}

.testaferro-legal ul {
	margin: 0 0 1em;
	padding-left: 1.2em;
	list-style: disc;
}

.testaferro-legal li {
	margin-bottom: .3em;
}

.testaferro-legal table {
	width: 100%;
	margin: 1em 0;
	border-collapse: collapse;
}

.testaferro-legal th,
.testaferro-legal td {
	padding: .5em .8em .5em 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid currentColor;
}

.testaferro-legal th {
	font-size: .78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .7;
}

/* Los tres idiomas, arriba del documento. */
.testaferro-legal .testaferro-legal__jump {
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .82em;
}

.testaferro-legal .testaferro-legal__jump a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Cada idioma abre con un filete, y el ancla no deja el título pegado al borde
 * de arriba al saltar desde el selector.
 */
.testaferro-legal [id="es"],
.testaferro-legal [id="gl"],
.testaferro-legal [id="en"] {
	scroll-margin-top: 90px;
	padding-top: 24px;
	border-top: 1px solid currentColor;
}