/*
    MIGAS DE PAN (WD-14786)

    Va en preload (render-blocking) y no en postload porque el bloque cae
    dentro del viewport inicial, justo bajo el hero de media pantalla: con
    el mecanismo data-href de postload aparecería sin estilos hasta que
    cssModules.js lo activa.

    Las variables --color-* y --font-* se definen en
    preload/modules/neobookings.css, que carga siempre y antes que este
    fichero.

    Registro tipográfico: mayúsculas con letter-spacing y peso normal, el
    mismo que usa el tema para sus etiquetas pequeñas (#advantagesSec
    span.title). Da el aire editorial que corresponde a un hotel boutique
    sin competir con los títulos en Cormorant Garamond.
*/

.breadcrumbs {
    margin-top: 40px;
}

/*
    Alineada a la izquierda por peticion del cliente, compartiendo eje con
    el cuerpo de texto del intro-text que va debajo.

    Ese cuerpo es una columna estrecha centrada dentro del .container, asi
    que su borde izquierdo no es un eje del layout: es el sobrante del
    centrado, (100% - ancho de columna) / 2. El ancho lo fija skeleton.css
    y cambia por tramo, de modo que el sangrado tiene que seguirlo:

        columna 68% (base)          -> 16%
        columna 50% (768-959px)     -> 25%
        columna 100% (<=767px)      -> 0

    ACOPLAMIENTO A MANTENER: si se toca el width de
    #restingplaceSec .content .description en skeleton.css (lineas 257 y
    477), hay que recalcular estos valores o la miga deja de alinear.

    text-align acompana a justify-content, no lo sustituye: cuando la miga
    envuelve en movil, el ultimo eslabon queda solo en su linea y ocupa el
    ancho completo, asi que justify-content se queda sin nada que alinear.
*/
.breadcrumbs > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    row-gap: 6px;

    /*
        El padding-right de 15px que el .col-md-12 hereda de Bootstrap se
        anula para que el sangrado izquierdo sea el unico que posiciona.
    */
    padding-left: 16%;
    padding-right: 0;

    font-family: var(--font-text-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/*
    Eslabones navegables: --color-black al 70% sobre blanco (~6,5:1 de
    contraste, por encima del AA que exige 4,5:1 a este tamaño).
*/
a.breadcrumbs__menu {
    color: rgba(10, 19, 41, 0.7);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

/*
    Hover/focus: cobre oscurecido, 5,02:1 sobre blanco. No se usa
    --color-secondary (#d49a6a) porque da 2,43:1 y falla el AA de WCAG
    1.4.3. Mantiene el tono y la saturacion de la marca, y queda bien
    distinto del verde de la pagina actual para no confundir los estados.
*/
a.breadcrumbs__menu:hover,
a.breadcrumbs__menu:focus {
    color: #9f602d;
}

/* Página actual: verde del tema y algo más de peso, sin llegar a negrita */
span.breadcrumbs__menu[aria-current="page"] {
    color: var(--color-primary);
    font-weight: 600;
}

/*
    Separador: barrita fina heredada de Can Lluc, atenuada al 35% para que
    marque el ritmo sin pesar más que el propio texto. Es decorativa, así
    que no necesita cumplir contraste.
*/
.breadcrumbs__bar {
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 1px;
    margin: 0 10px;
    background-color: rgba(19, 61, 51, 0.35);
}

/*
    Al intercalar el breadcrumb entre el hero y el texto de introduccion,
    el padding-top de 70px de #restingplaceSec pasa a ser el mayor hueco de
    toda la secuencia (mas que los 40px internos del propio bloque) y deja
    la miga flotando, desconectada del contenido al que pertenece.

    Se reduce SOLO cuando hay breadcrumb delante, para no alterar la home
    ni el resto de secciones que comparten ese contenedor. Se usa el
    hermano general (~) y no el adyacente (+) porque el framework puede
    inyectar <link> de modulos entre hermanos; #restingplaceSec es unico
    por pagina, asi que el alcance es el mismo.
*/
.breadcrumbs ~ #restingplaceSec {
    padding-top: 45px;
}

/*
    Jerarquia de espaciado del bloque de introduccion.

    El subtitulo y el h1 son un par (antetitulo + titular) y deben leerse
    como una unidad, pero el tema los separa 40px de margen que, sumados al
    aire del line-height (50px sobre una fuente de 30px), dan unos 55px
    opticos: el mayor hueco de toda la secuencia. El resultado es que el
    subtitulo flota huerfano, mas cerca de la miga que de su propio titulo.

    Se reduce el margen a 8px para que el aire del line-height deje unos
    18px opticos: suficiente para respirar, poco para que el par se separe.
    Asi el ritmo pasa a ser jerarquico -navegacion, par de titulo, cuerpo-
    en vez de plano.

    Scopeado a las paginas con breadcrumb para no alterar la home ni el
    resto de secciones que comparten este bloque.
*/
.breadcrumbs ~ #restingplaceSec .content span.title {
    margin-bottom: 8px;
    text-align: center;
    text-wrap: balance;
}

/*
    Alineacion del titular.

    .restingplaceSec-content es un flex en columna con align-items:center,
    asi que la CAJA de cada hijo se centra. Cuando el h1 cabe en una linea
    la caja se encoge al texto y el titulo se ve centrado; cuando envuelve
    a dos, la caja se estira al 100% del contenedor y el text-align:start
    heredado deja el texto pegado a la izquierda.

    O sea que la alineacion del titular dependia de la longitud del texto:
    /entorno (una linea) salia centrado y /servicios/media-pension (dos)
    salia a la izquierda, rompiendo el eje del bloque de introduccion. No
    es una decision de diseno, es un efecto colateral.

    El antetitulo sufre lo mismo, pero solo se aprecia en movil: en
    escritorio siempre cabe en una linea. Por eso ambos llevan text-align.

    text-align lo fija en centrado siempre; text-wrap: balance reparte las
    lineas de forma pareja en vez de dejar una larga y una corta.
*/
.breadcrumbs ~ #restingplaceSec .content h1 {
    text-align: center;
    text-wrap: balance;
}

/* #Desktop grande
================================================== */
@media only screen and (min-width: 1921px) {

    .breadcrumbs {
        margin-top: 50px;
    }

    .breadcrumbs > div {
        font-size: 13px;
    }

    .breadcrumbs ~ #restingplaceSec {
        padding-top: 55px;
    }

}

/* #Tablet / Móvil
================================================== */
@media only screen and (max-width: 991px) {

    .breadcrumbs {
        margin-top: 25px;
    }

    .breadcrumbs > div {
        font-size: 11px;
        letter-spacing: 0.06em;
    }

    .breadcrumbs__bar {
        width: 10px;
        margin: 0 7px;
    }

    /*
        En movil el hueco de 70px era el mas desproporcionado: los margenes
        internos del bloque bajan a 20px y ese padding se quedaba fijo.
    */
    .breadcrumbs ~ #restingplaceSec {
        padding-top: 30px;
    }

    /* Mismo criterio: el line-height (40px sobre 20px) ya aporta el aire */
    .breadcrumbs ~ #restingplaceSec .content span.title {
        margin-bottom: 4px;
    }

}

/*
    Tramos en los que skeleton.css cambia el ancho de la columna de texto.
    Los limites son los suyos, no los de este fichero, para que el sangrado
    entre y salga exactamente a la vez que el cambio de ancho.
*/

/* Columna al 50%: el sobrante de cada lado sube a 25% */
@media only screen and (min-width: 768px) and (max-width: 959px) {

    .breadcrumbs > div {
        padding-left: 25%;
    }

}

/* Columna al 100%: sin sobrante, la miga vuelve al borde del contenedor */
@media only screen and (max-width: 767px) {

    .breadcrumbs > div {
        padding-left: 0;
    }

}