/* css/components/info-panel.css — Panel de información del evento (venue-info) */

/* ─── Contenedor principal del panel derecho ─────────────────────────────── */
.venue-info {
    /* Sin fondo propio: el patrón de body::before queda continuo detrás del panel. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-48) var(--space-32) var(--space-48) var(--space-24);
    gap: var(--space-32);
    font-family: var(--font-primary);
    color: #5b4123;
}

@media (max-width: 1023px) {
    .venue-info {
        gap: 0;
        padding-top: 0;
    }
}

/* ─── Máquina de Estados para Máscaras CSS ───────────────────────────────── */
.venue-icon-mask {
    display: inline-block;
    background-color: #5b4123;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ─── Logo principal del venue ───────────────────────────────────────────── */
.venue-info__logo-wrapper {
    margin-bottom: var(--space-16);
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: center;
}

.venue-info__logo {
    width: 240px;
    height: auto;
    max-height: 150px;
    object-fit: contain;
}

@media (max-width: 1023px) {
    .venue-info__logo-wrapper {
        margin-top: -8px;
        margin-bottom: 0;
    }

    .venue-info__logo {
        width: 156px;
    }
}

@media (min-width: 1024px) {
    .venue-info__logo {
        width: 200px;
        max-height: 350px;
    }

    /* Riel de 310px: el mismo ancho que .venue-info__address, con el
     * desplazamiento del grupo aplicado al wrapper. Así el logo se centra
     * sobre la dirección sin depender del ancho del panel (40vw). El
     * `translate(-100px, ...)` anterior estaba calibrado para el panel a
     * 480px y descentraba el logo apenas se angostaba el viewport. */
    .venue-info__logo-wrapper {
        margin-top: 45px;
        width: 310px;
        max-width: 310px;
        transform: translate(-10px, -25px);
    }
}

/* ─── Contenedor de cuerpo (Alineación estructurada) ─────────────────────── */
.venue-info__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    width: 100%;
    max-width: 480px;
}

/* ─── Bloque de acciones (links + formulario) — Mobile: 2 columnas ───────── */
.venue-info__actions {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-16);
    width: 100%;
    max-width: 480px;
}

@media (max-width: 1023px) {
    .venue-info__actions {
        margin-top: 30px;
    }
}

@media (min-width: 1024px) {
    .venue-info__actions {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-32);
    }
}

/* ─── Dirección postal ───────────────────────────────────────────────────── */
.venue-info__address {
    font-size: var(--text-base);
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1023px) {
    .venue-info__address {
        font-size: calc(var(--text-base) * 0.95);
        line-height: 1.35;
    }
}

/* ─── Portrait mobile/tablet: riel único de 360px ─────────────────────────
 * Logo, dirección, divider, links y formulario comparten el mismo ancho
 * máximo y se centran sobre un solo eje al variar el ancho de pantalla.
 * Va ANTES del bloque de poca altura para que ese siga compactando.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) and (orientation: portrait) {
    /* La separación con el nav fijo la aporta el padding-bottom de
     * .layout-split (--venue-nav-safe), no este padding suelto. */
    .venue-info {
        padding-bottom: 0;
    }

    .venue-info__logo-wrapper,
    .venue-info__body,
    .venue-info__actions {
        width: min(100%, 360px);
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .venue-info__logo-wrapper {
        margin-top: 12px;
        margin-bottom: 0;
        justify-content: center;
        transform: none;
    }

    .venue-info__address {
        text-align: center;
        transform: none;
    }

    .venue-info__actions {
        display: grid;
        grid-template-columns: minmax(130px, 180px) 1px minmax(130px, 180px);
        column-gap: clamp(12px, 3vw, 20px);
        justify-content: center;
        align-items: center;
    }

    .venue-info__links {
        grid-column: 1;
    }

    .venue-info__divider {
        grid-column: 2;
        justify-self: center;
    }

    .venue-info__form-section {
        grid-column: 3;
    }
}

@media (max-width: 1023px) and (max-height: 700px) and (orientation: portrait) {
    .venue-info__logo {
        width: 110px;
    }

    .venue-info__logo-wrapper {
        margin-top: 2px;
    }

    .venue-info__address {
        font-size: calc(var(--text-base) * 0.78);
        margin-bottom: 9px;
    }

    .venue-info__actions {
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .venue-info__address {
        width: 310px;
    }

    .venue-info__address,
    .venue-info__actions {
        transform: translate(-10px, -62px);
    }
}

/* ─── Navegación y Enlaces ───────────────────────────────────────────────── */
.venue-info__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    width: 100%;
}

.venue-link {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    text-decoration: none;
    color: inherit;
    font-size: var(--text-base);
    transition: opacity var(--transition-smooth);
}

@media (max-width: 1023px) {
    .venue-info__links {
        gap: 14px;
    }

    .venue-link {
        font-size: calc(var(--text-base) * 0.85);
    }
}

.venue-link:hover,
.venue-link:focus-visible {
    opacity: 0.7;
    outline: none;
}

.venue-link__icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* ─── Separador decorativo ───────────────────────────────────────────────── */
.venue-info__divider {
    width: 1px;
    height: 126px;
    align-self: flex-start;
    border: none;
    border-right: 1px solid var(--color-divider);
    margin: 0;
}

@media (min-width: 1024px) {
    .venue-info__divider {
        width: 200px;
        height: auto;
        align-self: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-divider);
    }
}

/* ─── Call to Action (Formulario) ────────────────────────────────────────── */
.venue-info__form-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    text-align: left;
    line-height: 1.4;
}

@media (max-width: 1023px) {
    .venue-info__form-section {
        align-items: center;
        text-align: center;
    }
}

.venue-form-btn span {
    font-size: var(--text-lg);
    line-height: 1.4;
    text-align: left;
}

.venue-form-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-16);
    padding: 0;
    transition: transform var(--transition-smooth);
}

.venue-form-btn__icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

@media (max-width: 1023px) {
    .venue-form-btn {
        flex-direction: column-reverse;
        align-items: center;
        gap: 16px;
    }

    .venue-form-btn span {
        text-align: center;
        max-width: 110px;
        margin: 0 auto;
        font-size: calc(var(--text-lg) * 0.75);
        line-height: 1.25;
    }

    .venue-form-btn__icon {
        width: 36px;
        height: 36px;
    }
}

.venue-form-btn:hover,
.venue-form-btn:focus-visible {
    transform: scale(1.05);
    outline: none;
}

/* ─── Ajuste tablet (600–1023px): centrado y separación del logo ────────── */
@media (min-width: 600px) and (max-width: 1023px) {
    .venue-info {
        align-items: center;
    }

    .venue-info__logo-wrapper {
        margin-top: var(--space-16);
    }
}

/* ─── Landscape mobile/tablet: riel centrado de dos columnas ──────────────
 * Antes: columna 2 en `1fr` (crecía con el viewport), actions empujado por
 * `margin-left: clamp(2rem, 6vw, 4rem)`, links en `flex: 0 0 40%` de esa
 * columna elástica, y seis transforms compensando el corrimiento (más otro
 * bloque de transforms mágicos a partir de 800px). Todo eso escalaba con el
 * ancho, por eso los elementos se separaban.
 * Ahora: dos columnas que abrazan su contenido, el par centrado con
 * `justify-content: center`, y anchos internos acotados. El grupo mide casi
 * lo mismo a 584px que a 1014px: solo cambia el aire a los costados.
 * ────────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-width: 1023px) {
    .venue-info {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        align-items: center;
        justify-content: center;
        padding: 4px var(--space-16) var(--space-16);
        gap: 4px 12px;
    }

    .venue-info__body {
        grid-column: 1;
        grid-row: 2;
        flex: 0 0 auto;
        gap: 8px;
        max-width: none;
    }

    .venue-info__logo-wrapper {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
        margin-bottom: 0;
    }

    .venue-info__logo {
        width: 100%;
        max-width: 125px;
        max-height: none;
    }

    .venue-info__address {
        font-size: 0.75rem;
        line-height: 1.2;
        text-align: center;
        width: max-content;
    }

    .venue-info__actions {
        grid-column: 2;
        grid-row: 1 / 3;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 0;
        gap: var(--space-16);
        max-width: 400px;
    }

    /* Ancho propio en vez de un % de la columna: solo se comprime por
     * debajo de ~565px de viewport, donde el riel ya no entraría. */
    .venue-info__links {
        flex: 0 0 clamp(140px, 27vw, 152px);
        flex-direction: column;
        gap: 14px;
    }

    .venue-info__divider {
        width: 1px;
        height: 70px;
        align-self: center;
        border-right: 1px solid var(--color-divider);
        border-bottom: none;
    }

    .venue-info__form-section {
        flex: 0 1 auto;
        align-items: flex-start;
        text-align: left;
    }

    .venue-form-btn {
        max-width: 260px;
        padding: 10px 14px;
        flex-direction: row;
    }

    .venue-form-btn__icon {
        width: 36px;
        height: 36px;
    }
}