/* =============================================================================
   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 - 600px), 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,
    #content > .container.container-bg {
        max-width: clamp(1200px, calc(100vw - 600px), 1700px) !important;
        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;
}

/* Drop inline 10vw lateral padding at >=768 (same breakpoint where the
   dark `.footer-form` does it via #footer .gbb-row-wrapper.footer-form). */

/* Granate footer lateral padding:
   - 768-991: 10vw (mantener inline)
   - >=992: 7vw (alineado con el dark .footer-form, que ya tiene 7vw inline) */
@media (min-width: 768px) and (max-width: 991px) {
  #footer .gbb-row-wrapper.bg-size-width-100 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (min-width: 992px) {
  #footer .gbb-row-wrapper.bg-size-width-100 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Dark footer (.footer-form) lateral padding: 7vw at >=992 (same as granate). */
@media (min-width: 992px) {
  #footer .gbb-row-wrapper.footer-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* >=992: ambos footer wrappers usan la misma clamp del header — el wrapper
   queda centrado con el mismo ancho que la navbar. El fondo granate se
   extiende a los bordes del viewport vía el box-shadow del bloque ya
   definido arriba. */

/* Restaurar el padding lateral 15px de Bootstrap en el .bb-container.container
   interior del footer (lo había anulado .footer-inner .container con
   padding:var(--padding-2)=0). Sin él, la .row.row-wrapper con margin:0 -15px
   se sale 15px del wrapper y el primer contenido no alinea con la navbar. */

/* Dark footer (.footer-form) lateral padding: anular inline 10vw a 768-991. */
@media (min-width: 768px) and (max-width: 991px) {
  #footer .gbb-row-wrapper.footer-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Universal: ambos footer wrappers sin padding lateral (anula inline 10vw)
   y .bb-container.container interior con 15px (igual que la navbar). */
#footer .gbb-row-wrapper.footer-form,
#footer .gbb-row-wrapper.bg-size-width-100 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Outer .footer-bottom > .container: restaurar padding 15px Bootstrap.
   Sin él la .row inside se sale 15px del viewport y la primera columna
   queda a left=-15 en vez de left=15 como la navbar. */
#footer .footer-bottom > .container {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Fondo Antiguo (page-node-483): los .container-fw deben respetar el ancho
   máximo del contenido (clamp) — el truco container-fw del page-builder
   está extendiendo a 100vw cuando aquí no queremos eso. */
  body.page-node-483 .gbb-row > .bb-inner > .bb-container.container-fw {
    /* lower bound 800 para que tenga margen en viewports estrechos */
    max-width: clamp(1200px, calc(100vw - 600px), 1700px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

/* Footer wrappers (.footer-form + .bg-size-width-100): full-bleed (100vw)
   con bg sólido. El .bb-container.container interior se constrains al clamp
   para alinear contenido con la navbar. */
/* full-bleed en TODOS los viewports */
  #footer .gbb-row-wrapper.footer-form,
  #footer .gbb-row-wrapper.bg-size-width-100 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  #footer .gbb-row-wrapper.footer-form > .bb-inner > .bb-container.container,
  #footer .gbb-row-wrapper.bg-size-width-100 > .bb-inner > .bb-container.container {
    max-width: clamp(1200px, calc(100vw - 600px), 1700px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

/* Padding lateral en tablet/móvil para que el contenido no toque los bordes
   de la pantalla cuando el clamp no constrains (viewport < 1200). */
@media (min-width: 768px) and (max-width: 1199px) {
  #header .header-content-layout,
  .breadcrumb-content-inner .breadcrumb-content-main,
  .gbb-row > .bb-inner > .bb-container.container,
  #content > .container.container-bg {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}
@media (max-width: 767px) {
  #header .header-content-layout,
  .breadcrumb-content-inner .breadcrumb-content-main,
  .gbb-row > .bb-inner > .bb-container.container,
  #content > .container.container-bg {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}