@import url("style_blocks.css");
@import url("../fonts/fonts.css");

body.popup-opened {
	overflow-y: hidden;
}

.my-gallery a {
	position: relative;
	.edit-link {
		position: absolute;
		top: 4px;
		right: 4px;
		z-index: 99;
		background-color: yellow;
		color: black;
		font-weight: 600;
		padding: 4px 8px;
		font-size: 0.75rem;
		border-radius: 20px;
	}
}
/* owl carousel dani */
.owl-carousel .item img {
	display: block;
	width: 100%;
	height: auto;
}

/* Per revisar */

.block-system > h2 span.field--name-title {
	display: none;
}

.form-item-field-young-programmers-type-target-id:first-of-type {
	display: none;
}

:root {
	--bodytext: #000;
	--textclar: #757575;
	--accent: #cd171a;
	--bgpage: #fff;
	--bggris: #f6f5f1;
	--border: 1px solid #000;
	--bordergris: 1px solid #ccc;
	--radius: 12px;
	--radiusM: 6px;
	--radiusS: 3px;
	--gapXXS: 10px;
	--gapXS: clamp(16px, 1.1vw, 20px);
	--gapS: clamp(20px, 2vw, 40px);
	--gapM: clamp(30px, 3.2vw, 60px);
	--gapL: clamp(40px, 4.2vw, 80px);
	--gapXL: clamp(60px, 6.25vw, 120px);
	--font12: 0.75rem;
	--font13: clamp(0.8125rem, 0.842vw, 0.8125rem);
	--font14: clamp(0.8125rem, 0.842vw, 0.875rem);
	--font16: clamp(0.875rem, 0.842vw, 1rem);
	--font18: clamp(1rem, 0.9375vw, 1.125rem);
	--font19: clamp(1.0675rem, 0.9375vw, 1.1875rem);
	--font20: clamp(1.0675rem, 1.04vw, 1.25rem);
	--font22: clamp(1.125rem, 1.4vw, 1.375rem);
	--font24: clamp(1.25rem, 1.6vw, 1.5rem);
	--font30: clamp(1.375rem, 1.5625vw, 1.875rem);
	--font36: clamp(1.5rem, 1.875vw, 2.5rem);
	--font44: clamp(2rem, 2vw, 2.75rem);
	--font64: clamp(2.5rem, 3vw, 4rem);
}

.seccio0 {
	--color: #003d5b;
	--bgcolor: var(--bggris);
}
.seccio1 {
	--color: #005172;
}
.seccio2 {
	--color: #00798c;
}
/* FILMS*/
.seccio3 {
	--color: #2d807c;
}
/* YP */
.seccio4 {
	--color: #3aa5a0;
}
/* PEDAGOGICAL*/
.seccio5 {
	--color: #31b67c;
}
/* YS */
.seccio6 {
	--color: #ec9a1c;
}

/* FESTIVALS */
.seccio4 {
	--color: #d95c36;
}

/* FESTIVALS - rosa */

.seccio0,
.seccio1,
.seccio2,
.seccio3,
.seccio4,
.seccio5,
.seccio6,
.seccio7,
.seccio8 {
	--bgcolor: #f6f5f1;
}

html {
	scroll-behavior: smooth;
}

* {
	box-sizing: border-box;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

p,
ul,
ol,
li {
	&:empty {
		margin: 0 !important;
		padding: 0 !important;
	}
}

/**************************
PPP - Estuctura
***************************/

body,
button,
input,
select,
textarea {
	font-family: "Figtree", sans-serif;
	font-weight: 380;
	font-size: var(--font19);
	line-height: 1.5;
	color: var(--bodytext);
	background-color: var(--bgpage);
	letter-spacing: -0.005em;
}

.wrap {
	width: 90%;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

/* admin */

#user-login-form,
.path-user .profile {
	max-width: 400px;
	margin: var(--gapL) auto;
}

#user-login-form .form-item {
	margin-bottom: var(--gapS);
}

#user-login-form .form-item input {
	margin-bottom: 5px;
}

#user-login-form input[type="submit"] {
	margin: 0 auto;
	padding: var(--gapXXS) var(--gapM);
}

/**************************
PPP - HEADER
***************************/

#masthead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	grid-template-areas:
		"idiomes idiomes"
		"logo menu";
}

#site_logo {
	grid-area: logo;
	margin: var(--gapXS) 0 var(--gapXS) 5vw;
}

.region-secondary-menu {
	grid-area: idiomes;
	background-color: var(--bggris);
	display: flex;
	justify-content: end;
}

#main_menu {
	grid-area: menu;
	justify-self: end;
	margin-right: 5vw;
}

#masthead .xxss {
	display: none;
}

#site_logo a {
	margin: 0;
	width: 200px;
	height: 30px;
	background: url(../img/logo_moving_cinema.png) no-repeat left center;
	background-size: contain;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

/**************************
PPP - FOOTER
***************************/

footer ul {
	margin: 0;
	padding: 0;
}

.footer1 {
	background-color: #000;
	padding: var(--gapL) 0;
	color: #999999;
	font-size: var(--font18);
}

.footer1 .grid4 {
	grid-row-gap: var(--gapXS);
}

.footer1 .search-block-form {
	display: none;
}

.footer1 .grid4 > * {
	grid-column: 1 / -1;
	margin: 0;
}

.footer1 .logo_footer img {
	max-width: 300px;
}

.footer1 ul.menu {
	column-width: 250px;
	column-gap: 80px;
}

.footer1 ul.menu li {
	margin-bottom: 6px;
}

.footer1 a,
.footer1 a:visited {
	color: #999999;
}

.xxss {
	display: flex;
	grid-gap: var(--gapXS);
	margin-bottom: var(--gapXS);
	margin: 0;
	padding: 0;
}
.xxss a {
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -999em;
	display: block;
}

.xxss .ico_ig a {
	background-image: url(../img/ico_ig.svg);
}

.xxss .ico_fb a {
	background-image: url(../img/ico_fb.svg);
}

.xxss .ico_bs a {
	background-image: url(../img/ico_bs.svg);
}

#masthead .xxss {
	filter: invert(1);
}

.footer1 .xxss {
	margin-bottom: var(--gapXXS);
}

.footer_logos {
	padding: var(--gapS) 0;
}

.footer_logos_bloc {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.footer_logos_bloc ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gapXXS);
}

.footer_logos_bloc img {
	max-height: 70px;
	width: auto;
}

.footer_logos_bloc > p {
	font-size: 0.75rem;
	font-weight: 700;
}

.footer_logos_bloc_container:last-of-type .footer_logos_bloc:last-of-type li {
	align-self: end;
}

/**************************
Generals
***************************/

a,
a:visited {
	color: var(--bodytext);
	text-decoration: none;
	word-wrap: break-word;
	text-underline-offset: 0.2em;
}

.caixa_header a,
.field--name-body a,
div[class*="accordion"] a,
section[class*="bloc"] a {
	text-decoration: underline;
}

div[class*="accordion"] h2 a,
.teaser_film_info h2 a,
section[class*="bloc"] div[class*="teaser"] a,
section[class*="bloc"] .pager__item a {
	text-decoration: none;
}

a:hover,
a:focus,
a:active,
section[class*="bloc"] div[class*="teaser"] a:hover {
	text-decoration: underline;
	text-decoration-color: var(--color);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

p,
ul,
ol {
	margin-top: 0;
	margin-bottom: 1em;
}

ul,
ol {
	margin: 0 0 1.5em 0;
	padding-left: 1em;
	list-style-type: none;
}

main ul,
main ol {
	list-style-type: initial;
}

main [class*="type-text"] ul,
main [class*="txt"] ul {
	list-style-image: url(../img/ico_fletxa_right14.svg);
	padding-left: 1.5em;
}

main [class*="type-text"] ol,
main [class*="txt"] ol {
	list-style-type: decimal;
	padding-left: 1.5em;
}

main section[class*="bloc"] li,
main [class*="type-text"] li,
main [class*="txt"] li {
	margin-bottom: 0.5em;
	list-style-image: url(../img/ico_fletxa_right14.svg);
}

main section[class*="bloc"] {
	.header_meta li,
	.form-item li {
		list-style-image: none;
	}
}

strong,
b {
	font-weight: 700;
}

em {
	font-style: italic;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 800;
}

h1,
h2,
h3 {
	line-height: 1.2;
}

main section[class*="bloc"] h2:not(.caixa_title),
main section[class*="bloc"] h3,
main section[class*="bloc"] h4,
main section[class*="bloc"] h5,
main [class*="type-text"] h2,
main [class*="txt"] h2,
main [class*="type-text"] h3,
main [class*="txt"] h3,
main [class*="type-text"] h4,
main [class*="txt"] h4,
main [class*="type-text"] h5,
main [class*="txt"] h5 {
	margin-bottom: 0.75em;
	margin-top: 1.5em;
}

main section.bloc_videos h2 {
	margin-bottom: var(--gapM);
}

main section[class*="bloc"] h2:first-of-type {
	margin-top: 0;
}

.titol {
	font-size: var(--font44);
	line-height: 1.1;
	color: var(--color);
	margin-bottom: 0.25em;
}

.seccio2 .header_film_titol .titol {
	color: #fff;
}
.seccio6 .titol {
	color: var(--color);
}

/*main section[class*="bloc"] */
h2.caixa_title,
.caixa_title {
	font-size: var(--font36);
	line-height: 1.11;
	margin-bottom: var(--gapM);
}

section[class*="bloc"] .caixa_title a {
	text-decoration: none;
}

section[class*="bloc"] .caixa_title a:hover {
	text-decoration: underline;
}

h2 {
	font-size: var(--font36);
}

.pretitol {
	font-weight: 600;
	font-size: var(--font12);
	line-height: 1.2;
	letter-spacing: 0.165em;
	text-transform: uppercase;
	color: var(--textclar);
	margin-bottom: 1.25em;
}

h3 {
	font-size: var(--font24);
	line-height: 1.166;
}

h4 {
	font-size: var(--font22);
}

h5 {
	font-size: var(--font20);
}

p.subtitol {
	font-size: 1.25rem;
	line-height: 1.125;
	font-weight: 700;
}

p.data {
	font-size: var(--font16);
	font-weight: 700;
	color: #777;
	margin-top: 0.5em;
}

.bt a,
.bt a:visited,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #fff;
	text-transform: uppercase;
	font-size: var(--font20);
	font-weight: 900;
	padding: var(--gapXS) var(--gapM);
	text-decoration: none;
	color: var(--bodytxt);
	border: var(--border);
}

.bt_more {
	display: flex;
	justify-content: center;
	margin: var(--gapS) 0 0 0;
}

.bt_more a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gapXS);
}

.bt_more a::after {
	content: url(../img/ico_mes.svg);
}

a.read-more,
a.view-more {
	display: block;
	font-weight: 600;
	display: flex;
	align-items: center;
	font-size: 1rem;
	margin-top: 1em;
}

a.read-more:before,
a.view-more:before {
	content: url(../img/ico_mes2.svg);
	margin-right: 6px;
}

.clear {
	clear: both;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

[class*="type-text"] img,
[class*="txt"] img {
	border-radius: var(--radiusS);
}

figure {
	margin: 0;
}

.cover img,
.caixa_header .header_media img,
.teaser_material.expandable .teaser_exp_media img,
.teaser_film_media img,
.teaser_yp_media img,
.caixa_media img,
.field--type-image img,
.node--type-article.node--view-mode-teaser img {
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.popup-opened .cover img,
.popup-opened .caixa_header .header_media img,
.popup-opened .teaser_material.expandable .teaser_exp_media img,
.popup-opened .teaser_film_media img,
.popup-opened .teaser_yp_media img,
.popup-opened .caixa_media img,
.popup-opened .field--type-image img,
.popup-opened .node--type-article.node--view-mode-teaser img {
	object-fit: contain;
}

.contain img,
.caixa_header .header_media.contain img,
.teaser_film_media.contain img,
.teaser_festival_media img,
.teaser_material_media img {
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.teaser_l .teaser_material_media img {
	/*max-width: 700px;*/
}

.field--name-field-festival-logo.field--type-image img {
	max-width: 100%;
	height: auto;
	width: auto;
	object-fit: contain;
	margin-bottom: 1em;
}

.screen-reader-text {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

.hide_mobile {
	display: none;
}

.clearfix::after {
	content: none;
	display: block;
}

/* Slideshow */

.nav_slides {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
	gap: 4px;
	margin-top: 4px;

	img {
		aspect-ratio: 1;
	}
}

.nav_slides a {
	background-color: #000;
	display: flex;
	align-items: center;
	border-radius: var(--radiusS);
	overflow: hidden;
}

.pswp img {
	object-fit: contain;
}

.pswp__bg {
	opacity: 1 !important;
}

.caixa_header .owl-carousel .owl-stage-outer {
	border-radius: var(--radius);
	overflow: hidden;
}

.caixa_header .owl-item {
	aspect-ratio: 1.66 / 1;
}

.caixa_header .owl-item img {
	aspect-ratio: 1.66 / 1;
	border-radius: 0;
}

.owl-carousel {
	position: relative;
}

.owl-nav {
	display: flex;
	justify-content: end;
	gap: 3px;
	margin-top: 8px;
}

.owl-carousel .owl-nav button {
	width: 32px;
	height: 32px;
	display: block;
	text-indent: -999em;
}

.owl-carousel .owl-nav button.owl-prev {
	background: url(../img/ico_fletxa_prev.svg) no-repeat;
	background-size: contain;
}

.owl-carousel .owl-nav button.owl-next {
	background: url(../img/ico_fletxa_next.svg) no-repeat;
	background-size: contain;
}

.owl-dots {
	display: none;
}

/* Galeries */

.my-gallery {
	img {
		margin-bottom: 4px;
	}
	a:hover {
		text-decoration: none;
	}
	p {
		color: var(--textclar);
		font-size: var(--font14);
	}
}

/* Títol secció */

.titol_seccio {
	background-color: var(--color);
	position: relative;
	z-index: 1;
}

.titol_seccio h2 {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-size: 0.75rem;
	line-height: 1;
	color: #fff;
	min-height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/**************************
HOME
***************************/

.path-frontpage {
	.bloc_header_page {
		display: none;
	}
	#block-movingcinema2023-content {
		background-color: var(--bggris);

		.caixa_text_full {
			column-width: initial;
		}
	}

	.home-carousel img {
		border-radius: var(--radius);
	}
}

.social-embed h3 {
	margin-top: 0;
}

.social-embed {
	margin-bottom: var(--gapM);
}

div[data-type="bluesky"] .content {
	background-color: #fff;
	border-radius: var(--radius);
	font-size: 0.875rem;
}

/**************************
FESTIVAL SINGLE
***************************/

.bloc_header_festival {
	.header_info {
		display: flex;
		flex-direction: column;
		justify-content: end;
		align-items: start;
		position: relative;
		margin-bottom: 28px;
	}

	div[class*="field--name-body"] {
		order: 1;
	}

	div[class*="festival-logo"] {
		margin: 1em 0;
		order: 2;
		img {
			filter: invert(1);
		}
	}

	div[class*="festival-web"] {
		order: 3;
	}

	.festival-date {
		order: 4;
	}

	.young-for-film {
		order: 5;
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

/**************************
PÀGINES BÀSIQUES
***************************/

/* PARTNER */

.page-node-type-partner {
	.grid4 {
		align-items: start;
	}

	h1.titol {
		grid-column: 1/3;
	}

	.header_info {
		align-self: end;
		grid-area: header_meta;
	}

	div[class*="partner-logo"] {
		grid-column: 1/3;
		max-width: 150px;
		margin-top: auto;
		img {
			mix-blend-mode: darken;
		}
	}

	.partner-full-meta {
		grid-column: 1/-1;
		font-size: var(--font16);
		p {
			margin: 0;
		}
	}
}

div[class*="partner-country"] .field__item {
	display: inline-block;
	font-size: var(--font16);

	&:after {
		content: ", ";
	}

	&:last-child:after {
		content: "";
	}
}

/* Inside cinema */

.bloc_header_film .film_inside_cinema {
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 0.6875rem;
	text-transform: uppercase;
	text-align: center;
	font-weight: 600;
	width: 170px;
	margin: var(--gapXS) 0 0 0;
	justify-self: end;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.bloc_header_film .film_inside_cinema a,
.bloc_header_film .film_inside_cinema a:visited {
	color: #fff;
}

.bloc_header_film .film_inside_cinema img {
	display: block;
	margin: 2px auto 0 auto;
	width: 140px;
}

/* Crèdits */

body[data-id="515"] {
	.caixa_header.no-media {
		background-color: transparent;
		.wrap {
			padding-bottom: 0;
		}
	}

	section.bloc_galeria_fotos_mini {
		padding-top: var(--gapXXS);
		padding-bottom: 0;
		border: none;

		.my-gallery {
			display: flex;
			flex-wrap: wrap;
			column-gap: var(--gapM);

			a {
				pointer-events: none;
				cursor: default;
			}

			p {
				display: none;
			}
		}

		.caixa_text {
			margin-bottom: var(--gapXXS);
		}

		h2.bloc_title {
			margin-top: var(--gapS);
			font-size: var(--font24);
			border-top: var(--bordergris);
			padding-top: var(--gapS);
		}

		h4 {
			font-size: var(--font20);
			font-weight: 600;
		}

		img {
			max-height: 120px;
		}
	}

	.bloc_header_page + section.bloc_galeria_fotos_mini h2 {
		margin-top: 0;
		border-top: none;
		padding-top: 0;
	}

	.node--type-page {
		padding-bottom: var(--gapXL);
	}
}

/**************************
RESPONSIVE
***************************/

@media screen and (min-width: 580px) {
	.footer_logos_bloc_container {
		display: flex;
		gap: var(--gapM);
		margin-bottom: var(--gapM);
	}

	.footer_logos_bloc_container:first-of-type .footer_logos_bloc:last-child {
		margin-left: auto;
	}

	.footer_logos_bloc {
		p {
			margin-bottom: 0;
		}
		img {
			max-height: 80px;
		}
	}
}

/**************************
ANCHOR 768
***************************/

@media (min-width: 768px) {
	.wrap {
		width: calc(100% - (var(--gapL) * 2));
	}

	/* HEADER */

	#masthead {
		background-color: rgba(255, 255, 255, 0.95);
		display: grid;
		grid-template-columns: 1fr max-content max-content max-content;
		grid-template-areas: "logo xxss idiomes menu";
		gap: var(--gapS);
		align-items: center;
		width: 100%;
		margin: 0;
		padding: 0;
		/* height: 50px; */
	}

	#main_menu {
		margin-right: var(--gapL);
	}

	#site_logo {
		margin-left: var(--gapL);
	}

	#site_logo a {
		width: 235px;
		height: 30px;
		background-position: center center;
	}

	.path-frontpage #site_logo a {
		width: 300px;
		height: 90px;
	}

	#masthead .xxss {
		display: flex;
		grid-area: xxss;
	}

	.region-secondary-menu {
		background-color: transparent;
		display: block;
	}

	.breadcrumb {
		position: sticky;
		top: 0;
		z-index: 97;
	}

	.path-frontpage .breadcrumb {
		position: static;
	}

	/* Títol secció */

	.titol_seccio h2 {
		font-size: var(--font16);
		min-height: 60px;
	}

	/* PARTNER */

	.partner-full div[class*="partner-logo"] {
		grid-row: 1/-1;
		max-width: 250px;
	}

	.partner-full .partner-full-meta {
		grid-column: 1/3;
		grid-row: 2/3;
	}
}

/**************************
ANCHOR 1200
***************************/

@media screen and (min-width: 1200px) {
	/* PPP - HEADER */

	.search_hamb {
		display: none;
	}

	#cercador {
		display: flex;
	}

	/* FOOTER */

	.footer1 .region-primary-menu {
		grid-column: 1 / 4;
	}

	.footer1_info {
		grid-column: 4 / 5;
	}

	.footer_logos_bloc ul {
		gap: var(--gapS);
	}

	.footer_logos_bloc img {
		max-height: 100px;
	}

	/* PARTNER */

	.partner-full div[class*="partner-logo"] {
		grid-column: 1/2;
		/*grid-row: 1/-1;*/
		max-width: none;
	}

	.partner-full .partner-full-meta {
		grid-column: 1/3;
		grid-row: 2/3;
	}
}

@media screen and (min-width: 1400px) {
	#masthead {
		background-color: rgba(255, 255, 255, 0.95);
		display: grid;
		grid-template-columns: 60px 60px 110px 165px 1fr 110px 165px 60px 60px;
		grid-template-areas: ". . . . logo xxss idiomes menu .";
		gap: var(--gapS);
		align-items: center;
		padding: 0;
	}

	#site_logo {
		justify-self: center;
	}

	#main_menu {
		margin-right: 0;
	}
}

/* QUICK FIX FOR RELEASE - TODO */
.language-dropdown-menu > li:last-child, .language-dropdown-menu > li:nth-child(4), .language-dropdown-menu > li:nth-child(7) {
	display: none !important;
}