/* =============================================================================
   LAYOUT-WIDTHS — Única fuente de verdad para los anchos de contenido.
   -----------------------------------------------------------------------------
   Carga DESPUÉS de style.css (ver daudo_subtheme.libraries.yml).

   Fórmula: clamp(1200px, calc(100vw - 200px), 1700px)
     - <=1200 viewport : 1200 (cap inferior, Bootstrap maneja <992)
     - 1200-1399       : 1200 (clamp inferior)
     - 1400            : 1200
     - 1500            : 1300
     - 1700            : 1500
     - 1900            : 1700
     - >=1900          : 1700 (cap superior)

   Header, breadcrumb y page-builder usan EXACTAMENTE la misma fórmula
   y por tanto siempre quedan alineados.

   NO se toca el .container genérico de Bootstrap (eso afectaría a topbar,
   navbar, footer, login forms, etc.). Solo selectores específicos.
   ============================================================================= */

/* Aplicado a TODOS los viewports >=768 (tablet+). En móvil <768 dejamos
   que Bootstrap maneje los anchos a su manera. */
@media (min-width: 768px) {
    #header .header-content-layout,
    .breadcrumb-content-inner .breadcrumb-content-main,
    .gbb-row > .bb-inner > .bb-container.container,
    .gbb-row > .bb-inner > .bb-container.container-fw,
    #content > .container.container-bg {
        max-width: clamp(1200px, calc(100vw - 200px), 1700px);
        min-width: 0;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Carruseles de eventos y noticias: desktop-first. Las cards llevan padding
   15px (gap visual de 30px entre ellas) y el carrusel compensa con margin
   negativo para no perder ancho útil. En móvil (<768) las cards van a 100%
   del owl-item sin gap (un card por slide, no hace falta separación).
   NOTA: antes este bloque estaba al revés (0 por defecto, 15 dentro de
   @media min-width:768). Si por cualquier motivo el @media no llegaba a
   aplicar — aggregator de Drupal mal regenerado, mod_pagespeed reescribiendo
   reglas, race de carga de hojas — el desktop perdía el gap y las cards
   salían pegadas. Con la lógica invertida, el desktop tiene el gap como
   default robusto. */
.events-list .init-carousel-owl,
.bus-news-slider__carousel.init-carousel-owl {
    margin-left: -15px;
    margin-right: -15px;
}
.events-list .init-carousel-owl .owl-item > .item,
.bus-news-slider__carousel.init-carousel-owl .owl-item > .item {
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 767px) {
    .events-list .init-carousel-owl,
    .bus-news-slider__carousel.init-carousel-owl {
        margin-left: 0;
        margin-right: 0;
    }
    .events-list .init-carousel-owl .owl-item > .item,
    .bus-news-slider__carousel.init-carousel-owl .owl-item > .item {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Containers nidados dentro de columnas → 100% del padre. Reset por si la
   regla anterior (que apunta a `> .bb-inner > .bb-container`) atrapase
   alguno por especificidad heredada. */
.gsc-column .container,
.gsc-column .bb-container,
.column-inner .container,
.column-inner .bb-container,
.column-content-inner .container,
.column-content-inner .bb-container {
    max-width: none;
    min-width: 0;
    width: 100%;
}

/* La navbar auxiliar (préstamo y bibliotecas) tiene que extenderse a 100%
   del viewport, no respetar la fórmula clamp del page-builder que la contiene.
   Usamos el truco "calc(-50vw + 50%)" para que el wrapper escape del parent. */
.gva-auxiliar-navbar-wrapper {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Header de inicio con búsqueda FAMA + carrusel: el contenedor del carrusel
   (.header-inicio-custom) tiene que ocupar 100% del viewport independientemente
   del page-builder container que lo envuelva. El overlay interior
   (.header-inicio-container) sigue siendo del ancho del carrusel. */
.header-inicio-custom {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box;
}

/* La fila marcada como bg-size-width-100 (la banda granate del footer) se
   queda 15px más estrecha por cada lado debido a paddings de columnas
   ancestras. Usamos el truco "calc(-50vw + 50%)" para que el elemento se
   extienda hasta los bordes del viewport, manteniendo su contenido centrado. */
#footer .gbb-row-wrapper.bg-size-width-100 {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    /* Anular padding inline 10vw para que el contenido use el clamp como
       la fila oscura del footer. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* El bb-container interior debe tener el MISMO ancho que la fila dark del
   footer (cuya max-width sigue Bootstrap por estar dentro de .container-bg).
   Replicamos las max-widths Bootstrap aquí para alinear el contenido. */
#footer .gbb-row-wrapper.bg-size-width-100 > .bb-inner > .bb-container.container {
    width: 100%;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (min-width: 576px) {
    #footer .gbb-row-wrapper.bg-size-width-100 > .bb-inner > .bb-container.container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    #footer .gbb-row-wrapper.bg-size-width-100 > .bb-inner > .bb-container.container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    #footer .gbb-row-wrapper.bg-size-width-100 > .bb-inner > .bb-container.container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    #footer .gbb-row-wrapper.bg-size-width-100 > .bb-inner > .bb-container.container {
        max-width: clamp(1200px, calc(100vw - 200px), 1700px);
    }
}

/* Override del padding inline (10vw a cada lado) en el row del footer.
   Configurado en el page-builder via inline style — su intención era centrar
   el contenido, pero rompe la alineación con header/breadcrumb/page-builder.
   Fix correcto a futuro: editar la configuración del row en el admin. */
@media (min-width: 768px) {
    #footer .gbb-row-wrapper.footer-form {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

/* Padding lateral 15px en todos los containers del footer en TODOS los
   viewports (no solo >=768) — sin él, en mobile/tablet la row interior
   extiende su margen negativo fuera del viewport y corta el texto. */
#footer .footer-inner .container,
#footer .bb-container.container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}