/* ============================================================
   KBC — RESPONSIVE iPAD VERTICAL (768px - 991px)
   Una sola media query. Reutiliza las clases de style.css /
   pages.css; !important solo donde hay que ganarle a reglas
   previas o a estilos inline del blade.

   Alcance de esta primera pasada: MENU (header + mega), HOME
   y FOOTER. Los efectos GSAP (pin, parallax, carruseles) siguen
   activos; iPad es tactil, asi que lo que dependia de :hover se
   deja visible.
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Escala de titulares kbc--font (iPad vertical) */
    .kbc--font    { font-size: 64px; }
    .kbc--font-xl { font-size: 84px; }
    .kbc--font-lg { font-size: 74px; }
    .kbc--font-md { font-size: 50px; }
    .kbc--font-sm { font-size: 34px; }
    .kbc--font-xs { font-size: 24px; }

section.kbc-hero-std,
    .height-100.hero--section {
        height: calc(100vh - 100px);
    }
        .btn-black,
        .btn-transparent-black,
        .btn-white,
        .btn-transparent-white,
        .btn-beige {
            font-size: 14px !important;
            text-transform: uppercase;
        }
        .container,
        .container-md,
        .container-sm {
            max-width: 100%;
        }
                .col-md-5 {
                    flex: 0 0 auto;
                    width: 50%;
                }
    /* ============================================================
       GLOBAL — GUTTERS
       Bootstrap deja 12px: se iguala al padding del header (24px)
       ============================================================ */
    .container-xxl,
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* ============================================================
       MENU — header
       Bootstrap oculta los links (.d-none .d-lg-flex) por debajo de
       992px y GSAP arranca el boton Menu en opacity 0: en este rango
       la pagina quedaba SIN navegacion visible hasta hacer scroll.
       ============================================================ */
    .kbc-nav__inner {
        height: 78px;
        padding: 0 24px !important;
    }
    .kbc-nav__cross { width: 46px; height: 46px; }
    /* el boton Menu pasa al flujo y queda siempre visible/clickeable */
    .kbc-nav__menu-btn {
        position: static !important;
        margin-top: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        padding: 14px 26px;
        font-size: 15px;
    }

    /* ============================================================
       MENU — mega (pages.css ya lo pasa a 1 columna bajo 992px)
       ============================================================ */
    .kbc-mega {
        padding: 90px 24px 24px;
        overflow-y: auto;
    }
    .kbc-mega__inner { min-height: 0; }
    .kbc-mega__cats {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        gap: 4px;
    }
    /* las categorias caben en fila: pierden el borde-guia vertical */
    .kbc-mega__cat {
        width: auto;
        padding: 10px 18px;
        border-left: 0;
        border-radius: 10px;
        font-size: 14px;
    }
    .kbc-mega__cat.is-active { border-left-color: transparent; }
    .kbc-mega__mid { margin: 0 12px 12px; padding: 24px 26px; }
    /* pages.css los deja en 1 columna bajo 992px: aqui cabe en 2 */
    .kbc-mega__subgrid {
        grid-template-columns: 1fr 1fr;
        gap: 20px 32px;
    }
    .kbc-mega__sub-title { font-size: 17px; }

    /* ============================================================
       HOME — hero
       ============================================================ */
    /* el titulo y la barra llegaban al borde del viewport */
    .kbc-hero__title-wrap,
    .kbc-hero__bar {
        padding-left: 24px;
        padding-right: 24px;
    }
    /* los dos SVG sumaban ~940px y BIBLE CHURCH quedaba cortado:
       se apilan y se reescalan al ancho disponible */
    .kbc-hero__title-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        bottom: 200px;
    }
    .kbc-hero__title-svg--keystone {
        width: min(78vw, 470px);
        height: auto;
        aspect-ratio: 481 / 60;
    }
    .kbc-hero__title-svg--bible {
        width: min(64vw, 390px);
        height: auto;
        aspect-ratio: 683 / 50;
    }
    .kbc-hero__bar { height: 128px; bottom: 44px; }
    .kbc-hero__newhere { font-size: 32px; }
    /* el container del statement traia width: 1340px (desbordaba) */
    .kbc-hero__layer--statement > .container-fluid {
        width: 100%;
        padding: 0 24px;
    }
    .kbc-hero__statement-text { font-size: 26px; max-width: 100%; }

    /* ============================================================
       HOME — one mission + locations
       ============================================================ */
    .kbc-one-mission { padding: 64px 0 40px; }
    .kbc-one-mission .col-md-5 { width: 100%; }
    .kbc-locations { padding: 56px 0 72px; }
    .floating-svg1 { width: 34%; }
    /* la col-md-5 vacia le robaba la mitad del ancho a las cards */
    .kbc-locations .col-md-5 { display: none; }
    .kbc-locations .col-md-7 { width: 100%; }
    .kbc-locations .d-flex { gap: 16px !important; }
    .kbc-loc-card { aspect-ratio: 3 / 4; }
    /* tactil: el overlay dependia de :hover y la info no se alcanzaba */
    .kbc-loc-card__overlay,
    .kbc-loc-card:hover .kbc-loc-card__overlay { transform: none !important; }
    .kbc-loc-card__overlay::before { opacity: 1; }
    .kbc-loc-card:hover { transform: none !important; box-shadow: none; }
    .d-flex:has(.kbc-loc-card:hover) .kbc-loc-card:not(:hover) {
        transform: none !important;
        filter: none;
    }
    .kbc-loc-card__overlay { padding: 22px 18px; }
    .kbc-loc-card__name { font-size: 32px; }
    .kbc-loc-card__addr { font-size: 15px; }
    .kbc-loc-card__overlay ul { margin-top: 16px; font-size: 14px; }
    .kbc-loc-card__overlay li { gap: 10px; margin-bottom: 4px; }
    .kbc-loc-card__overlay li > span:first-child { min-width: 104px; }

    /* ============================================================
       HOME — gather (el pin horizontal sigue con GSAP)
       ============================================================ */
    .kbc-gather { padding-top: 40px; }
    .kbc-gather .mb-60 { margin-bottom: 40px !important; }
    .kbc-gather-carousel li { width: 380px; }
    .kbc-gather-card__title { font-size: 19px; max-width: 240px; }
    .kbc-gather-card__desc { min-height: 96px; }
    .kbc-gather .mt-5 { margin-top: 16px !important; }
    .kbc-gather__tagline-svg { width: 100%; }
    .kbc-gather .row.mt-5 .col-md-6:first-child { display: none; }
    .kbc-gather .row.mt-5 .col-md-6:last-child { width: 100%; }

    /* ============================================================
       HOME — events + kids/youth
       ============================================================ */
    /* style.css lo deja en 4/5 bajo 992px: muy alto para iPad vertical */
    .kbc-events__inner { aspect-ratio: 1 / 1; }
    .kbc-events__overlay { left: 32px; bottom: 32px; }
    .kbc-kidsyouth { padding: 64px 0; }
    .kbc-kidsyouth .mb-80 { margin-bottom: 56px !important; }
    .kbc-ky-row__text { max-width: none; padding: 0 12px; }
    .kbc-ky-row__title-svg { height: 64px; width: auto; }

    /* ============================================================
       STAFF
       ============================================================ */
    .staff-team { padding: 56px 0 72px; }
    .staff-filter { gap: 10px; }
    .staff-filter__btn,
    .staff-filter__clean { padding: 10px 18px; font-size: 14px; }
    /* grid de 2 columnas SIN masonry (el JS lo salta bajo 992px) */
    .staff-grid {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }
    .staff-grid__sizer { display: none; }
    .staff-card { width: 50%; padding: 0 10px 20px; }
    .staff-card__name { font-size: 30px; }
    .staff-card__info { padding: 0 18px 16px; }
    /* tactil: el zoom del hover se quedaba pegado */
    .staff-card__media:hover img { transform: none; }
    .staff-modal__dialog { gap: 24px; padding: 30px 26px 32px; }
    .staff-modal__name { font-size: 26px; }

    /* ============================================================
       GOSPEL
       ============================================================ */
    .section-mod { padding: 64px 0; }
    .absolute--cross { width: 30%; }
    /* 4 por fila daba tarjetas de ~200px */
    .video-card { width: calc(50% - 15px); }

    /* ============================================================
       WHAT WE BELIEVE / WORSHIP MUSIC (comparten give-*)
       ============================================================ */
    .give-statement { padding: 64px 0 32px; }
    .wwb-statement { padding: 64px 0; }
    .wwb-foundation__card { padding: 32px; }
    .wwb-faith,
    .wwb-distinctives { padding: 48px 0 24px; }
    .wwb-faqs { padding: 48px 0 72px; }
    .give-ways__grid { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }
    .give-card { padding: 22px; min-height: 0; }
    .give-card__desc { margin-top: 28px; }
    /* el modal de statement of faith: tabs arriba, panel debajo */
    .wwb-modal__tabs { flex-direction: column; gap: 20px; }
    .wwb-modal__nav {
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
        position: static;
    }
    .wwb-modal__panels { height: auto; }
    /* Worship music */
    .wmp-playlist__card { padding: 0 28px; }
    .wmp-principles { padding: 56px 0 24px; }
    .wmp-songs { padding: 48px 0 72px; }
    /* la cruz de 620px se salia del viewport */
    .wmp-songs__cross { width: 380px; height: 380px; right: -110px; }
    .wmp-finally { padding: 24px 0 72px; }
    .wmp-finally__card { padding: 130px 32px 44px; }

    /* ============================================================
       PARTNERSHIP
       ============================================================ */
    .partnership-statement { padding: 64px 0 48px; }
    .partnership-partners { padding: 0 0 56px; }
    .partner-grid,
    .partnership-vintage__grid { gap: 16px; }
    .partnership-vintage { padding: 32px 0 56px; }
    .partnership-outreach { padding: 24px 0 56px; }
    /* titulo y marquee no caben en fila a este ancho */
    .partnership-outreach__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .partnership-outreach__marquee { width: 100%; }
    .partnership-outreach__logo img { height: 46px; max-width: 150px; }
    .partnership-banner { padding: 0 0 64px; }
    .partnership-banner__inner { aspect-ratio: 16 / 9; min-height: 0; }
    .partnership-banner__content { padding: 28px; }
    /* tactil */
    .partner-card:hover .partner-card__media img { transform: none; }

    /* ============================================================
       FACILITY RESERVATIONS
       ============================================================ */
    .fac-values { padding: 56px 0 24px; }
    .fac-values__card { padding: 28px; }
    .fac-note { margin-top: 36px; }
    /* 4 por fila daba cards muy angostas: pasan a 2 */
    .fac-types { padding: 32px 0 48px; }
    .fac-types .col-md-3 { width: 50%; }
    .fac-type__label { left: 18px; bottom: 16px; }
    .fac-cta { padding: 0 0 72px; }
    .fac-cta__box { padding: 36px 32px; }
    /* el boton absoluto se montaba sobre la direccion */
    .fac-cta__btn {
        position: static;
        margin-top: 26px;
    }
    /* Modal de detalle: la foto 4/5 media ~470px de alto y empujaba las
       politicas fuera de pantalla. Pasa a banner ancho y el contenido
       queda en una sola columna legible. */
    .fac-modal__dialog--detail {
        width: min(700px, 92vw);
        padding: 30px 26px 32px;
    }
    .fac-modal__dialog--detail .col-md-5,
    .fac-modal__dialog--detail .col-md-7 { width: 100%; }
    .fac-modal__media {
        aspect-ratio: auto;
        height: 220px;
    }
    .fac-modal__specs { gap: 14px; }
    .fac-modal__actions { text-align: left; margin-top: 24px; }
    .fac-modal--right .fac-modal__dialog--form { width: min(460px, 92vw); }
    .fac-type:hover .fac-type__img { transform: none; }

    /* ============================================================
       FOOTER
       ============================================================ */
    .kbc-footer {
        border-radius: 140px 140px 0 0;
        padding: 80px 0 28px;
    }
    
    .kbc-footer .kbc-footer__closing .svgicon { width: 56%; }
    .kbc-footer .kbc-footer__closing .cross-mark { transform: translateY(-50px); }
    /* col-md-2 dejaba columnas de ~128px y los links se partian */
    .kbc-footer .col-md-2 { width: 25%; }
    .kbc-footer .col-md-8 {
        width: 100%;
        margin-top: 32px;
    }
    /* con las direcciones a todo el ancho, alinearlas a la derecha
       se veia descolgado */
    .kbc-footer .text-md-end { text-align: left !important; }
    .kbc-footer .justify-content-md-end { justify-content: flex-start !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* EVENT DETAIL */
    .evd-main { padding: 40px 0 40px; }
    .evd-title { max-width: none; margin-bottom: 32px; }
    /* datos debajo del cuerpo en tablet */
    .evd-main .col-md-4 { width: 100%; }
    .evd-main .col-md-8 { width: 100%; }
    .evd-meta { margin-top: 40px; }
    .evd-more { padding: 8px 0 72px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* OUR STORY */
    .story-strip__item { width: 240px; height: 210px; }
    .story-logo { gap: 20px; }
    .story-logo__cross { width: 120px; height: 120px; }
    .story-logo__type b { font-size: 52px; }
    .story-logo__type i { font-size: 26px; }
    .story-panel--intro { width: 360px; padding: 0 28px; }
    .story-chapter { width: 860px; }
    .story-chapter__col--num { width: 340px; padding: 48px 28px; }
    .story-chapter__col--media { width: 520px; padding: 48px 28px; }
    .story-chapter__num { font-size: 130px; }

    /* ============================================================
       ODESSA / WESLEY CHAPEL (comparten las clases .odessa-*)
       En 768-991px las col-md-7/5 dejaban el texto muy angosto y
       media pantalla vacia: se apila todo a una columna.
       ============================================================ */
    .odessa-pastor .col-md-7,
    .odessa-pastor .col-md-5,
    .odessa-about .col-md-7,
    .odessa-about .col-md-5,
    .odessa-sermon .col-md-7,
    .odessa-sermon .col-md-5,
    .odessa-disc-row .col-md-7,
    .odessa-disc-row .col-md-5,
    .odessa-aside {
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    /* pastor: foto a ancho completo debajo del texto */
    .odessa-pastor__media {
        max-width: 420px;
        margin: 24px auto 0;
    }
    .odessa-pastor__media img { width: 100%; height: auto; }
    .odessa-pastor__bio { font-size: 15px; }

    /* about + aside: uno debajo del otro, ambos a ancho completo */
    .odessa-about { margin-bottom: 48px; }
    .odessa-about-card { padding: 28px; }
    .odessa-aside { margin-top: 24px; }
    .odessa-aside__card { margin-bottom: 16px; }
    .odessa-info { padding: 28px; }

    /* sermon: media arriba, info debajo */
    .odessa-sermon__media { max-width: none; margin-bottom: 20px; }
    .odessa-sermon__info { padding-left: 0; }

    /* discipleship: la lista ocupa todo el ancho */
    .odessa-disc { padding-right: 0; }
    .odessa-disc__head { flex-wrap: wrap; gap: 8px; }

    /* la cruz decorativa estorbaba en este ancho */
    .odessa-aside__cross { display: none; }

    /* ============================================================
       ABOUT
       ============================================================ */
    .about-hero__b-inner { padding: 0 8px; }
    .about-hero__statement { font-size: 22px; }
    .about-hero__cards { --bs-gutter-x: 20px; }
    .about-hero__cards h3 { font-size: 17px; }
    .about-hero__cards p  { font-size: 14px; line-height: 1.5; }

    /* beliefs y staff: la imagen se equilibra con el texto */
    .about-beliefs { padding: 56px 0; }
    .about-beliefs__card { padding: 28px; }
    .about-staff { padding: 48px 0; }

    /* los cinco pilares en 3 columnas quedaban apretados: pasan a 2 */
    .about-pillars { padding: 64px 0; }
    .about-pillars__grid .col-md-4 {
        flex: 0 0 auto;
        width: 50%;
    }
    .about-pillars__grid { gap: 32px 0; }
    .about-pillar__desc { font-size: 15px; }

    /* symbol + plan */
    .about-symbol { padding: 56px 0; }
    .about-symbol__cross { width: 46%; opacity: .25; }
    .about-plan { padding: 56px 0; }
    .about-plan__cols { --bs-gutter-x: 28px; }
    .about-rooms { margin-top: 40px; padding: 64px 0; }

    /* ============================================================
       EVENTS (Odessa / Wesley Chapel)
       ============================================================ */
    .events-current { padding: 56px 0 72px; }
    .events-list { gap: 40px; }
    .events-item__media { aspect-ratio: 16 / 11; }
    /* el desc traia 60px de margen inferior: separaba demasiado el boton */
    .events-item__desc { font-size: 15px; margin-bottom: 24px; }
    .events-item__date { font-size: 14px; }
    /* modal de detalle: una columna en este ancho */
    .events-modal__grid { grid-template-columns: 1fr; gap: 24px; }
    .events-modal__dialog { padding: 28px 24px; }
}