/* Contenedor principal */
.place-detail-hero {
    width: 100%;
    max-width: 900px; 
    margin: 0 auto 40px auto;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Aspecto por defecto para horizontales */
    aspect-ratio: 16 / 9; 
}

/* Ajuste específico para contenido VERTICAL (Posiciones 1, 4, 7) */
.place-detail-hero.is-vertical {
    max-width: 450px; 
    height: 75vh; /* Ajustado para que no tape el título al cargar */
    aspect-ratio: 9 / 16; /* Forzamos proporción de smartphone */
    background: #0a0a0a; /* Un negro más profundo para destacar el video */
}

/* Comportamiento del Video e Imagen */
.place-detail-hero video, 
.place-detail-hero img {
    width: 100%;
    height: 100%;
    /* 'contain' muestra el video completo. 
       'cover' lo expande (puedes usar cover si quieres que llene todo el marco vertical) */
    object-fit: contain; 
    display: block;
    z-index: 2;
}

/* OPCIONAL: Fondo difuminado para videos verticales (efecto premium) */
.place-detail-hero.is-vertical::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Usamos la misma lógica del video pero con blur */
    background: inherit;
    filter: blur(20px);
    opacity: 0.5;
    z-index: 1;
}

/* Corrección de la regla :not (CSS Puro) */
.place-detail-hero:not(.is-vertical) {
    aspect-ratio: 16 / 9;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .place-detail-hero.is-vertical {
        max-width: 90%; /* Casi todo el ancho en celulares */
        height: 60vh;   /* Un poco más corto para que quepa la descripción abajo */
    }
    
    .place-detail-hero:not(.is-vertical) {
        aspect-ratio: auto;
        height: 250px;
    }
}

.place-content { 
    max-width: 800px; 
    margin: 0 auto; 
}