/* =================================================================
   RESPONSIVE IPAD HORIZONTAL (1025px - 1199px)
   Target principal: iPad 10 landscape (1180 x ~746 de viewport).
   Cubre tambien iPad Air/Pro acostados y ventanas de laptop a ese
   ancho.

   Diferencia clave contra el vertical: aqui SOBRA ancho y FALTA
   alto. Por eso el criterio es al reves: se conservan las columnas
   (2-3 por fila) y se recortan alturas, paddings verticales y los
   100vh que en 746px dejan el contenido apretado.

   El hero del home y el believe-hero de /groups SI conservan su
   coreografia GSAP: tienen una capa propia en custom.js (bloque
   5.1-ipad) calibrada para este rango, independiente de la de PC.
   ================================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape),
       (min-width: 1025px) and (max-width: 1199.98px) {

    /* ============================================================
       CONTROL UNICO DE TITULOS — SOLO IPAD ACOSTADO
       ============================================================
       Se cambia UN SOLO valor: --cwc-title-ipad.
       Todos los titulos principales parten de ahi y sus span/em
       internos pasan a unidades em, asi heredan la escala en vez de
       tener su propio tamano absoluto (que era el motivo por el que
       antes no se movian al ajustar el titulo).

       Referencia de proporciones (relativas al valor base):
         hero del home / believe hero .... 1.35
         titulo de pagina / give / groups. 1.15
         titulos de seccion .............. 1
         heading de "More events" ........ 0.8
       Cambiando el base se mueve todo el conjunto manteniendo la
       jerarquia. No afecta desktop, vertical ni mobile.           */
    :root {
        --cwc-title-ipad: 35px;
    }

    /* --- Nivel 1: heroes --- */
    .cwc-hero__caption,
    .cwc-believe-hero__caption {
        font-size: calc(var(--cwc-title-ipad) * 1.5);
    }
.cwc-nextgen-intro__body {
    max-width: 70%; 
}
.cwc-nextgen-intro__figure--left {
    left: -50px;
    transform: translateY(-78.6%);
}
    /* --- Nivel 2: titulos de pagina y bloques grandes --- */
    .cwc-page-title__heading,
    .cwc-event-article__title,
    .cwc-give-ways__heading,
    .cwc-give-where__title,
    .cwc-groups-grid__heading,
    .cwc-connect-hero__title {
        font-size: calc(var(--cwc-title-ipad) * 2);
    }

    /* --- Nivel 3: titulos de seccion (los h2 del sitio) --- */
    .cwc-section__title,
    .cwc-section__hero,
    .cwc-section-dark__title,
    .cwc-display-md,
    .cwc-cr-freedom__title,
    .cwc-cr-how__title,
    .cwc-cr-mondays__title,
    .cwc-cr-steps__title,
    .cwc-create-group__title,
    .cwc-give-faqs__title,
    .cwc-give-other__title {
        font-size: var(--cwc-title-ipad);
    }

    /* --- Nivel 4: headings secundarios --- */
    .cwc-event-more__heading {
        font-size: calc(var(--cwc-title-ipad) * 0.8);
    }

    /* --- HIJOS: span y em pasan a em para heredar del padre ---
       Aqui esta la correccion: estos elementos tenian font-size
       propio en px/clamp y no seguian al titulo. */
    .cwc-hero__caption span,
    .cwc-believe-hero__caption span,
    .cwc-section__title span,
    .cwc-section__hero span,
    .cwc-page-title__heading span,
    .cwc-page-title__heading--mixed span,
    .cwc-give-ways__heading span,
    .cwc-give-where__title span,
    .cwc-groups-grid__heading span,
    .cwc-section-dark__title span,
    .cwc-cr-freedom__title span,
    .cwc-cr-how__title span,
    .cwc-cr-mondays__title span,
    .cwc-cr-steps__title span,
    .cwc-create-group__title span,
    .cwc-give-faqs__title span,
    .cwc-give-other__title span,
    .cwc-connect-hero__word {
        font-size: 1em;
    }

    /* Las variantes en cursiva van algo menores, como en el diseno */
    .cwc-hero__caption em,
    .cwc-hero__caption .cwc-serif,
    .cwc-believe-hero__caption em,
    .cwc-believe-hero__caption .cwc-serif,
    .cwc-section__title .cwc-serif,
    .cwc-section__hero .cwc-serif,
    .cwc-page-title__heading em,
    .cwc-page-title__heading--mixed em,
    .cwc-give-ways__heading em,
    .cwc-give-where__title em,
    .cwc-groups-grid__heading em,
    .cwc-event-more__heading em,
    .cwc-section-dark__title em,
    .cwc-section-dark__title .cwc-serif,
    .cwc-cr-freedom__title em,
    .cwc-cr-how__title em,
    .cwc-cr-mondays__title em,
    .cwc-cr-steps__title em,
    .cwc-create-group__title em,
    .cwc-give-faqs__title em,
    .cwc-give-other__title em,
    .cwc-connect-hero__word--italic {
        font-size: 0.85em;
    }

    /* Los em anidados dentro de un span ya escalan solos por herencia
       (ej: <span>does <em>my</em> giving go?</span> en /give) */

        .cwc-navbar__nav {
                gap: 20px !important;
            }
    /* ------------------------------------------------------------
       BASE - 7rem de padding se come 224px de los 1180 disponibles
       ------------------------------------------------------------ */
    .container-fluid {
        padding: 0 clamp(40px, 5vw, 60px);
    }

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

    /* Halo gris de Safari al tocar en pantallas tactiles */
    a,
    button,
    .btn {
        -webkit-tap-highlight-color: transparent;
    }

    /* ------------------------------------------------------------
       1. HERO - conserva GSAP; solo se ajustan proporciones para
       que la escena quepa en 746px de alto
       ------------------------------------------------------------ */
    .cwc-hero {
        padding: 74px 0 0 0;
    }

    /* Caption: mas corto de alto para no chocar con las fotos.
       z-index 4 para que el collage nunca le pase por encima. */
    .cwc-hero__caption {
        z-index: 4;
        line-height: 0.95;
        max-width: 900px;
        padding: 0 clamp(40px, 5vw, 60px);
    }

    /* Video full width, igual que en PC. El alto se controla SOLO con
       la proporcion: usar max-height junto a aspect-ratio hace que el
       navegador recorte el ANCHO para respetar la relacion, y el video
       dejaba de ocupar toda la fila. */
    .cwc-hero__media {
        /* Sin aspect-ratio: se fija el ALTO y el ancho queda al 100%,
           asi el video llena la fila como en PC.
           El alto se calcula desde el viewport descontando el padding
           superior (74) + el alto de la card (~75) - el solape (32) +
           un respiro inferior: el video ocupa casi toda la pantalla y
           la card queda abajo pero visible. */
        aspect-ratio: auto;
        height: clamp(280px, calc(100vh - 160px), 640px);
        border-radius: 10px;
    }

    /* Card mas compacta y con menos solape: antes el -46px la
       empujaba fuera de cuadro */
    .cwc-hero__card {
        margin-top: -32px;
        max-width: calc(100% - 120px);
        padding: 12px 24px;
        border-radius: 10px;
    }

    .cwc-hero__card .cwc-hero__label {
        margin-bottom: 2px;
    }

    .cwc-hero__card .cwc-hero__text {
        line-height: 1.3;
    }

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

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

    /* Las 6 fotos del collage: mas bajas para que el remolino no
       se salga por arriba/abajo en un viewport de 746px */
    .image--hero1 { height: 180px; }
    .image--hero2 { height: 200px; }
    .image--hero3 { height: 158px; }
    .image--hero4 { height: 150px; }
    .image--hero5 { height: 280px; }
    .image--hero6 { height: 150px; }

    /* ------------------------------------------------------------
       3. CARDS TRANSITION (Sent With Purpose / Plan Your Visit)
       Se quedan lado a lado; se recorta el alto minimo
       ------------------------------------------------------------ */
    .cwc-cards-transition {
        padding: 32px 0 64px 0;
    }

    .cwc-bigcard {
        min-height: clamp(400px, 46vw, 520px);
        border-radius: 10px;
    }

    .cwc-bigcard__body {
        padding: 24px;
    }

    .cwc-bigcard__title {
        font-size: 24px;
    }

    .cwc-bigcard__text {
        font-size: 15px;
        max-width: 340px;
    }

    /* Stagger vertical mas corto: en 746px el offset de 80px
       empujaba la card derecha fuera de cuadro */
    .ty-50 {
        transform: translateY(40px);
    }

    /* ------------------------------------------------------------
       4/5. NEXT GENERATION + A PLACE TO BELONG
       Se conserva el layout de 2 columnas (texto | scroller) y el
       pin GSAP: aqui el ancho alcanza de sobra.
       ------------------------------------------------------------ */
    /* IMPORTANTE: estas dos secciones se PINNEAN. Deben ocupar el alto
       completo del viewport, si no al quedar fijas se ve el fondo de la
       seccion siguiente por debajo (la pantalla queda partida en dos
       colores). Por eso NO se les baja el min-height aqui. */
    .cwc-belong {
        min-height: 100vh;
        padding: 40px 0;
    }

    /* Tiles menos altos: el aspect 3/4 no cabe en 746px */
    .cwc-tile {
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: 10px;
    }

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

    /* Scrollers pinneados: el ancho lo define el contenido (max-content)
       y el JS calcula el desplazamiento exacto desde scrollWidth. Con el
       ancho fijo en % quedaba media pantalla vacia al terminar el pin. */
    #nextgeneration .cwc-scroller,
    #aplacetobelong .cwc-scroller {
        width: max-content;
    }

    /* Tile limitado por ALTO: en 746px un 3/4 se sale de pantalla */
    #nextgeneration .cwc-scroller > li,
    #aplacetobelong .cwc-scroller > li {
        flex: 0 0 clamp(260px, 30vw, 340px);
        width: clamp(260px, 30vw, 340px);
    }

    /* ------------------------------------------------------------
       5b. A PLACE TO GROW - 3 eventos en fila; sin hover en touch
       ------------------------------------------------------------ */
    .cwc-grow {
        padding: 64px 0;
    }

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

    /* El body sube en hover; en tactil no existe -> strip fijo */
    .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: 56px;
        border-radius: 0 10px 0 10px;
    }

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

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

    /* ------------------------------------------------------------
       6. NEVER MISS AN UPDATE (app)
       ------------------------------------------------------------ */
    .cwc-app {
        min-height: 0;
        padding: 64px 0 110px 0;
    }

    .cwc-app__phones {
        gap: 24px;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

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

    .cwc-curve-bottom {
        border-bottom-left-radius: 110px 90px;
        border-bottom-right-radius: 110px 90px;
    }

    /* ------------------------------------------------------------
       PAGINAS INTERNAS
       ------------------------------------------------------------ */

    /* Hero de foto: 81vh de 746px son 604px, proporcion correcta.
       Se deja el valor de desktop a proposito. */

    .cwc-page-title {
        padding: 48px 0 40px 0;
    }

    /* Contact: unica interna sin hero, el navbar fijo tapaba el H1 */
    .cwc-main > .cwc-page-title:first-child {
        padding-top: 130px;
    }

    /* Secciones dark: menos padding vertical y foto contenida */
    .cwc-section-dark {
        padding: 64px 0;
    }

    .cwc-section-dark__figure--portrait {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ------------------------------------------------------------
       GIVE - mismos arreglos que en vertical, adaptados al ancho
       ------------------------------------------------------------ */
    .pt-220 {
        padding-top: 120px;
    }

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

    /* Sol decorativo (top -150px) invade el parrafo anterior */
    .cwc-give-sun {
        display: none;
    }

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

    /* Billetes: de absolutos (left -39%) a flujo sobre los stats */
    .cwc-give-where__visual {
        justify-content: flex-start;
        text-align: left !important;
        height: auto;
    }

    .cwc-give-where__bills {
        position: static;
        left: auto;
        bottom: auto;
        width: 45%;
        max-width: 220px;
        margin: 0 0 20px 0;
    }

    .cwc-give-ways {
        padding: 64px 0;
    }

    .cwc-give-way {
        padding: 90px 24px 24px 24px;
        border-radius: 10px 0 0 0;
    }

    /* El CTA "GIVE NOW" es hover-only en desktop; en tactil no
       aparece nunca -> pasa a flujo, visible siempre */
    .cwc-give-way--clickable .cwc-give-way__cta {
        position: static;
        margin-top: 18px;
        pointer-events: auto;
        align-self: flex-start;
    }

    /* ------------------------------------------------------------
       CONNECT - el <style> inline del blade posiciona las figures
       en absoluto contra 100vh; con 746px el titulo queda encima
       ------------------------------------------------------------ */
    .cwc-connect-hero {
        height: auto;
        min-height: 0;
        padding: 100px 0 48px 0;
    }

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

    .cwc-connect-hero__figure--main {
        position: static !important;
        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 21 / 9;
        z-index: 0 !important;
        margin: 0 0 28px 0;
        border-radius: 10px;
    }

    .cwc-connect-hero__figure.cstm {
        display: none;
    }

    .cwc-connect-hero__welcome {
        position: static;
        display: block;
        text-align: right;
        margin: 16px 0 0 0;
        padding: 0 clamp(40px, 5vw, 60px);
        font-size: 18px;
    }

    /* ------------------------------------------------------------
       DAYMAKER / TEAM - el ancho da para mantener las columnas
       ------------------------------------------------------------ */
    .cwc-jobs__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* ------------------------------------------------------------
       GLOBAL: un boton que cierra su columna quedaba pegado a la
       seccion siguiente
       ------------------------------------------------------------ */
    [class*="col-"] > .btn:last-child,
    [class*="col-"] > .cwc-give-where__ctas:last-child {
        margin-bottom: 32px;
    }

    /* ------------------------------------------------------------
       NEXTGEN (/nextgen)
       Landscape: hay ancho de sobra, se conservan las 2 columnas y
       las fotos del intro; solo se recorta el alto de la seccion.
       ------------------------------------------------------------ */
    .cwc-nextgen-intro {
        min-height: clamp(480px, 62vh, 620px);
        padding: 56px 0;
    }

    /* Mas chicas para no invadir el texto en un ancho de 1180 */
    .cwc-nextgen-intro__figure {
        width: clamp(200px, 20vw, 280px);
        height: clamp(285px, 28.5vw, 400px);
    }

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

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

    .cwc-anchor-nav__link {
        padding: 12px 20px;
        font-size: 13px;
    }

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

    /* La foto no puede usar el alto del diseno en 746px de viewport */
    .cwc-ministry__figure {
        max-width: 340px;
    }

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

    /* =============================================================
       FLOURISH TRAINING (/flourish)
       Acostado sobra ancho y falta alto: se recorta el padding
       vertical y el aire entre el titulo y el bloque de abajo.
       ============================================================= */
    .cwc-flourish-hero {
        padding: 70px 0 80px 0;
    }

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

    .cwc-flourish-hero__title {
        font-size: calc(var(--cwc-title-ipad) * 1.9);
    }

    .cwc-flourish-hero__subtitle {
        font-size: calc(var(--cwc-title-ipad) * 1.2);
    }

    .cwc-flourish-tracks {
        padding: 70px 0 90px 0;
    }

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

    /* 3 columnas a 1024-1199 dan ~330px por card: menos padding para
       que el texto no quede en una tira angosta. */
    .cwc-flourish-card__body {
        padding: 28px 26px 30px 26px;
    }

    .cwc-flourish-card__text {
        font-size: 14px;
    }

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

}