/* ========================================
   RESPONSIVE STYLES - IPAD HORIZONTAL
   Media Query: iPad (768px - 1024px) Landscape
   Experiencia similar a laptop con ajustes de tamaño
   ======================================== */

/* 📱 iPad (768px - 1024px) en orientación horizontal */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    /* ============ NOTA IMPORTANTE ============
       iPad horizontal usa menú DESKTOP (no hamburger)
       GSAP está ACTIVO (ScrollSmoother, animaciones)
       Este archivo solo ajusta tamaños para pantalla de 1024px
    ============================================= */

    /* ============ VARIABLES CSS ============ */
    :root {
        --parrafo-normal: 16px !important;
        --parrafo-big: 18px !important;
        --heading: 52px !important;
        --heading-sm: 44px !important;
        --sub-heading: 38px !important;
        --heading-tree: 28px !important;
        --heading-four: 24px !important;
    }

    /* ============ TIPOGRAFÍA ============ */
    body {
        font-size: 14px;
        line-height: 1.6;
    }

    h1 {
        font-size: 52px !important;
        line-height: 1.1 !important;
    }

    h2 {
        font-size: 42px !important;
        line-height: 1.2 !important;
    }

    h3 {
        font-size: 34px !important;
        line-height: 1.2 !important;
    }

    h4 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    h5 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    h6 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    body h1.title_hero {
        font-size: 60px !important;
        line-height: 1.1 !important;
    }

    body h2.title_geeral_section {
        font-size: 42px !important;
    }

    body p,
    body .descripcion_general {
        font-size: 16px !important;
        line-height: 1.6;
    }

    .card-title {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 12px;
    }

    /* ============ HEADER ============ */
    body header.header_main {
        padding: 12px 30px;
        min-height: 65px;
    }

    .mobile-off.ipad-off.pcon{
        display: block !important;
    }

    /* Menú desktop visible - NO hamburger */
    .new--menu {
        display: flex !important;
    }

    header nav ul li a {
        font-size: 14px;
        padding: 8px 12px;
    }

    /* ============ SECCIONES Y SPACING ============ */
    section,
    section.section-mod {
        padding: 70px 40px !important;
    }
section.section-mod.pt-200 {
    padding-top: 200px !important;
}
    section.big-section {
        padding: 100px 40px !important;
    }

    section.extra-big-section {
        padding: 130px 40px !important;
    }

    section.half-section {
        padding: 35px 40px !important;
    }

    body .inviting-mens {
        padding: 80px 40px !important;
    }

    /* ============ CONTAINER ============ */
    .container {
        max-width: 940px !important;
        padding: 0 20px;
    }

    /* ============ HERO SECTIONS ============ */

    /* Hero Home con GSAP activo */
    body section.hero-home-gsap {
        padding: 105px 10px 0 10px !important
    }
    body .hero-title {
        font-family: var(--font-sofia) !important;
        margin-bottom: 20px !important;
        font-weight: 600 !important;
        font-size: 50px !important;
        line-height: .9 !important;
    }
    body .cta--hero--home li a p {
        margin: 0;
        color: white;
        font-size: 18px !important;
        text-transform: capitalize;
    }
        .section-mod.position-relative.mx--10.mb-10.pt-0.mb-xs-0#paddingsection .container{
            max-width: 100% !important;
                padding: 0 !important;
        }
            .section-mod.position-relative.mx--10.mb-10.pt-0.mb-xs-0#paddingsection{
            padding: 0 10px !important; 
                margin: auto;
                max-width: 100% !important;
        }
    body .hero-grid {
        gap: 20px !important;
    }

    body .hero-col h2 {
        font-size: 32px !important;
        padding: 0 15px;
    }

    .hero-col .hero-title,
    .hero-col .hero-title span {
        font-size: 38px !important;
        line-height: 1.1;
    }

    body .hero-overlay {
        padding: 40px 20px !important;
    }

    /* Hero general */
    body section.nhh--mobile {
        min-height: 70vh !important;
        margin-top: 70px !important;
    }

    .hero-mask {
        width: 85%;
        height: 85%;
    }

    /* Hero parallax */
    body .hero--parallax-xs,
    .hero--students.hero--parallax-xs .contentVideo {
        height: 500px !important;
    }

    body .hero--kids .contentVideo,
    body .height-70 {
        height: 500px !important;
        min-height: 0vh !important;
    }

    body .height-70.videoparallax {
        height: 400px !important;
    }

    /* Hero History */
    body .hero_history.pt-380 {
        padding-top: 40vh !important;
    }

    /* ============ OUR MANDATE SECTION ============ */
    /* GSAP está activo, pero ajustamos tamaños */

    body #ourMandate {
        padding: 80px 40px !important;
    }

    #ourMandate h1 {
        font-size: 48px !important;
    }

    #ourMandate h2 {
        font-size: 36px !important;
    }

    .mandate-section .lead {
        font-size: 18px !important;
    }

    /* ============ GRIDS Y LAYOUTS ============ */

    /* Grid 4 columnas → 3 columnas */
    body .gtc-4 {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Grid 5 columnas → 3 columnas */
    body .gtc-5 {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Grid 3 columnas → mantener 3 */
    body .gtc-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Grid 2 columnas → mantener 2 */
    body .gtc-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Grid masonry → 2 columnas */
    body .grid-masonry:not(.youngmansonry) {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        grid-auto-rows: 220px;
    }

    body .grid-masonry:not(.youngmansonry) > div {
        height: auto !important;
    }

    /* Grid help */
    body .grid-help.gtc-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* ============ CARDS Y ITEMS ============ */
    body .item-card-help {
        padding: 40px 25px;
        min-height: 280px;
    }

    body .title-help-menbers {
        font-size: 24px !important;
        line-height: 1.1;
    }

    body .title_item-help {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
    h4.title_geeral_section.edited span{
        font-size: 45px !important;
    }
    body .blob-card .conten_grid_help {
        padding: 0 15px;
    }

    /* ============ MINISTRIES SLIDER ============ */
    .ministries-slider.ul-items {
        flex-wrap: nowrap;
        gap: 15px;
    }

    body .ministries-slider.ul-items li {
        width: 30% !important;
        min-width: 280px;
    }

    .ministries-slider.ul-items.x4 li {
        max-width: 23% !important;
    }
body .new--menu .h-menu>li>a {
    font-size: 12px;
}
    /* ============ EVENTS ============ */
    .event-info .title_hero {
        font-size: 32px !important;
    }

    body .event--skin2.box-mode .event-item.latera-content {
        display: flex;
        flex-direction: row;
    }

    .event--skin2.box-mode .event-item.latera-content .event-image {
        width: 45% !important;
    }

    .event--skin2.box-mode .event-item.latera-content .event-content {
        width: 55% !important;
        padding: 30px !important;
    }

    body .nav-event-title {
        font-size: 20px !important;
    }

    body .moreEvent {
        padding: 25px 40px 25px 120px;
    }

    body .moreEvent h4 {
        font-size: 22px;
    }

    /* ============ SEARCH FORM ============ */
    .section-mod.search--events {
        padding: 30px 40px !important;
    }

    .search--events--form {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ============ BUTTONS ============ */
    p.btn_general a {
        padding: 14px 28px !important;
        font-size: 12px !important;
        min-width: 180px;
    }
section#ss--kids1{
    padding-top: 140px !important;
}
    p.btn_general {
        margin-bottom: 12px;
    }

    body .button-group .btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    /* Button hub */
    body .box-btn-hub a {
        padding: 12px 18px !important;
        font-size: 13px;
        gap: 8px;
    }

    body .box-btn-hub a svg {
        width: 20px;
        height: 20px;
    }

    /* ============ TABS ============ */
    body .tabs_menu a {
        padding: 14px 20px;
        font-size: 14px;
    }

    body .tabs_content_container section {
        padding-top: 50px !important;
    }

    body .tabs_content_container section.section-mod {
        padding-bottom: 60px !important;
    }

    /* ============ ACCORDIONS ============ */
    body #accordeon_jobs .accordion-button {
        font-size: 18px;
        padding: 18px 25px !important;
    }

    body div#accordeon_jobs .accordion-body {
        padding: 20px 25px 30px 30px;
    }

    body .accordeon_kids .accordion-item .accordion-header img {
        height: 50px !important;
        width: 50px !important;
        margin-right: 15px !important;
    }

    /* ============ FOOTER ============ */
    body .new--menu--footer .footer-tabs-nav {
        margin-bottom: 15px;
        margin-right: 20px;
        min-width: 35%;
    }

    footer .new--menu--footer .footer-tab-button {
        font-size: 16px;
    }

    footer .footer-tab-panel ul.menu_footer li p a {
        font-size: 14px;
    }

    footer .disclaimer_footer {
        font-size: 13px !important;
    }

    /* ============ VIDEO COMPONENTS ============ */
    body .video_modal_content {
        height: 500px;
    }

    body .video-modal-close {
        top: 100px !important;
    }

    /* ============ TRUTH SECTION ============ */
    body .truth-article h2 {
        font-size: 30px;
        margin-bottom: 18px;
    }

    body .truth-article .verse-text,
    body .truth-article .description {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 25px;
    }

    .truth-article small {
        font-size: 14px;
        padding: 8px 10px 6px 10px;
    }

    /* ============ TIMELINE ============ */
    body .timeline-year {
        font-size: 40px;
    }

    .timeline-content {
        width: 45%;
    }

    /* ============ DECORATIVE SHAPES & ANIMATIONS ============ */
    /* Las formas decorativas se mantienen activas con GSAP */

    body .shape-1 {
        width: 110px;
    }

    body .shape-3 {
        width: 70px;
    }

    body .shape-5 {
        width: 65px;
    }

    body .floating3 {
        width: 150px;
        top: 150px;
    }

    /* ============ KIDS MINISTRY SHAPES ============ */
    .kids_floating6 {
        width: 45px;
    }

    body .kids_floating1 {
        height: 35%;
    }

    .kids_floating3 {
        width: 55px;
    }

    body .kids_floating5 {
        width: 60px;
    }

    body .kids_floating4 {
        width: 85px;
    }

    .kids_floating7 {
        width: 140px;
    }

    /* ============ STUDENTS MINISTRY ============ */
    body .rotatingstudents {
        width: 130px;
        top: 18%;
    }

    /* ============ ABILITY INCLUSION ============ */
    body .ability_floating7 {
        width: 130px;
    }

    body .ability_floating4 {
        width: 10% !important;
    }

    /* ============ ADULTS MINISTRY ============ */
    body .adults--hover li {
        min-width: 31%;
        width: 31%;
    }

    body .adults--hover a {
        height: 40vh;
    }

    .adults--hover {
        flex-wrap: wrap;
        gap: 15px;
    }

    body .adults--hover aside img {
        height: 18px;
    }
.col-ip-122 {
    flex: 0 0 auto;
    width: 100% !important;
}
    /* ============ WOMEN'S MINISTRY ============ */
    body .herowomens img.flower1 {
        width: 12%;
    }
    body .adults--hover img.flower1 {
        position: absolute;
        width: 62px;
        right: 8%;
        bottom: 0px;
    }
    .flower11 {
        width: 70px;
    }

    body .flower1111 {
        width: 75px;
    }

    .flower111 {
        width: 80px;
    }

    /* ============ CTA HERO HOME ============ */
    .cta--hero--home li {
        min-width: 32% !important;
    }

    .cta--hero--home.edited,
    .cta--hero--home {
        flex-wrap: nowrap;
        gap: 15px;
    }

    /* ============ STRUCTURAL DOCTRINES ============ */
    body .strutural_doctrines .item_fundation {
        padding: 40px 25px;
    }

    body .title_item_fundation {
        font-size: 22px;
        margin-bottom: 12px;
    }

    /* ============ UTILITIES ============ */
    body .col-xs-12 {
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    body .padding-mobile {
        padding: 0px 20px;
    }

     
    .ipad-v-off{display: none !important;}

    /* ============ PAGINATION ============ */
    .pagination {
        flex-wrap: wrap;
        gap: 5px;
    }

    .pagination .page-link {
        font-size: 14px;
        padding: 8px 12px;
    }

    /* ============ PARALLAX ============ */
    /* Parallax funciona normal porque GSAP está activo */
    .parallax {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* ============ ANIMATIONS ============ */
    /* Todas las animaciones GSAP están activas */
    /* Solo ajustamos si hay elementos específicos que necesiten menor escala */

    /* ============ UI APP SECTION ============ */
    .ui--app {
        flex-direction: row !important;
        gap: 20px;
    }
body h1.title_hero,
body h1.h1b {
    font-family: var(--font-sofia) !important;
    margin-bottom: 0px !important;
    font-weight: 600 !important;
    font-size: 45px !important;
    line-height: 1 !important;
}
    body .ui--app li {
        width: auto;
        flex: 1;
    }

    body .ui--app li * {
        font-size: 14px;
        min-height: 38px;
    }

    body .ui--app li i {
        width: 38px;
        height: 38px;
        font-size: 0.95rem !important;
    }

    .ui--app--mobile {
        display: none !important;
    }

    /* ============ POSITION ABSOLUTE OVERLAYS ============ */
    body .position-absolute.top-0.start-0.p-5.d-flex.flex-row.justify-content-between.h-100 {
        padding: 2rem !important;
    }

    /* ============ ANIMATED WAVE ============ */
    body .animated-wave {
        height: 100% !important;
    }

    /* ============ MISC ELEMENTS ============ */
    body .arrown--on--hover {
        bottom: 25px;
        right: 40px;
        width: 18px;
    }

    body .join {
        left: 35px;
        top: 35px;
    }

    /* ============ BLOB ANIMATIONS ============ */
    /* Mantener animaciones activas */
    body .blob-card-1 .blob-shape {
        animation: blob-animation-1 8s ease-in-out infinite;
    }

    body .blob-card-2 .blob-shape {
        animation: blob-animation-2 10s ease-in-out infinite;
    }

    body .blob-card-3 .blob-shape {
        animation: blob-animation-3 9s ease-in-out infinite;
    }

    /* ============ BELIEF ITEMS ============ */
    body .belief_item_card {
        width: 31%;
        min-width: 31% !important;
    }

    /* ============ RESPONSIVE ADJUSTMENTS ============ */
    body .reverse {
        flex-direction: row;
    }

    body .reverse > div {
        width: auto;
        flex: 1;
    }

    body .reverse > div:last-child {
        margin-bottom: 0;
        order: 0;
    }
    .grid-masonry video{
        width: auto !important;
    }
    /* ============ EVENT INFO ============ */
    .box-mode .event-info {
        margin-bottom: 30px !important;
        width: 100%;
        flex: 1 !important;
    }
    body .shape-66 {
        top: 0;
        left: 3%;
        width: 93px;
        height: auto;
        z-index: 9;
        animation: float-bounce-6 11s ease-in-out infinite;
    }
    .event-info {
        margin-bottom: 30px !important;
        width: 50%;
        flex: auto !important;
    }
        .event--skin2.list-mode .event-title{
            font-size: 18px !important;
        }
    /* ============ MEMBER CARE CALENDAR ============ */
    body .members-heal-calendar.mx--10 {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    /* ============ CONTACT FORM ============ */
    .contact_form_section {
        padding-bottom: 50px !important;
    }

    .input_form_contact {
        margin-bottom: 15px !important;
    }

    /* ============ GSAP SPECIFIC ADJUSTMENTS ============ */
    /* Hero home GSAP mantiene su comportamiento */
    /* ScrollSmoother está activo */
    /* Todas las animaciones de scroll funcionan normal */

    /* Solo ajustamos el sticky si es necesario */
    .sticky-div {
        display: block !important;
    }

}

/* ========================================
   FIN RESPONSIVE IPAD HORIZONTAL
   ======================================== */