/* ------------------------------------------------------------ *\
    Correcciones responsive para tablet (iPad)
    Rango 768px - 1279.98px

    Se carga DESPUES de main13.css y solo contiene reglas dentro
    de media queries acotadas a tablet, de modo que el diseno de
    movil (<768px) y el de escritorio (>=1280px) no se alteran.
\* ------------------------------------------------------------ */


/* ------------------------------------------------------------ *\
    1. Cabecera
    Problema: el logo esta posicionado en absoluto (left: 12%) y el
    menu horizontal necesita ~909px, por lo que entre 768px y 1250px
    se montan uno encima del otro; ademas por debajo de 992px el menu
    desborda el viewport y provoca scroll horizontal.
\* ------------------------------------------------------------ */

/* 1.a  Tablet pequena / vertical (iPad mini, iPad Air, iPad 10.2):
        no cabe el menu horizontal, se usa el menu hamburguesa que
        ya existe en el marcado. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .header .header__inner {
        padding: 2.2rem 3.2rem;
    }

    /* El logo pasa a formar parte del flujo flex: no puede solaparse */
    .wrapper .logo,
    .wrapper.header-transparent .logo,
    .wrapper.header-alt .logo,
    .wrapper.menu-opened .logo {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: auto;
        flex: 0 0 auto;
    }

    .header .logo img {
        max-height: 64px;
        width: auto;
    }

    /* Menu horizontal fuera, hamburguesa dentro */
    .header .header__aside {
        display: none;
    }

    .header .header__content {
        max-width: 100%;
        width: 100%;
    }

    .header .nav-trigger.d-md-none {
        display: inline-block !important;
        margin-left: auto;
        color: #28375b;
    }

    .wrapper.header-transparent:not(.header-alt):not(.menu-opened) .header .nav-trigger {
        color: #fff;
    }
}

/* 1.b  Tablet grande / horizontal (iPad Pro 11" y 13", iPad en apaisado):
        cabe el menu horizontal, pero hay que compactarlo y sacar el
        logo del posicionamiento absoluto. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .header .header__inner {
        padding: 1.8rem 2.4rem;
        gap: 1.6rem;
    }

    .wrapper .logo,
    .wrapper.header-transparent .logo,
    .wrapper.header-alt .logo,
    .wrapper.menu-opened .logo {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: auto;
        flex: 0 0 auto;
    }

    .header .logo img {
        max-height: 68px;
        width: auto;
    }

    /* Contenedor vacio en este rango (solo aloja la hamburguesa movil) */
    .header .header__content {
        display: none;
    }

    .header .header__aside {
        flex: 1 1 auto;
        min-width: 0;
    }

        .header .header__aside ul {
            flex-wrap: nowrap;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 0;
        }

            .header .header__aside ul li a {
                font-size: 15px;
                padding: 8px 8px;
            }
}


/* ------------------------------------------------------------ *\
    2. Texto justificado
    Problema: .texto-habitaciones usa text-align: justify y solo se
    desactiva por debajo de 768px. En tablet las columnas quedan de
    200-320px y el justificado abre "rios" de espacio entre palabras.
    Se hereda la alineacion del contenedor (izquierda o centrada).
\* ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .texto-habitaciones {
        text-align: inherit;
        hyphens: none;
    }

    /* main13.css define .text-justify con !important, asi que hay que
       neutralizarla igual. Con inherit cada bloque conserva la
       alineacion que le da su contenedor (izquierda o centrada). */
    .article__entry.text-justify,
    .offer__entry.text-justify,
    .section__entry.text-justify {
        text-align: inherit !important;
    }
}


/* ------------------------------------------------------------ *\
    3. Bloques .offer (listados de habitaciones y gastro)
    Problema A: el lado de la imagen es un carrusel de Bootstrap
    (div.carousel), no un .offer__image, por lo que las reglas de
    reparto de main13.css no le afectan y ocupa el ancho natural de
    la foto, dejando al texto lo que sobra (227px de 660).
    Problema B: .offer__content conserva en tablet los paddings de
    escritorio (80px + 60px, o 40px + 70px en los pares).
    Problema C: el titulo mantiene 3rem con word-break: break-word,
    que parte las palabras por la mitad.

    El carrusel se define con flex: 1 1 0 en lugar de un 50% fijo
    para que siga ocupando el ancho completo en los .offer que no
    llevan texto al lado (bloques de gastro dentro de col-md-4).
\* ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* Sin align-items aqui: las tarjetas que lo quieren ya llevan la
       clase align-items-center en el marcado, y forzarlo colapsa
       cualquier caja de imagen que dependa del estirado flex para
       tener altura (ver la nota de .article--alt mas abajo). */
    .offer {
        padding: 16px;
    }

        .offer > .offer__content {
            flex: 0 0 auto;
            width: 50%;
            min-width: 0;
        }

        .offer > .carousel {
            flex: 1 1 0;
            min-width: 0;
        }

            .offer > .carousel .offer__image {
                width: 100%;
                height: auto;
            }

        .offer .offer__content,
        .offer:nth-child(even) .offer__content {
            padding-left: 24px;
            padding-right: 24px;
        }

        .offer .offer__title {
            font-size: 2.4rem;
            line-height: 1.25;
            margin-bottom: 1.2rem;
            word-break: normal;
            overflow-wrap: break-word;
        }
}


/* ------------------------------------------------------------ *\
    4. Bloques .article--alt
    Problema A: entre 992px y 1199px se aplican los valores de
    escritorio: contenido fijo a 41.8rem con padding 15rem 4rem
    (150px arriba y abajo) y dos imagenes comprimidas a
    (100% - 41.8rem)/2. Resultado: columna estrecha y enormes huecos
    verticales.
    Problema B: main13.css ya oculta la primera imagen por debajo de
    992px, pero la regla no llega a aplicarse porque la clase
    d-md-block de Bootstrap la pisa con !important. Por eso en tablet
    siguen mostrandose las dos imagenes y el texto se queda sin sitio.
    Se unifica el criterio en todo el rango tablet: una sola imagen y
    reparto 50/50.
\* ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .article--alt .article__image:first-child {
        display: none !important;
    }

    /* OJO: no poner align-items: center en .article--alt. La foto de
       estos bloques no es el <img> (que .fullsize-image oculta con
       width/height de 1px), sino un background-image sobre el
       <picture>. Ese <picture> no tiene altura propia: la recibe del
       estirado flex (align-items: stretch). Con center colapsa a
       altura 0 y la imagen desaparece por completo. */

    .article .article__title {
        font-size: 2.6rem;
        margin-bottom: 2rem;
        word-break: normal;
        overflow-wrap: break-word;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .article--alt {
        padding: 16px;
    }

        .article--alt .article__content {
            max-width: 50%;
            width: 50%;
            padding: 3rem 3rem;
        }

        .article--alt .article__image {
            max-width: 50%;
            width: 50%;
            margin: 0;
        }
}

/* Red de seguridad: suelo de altura para el <picture>, que no tiene
   altura propia. Si el texto de la tarjeta es corto, la foto sigue
   teniendo caja donde pintarse en lugar de quedar en nada. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .article--alt .article__image {
        min-height: 26rem;
    }
}


/* ------------------------------------------------------------ *\
    5. Bloques en rejilla Bootstrap (col-md-6 col-lg-4)
    Problema: entre 992px y 1199px las dos imagenes y el texto se
    reparten en tres columnas de ~320px; con 40px de padding interno
    quedan ~226px utiles para el texto.
    Solucion: las imagenes al 50% y el texto a ancho completo.
    (main13.css incluye su propia rejilla con max-width ademas de
    width, por eso hay que redefinir tambien max-width.)
\* ------------------------------------------------------------ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .section-article--alt .row > .section__image {
        flex: 0 0 auto;
        width: 50%;
        max-width: 50%;
    }

    .section-article--alt .row > .section__content {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding: 24px !important;
        margin-bottom: 0 !important;
    }

        .section-article--alt .row > .section__content .section__title {
            margin-bottom: 1.2rem;
        }
}


/* ------------------------------------------------------------ *\
    6. Listas de equipamiento de las fichas de habitacion
    Problema: column-count: 2 con list-style: inside permite que un
    item se parta entre las dos columnas y que la segunda linea no
    quede indentada bajo la vinneta.
\* ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .ul-habitaciones {
        list-style-position: outside;
        padding-left: 1.6em;
    }

        .ul-habitaciones li {
            break-inside: avoid;
            page-break-inside: avoid;
        }
}