/* ================================================================
   Summia — Offcanvas + modales + filtros
   v1.5.0 — la versión la fija SUMMIA_ASSETS_VER (summia-projects.php);
   súbela allí al editar este fichero o el navegador servirá el viejo.
   El GRID y las TARJETAS los estiliza Elementor (Loop Grid); aquí
   solo van las piezas que monta el mu-plugin.
   Ajustado al diseño real: filtros tipo "underline" y offcanvas
   full-bleed con franja oscura a la izquierda + barra de stats.
   ================================================================ */

:root {
	--summia-dark:   #0e1b24;
	--summia-accent: #e6d571;      /* amarillo de marca (kit Elementor) */
	--summia-accent-dark: #dbc85c; /* mismo amarillo un punto más oscuro, para :hover */
	--summia-ink:    #1c1c1c;
}

/* ---------- Filtros ([summia_filtros]) ----------
   Selects minimalistas: sin caja, solo línea inferior + chevron. */
.summia-filters { display: flex; gap: 2.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; align-items: flex-end; }
.summia-filters .summia-select {
	appearance: none; -webkit-appearance: none;
	padding: .4rem 2rem .7rem .9rem;  /* el .9rem izquierdo separa el texto del borde */
	border: 0; border-bottom: 1.5px solid var(--summia-ink); border-radius: 0;
	background-color: transparent;
	color: var(--summia-ink); font-size: 1.05rem; font-weight: 600; line-height: 1.2;
	width: auto; max-width: 100%; flex: 0 0 auto; min-width: 230px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .2rem center;
	background-size: 16px;
}
.summia-select:focus { outline: none; border-bottom-color: #000; }
/* Placeholder en gris. La opción vacía "Tots"/"Totes" también vale "" (limpia el filtro),
   así que NO se puede distinguir por value: nos apoyamos en que solo el placeholder está
   disabled. Donde falte :has() (navegadores viejos) se ve como el resto: degradación limpia. */
.summia-filters .summia-select:has(option:disabled:checked) { color: #8a8a8a; }
/* Aire a los items de la lista desplegada. OJO: el estilado de <option> solo lo respetan
   los navegadores que dibujan ellos el popup (Chrome/Edge/Firefox en Windows y Linux);
   en macOS/iOS el popup es nativo y IGNORA padding y colores. Ahí la única solución real
   es sustituir el <select> por un dropdown custom (pendiente en el CLAUDE.md). */
.summia-filters .summia-select option {
	padding: .5rem .9rem;
	color: var(--summia-ink);
	font-weight: 400;
}

/* Estado de carga mientras llega la respuesta AJAX del filtro.
   La clase la pone el JS en el .elementor-widget-container del Loop Grid
   (no en .elementor-loop-container: ese desaparece cuando no hay
   resultados y entonces no habría feedback de carga). */
.elementor-widget-container.summia-loading,
.elementor-loop-container.summia-loading {
	opacity: .4; transition: opacity .2s ease; pointer-events: none;
}

/* Cards del Loop Grid: clicables (abren el offcanvas) -> cursor de mano. */
.elementor-loop-container .e-loop-item { cursor: pointer; }
/* Cards montadas A MANO (no en un loop): se marcan con data-project-id="{ID}" desde
   Elementor (Avanzado → Atributos personalizados). El handler de clic ya las reconoce
   por ese atributo — es su vía principal, antes que la clase e-loop-item-{ID}. */
[data-project-id] { cursor: pointer; }

/* Fondo de las cards de CUALQUIER Loop (grid o carousel): centrado y a cover.
   ¿Por qué hace falta si el template ya lo tiene puesto? Porque Elementor NO
   escribe background-position/background-size cuando la imagen de fondo viene de
   un TAG DINÁMICO. Esos dos controles están condicionados a `'image[url]!' => ''`
   (elementor/includes/controls/groups/background.php) y con el tag dinámico
   `post-featured-image` el campo `background_image` queda vacío -> la condición
   falla y las propiedades no llegan al CSS generado (loop-62.css y loop-1275.css
   tienen CERO declaraciones). El valor SÍ está guardado en los dos templates
   (`center center` + `cover`) y el EDITOR lo pinta bien —lo renderiza por otra
   vía—, por eso en backend se ve correcto y en frontend no: el navegador aplica
   los valores iniciales de CSS, `0% 0%` y `auto`, o sea esquina superior
   izquierda y a tamaño natural (fotos de 1600px en cards de ~400px).
   Se nota sobre todo en patrimonial porque es la única página con cards de dos
   anchos distintos, pero afecta igual a promociones, suelo y la home.
   Aquí solo REPLICAMOS lo que el template ya declara. Sin !important y con
   especificidad baja (0,2,0) a propósito: si algún día se pone imagen estática y
   Elementor sí emite su regla (0,3,0), debe ganar la suya. */
.e-loop-item > .elementor-element {
	background-position: center center;
	background-size: cover;
}

/* ---------- Grid compuesto de Patrimonial ----------
   Se activa con la clase `summia-grid-patrimonial` en el widget Loop Grid
   (Elementor → Avanzado → Clases CSS). NO se aplica a .elementor-loop-container
   a secas: esa clase la llevan TODOS los loops del sitio (promociones, home…).

   El diseño es un ciclo de 10 cards sobre 3 columnas:
     fila 1 → 1/3 + 2/3        (cards 1 y 2)
     fila 2 → 1/3 + 1/3 + 1/3  (cards 3, 4 y 5)
     fila 3 → 2/3 + 1/3        (cards 6 y 7, espejo de la fila 1)
     fila 4 → 1/3 + 1/3 + 1/3  (cards 8, 9 y 10)
   O sea: de cada 10, solo la 2ª y la 6ª ocupan doble. Como es un patrón y no una
   composición fija, el cliente puede añadir activos desde WordPress y se recoloca solo.

   ⚠️ Las columnas las pone el WIDGET (`.elementor-grid-3 .elementor-grid` de Elementor),
   no este fichero: su frontend.min.css se carga DESPUÉS que éste y con la misma
   especificidad, así que redefinir aquí `grid-template-columns` no serviría de nada.
   Nosotros solo tocamos los SPANS, y únicamente en escritorio: en tablet (≤1024) el
   widget baja a 2 columnas y en móvil (≤767) a 1, y ahí el patrón no tiene sentido
   -> se deja el grid uniforme. Los breakpoints son los de Elementor (1024 / 767). */
/* ⚠️ NO usar `:nth-child(10n+2)` a secas: Elementor intercala un <style> (loop-dynamic-…)
   DENTRO del contenedor, delante de cada card — y el primero lleva dos. Esos <style> cuentan
   como hijos, así que la numeración se desplaza… y encima de forma variable, porque un activo
   sin imagen de fondo no genera su <style>. Hay que contar SOLO las cards. */
@media (min-width: 1025px) {
	/* Navegadores modernos: `of <selector>` cuenta únicamente los elementos que casan. */
	.summia-grid-patrimonial .elementor-loop-container > :nth-child(10n+2 of .e-loop-item),
	.summia-grid-patrimonial .elementor-loop-container > :nth-child(10n+6 of .e-loop-item) {
		grid-column: span 2;
	}
	/* Fallback donde no exista `of` (Chrome <111, Firefox <113): :nth-of-type cuenta solo
	   entre hermanos del MISMO tipo, y las cards son los únicos <div> del contenedor
	   (los <style> son otro tipo). Va en @supports aparte porque un selector inválido
	   invalidaría toda la lista de selectores de la regla de arriba. */
	@supports not selector(:nth-child(1 of .e-loop-item)) {
		.summia-grid-patrimonial .elementor-loop-container > div.e-loop-item:nth-of-type(10n+2),
		.summia-grid-patrimonial .elementor-loop-container > div.e-loop-item:nth-of-type(10n+6) {
			grid-column: span 2;
		}
	}
}
/* ALTURA: la manda el loop item template (su contenedor tiene `--min-height`, hoy 500px),
   NO este fichero. Si se fija aquí un `height` menor, el `min-height` del contenedor interno
   gana, el contenido se sale de la caja y la fila siguiente se solapa encima. Como todas las
   cards usan el mismo template, ya salen iguales; y dentro de cada fila el grid las estira
   al alto de la más alta (align-items: stretch por defecto).
   Para cambiar el alto: Elementor → template "Card Patrimonial" (1275) → contenedor →
   Altura mínima. Aquí solo garantizamos que la card llene la celda a lo alto. */
.summia-grid-patrimonial .elementor-loop-container > .e-loop-item { display: flex; }
.summia-grid-patrimonial .elementor-loop-container > .e-loop-item > * { flex: 1 1 auto; }

/* ---------- Capa 1: Offcanvas ---------- */
/* Mientras el offcanvas está abierto, rebajamos el header sticky (que tiene un
   z-index alto puesto por Elementor) para que el overlay quede por encima.
   Se restaura solo al cerrar (la clase se quita del <body>). */
body.summia-oc-open .nav-header { z-index: 1 !important; }

.summia-offcanvas-overlay {
	position: fixed; inset: 0; z-index: 9000; background: rgba(6,14,20,1);
	display: flex; justify-content: flex-end;
}
.summia-offcanvas {
	position: relative; width: 100%; max-width: 80%; height: 100%;
	background-size: cover; background-position: center; color: #fff; overflow-y: auto;
}
/* Scrim inferior (abajo -> arriba) solo para que se lea el texto de la parte baja. */
.summia-offcanvas::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(14,27,36,.85) 0%, rgba(14,27,36,.4) 18%, rgba(14,27,36,0) 45%);
}
.summia-offcanvas__content {
	position: relative; z-index: 1; min-height: 100%;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 3rem 3.5rem 2.2rem; gap: 1.8rem;
}
.summia-offcanvas__close {
	position: absolute; top: 1.6rem; right: 1.8rem; z-index: 2;
	width: 2.6rem; height: 2.6rem; padding: 0;
	border: 0; background: transparent; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: transform .2s;
}
.summia-offcanvas__close svg { width: 100%; height: 100%; display: block; }
/* Sin fondo rojo del tema en hover/focus. */
.summia-offcanvas__close:focus,
.summia-offcanvas__close:active { background: transparent; outline: none; }
.summia-offcanvas__close:hover,
.summia-offcanvas__close:focus-visible { background: transparent; transform: scale(1.08); }

/* Fila superior: título/subtítulo a la izquierda, acciones a la derecha. */
.summia-offcanvas__top {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
}
.summia-offcanvas__title    { margin: 0; font-size: 3.2rem; font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.summia-offcanvas__subtitle { margin: .6rem 0 0; font-size: .95rem; opacity: .85; }
.summia-offcanvas__actions  { display: flex; gap: .8rem; flex-shrink: 0; }

/* ⚠️ El reset de Hello Elementor estiliza `[type=button],button` con borde y texto
   rojos (#c36) y fondo rojo en :hover/:focus. `[type=button]` tiene la MISMA
   especificidad que una clase, así que `.summia-btn` a secas empata y pierde según el
   orden de carga (le pasaba al botón "Veure video", que sí lleva type="button"; el de
   galería no lo lleva y por eso se salvaba). Por eso calificamos con el elemento:
   `button.summia-btn` (0,1,1) gana siempre, sin depender del orden de las hojas. */
.summia-btn,
button.summia-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .7rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
	background: var(--summia-ink); color: #fff; cursor: pointer;
	font-size: .9rem; font-weight: 500; white-space: nowrap;
	transition: background .2s, color .2s;
}
.summia-btn:hover,
button.summia-btn:hover,
button.summia-btn:focus,
button.summia-btn:active,
button.summia-btn:focus-visible { background: #000; color: #fff; border-color: transparent; }
.summia-btn svg { width: 1.05em; height: 1.05em; }
/* Variante amarilla (mismo pill que "Veure galeria", fondo marca + texto negro). */
.summia-btn--accent,
button.summia-btn--accent { background: var(--summia-accent); color: #111; border-color: transparent; }
.summia-btn--accent:hover,
button.summia-btn--accent:hover,
button.summia-btn--accent:focus,
button.summia-btn--accent:active,
button.summia-btn--accent:focus-visible { background: var(--summia-accent-dark); color: #111; border-color: transparent; }

/* Barra de stats a todo el ancho con divisores verticales. */
.summia-offcanvas__stats {
	display: flex; flex-wrap: wrap;
	border-top: 1px solid rgba(255,255,255,.8); padding-top: 1.4rem;
}
.summia-stat {
	display: flex; flex-direction: column; gap: .25rem;
	flex: 1 1 0; min-width: 120px; padding: 0 2.2rem; text-align: center;
	border-left: 1px solid rgba(255,255,255,.9);
}
.summia-stat:first-of-type { border-left: 0; padding-left: 0; text-align: left; }
.summia-stat__value { font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
/* m² : el line-height:0 evita que el <sup> ensanche la línea del stat */
.summia-stat__value sup { font-size: .6em; line-height: 0; vertical-align: super; }
.summia-stat__label { font-size: .82rem; font-weight: 400; opacity: .8; }
/* Con los dos stats de superficie nuevos (v1.6.9) una promo puede llegar a 8: con el
   padding de arriba (2.2rem x2 + 120px min) no caben en una fila y el flex-wrap deja una
   2ª fila con 2 stats estirados a media pantalla. A partir del 7º se aprieta el espaciado
   para que sigan en una sola fila. `nth-of-type` cuenta solo los <div> (el <template> de
   Alpine es otro tipo, misma razón que el :first-of-type de arriba). Si el navegador no
   soporta :has(), se cae al comportamiento anterior (envuelve). */
.summia-offcanvas__stats:has(.summia-stat:nth-of-type(7)) .summia-stat {
	padding: 0 1.1rem; min-width: 96px;
}
/* Este selector (0,4,0) gana al `.summia-stat:first-of-type` (0,2,0) de arriba, así que
   hay que repetir aquí el padding-left:0 del primer stat o se despega del borde. */
.summia-offcanvas__stats:has(.summia-stat:nth-of-type(7)) .summia-stat:first-of-type {
	padding-left: 0;
}
.summia-offcanvas__stats:has(.summia-stat:nth-of-type(7)) .summia-stat__value { font-size: 1.2rem; }

/* Transición offcanvas (slide desde la derecha) */
.summia-oc-enter { transition: transform .35s ease; }
.summia-oc-start { transform: translateX(100%); }
.summia-oc-end   { transform: translateX(0); }

/* ---------- Capa 2: Modal (galería) ---------- */
.summia-modal {
	position: fixed; inset: 0; z-index: 9500; background: rgb(6,14,20);
	display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.summia-modal__close {
	position: absolute; top: 1.2rem; right: 1.5rem; z-index: 2;
	width: 2.2rem; height: 2.2rem; padding: 0;
	background: none; border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	opacity: .85; transition: opacity .2s, transform .2s;
}
.summia-modal__close svg { width: 100%; height: 100%; display: block; }
/* Sin fondo/borde en hover NI focus (el tema mete fondo rojo en button:hover y :focus). */
.summia-modal__close:focus,
.summia-modal__close:active { background: none; outline: none; }
.summia-modal__close:hover,
.summia-modal__close:focus-visible { background: none; opacity: 1; transform: scale(1.08); }
/* El stage capaba la foto a 1000px: en pantallas grandes se veía pequeña. Ahora ocupa
   el ancho útil (dejando hueco a las flechas, que van a 2rem de los bordes). */
.summia-modal__stage { max-width: min(1800px, calc(100vw - 11rem)); width: 100%; display: flex; justify-content: center; }
.summia-modal__img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 6px; }
.summia-video { max-width: 100%; max-height: 80vh; width: auto; border-radius: 6px; background: #000; }
/* Flechas pegadas a los bordes de la pantalla (separadas de la foto centrada).
   Llevan disco de fondo: en móvil quedan ENCIMA de la foto y sin él se perdían
   sobre las zonas claras de la imagen. */
.summia-modal__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 3.4rem; height: 3.4rem; padding: 0 0 .12em; /* .12em = centrado óptico del chevron */
	display: flex; align-items: center; justify-content: center;
	background: rgba(6,14,20,.55); border: none; border-radius: 999px;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	color: rgba(255,255,255,.85);
	font-size: 2.5rem; line-height: 1; cursor: pointer;
	transition: background .2s, color .2s;
}
.summia-modal__nav--prev { left: 2rem; }
.summia-modal__nav--next { right: 2rem; }
/* El tema aplica fondo/color rojo en button:hover Y :focus (persiste tras el clic con ratón). */
.summia-modal__nav:focus,
.summia-modal__nav:active { background: rgba(6,14,20,.55); outline: none; color: rgba(255,255,255,.85); }
.summia-modal__nav:hover,
.summia-modal__nav:focus-visible { background: rgba(6,14,20,.85); color: #fff; }

/* Transición modal (fade + scale) */
.summia-modal-enter { transition: opacity .25s ease, transform .25s ease; }
.summia-modal-start { opacity: 0; transform: scale(.96); }
.summia-modal-end   { opacity: 1; transform: scale(1); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.summia-offcanvas { max-width: 100%; }
	.summia-offcanvas::after {
		background: linear-gradient(to top, rgba(14,27,36,.85) 0%, rgba(14,27,36,.2) 45%, rgba(14,27,36,0) 70%);
	}
	.summia-offcanvas__content { padding: 2rem 1.5rem 1.5rem; }
	.summia-offcanvas__top { flex-direction: column; align-items: flex-start; gap: 1rem; }
	/* Texto un punto más pequeño en móvil (petición del cliente). */
	.summia-offcanvas__title    { font-size: 1.85rem; }
	.summia-offcanvas__subtitle { margin-top: .45rem; font-size: .85rem; }
	.summia-offcanvas__actions  { gap: .6rem; }
	/* Pills más compactos. Se califica con `button` para ganar al reset del tema
	   ([type=button] mete padding .5rem 1rem y font-size 1rem, ver nota arriba). */
	.summia-btn,
	button.summia-btn { padding: .55rem 1.05rem; font-size: .82rem; gap: .4rem; }
	.summia-offcanvas__stats { gap: 1.2rem 0; padding-top: 1.1rem; }
	.summia-stat {
		flex: 1 1 42%; min-width: 0; padding: 0 1rem 0 0; text-align: left; border-left: 0;
	}
	.summia-stat__value { font-size: 1.15rem; }
	.summia-stat__label { font-size: .74rem; }
	/* En móvil las flechas NO van encima de la foto (petición del cliente): se bajan
	   debajo, centradas y juntas. Se hace con GRID sobre el propio .summia-modal, sin
	   tocar el marcado: los hijos ya son hermanos (close / prev / stage / next).
	   - stage ocupa las dos columnas (fila 1),
	   - prev va a la col. 1 pegada al centro (justify-self:end) y next a la col. 2
	     pegada al centro (justify-self:start) -> quedan juntas y centradas.
	   Las flechas dejan de ser `absolute`, así que `top/left/right` ya no aplican.
	   El .summia-modal__close sigue absolute (sale del flujo del grid, no molesta).
	   Ojo: el modal de VÍDEO comparte estas clases pero no tiene flechas; su stage
	   también ocupa las dos columnas, así que sigue centrado igual. */
	.summia-modal {
		padding: 1rem;
		display: grid;
		/* minmax(0,1fr) y no 1fr: el mínimo `auto` de una pista deja que el ancho
		   intrínseco de la foto (1536px) empuje el grid y desborde en horizontal. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-content: center;      /* centra verticalmente el bloque foto+flechas */
		column-gap: 1rem;           /* separación entre las dos flechas */
		row-gap: 1rem;              /* separación foto <-> flechas */
	}
	/* `grid-row` explícito en los tres: sin él la colocación automática coloca prev en
	   la fila 1 (el DOM es prev -> stage -> next), empuja la foto a la 2 y next a la 3,
	   con lo que las flechas acaban una encima y otra debajo de la foto. */
	.summia-modal__stage { grid-column: 1 / -1; grid-row: 1; min-width: 0; max-width: calc(100vw - 2rem); }
	/* 72vh (antes 80): las flechas ya ocupan sitio debajo y con 80vh la foto podía
	   empujarlas fuera de pantalla en móviles bajos. */
	.summia-modal__img { max-height: 72vh; }
	.summia-modal__nav {
		position: static; transform: none;
		width: 3rem; height: 3rem; font-size: 2.15rem;
	}
	.summia-modal__nav--prev { grid-column: 1; grid-row: 2; justify-self: end; }
	.summia-modal__nav--next { grid-column: 2; grid-row: 2; justify-self: start; }
	.summia-filters { gap: 1.5rem; }
	.summia-filters .summia-select { min-width: 0; flex: 1 1 45%; }
}