/*
Theme Name: Gaïjin
Theme URI: https://www.muttaestudio.es/
Template: astra
Author: MUTTA
Author URI: https://www.muttaestudio.es/
Description: muttaestudio.es
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 1.0.1738072747
Updated: 2025-01-28 14:59:07

*/

.primary {
	width: 100% !important;
}

.hero-header {
	min-height: 45vh;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-attachment: scroll;
	background-clip: padding-box;
	padding: 6em;
	width: 100vw;
    max-width: 100%;
    margin: 0 auto;
}

.hero-overlay  h1{
	font-size: 5em;
	margin-bottom: 0;
	text-transform: uppercase;
}
.hero-overlay .a-film-by {
	font-family: 'Charm', serif !important;
	font-size: 1.2em;
	font-style: italic;
}
.hero-overlay .a-film-by a {
	color: #ffffff;
	text-decoration: underline;
}
.hero-overlay .a-film-by a:hover {
	color: #eb5c2b;
}

#hero-overlay-parr1, #hero-overlay-parr2, #hero-overlay-parr3 { text-transform: uppercase; }

.film-details {
	max-width: 800px;
    margin: 0 auto;
}

.film-details-row {
	display: flex;
	flex-flow: row wrap;
	justify-content: start;
	margin: 0 0 1em 0;
}

.films-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch; /* Fuerza que todas las filas tengan la misma altura */
}

/* Cada película ocupa un 25% en escritorio (4 por fila) */
.film-item {
    _width: calc(25% - 20px); /* Cada ítem ocupará un 25% en escritorio */
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    height: 100%;
    overflow: hidden !important; /* Evitar que el contenido sobresalga */
    box-sizing: border-box;
}

/* Contenedor de la imagen */
.film-poster {
    width: 294px;
    height: 393px;
    max-height: 393px; /* Limita la altura de la imagen */
    overflow: hidden;
    background-color: #000;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important; /* Para asegurar que la imagen se posicione correctamente */
}

/* Imagen adaptada correctamente sin dejar huecos */
.film-poster img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Título y director dentro del contenedor */
.film-info {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* Ajustes para los títulos de las películas y nombres de los directores */
/* Ajustes para los títulos de las películas y nombres de los directores */
.film-title,
.film-director {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal;
    text-align: center;
    display: block;
    line-height: 1.2em;
}


/* RESPONSIVE */
@media (max-width: 1024px) { /* Tablets */
    .film-item {
        width: calc(50% - 20px); /* 2 columnas */
    }
}

@media (max-width: 768px) { /* Móviles */
    .film-item {
        width: 100%; /* 1 columna */
    }
}


.film-details-label {
	font-family: 'Charm', serif !important;
	font-size: 1.2em;
	font-style: italic !important;
	text-transform: none;
	width: 20%;
}

.film-details-value {
	width: 80%;
}

.film-details, .film-video { margin: 50px 0 75px 0;}

.gallery-grid {
	display: flex;
	flex-flow: row wrap;
	justify-content: end;
}

.film-video {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    max-width: 100%;
    height: auto;
}