/* =================================================================
   RESPONSIVE IPAD VERTICAL (768px - 1024px)
   Target principal: iPad 10 portrait (820 x 1106).
   Cubre tambien iPad mini (744), iPad Air (834) y iPad Pro 12.9 (1024).

   Criterio: no ocultar contenido, reacomodar. Unidades fluidas
   (clamp / % / vw) dentro del rango para que no queden puntos
   ciegos entre 768 y 1024 al redimensionar.

   El hero del home NO usa el timeline GSAP en este rango (la
   coreografia de pixeles esta afinada para desktop). custom.js
   omite el pin del hero bajo 1025px y este archivo lo deja
   estatico: caption + video + card. Los pins de los scrollers
   (nextgen / belong) si corren porque trabajan en porcentajes.
   ================================================================= */

@media (min-width: 768px) and (max-width: 1024.98px) and (orientation: portrait) {

    /* ------------------------------------------------------------
       BASE - el padding desktop de 7rem es demasiado para 820px
       ------------------------------------------------------------ */

    /* Safari iPad pinta un halo gris al tocar links/botones
       (tap-highlight); sobre el navbar glass se ve como un hover
       fantasma. Fuera en todo el rango tactil. */
    a,
    button,
    .btn,
    .cwc-navbar__brand,
    .cwc-navbar__grid {
        -webkit-tap-highlight-color: transparent;
    }

    .container-fluid {
        padding: 0 clamp(24px, 4vw, 40px);
    }

    .container-fluid.rem--2 {
        padding: 0 clamp(20px, 3vw, 32px);
    }

    /* ------------------------------------------------------------
       1. HERO ESTATICO - caption en flujo + video + card
       ------------------------------------------------------------ */
    .cwc-hero {
        min-height: 0;
        height: auto;
        overflow: visible;
        padding: clamp(100px, 13vw, 130px) 0 40px 0;
    }

    /* Collage absoluto de 6 fotos + icono: fuera en iPad (no reflowea) */
    .cwc-hero > img[class^="image--hero"],
    .cwc-hero .iconlogo {
        display: none;
    }

    /* Caption: de absoluto centrado a flujo normal, escala iPad */
    .cwc-hero__caption {
        position: static;
        transform: none;
        max-width: 100%;
        padding: 0 clamp(24px, 4vw, 40px) 0 clamp(24px, 4vw, 40px);
        margin: 0 0 28px 0;
        font-size: clamp(44px, 6.6vw, 62px);
        line-height: 1.02;
        letter-spacing: -1px;
        pointer-events: auto;
    }

    /* Texto siempre visible: el JS no anima el hero en este rango */
    .cwc-hero .cwc-line,
    .cwc-hero .cwc-line > span {
        overflow: visible;
        transform: none !important;
    }

    .cwc-hero .cwc-line:nth-child(3) {
        line-height: 1.1;
        margin-top: 0;
    }

    .cwc-hero__media {
        aspect-ratio: 16 / 10;
        border-radius: 10px !important;
        transform: none !important;
    }

    /* Card de horarios: 3 columnas se mantienen, tipografia contenida */
    .cwc-hero__card {
        transform: none !important;
        margin-top: -48px;
        max-width: calc(100% - clamp(48px, 8vw, 80px));
        padding: 18px 22px;
        border-radius: 10px;
    }

    .cwc-hero__label {
        font-size: 15px;
    }

    .cwc-hero__text {
        font-size: 14px;
    }

    .cwc-hero__card .btn-transparency {
        font-size: 13px;
        padding: 9px 14px;
        white-space: nowrap;
    }

    /* ------------------------------------------------------------
       3. CARDS TRANSITION (Sent With Purpose / Plan Your Visit)
       Dos cards lado a lado; alturas y tipografia a escala iPad
       ------------------------------------------------------------ */
    .cwc-cards-transition {
        padding: 36px 0 72px 0;
    }

    .cwc-bigcard {
        min-height: clamp(380px, 50vw, 480px);
        border-radius: 10px;
    }

    .cwc-bigcard__body {
        padding: 20px;
    }

    .cwc-bigcard__title {
        font-size: clamp(21px, 2.8vw, 26px);
    }

    .cwc-bigcard__text {
        font-size: 14px;
        max-width: 320px;
        margin-bottom: 14px;
    }

    .cwc-bigcard__actions .btn-transparency {
        font-size: 12px;
        letter-spacing: 0.5px;
        padding: 8px 12px;
    }

    /* Stagger vertical de la card derecha, mas corto que en desktop */
    .ty-50 {
        transform: translateY(48px);
    }

    /* ------------------------------------------------------------
       4/5. NEXT GENERATION + A PLACE TO BELONG
       Columnas apiladas: titulo arriba, scroller full-width debajo.
       El pin GSAP sigue activo (trabaja en %, no en px).
       ------------------------------------------------------------ */
    .cwc-belong .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cwc-section__hero {
        font-size: clamp(30px, 4.4vw, 40px);
        max-width: 26ch;
        margin-bottom: 36px;
    }

    .cwc-section__title {
        font-size: clamp(40px, 5.6vw, 52px);
    }

    .cwc-belong .cwc-section__title {
        margin-bottom: 36px;
    }

    /* Tiles: ~2.5 visibles; el pin revela el resto en el scroll */
    .cwc-scroller > li {
        flex: 0 0 21%;
        width: 21%;
    }

    /* Belong tiene 3 tiles (no 4): UL mas angosto y tiles mas anchos
       para que el xPercent -45 del pin termine casi lleno, sin el
       vacio derecho que deja la medida de desktop */
    #aplacetobelong .cwc-scroller {
        width: 160%;
    }

    #aplacetobelong .cwc-scroller > li {
        flex: 0 0 32%;
        width: 32%;
    }

    .cwc-tile {
        height: auto;
        aspect-ratio: 3 / 4;
        border-radius: 10px;
    }

    .cwc-tile__label {
        font-size: 19px;
    }

    .cwc-tile__sub {
        font-size: 14px;
    }

    /* ------------------------------------------------------------
       5b. A PLACE TO GROW (eventos)
       Touch: no hay hover -> el titulo vive en un strip fijo abajo.
       La descripcion completa queda en la pagina del evento.
       ------------------------------------------------------------ */
    .cwc-grow {
        padding: 72px 0;
    }

    .cwc-grow .cwc-section__title {
        margin-bottom: 32px;
    }

    .cwc-event {
        border-radius: 10px;
    }

    .cwc-event__body {
        inset: auto 0 0 0;
        transform: none;
        padding: 12px 14px;
        gap: 0;
    }

    .cwc-event__desc {
        display: none;
    }

    .cwc-event__title {
        font-size: 14px;
        line-height: 1.25;
    }

    .cwc-event__date {
        padding: 6px 10px;
        min-width: 54px;
        border-radius: 0 10px 0 10px;
    }

    .cwc-event__date strong {
        font-size: 26px;
    }

    .cwc-event__date em {
        font-size: 12px;
    }

    /* ------------------------------------------------------------
       6. NEVER MISS AN UPDATE (app)
       Texto + badges arriba a lo ancho, phones debajo en fila
       ------------------------------------------------------------ */
    .cwc-app {
        min-height: 0;
        padding: 72px 0 120px 0;
    }

    .cwc-app .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cwc-app__sub {
        margin-top: 16px;
    }
    footer .col-md-3 {
        flex: 0 0 auto;
        width: 33%;
    }
    footer .cwc-arrow {
        width: 18px;
        height: 18px;}
        .cwc-navbar__grid::before{
            display: none;
        }
    .cwc-app__stores {
        margin-top: 18px;
    }

    .cwc-app__stores img {
        height: 44px;
    }

    .cwc-app .col-md-8 {
        margin-top: 48px;
    }

    .cwc-app__phones {
        gap: clamp(16px, 3vw, 28px);
        max-width: 640px;
        margin: 0 auto;
    }
    .ipad-off{
        display: none;
    }
    .col-6.col-md-3.col-lg-2.mb-4.mb-lg-0.cwc-footer__acc{
        width: 33%;
        margin-bottom: 70px !important;
    }
    /* Curva final mas suave, proporcional al ancho iPad */
    .cwc-curve-bottom {
        border-bottom-left-radius: 80px 70px;
        border-bottom-right-radius: 80px 70px;
        padding-bottom: 180px !important;
    }

    /* ------------------------------------------------------------
       PAGINAS INTERNAS - reglas compartidas
       ------------------------------------------------------------ */

    /* Hero de foto: igual que desktop (81vh, casi toda la pantalla)
       con el titulo de seccion + pill scroll-down debajo. Aplica a
       todas las internas: events, give, prayer, team, missions,
       groups, event-detail. Sin overrides aqui a proposito. */

    /* ------------------------------------------------------------
       CONTACT - unica interna sin page-hero: el titulo arranca al
       tope de la pagina y el navbar fijo lo tapaba. Info row de
       4 columnas apretadas pasa a 2x2; intro y form a lo ancho.
       ------------------------------------------------------------ */
    .cwc-main > .cwc-page-title:first-child {
        padding-top: 140px;
    }

    .cwc-contact-info > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 24px;
    }

    .cwc-contact-form .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cwc-contact-form__intro {
        text-align: left;
        margin: 8px 0 24px 0;
    }

    /* Daymaker: 3 columnas de jobs quedan apretadas; 2 respiran mejor */
    .cwc-jobs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ------------------------------------------------------------
       GROUPS - believe hero estatico (mismo criterio que el home:
       la coreografia GSAP usa pixeles desktop; el JS la omite
       bajo 1025px y aqui va el layout estatico a escala iPad)
       ------------------------------------------------------------ */
    .cwc-believe-hero {
        min-height: 0;
        overflow: visible;
        padding: 64px 0 16px 0;
        background-color: #f5f0e0 !important;
    }

    .cwc-believe-hero__caption-wrap {
        position: static;
        transform: none;
        max-width: 100%;
        padding: 0 clamp(24px, 4vw, 40px);
        pointer-events: auto;
        margin-bottom: 32px;
    }

    .cwc-believe-hero__caption {
        font-size: clamp(40px, 5.8vw, 54px);
    }

    /* Texto visible: el JS no lo anima en este rango */
    .cwc-believe-hero .cwc-line,
    .cwc-believe-hero .cwc-line > span {
        overflow: visible;
        transform: none !important;
    }

    .cwc-believe-hero__caption-sub {
        margin-top: 20px;
    }

    .cwc-believe-hero__caption-sub > span {
        font-size: 16px;
    }

    /* Collage decorativo absoluto: fuera (no reflowea en 820) */
    .cwc-believe-hero > img[class^="image--believe-hero"],
    .iconlogo-believe {
        display: none;
    }

    .cwc-believe-hero__media {
        border-radius: 10px !important;
        transform: none !important;
    }

    /* ------------------------------------------------------------
       CONNECT - hero editorial para iPad: titulo grande arriba,
       slider banner debajo y "You're welcome" como remate.
       Neutraliza el <style> inline del blade (figures absolutas) y
       el .vertical-align (top 50%) que descuadran fuera de 100vh.
       !important: gana al <style> inline del blade.
       ------------------------------------------------------------ */
    .cwc-connect-hero {
        height: auto;
        min-height: 0;
        padding: 120px 0 40px 0;
    }

    .cwc-connect-hero .vertical-align {
        position: static;
        top: auto;
        transform: none;
    }

    /* El row apila en columna para reordenar: titulo -> banner */
    .cwc-connect-hero .row {
        flex-direction: column;
    }

    .cwc-connect-hero .row > .col-md-3 {
        display: none;
    }

    .cwc-connect-hero .row > .col-md-8 {
        order: 1;
        width: 100%;
        max-width: 100%;
    }

    .cwc-connect-hero__title {
        margin-bottom: 36px;
    }

    /* Banner slider: full width, proporcion cine, radius de marca */
    .cwc-connect-hero__figure--main {
        order: 2;
        position: static !important;
        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 14;
        z-index: 0 !important;
        margin: 0;
        border-radius: 10px;
    }

    /* Accent decorativa (top -40vh desktop): no reflowea en portrait */
    .cwc-connect-hero__figure.cstm {
        display: none;
    }

    /* Remate: de absoluto a flujo, alineado al borde derecho del banner */
    .cwc-connect-hero__welcome {
        position: static;
        display: block;
        text-align: right;
        margin: 16px 0 0 0;
        padding: 0 clamp(24px, 4vw, 40px);
        font-size: 18px;
    }

    /* Texto alineado a la derecha: en desktop funciona porque la
       columna es ancha, pero al angostarse queda con el margen
       izquierdo dentado y se lee mal. Mismo fix que en mobile.
       Afecta la nota "DO NOT SHARE THIS" de /prayer. */
    body .text-right {
        text-align: left !important;
    }

    /* Esa nota vive en un col-md-6 que a 820px queda a media columna:
       a ancho completo el parrafo respira y acompana al formulario */
    .cwc-section-dark .row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Secciones dark apiladas: la foto ocupa el ancho completo de la
       columna. Igual que en los ministerios de NextGen, con
       max-width: 426px quedaba flotando al centro y descuadrada. */
    .cwc-section-dark__figure {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .cwc-section-dark__figure--portrait,
    .cwc-section-dark__figure--portrait.cwc-parallax {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 4 / 3;
        margin-left: 0;
    }

    /* GIVE: sol decorativo absoluto (top -150px) invade el parrafo
       anterior en 820; decorativo prescindible en este rango */
    .cwc-give-sun {
        display: none;
    }

    /* ------------------------------------------------------------
       GLOBAL: con las columnas apiladas, un boton que cierra su
       columna queda pegado al bloque siguiente; aire uniforme
       ------------------------------------------------------------ */
    [class*="col-"] > .btn:last-child,
    [class*="col-"] > .cwc-give-where__ctas:last-child {
        margin-bottom: 40px;
    }

    /* ------------------------------------------------------------
       GIVE - espaciados desktop de 220px a escala iPad
       ------------------------------------------------------------ */
    .pt-220 {
        padding-top: 110px;
    }

    .mb-220 {
        margin-bottom: 88px;
    }

    .cwc-give-where {
        padding: 72px 0;
    }

    /* Ilustracion de billetes: de absoluta (left -39%, invadia el
       texto) a flujo normal arriba de los stats */
    .cwc-give-where__visual {
        justify-content: flex-start;
        text-align: left !important;
        height: auto;
        margin-top: 48px;
    }

    .cwc-give-where__bills {
        position: static;
        left: auto;
        bottom: auto;
        width: 38%;
        max-width: 250px;
        margin: 0 0 24px 0;
    }

    /* Stats 74c / 26c: dos columnas alineadas a la izquierda */
    .cwc-give-where__stats--stacked {
        display: flex;
        flex-wrap: wrap;
    }

    .cwc-give-where__stats--stacked > .col-12 {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        text-align: left;
    }

    .cwc-give-where__stats--stacked > .col-12 + .col-12 {
        margin-top: 0 !important;
    }

    /* El <br> del texto de 26c rompe feo en columna angosta */
    .cwc-give-where__stats--stacked br {
        display: none;
    }

    /* ------------------------------------------------------------
       WAYS TO GIVE - apiladas como mobile, boton GIVE NOW visible
       (en touch no existe el hover que lo revela en desktop)
       ------------------------------------------------------------ */
    .cwc-give-ways__grid > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cwc-give-way {
        padding: 32px;
        border-radius: 10px;
    }

    .cwc-give-way__icon {
        position: static;
        background: transparent;
        padding: 0;
        margin-bottom: 8px;
    }

    .cwc-give-way__icon img {
        width: 48px;
        height: 48px;
    }

    .cwc-give-way--clickable .cwc-give-way__cta {
        position: static;
        margin-top: 20px;
        pointer-events: auto;
        align-self: flex-start;
    }

    /* ------------------------------------------------------------
       NEXTGEN (/nextgen)
       Portrait: las fotos laterales del intro no caben (826px de
       alto del diseno es horizontal), y los ministerios se apilan.
       ------------------------------------------------------------ */
    .cwc-nextgen-intro {
        padding: 64px 0;
        min-height: 0;
        display: block;
    }

    .cwc-nextgen-intro__figure {
        display: none;
    }

    .cwc-nextgen-intro__text {
        font-size: 18px;
    }

    .cwc-anchor-nav {
        top: 64px;
        padding: 16px 0;
    }

    .cwc-anchor-nav__list {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cwc-anchor-nav__list::-webkit-scrollbar {
        display: none;
    }

    /* Mismo criterio que en mobile: sin bold y mas compacto para que
       los 4 segmentos entren sin cortar "HIGH SCHOOL". En 820px hay
       algo mas de aire que en telefono, por eso no baja tanto. */
    .cwc-anchor-nav__link {
        padding: 11px 16px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .cwc-ministry {
        padding: 64px 0;
        scroll-margin-top: 140px;
    }

    /* Apiladas: la foto siempre arriba sin importar el lado */
    .cwc-ministry--photo-left .cwc-ministry__media-col,
    .cwc-ministry--photo-right .cwc-ministry__media-col {
        order: -1;
        margin-bottom: 32px;
    }

    /* Full width: con max-width 426px la foto quedaba flotando al
       centro de una columna de ~720px y se veia asimetrica. A ancho
       completo se lee como banner; se abre la proporcion porque un
       426/608 a 720px de ancho daria mas de 1000px de alto. */
    .cwc-ministry__figure {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 4 / 3;
        margin-left: 0;
        margin-right: 0;
    }

    .cwc-ministry__schedule {
        font-size: 22px;
    }

    /* =============================================================
       FLOURISH TRAINING (/flourish)
       A 768-1024 las 3 cards no caben en fila: col-md-6 las deja de
       a 2 y la tercera abajo. Se ajusta el padding interno porque
       48px de los lados se comian el texto.
       ============================================================= */
    .cwc-flourish-hero {
        padding: 80px 0 100px 0;
    }

    .cwc-flourish-hero__mark {
        width: 75vw;
        left: -18vw;
    }

    .cwc-flourish-hero__head {
        margin-bottom: 110px;
    }

    .cwc-flourish-hero__title {
        font-size: calc(56px * var(--cwc-title-scale));
    }

    .cwc-flourish-hero__subtitle {
        font-size: calc(38px * var(--cwc-title-scale));
    }

    .cwc-flourish-hero__mark-sm {
        width: 62px;
    }

    .cwc-flourish-tracks {
        padding: 80px 0 100px 0;
    }

    .cwc-flourish-tracks__intro {
        margin-bottom: 60px;
    }

    .cwc-flourish-card__body {
        padding: 32px 30px 34px 30px;
    }

    .cwc-flourish-card__cta {
        padding-top: 30px;
    }

}