/* =============================================================================
   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: en MOBILE (<768) las cards ocupan 100%
   del owl-item sin padding ni margen negativo. En TABLET/DESKTOP (>=768)
   recuperamos el padding 15px en cada item para que las cards tengan gap
   entre ellas, compensándolo con margin negativo en el carrusel para no
   perder ancho útil. */
.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;
}

@media (min-width: 768px) {
    .events-list .init-carousel-owl,
    .bus-news-slider__carousel.init-carousel-owl {
        /* carousel alineado con su header (mismo L que el bloque) */
        margin-left: 0;
        margin-right: 0;
    }
    .events-list .init-carousel-owl .owl-item > .item,
    .bus-news-slider__carousel.init-carousel-owl .owl-item > .item {
        /* sin padding lateral: cards flush con bordes del carousel.
           El gap entre cards lo aporta el espacio entre owl-items */
        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;
}


/* Granate footer (.bg-size-width-100): MATCH dark footer width.
   The wrapper sits in the natural flow (no full-bleed margin trick),
   so its inner content has identical width to the dark `.footer-form`
   row above. The granate background is extended visually to the
   viewport edges via box-shadow + clip-path. */
#footer .gbb-row-wrapper.bg-size-width-100 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    box-shadow: 0 0 0 100vmax #82212E;
    clip-path: inset(0 -100vmax);
}

/* Drop inline 10vw lateral padding at >=768 (same breakpoint where the
   dark `.footer-form` does it via #footer .gbb-row-wrapper.footer-form). */
@media (min-width: 768px) {
    #footer .gbb-row-wrapper.bg-size-width-100 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Inner container: rely on the master rule
   `.gbb-row > .bb-inner > .bb-container.container { max-width: clamp(...) }`
   above (matches dark exactly). Below 768, fallback to full width. */
#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;
}