/* 
Theme Name: Mutu (Hello Elementor Child)
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/




.wpml-ls-menu-item a span {
  font-weight: 400;
}

/* =========================================
   GALERÍAS (estilo compartido)
   ========================================= */

/* Contenedor compartido */
.imatges_galeria {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

/* Ítems */
.imatge_galeria {
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  aspect-ratio: auto !important; /* evita cuadrados forzados */
  height: auto !important;
}

/* Imagen interna */
.imatge_galeria img,
.imatge_galeria .imatge_galeria__img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover;
  border-radius: 10px;
}

/* Mapeo columnas (clases empiezan por número) */
.imatge_galeria[class~="img1de1"] { grid-column: span 12; } /* 100% */
.imatge_galeria[class~="img1de2"] { grid-column: span 6; }  /* 1/2  */
.imatge_galeria[class~="img1de3"] { grid-column: span 4; }  /* 1/3  */

/* ===== Responsive ===== */
/* Tablet: mantenemos 1/3 como 1/3. NO los cambiamos a medios */
@media (max-width: 1024px) {
  .imatge_galeria[class~="img1de1"] { grid-column: span 12; }
  .imatge_galeria[class~="img1de2"] { grid-column: span 6; } /* siguen a medios */
  .imatge_galeria[class~="img1de3"] { grid-column: span 4; }  /* 1/3  */
}

/* Mobile: todo a una columna */
@media (max-width: 768px) {
  .imatge_galeria[class~="img1de1"],
  .imatge_galeria[class~="img1de2"],
  .imatge_galeria[class~="img1de3"] {
    grid-column: span 12;
  }
}


/* =========================================
   PROJECTS GRID (solo para este bloque)
   ========================================= */

.projects-block{
  display:block;
  isolation:isolate;
  margin-bottom:0;
}

/* fila */
.projects-block .row{
  display:flex;
  flex-wrap:wrap;
  margin-left:-5px;
  margin-right:-5px;
  margin-bottom:0; /* <- quita el -10px (innecesario) */
}

/* columnas */
.projects-block .col-12,
.projects-block .col-md-6,
.projects-block .col-lg-4{
  box-sizing:border-box;
  width:100%;
  padding-left:8px;
  padding-right:8px;
}

/* >= 768px: 2 columnas */
@media (min-width:768px){
  .projects-block .col-md-6{ width:50%; }
}

/* >= 1024px: 3 columnas */
@media (min-width:1024px){
  .projects-block .col-lg-4{ width:33.3333%; }
}

/* =========================================
   CARD + VIDEO BG + OVERLAY
   ========================================= */

.projects-block .project-card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  aspect-ratio:4 / 3;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  margin-bottom:16px;
}

/* link ocupa toda la card */
.projects-block .project-link{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
}

/* video de fondo */
.projects-block .project-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center; /* si quieres ver más “abajo”: center bottom */
  z-index:1;
  pointer-events:none;           /* <- CLAVE: el hover siempre funciona */
  border-radius:inherit;         /* evita “esquinas raras” en algunos navegadores */
  transform:translateZ(0);       /* ayuda a Chrome con render/subpixel */
}

/* overlay encima de todo */
.projects-block .project-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  opacity:0;
  transition:opacity .25s ease;
}

.projects-block .project-title{
  margin:0;
  color:#fff;
  font-weight:700;
  font-size:clamp(1rem, 2vw, 1.25rem);
  line-height:1.25;
  padding:20px;
}
.project-info {
  padding: 5px 0;
}
.projects-block .project-link:hover .project-overlay,
.projects-block .project-link:focus .project-overlay,
.projects-block .project-link:focus-visible .project-overlay{
  opacity:1;
}

@media (prefers-reduced-motion: reduce){
  .projects-block .project-overlay{ transition:none; }
}


/* =========================================
   HEADER MUTU – custom (substitueix el d'Elementor)
   ========================================= */

/* Amaguem el header d'Elementor */
header.elementor-location-header { display: none !important; }

/* Paleta i tipografia Mutu */
:root {
	--mutu-color-dark: #0F0F0F;
	--mutu-color-light: #6febc3;
	--mutu-font: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

	--mutu-header-pad-y: 20px;
	--mutu-header-pad-x: 40px;
	--mutu-header-logo-w: 150px;
	--mutu-mobile-bg: var(--mutu-color-light);
	--mutu-mobile-fg: var(--mutu-color-dark);
}

/* Wrapper — no bloqueja clics */
.mutu-header { pointer-events: none; }
.mutu-header a,
.mutu-header button,
.mutu-header .mutu-mobile-menu { pointer-events: auto; }

/* Barra fixa superior amb mix-blend-mode: difference (contrast automàtic) */
.mutu-header__bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	padding: var(--mutu-header-pad-y) var(--mutu-header-pad-x);
	/*mix-blend-mode: difference;*/
	background: #ffffff;
}

.mutu-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0 5px!important;
	@media (min-width: 767px) {
		padding: 0 12px!important;
	}
}

/* Logo: el forcem a blanc; mix-blend-mode: difference l'invertirà segons el fons */
.mutu-header__logo { display: inline-block; line-height: 0; }
.mutu-header__logo img {
	display: block;
	width: var(--mutu-header-logo-w);
	height: auto;
	/*filter: brightness(0) invert(1);*/
}
.mutu-header__logo-text {
	color: #000;
	font-family: var(--mutu-font);
	font-size: 20px;
	font-weight: 700;
}

/* Menú desktop */
.mutu-header__nav .mutu-menu {
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mutu-header__nav .mutu-menu a {
	color: #000!important;
	text-decoration: none;
	font-family: var(--mutu-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4em;
}

/* Toggle mòbil — pill verd sobre fons, colors sòlids (fora del mix-blend) */
.mutu-header__toggle {
	display: none;
	position: fixed;
	top: var(--mutu-header-pad-y);
	right: 22px;
	z-index: 10001;
	border: 0;
	padding: 0px;
	margin: 0;
	font-family: var(--mutu-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	color:#000!important;
	border-color: #000!important;
	background:transparent!important;
}
.mutu-header__toggle:hover,
.mutu-header__toggle:focus {
	color: #fff!important;
	outline: none;
	background:#000!important;
	background-color:#000!important;
}
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
}

/* =========================================
   Menú mòbil fullscreen
   ========================================= */
.mutu-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: var(--mutu-mobile-bg);
	padding: 20px 21px;
	display: none;
	flex-direction: column;
}
.mutu-mobile-menu.is-open { display: flex; }

.mutu-mobile-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.mutu-mobile-menu__logo { display: inline-block; line-height: 0; }
.mutu-mobile-menu__logo img {
	display: block;
	width: var(--mutu-header-logo-w);
	height: auto;
}

.mutu-mobile-menu__close {
	border: 0;
	padding: 6px 10px;
	font-family: var(--mutu-font);
	font-size: 18px;
	font-weight: 400;
	cursor: pointer;
	color:#000!important;
	border-color: #000!important;
	background:transparent!important;
}
.mutu-mobile-menu__close:hover,
.mutu-mobile-menu__close:focus {
	color: #fff!important;
	outline: none;
	background:#000!important;
	background-color:#000!important;
}

.mutu-mobile-menu__nav { margin-top: 40px; }
.mutu-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mutu-mobile-menu__list a {
	display: inline-block;
	color: var(--mutu-mobile-fg);
	text-decoration: none;
	font-family: var(--mutu-font);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.15;
}

/* Responsive — pas a mòbil per sota de 768px */
@media (max-width: 767px) {
	:root {
		--mutu-header-pad-x: 16px;
		--mutu-header-logo-w: 130px;
	}
	.mutu-header__nav { display: none; }
	.mutu-header__toggle { display: inline-block; }
	.mutu-mobile-menu__list a { font-size: 32px; }
}


/* ─────────────────────────────────────────
   Galería ACF Repeater — [galeria_proyecto]
───────────────────────────────────────────*/

.gp-galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    align-items: flex-start; /* cada item respira a su altura natural */
}

/* ─── Anchos de columna ─── */
.gp-galeria .col-1-1 {
    width: 100%;
}
.gp-galeria .col-1-2 {
    width: calc(50% - 8px);
}
.gp-galeria .col-1-3 {
    width: calc(33.333% - 11px);
}
.gp-galeria .col-1-4 {
    width: calc(25% - 12px);
}

/* ─── Media: ocupa todo el item ─── */
.gp-galeria .gp-item img,
.gp-galeria .gp-item video {
    display: block;
    width: 100%;
	min-width: 100%;
    height: auto;
    border-radius: 4px; /* quita si no quieres esquinas redondeadas */
}

/* ─── Vídeo: mismo comportamiento que imagen ─── */
.gp-galeria .gp-item video {
    object-fit: cover;
}

/* ─── Móvil: todo full width ─── */
@media (max-width: 768px) {
    .gp-galeria {
        gap: 12px;
    }
    .gp-galeria .col-1-2,
    .gp-galeria .col-1-3,
    .gp-galeria .col-1-4 {
        width: 100%;
    }
}