/* ═══════════════════════════════════════════════════════════════════════════
   css/web/slots.css — Estilos para slots de fotos en la web pública
   23/04/2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cuando el hero recibe imagen desde el slot (nuevo sistema), la pintamos
   como capa de fondo en .hero-content (no en .bloque--hero). */
.hero-content[style*="--hero-bg-image"] {
    position: relative;
    isolation: isolate;
}
.hero-content[style*="--hero-bg-image"]::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--sp-8)) -50vw;
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: var(--hero-bg-pos-x, 50%) var(--hero-bg-pos-y, 50%);
    opacity: 0.55;
    z-index: -1;
}


/* ─── Galería pública agrupada por secciones ──────────────────────────── */
.galeria-seccion {
    margin-top: var(--sp-6, 2rem);
}
.galeria-seccion:first-of-type {
    margin-top: var(--sp-4, 1.5rem);
}
.galeria-seccion__titulo {
    font-family: var(--font-serif, Georgia, serif);
    font-size: var(--fs-h3, 1.5rem);
    font-weight: var(--fw-normal, 400);
    color: var(--color-verde-oliva, #556b2f);
    margin: 0 0 var(--sp-3, 1rem) 0;
    padding-bottom: var(--sp-2, 0.5rem);
    border-bottom: 1px solid color-mix(in srgb, var(--color-dorado, #c9a461) 30%, transparent);
    letter-spacing: 0.02em;
}


/* ─── Distribución híbrida de la galería según nº de fotos ───────────── */
/* En desktop (>1024px):
   · 1 foto  → centrada, ancho máx 700px
   · 2 fotos → 2 columnas al 100% del ancho
   · 3 fotos → 3 columnas al 100% del ancho
   · 4+      → sistema de 12 columnas con span 3 (ver más abajo) */
@media (min-width: 1024px) {
    .galeria-masonry[data-count="1"] {
        grid-template-columns: minmax(0, 700px) !important;
        justify-content: center;
    }
    .galeria-masonry[data-count="1"] > .galeria-item {
        grid-column: auto !important;
    }
    .galeria-masonry[data-count="2"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .galeria-masonry[data-count="2"] > .galeria-item {
        grid-column: auto !important;
    }
    .galeria-masonry[data-count="3"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .galeria-masonry[data-count="3"] > .galeria-item {
        grid-column: auto !important;
    }
}

/* En tablet (700-1024px):
   · 1 foto  → centrada, ancho máx 500px
   · 2 fotos → 2 columnas
   · 3+      → sistema de 9 columnas con span 3 */
@media (min-width: 700px) and (max-width: 1023px) {
    .galeria-masonry[data-count="1"] {
        grid-template-columns: minmax(0, 500px) !important;
        justify-content: center;
    }
    .galeria-masonry[data-count="1"] > .galeria-item {
        grid-column: auto !important;
    }
    .galeria-masonry[data-count="2"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .galeria-masonry[data-count="2"] > .galeria-item {
        grid-column: auto !important;
    }
}

/* En móvil (<700px):
   · 1 foto  → 1 columna (ya por defecto)
   · 2+      → 2 columnas (ya por defecto) */


/* ─── Centrar última fila cuando no rellena las columnas ──────────────── */
/* `data-last-row` se calcula en PHP: (total_fotos % cols). Indica cuántos
   items hay en la última fila.
   Si la última fila tiene 1 item → lo ponemos en col 2-3 (centrado en 2 cols).
   Si la última fila tiene 2 items → los ponemos en col 2 y 3.
   Si la última fila tiene 3 items → los ponemos en col 1-2-3 (queda hueco a la derecha).
   Nota: al hacer esto el item puede verse más ancho que los de arriba por
   el span. Por eso solo damos column-start al PRIMER item sobrante; los
   siguientes llenan detrás en orden normal. */

/* ─── Sistema de 12 columnas para centrar última fila ─────────────────── */
/* En desktop el grid base (en bloques.css) usa 4 columnas iguales. Lo
   convertimos a 12 columnas con span 3 por foto: visualmente idéntico
   (4 fotos por fila) pero permite centrar sub-múltiplos (3, 6, 9 cols)
   cuando la última fila no se llena. */
@media (min-width: 1024px) {
    /* 24 columnas, cada foto span 6. Total = 4 fotos por fila. */
    .galeria-masonry {
        grid-template-columns: repeat(24, 1fr) !important;
    }
    .galeria-masonry > .galeria-item {
        grid-column: span 6;
    }
    /* Sobra 1 foto: cols 10-15 (centro exacto) */
    .galeria-masonry[data-last-row="1"] > .galeria-item:last-child {
        grid-column: 10 / span 6;
    }
    /* Sobran 2 fotos: empiezan en col 7 (7-12 y 13-18) → 2 fotos centradas */
    .galeria-masonry[data-last-row="2"] > .galeria-item:nth-last-child(2) {
        grid-column: 7 / span 6;
    }
    /* Sobran 3 fotos: empiezan en col 4 (4-9, 10-15, 16-21) → 3 fotos centradas */
    .galeria-masonry[data-last-row="3"] > .galeria-item:nth-last-child(3) {
        grid-column: 4 / span 6;
    }
}

/* Tablet: 18 columnas, span 6 = 3 fotos por fila */
@media (min-width: 700px) and (max-width: 1023px) {
    .galeria-masonry {
        grid-template-columns: repeat(18, 1fr) !important;
    }
    .galeria-masonry > .galeria-item {
        grid-column: span 6;
    }
    /* Sobra 1: cols 7-12 (centro) */
    .galeria-masonry[data-last-row-3col="1"] > .galeria-item:last-child {
        grid-column: 7 / span 6;
    }
    /* Sobran 2: empiezan en col 4 (4-9 y 10-15) → 2 fotos centradas */
    .galeria-masonry[data-last-row-3col="2"] > .galeria-item:nth-last-child(2) {
        grid-column: 4 / span 6;
    }
}


/* ─── Mismo sistema 24-col para salones-galeria (tabs salones y otras) ─ */
/* A diferencia de la galería (4 fotos por fila), aquí usamos 3 fotos por
   fila para que los items sean más grandes y cuadren mejor con el nº
   habitual de estancias (5 salones, 3 otras). */
@media (min-width: 1024px) {
    .salones-galeria {
        display: grid !important;
        grid-template-columns: repeat(24, 1fr) !important;
        gap: var(--sp-2, 0.5rem);
    }
    /* Cada item ocupa 8 columnas → 3 items por fila */
    .salones-galeria > .salon-item {
        grid-column: span 8;
    }
    /* Sobra 1 item (ej: 4, 7, 10 fotos): cols 9-16 (centro) */
    .salones-galeria[data-last-row="1"] > .salon-item:last-child {
        grid-column: 9 / span 8;
    }
    /* Sobran 2 items (ej: 5, 8, 11 fotos): empiezan en col 5 (5-12 y 13-20) */
    .salones-galeria[data-last-row="2"] > .salon-item:nth-last-child(2) {
        grid-column: 5 / span 8;
    }
}
@media (min-width: 700px) and (max-width: 1023px) {
    /* Tablet: 2 fotos por fila (12 cols con span 6 de 12 = 2 por fila) */
    .salones-galeria {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        gap: var(--sp-2, 0.5rem);
    }
    .salones-galeria > .salon-item {
        grid-column: span 6;
    }
    /* Sobra 1 item: cols 4-9 centrado */
    .salones-galeria[data-last-row-3col="1"] > .salon-item:last-child {
        grid-column: 4 / span 6;
    }
}
@media (max-width: 699px) {
    .salones-galeria {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--sp-2, 0.5rem);
    }
}


/* ─── Texto descriptivo DEBAJO del grid (para tabs habitaciones, salones, otras) ─ */
.estancia-detalle__descripcion--debajo {
    margin-top: var(--sp-5, 1.5rem);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: var(--color-texto, #3a3a3a);
    line-height: 1.65;
}


/* ─── Fix encuadre en fotos de slots ─────────────────────────────────── */
/* El aspect-ratio del CSS base no recorta si el contenido interno es más
   alto (caso típico: <picture> con <img> alto). Forzamos overflow:hidden y
   que el <img> se ajuste al contenedor con !important para ganar a las
   reglas base de imágenes. */
.habitacion__imagen,
.salon-item,
.estancia-detalle__imagen,
.galeria-item {
    overflow: hidden;
    position: relative;
}
.habitacion__imagen picture,
.salon-item picture,
.estancia-detalle__imagen picture,
.galeria-item picture {
    display: block;
    width: 100%;
    height: 100%;
}
.habitacion__imagen img,
.estancia-detalle__imagen img,
.galeria-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* salon-item y estancia-detalle__imagen son contenedores flex con padding
   (tienen la etiqueta dentro alineada abajo o al fondo), así que la <img>
   va en position:absolute cubriendo todo, y la etiqueta queda encima en
   z-index superior. */
.salon-item picture,
.salon-item > img,
.estancia-detalle__imagen picture,
.estancia-detalle__imagen > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0;
}
.salon-item picture img,
.estancia-detalle__imagen picture img {
    position: static;
    width: 100% !important;
    height: 100% !important;
}
.salon-item__etiqueta,
.estancia-detalle__etiqueta {
    position: relative;
    z-index: 1;
}