/**
 * Brad Gallery - Frontend Styles
 * Réplica exacta y personalizable de Álbumes, Galerías y Lightbox
 */

.brad-gallery-wrapper {
    --bg-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --bg-banner-height: 380px;
    --bg-banner-height-tablet: 280px;
    --bg-banner-height-mobile: 210px;
    --bg-banner-overlay: rgba(0, 0, 0, 0.45);
    --bg-banner-title-size: 40px;
    --bg-banner-title-size-mobile: 26px;
    --bg-banner-title-color: #ffffff;
    --bg-banner-line-width: 56px;
    --bg-banner-line-height: 1.5px;
    --bg-banner-pos: center center;

    --bg-container-width: 1140px;
    --bg-album-cols: 3;
    --bg-album-cols-tablet: 2;
    --bg-album-cols-mobile: 1;
    --bg-album-gap: 24px;
    --bg-card-ratio: 16 / 10;
    --bg-card-bg: #ffffff;
    --bg-card-text-color: #222222;
    --bg-card-font-size: 14px;
    --bg-card-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);

    --bg-single-container-width: 940px;
    --bg-single-title-size: 36px;
    --bg-single-title-size-mobile: 26px;
    --bg-single-title-color: #1a1a1a;
    --bg-single-desc-size: 15px;
    --bg-single-desc-color: #333333;
    --bg-single-desc-width: 780px;

    --bg-photo-cols: 4;
    --bg-photo-cols-tablet: 2;
    --bg-photo-cols-mobile: 2;
    --bg-photo-gap: 10px;
    --bg-photo-ratio: 3 / 2;
    --bg-photo-hover-overlay: rgba(0, 0, 0, 0.45);

    --bg-lightbox-bg: rgba(24, 24, 24, 0.9);

    font-family: var(--bg-font-family);
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    color: #222;
}

.brad-gallery-wrapper *,
.brad-gallery-wrapper *::before,
.brad-gallery-wrapper *::after {
    box-sizing: border-box;
}

/* Ocultar el título redundante de la página del tema cuando se muestra Brad Gallery */
body.brad-gallery-hide-page-title .post-header,
body.brad-gallery-hide-page-title h1.page-title,
body.brad-gallery-hide-page-title .entry-header,
body.brad-gallery-hide-page-title .page-header,
article:has(.brad-gallery-wrapper) > .post-header,
article:has(.brad-gallery-wrapper) > .entry-header {
    display: none !important;
}

body.brad-gallery-hide-page-title .main-container,
body.brad-gallery-hide-page-title .post-content,
article:has(.brad-gallery-wrapper),
article:has(.brad-gallery-wrapper) > .post-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Asegurar que el Header global (.elementor-464) y el menú Off-Canvas estén siempre por encima del banner */
.elementor-464,
.elementor-464 > .elementor-section,
.elementor-464 .elementor-element-2a43295,
.wpr-offcanvas-container {
    position: relative;
    z-index: 99999 !important;
}

.elementor-464 .elementor-element.elementor-element-2a43295.elementor-absolute {
    position: absolute !important;
    z-index: 99999 !important;
}

.wpr-offcanvas-wrap {
    z-index: 999999 !important;
}

/* En PC / Escritorio liberar el límite de 960px del tema (#page-wrap) */
@media (min-width: 992px) {
    body.brad-gallery-hide-page-title #page-wrap,
    #page-wrap:has(.brad-gallery-wrapper),
    body.brad-gallery-hide-page-title .main-container,
    .main-container:has(.brad-gallery-wrapper) {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   1. BANNER PRINCIPAL DEL ÁLBUM (Réplica exacta del estilo de Prensa)
   ========================================================================== */
.brad-gallery-banner {
    position: relative;
    z-index: 0;
    isolation: isolate;
    width: 100%;
    min-height: 326px;
    margin-top: -155px;
    padding: 0;
    background-size: cover;
    background-position: var(--bg-banner-pos);
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 50px;
}

.brad-gallery-banner--fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.brad-gallery-banner__overlay {
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-image: linear-gradient(180deg, #02010185 0%, #020202 100%);
    opacity: 1;
    z-index: 1;
}

.brad-gallery-banner__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1140px;
    min-height: 326px;
    margin: 0 auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

@keyframes bradBannerFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.brad-gallery-banner__title {
    margin: 70px 0 20px 0 !important;
    padding: 0 !important;
    font-family: "Oxanium", Sans-serif !important;
    font-size: 53px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none !important;
    text-shadow: none;
    animation: bradBannerFadeInUp 1.25s both;
}

.brad-gallery-banner__line {
    display: block;
    width: 108px;
    height: 2px;
    background-color: #FFFFFF;
    margin: 2px 0 0 0;
    opacity: 1;
}

/* ==========================================================================
   2. CUADRÍCULA DE GALERÍAS (VISTA DE ÁLBUM)
   ========================================================================== */
.brad-gallery-album-container {
    max-width: var(--bg-container-width);
    margin: 0 auto;
    padding: 0 20px 60px 20px;
}

.brad-gallery-album-grid {
    display: grid;
    grid-template-columns: repeat(var(--bg-album-cols), minmax(0, 1fr));
    gap: var(--bg-album-gap);
    align-items: stretch;
}

.brad-gallery-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card-bg);
    box-shadow: var(--bg-card-shadow);
    text-decoration: none !important;
    color: var(--bg-card-text-color) !important;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    border: none;
}

.brad-gallery-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
}

.brad-gallery-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--bg-card-ratio);
    overflow: hidden;
    background-color: #eaeaea;
}

.brad-gallery-card__img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.35s ease;
}

.brad-gallery-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}

.brad-gallery-card--hover-darken:hover .brad-gallery-card__media::after {
    background: var(--bg-photo-hover-overlay);
}

.brad-gallery-card--hover-zoom:hover .brad-gallery-card__img {
    transform: scale(1.04);
}

.brad-gallery-card__footer {
    background-color: var(--bg-card-bg);
    padding: 11px 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.brad-gallery-card__title {
    margin: 0 !important;
    font-size: var(--bg-card-font-size);
    font-weight: 500;
    color: var(--bg-card-text-color);
    line-height: 1.35;
}

/* ==========================================================================
   3. VISTA INTERNA DE LA GALERÍA
   ========================================================================== */
.brad-gallery-single-view {
    max-width: var(--bg-single-container-width);
    margin: 0 auto;
    padding: 45px 20px 70px 20px;
    animation: bradGalleryFadeIn 0.32s ease;
}

@keyframes bradGalleryFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.brad-gallery-back-wrap {
    margin-bottom: 22px;
    text-align: left;
}

.brad-gallery-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1px solid #d8d8d8;
    color: #333333;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 15px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.brad-gallery-back-btn:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff !important;
}

.brad-gallery-single__header {
    text-align: center;
    margin-bottom: 34px;
}

.brad-gallery-single__title {
    margin: 0 0 26px 0 !important;
    padding: 0 !important;
    font-family: var(--bg-font-family);
    font-size: var(--bg-single-title-size);
    font-weight: 500;
    color: var(--bg-single-title-color) !important;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.brad-gallery-single__description {
    max-width: var(--bg-single-desc-width);
    margin: 0 auto !important;
    font-size: var(--bg-single-desc-size);
    line-height: 1.68;
    color: var(--bg-single-desc-color);
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
}

.brad-gallery-single__description p {
    margin: 0 0 12px 0;
}

.brad-gallery-single__description p:last-child {
    margin-bottom: 0;
}

/* Cuadrícula de Fotos dentro de la Galería */
.brad-gallery-photos-grid {
    display: grid;
    grid-template-columns: repeat(var(--bg-photo-cols), minmax(0, 1fr));
    gap: var(--bg-photo-gap);
}

.brad-gallery-photo-item {
    position: relative;
    width: 100%;
    aspect-ratio: var(--bg-photo-ratio);
    overflow: hidden;
    background-color: #ececec;
    cursor: pointer;
    display: block;
}

.brad-gallery-photo-item__img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease, filter 0.3s ease;
}

/* Oscurecer imagen al pasar el puntero sobre la foto */
.brad-gallery-photo-item__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.28s ease;
    pointer-events: none;
}

.brad-gallery-photo-item:hover .brad-gallery-photo-item__overlay {
    background: var(--bg-photo-hover-overlay);
}

/* ==========================================================================
   4. LIGHTBOX MODAL (IMAGEN EN GRANDE CON SIGUIENTE Y ATRÁS)
   ========================================================================== */
.brad-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: var(--bg-lightbox-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    user-select: none;
    -webkit-user-select: none;
}

.brad-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.brad-lightbox__stage {
    position: relative;
    max-width: 86vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brad-lightbox__img {
    max-width: 86vw;
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.65);
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Botones Siguiente y Atrás */
.brad-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    padding: 0;
    outline: none;
}

.brad-lightbox__nav:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-50%) scale(1.06);
}

.brad-lightbox__nav--prev {
    left: 24px;
}

.brad-lightbox__nav--next {
    right: 24px;
}

.brad-lightbox__nav svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
}

/* Botón Cerrar y Contador */
.brad-lightbox__close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease;
    padding: 0;
}

.brad-lightbox__close:hover {
    background: rgba(0, 0, 0, 0.85);
}

.brad-lightbox__counter {
    position: absolute;
    top: 26px;
    left: 28px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-family: var(--bg-font-family);
    letter-spacing: 0.5px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px 11px;
    border-radius: 20px;
}

/* ==========================================================================
   5. RESPONSIVE (TABLET Y MÓVILES)
   ========================================================================== */
@media (max-width: 1024px) {
    .brad-gallery-banner {
        min-height: 326px;
        margin-top: -155px;
        margin-bottom: 40px;
    }

    .brad-gallery-banner__title {
        margin-top: 120px !important;
        font-size: 44px !important;
    }

    .brad-gallery-album-grid {
        grid-template-columns: repeat(var(--bg-album-cols-tablet), minmax(0, 1fr));
    }

    .brad-gallery-photos-grid {
        grid-template-columns: repeat(var(--bg-photo-cols-tablet), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .brad-gallery-banner {
        min-height: 326px;
        margin-top: -177px;
        margin-bottom: 30px;
    }

    .brad-gallery-banner__content {
        align-items: center;
        text-align: center;
    }

    .brad-gallery-banner__title {
        margin-top: 175px !important;
        font-size: 50px !important;
    }

    .brad-gallery-banner__line {
        margin: 2px auto 0 auto;
    }

    .brad-gallery-album-container {
        padding: 0 15px 40px 15px;
    }

    .brad-gallery-album-grid {
        grid-template-columns: repeat(var(--bg-album-cols-mobile), minmax(0, 1fr));
        gap: 18px;
    }

    .brad-gallery-single-view {
        padding: 28px 15px 50px 15px;
    }

    .brad-gallery-single__title {
        font-size: var(--bg-single-title-size-mobile);
        margin-bottom: 18px !important;
    }

    .brad-gallery-single__description {
        font-size: 14px;
        line-height: 1.6;
    }

    .brad-gallery-photos-grid {
        grid-template-columns: repeat(var(--bg-photo-cols-mobile), minmax(0, 1fr));
        gap: 8px;
    }

    .brad-lightbox__stage,
    .brad-lightbox__img {
        max-width: 94vw;
        max-height: 82vh;
    }

    .brad-lightbox__nav {
        width: 42px;
        height: 42px;
        background: rgba(0, 0, 0, 0.6);
    }

    .brad-lightbox__nav--prev {
        left: 10px;
    }

    .brad-lightbox__nav--next {
        right: 10px;
    }

    .brad-lightbox__close {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
    }

    .brad-lightbox__counter {
        top: 18px;
        left: 16px;
    }
}

/* ==========================================================================
   6. ESCALADO EN PC / ESCRITORIO (+15% en Álbum y +30% en Galería Interna)
   ========================================================================== */
@media (min-width: 992px) {
    .brad-gallery-wrapper .brad-gallery-album-container {
        width: 100% !important;
        max-width: min(calc(100vw - 40px), calc(var(--bg-container-width) * 1.15)) !important;
    }

    .brad-gallery-wrapper .brad-gallery-single-view {
        width: 100% !important;
        max-width: min(calc(100vw - 40px), calc(var(--bg-single-container-width) * 1.30)) !important;
    }
}

/* ==========================================================================
   7. FORMULARIO DE CONTACTO ([everest_form id="563"]) Y PÁGINA CONTÁCTANOS
   ========================================================================== */
.brad-evf-container {
    padding: 10px 26px 28px 26px;
    font-family: 'Roboto', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #222222;
    text-align: left;
}

.brad-evf-field {
    margin-bottom: 18px;
}

.brad-evf-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 7px;
    line-height: 1.3;
}

.brad-evf-field label .required {
    color: #e02b20;
    text-decoration: none;
    border: none;
    margin-left: 2px;
}

.brad-evf-field input[type="text"],
.brad-evf-field input[type="email"],
.brad-evf-field textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #222222;
    background-color: #fafafa;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.brad-evf-field input[type="text"]:focus,
.brad-evf-field input[type="email"]:focus,
.brad-evf-field textarea:focus {
    outline: none;
    background-color: #ffffff;
    border-color: #FFC203;
    box-shadow: 0 0 0 3px rgba(255, 194, 3, 0.18);
}

.brad-evf-submit-wrap {
    margin-top: 6px;
}

.brad-evf-submit-btn {
    display: inline-block;
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #111111 !important;
    padding: 10px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.brad-evf-submit-btn:hover {
    background-color: #FFC203 !important;
    border-color: #FFC203 !important;
    color: #000000 !important;
}

.brad-evf-notice {
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.brad-evf-notice--success {
    background-color: #ecfdf5;
    border: 1px solid #10b981;
    color: #065f46;
}

.brad-evf-notice--error {
    background-color: #fef2f2;
    border: 1px solid #ef4444;
    color: #991b1b;
}