/**
 * Mas Vilarmau — Sprint 5.2 (2026-05-13)
 *   #005 Bloc Entorn home — imatges/vídeo reorganitzats
 *   #006 Bloc "T'esperem" home — mapa Leaflet
 *   #008 Cards d'espais La Masia — hero gran + thumbs uniformes
 *   #009 Entorn "Natura i Senderisme" — imatges horitzontals proporcionades
 *   #011 Mapa /com-arribar/ — Leaflet
 *   #013 Nous Espais "Pau interior" — equilibrat
 *   + Estils del mapa .mv-osm-map compartit
 */

/* =================================================================
   MAPA OSM (Mas Vilarmau pin amb pulse) — reutilitzable a totes les pàgines
   ================================================================= */
.mv-osm-map {
    width: 100%;
    height: 360px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 0;
    box-shadow: 0 4px 16px rgba(122, 79, 56, 0.10);
}
@media (max-width: 768px) {
    .mv-osm-map { height: 300px; }
}
/* Override per al mapa de /com-arribar/ (més gran) */
.arribar-mapa-leaflet { height: 100%; min-height: 460px; }
@media (max-width: 768px) {
    .arribar-mapa-leaflet { min-height: 340px; }
}
/* Override per al mapa del bloc "T'esperem" de la home */
.home-contact-mapa { height: 100%; min-height: 360px; border-radius: 8px; }
@media (max-width: 768px) {
    .home-contact-mapa { min-height: 300px; }
}

/* Botó secundari outline (per al boto OpenStreetMap a com-arribar) */
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 22px;
    border: 1.5px solid var(--color-primary);
    border-radius: 4px;
    color: var(--color-primary);
    background: transparent;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 200ms, color 200ms, transform 160ms;
    cursor: pointer;
}
.btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-1px);
}

/* =================================================================
   #008 — CARDS D'ESPAIS (La Masia)
   Patró uniforme: hero gran 16:10 + grid 2-col de thumbnails 4:3
   ================================================================= */
.space-detail-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.space-detail-hero-img {
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-border);
}
.space-detail-hero-img a,
.space-detail-hero-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.space-detail-hero-img a {
    transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.space-detail:hover .space-detail-hero-img a img { transform: scale(1.03); }

.space-detail-thumbs,
.space-detail-thumbs--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
}
.space-detail-thumbs a {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    background: var(--color-border);
}
.space-detail-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.space-detail-thumbs a:hover img { transform: scale(1.06); }

/* Vídeo inline alineat amb el grid de thumbs */
.space-detail-video {
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
}
.video-inline-player {
    width: 100%; height: 100%;
    position: relative;
    background: #000;
}
.video-inline-player .video-poster {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

@media (max-width: 768px) {
    .space-detail-thumbs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .space-detail-thumbs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* =================================================================
   #009 — ENTORN "Natura i Senderisme"
   Imatges horitzontals proporcionades (no més imatges allargades)
   ================================================================= */
.entorn-feature-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 900px) {
    .entorn-feature-block { grid-template-columns: 1fr; gap: 32px; }
}

.entorn-feature-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "main main"
        "small1 small2";
    gap: 12px;
    width: 100%;
}
.entorn-feature-img {
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-border);
}
.entorn-feature-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.entorn-feature-img:hover img { transform: scale(1.04); }
.entorn-feature-img--large {
    grid-area: main;
    aspect-ratio: 16 / 10;
}
.entorn-feature-img:not(.entorn-feature-img--large) {
    aspect-ratio: 4 / 3;
}
.entorn-feature-img:nth-of-type(2) { grid-area: small1; }
.entorn-feature-img:nth-of-type(3) { grid-area: small2; }

@media (max-width: 480px) {
    .entorn-feature-images {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "small1"
            "small2";
    }
    .entorn-feature-img:not(.entorn-feature-img--large) {
        aspect-ratio: 16 / 10;
    }
}

/* =================================================================
   #013 — NOUS ESPAIS "Pau interior" equilibrat
   .section-nous-espais-main .nous-espais-grid (real al template)
   ================================================================= */
.section-nous-espais-main {
    padding-block: clamp(56px, 8vw, 100px);
}
.section-nous-espais-main .nous-espais-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    margin-top: 36px;
}
@media (max-width: 900px) {
    .section-nous-espais-main .nous-espais-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
.nous-espais-media {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.nous-espais-hero-img {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
}
.nous-espais-hero-img a,
.nous-espais-hero-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nous-espais-video {
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
}
.nous-espais-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.nous-espais-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 22px;
    margin-top: 8px;
}
.nous-espais-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    color: var(--color-text-soft);
}
.nous-espais-feature svg {
    color: var(--color-sage);
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .nous-espais-features { grid-template-columns: 1fr; }
}

/* =================================================================
   #005 — BLOC ENTORN HOME — .section-entorn .entorn-grid (real)
   Reorganitzat: .entorn-images en grid 2x2 amb main + secondary (2) + video
   ================================================================= */
.section-entorn {
    padding-block: clamp(56px, 8vw, 100px);
}
.section-entorn .entorn-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
@media (max-width: 900px) {
    .section-entorn .entorn-grid { grid-template-columns: 1fr; gap: 32px; }
}
.entorn-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "main main"
        "small video";
    gap: 12px;
    width: 100%;
}
.entorn-images > * {
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-border);
}
.entorn-img-main {
    grid-area: main;
    aspect-ratio: 16 / 9;
}
.entorn-img-main img,
.entorn-img-main picture {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.entorn-img-main:hover img,
.entorn-img-main:hover picture img { transform: scale(1.04); }

.entorn-img-secondary {
    grid-area: small;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.entorn-img-secondary > picture {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
}
.entorn-img-secondary picture img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.entorn-img-secondary picture:hover img { transform: scale(1.04); }

.entorn-mini-video {
    grid-area: video;
    aspect-ratio: 4 / 5;
    position: relative;
}
.entorn-mini-video .video-poster,
.entorn-mini-video picture {
    width: 100%; height: 100%; display: block;
}
.entorn-mini-video picture img {
    width: 100%; height: 100%; object-fit: cover;
}

@media (max-width: 480px) {
    .entorn-images {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "small"
            "video";
    }
    .entorn-mini-video { aspect-ratio: 16 / 10; }
}

/* =================================================================
   PETITS POLIMENTS DEL TEMPLATE EXISTENT
   ================================================================= */
/* Si el template-la-masia.php encara té .space-detail-thumbs sense la classe --grid */
.space-detail-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* Botons del CTA banner plegats a components/_entorn-cta.css (F3.2/F3.3, 2026-06-22). */