/* =========================================================================
   Redisseny mòbil del web públic BSA  (2026-09)

   Tot el que canvia el disseny és dins @media (max-width: 991px), el mateix
   breakpoint que el menú off-canvas (menu-responsive.css / .js).
   Escriptori (>=992px) queda igual: només s'hi amaguen els elements nous.
   Excepcions a totes les amplades: pre-footer en targetes (mateix disseny a
   mòbil i escriptori) i l'amagat d'imatges trencades del bàner de la home.

   Carregat DESPRÉS de main.css i menu-responsive.css (meta.blade.php).
   main.css és compilat i sense fonts: no s'hi toca, se sobreescriu aquí.

   1. Barra mòbil (logo + cerca + menú) i fila de botons d'accés
   2. Panell del menú: bloc del centre, pàgina actual, utilitats
   3. Capçaleres de secció (.options): submenú ocult i hero compacte
   4. Pre-footer i footer compactes
   ========================================================================= */

:root {
  --m-bar-h: 56px;
  --m-gutter: 16px;
  --m-tap: 44px;
  --m-radius: 8px;
  --m-line: #e3e9ee;
  --m-focus: 0 0 0 3px rgba(242, 140, 0, .55);
  --m-footer-line: rgba(255, 255, 255, .16);
  --bsa-orange-ink: #a85300; /* taronja per a text sobre blanc (>=4.5:1) */
  --bsa-orange-tint: rgba(242, 140, 0, .14);
}

/* Bàner de la home: imatge que no carrega (onerror a home.blade.php) */
.home .banner .img-banner.is-broken {
  display: none;
}

/* Fitxa del centre: mapa que no carrega (onerror a pages/center.blade.php) */
.centre-fitxa-map.is-broken,
.centre-userguide-img.is-broken {
  display: none;
}

/* Memòries: contenidor dels blocs (escriptori continua amb float) */
.memories-grid::after {
  content: "";
  display: table;
  clear: both;
}

/* Elements que només existeixen en mòbil */
.mobile-bar,
.mobile-search,
.mobile-cta,
.submenu-center,
.nav-utils {
  display: none;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================================
   Pre-footer (home) — TOTES LES AMPLADES
   Dos grups (Col·laborem / Enllaços d'interès) en fila, cadascun amb
   l'amplada del seu contingut i alineat a l'esquerra amb el seu títol.
   Els logos d'EIP i "Salud sin bulos" són imatges petites (~140×50) pensades
   per a fons blanc: van en targetes blanques d'amplada fixa i igual. El del
   061 és blanc (el mateix del web del 061) i va sense targeta, tal qual.
   Mòbil (<600px): veure més avall.
   ========================================================================= */
#pre-footer {
  --pf-card-w: 176px;
  --pf-card-h: 72px;
  padding: 40px 0;
}
#pre-footer .wrapper {
  padding: 0 30px;
}
#pre-footer .wrapper .content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 64px;
}
#pre-footer .colaborem,
#pre-footer .links-interes {
  width: auto !important; /* porten width:50% inline */
  margin: 0 !important;
  text-align: left !important;
}
#pre-footer p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .9);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#pre-footer ul,
#pre-footer .links-interes-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-transform: none;
  letter-spacing: 0;
}
#pre-footer ul li {
  display: block;
  margin: 0;
}
#pre-footer ul li a,
#pre-footer .links-interes-logos a {
  display: flex;
  flex: 0 0 var(--pf-card-w);
  align-items: center;
  justify-content: center;
  width: var(--pf-card-w);
  height: var(--pf-card-h);
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--m-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 32, 58, .18);
  transition: transform .16s ease, box-shadow .16s ease;
}
#pre-footer ul li a:hover,
#pre-footer .links-interes-logos a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 32, 58, .25);
}
#pre-footer ul li a:focus-visible,
#pre-footer .links-interes-logos a:focus-visible {
  outline: none;
  box-shadow: var(--m-focus);
}
#pre-footer img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 52px;
  height: auto;
}
/* 061: sense targeta; a la mateixa alçada que les targetes perquè els logos
   quedin centrats a la mateixa línia, i enganxat a l'esquerra del títol */
#pre-footer .colaborem ul li a,
#pre-footer .colaborem ul li a:hover {
  width: auto;
  padding: 8px 0;
  justify-content: flex-start;
  background: transparent;
  box-shadow: none;
}
#pre-footer .colaborem ul li a:hover {
  opacity: .85;
}#pre-footer .colaborem ul li a:focus-visible {
  box-shadow: var(--m-focus);
}
@media (prefers-reduced-motion: reduce) {
  #pre-footer ul li a,
  #pre-footer .links-interes-logos a {
    transition: none;
  }
}

@media (max-width: 991px) {

  /* =======================================================================
     1. BARRA MÒBIL
     ======================================================================= */

  /* El header antic (franja superior, logo gran, botons apilats) no es mostra:
     el seu contingut viu a la barra, a la fila de botons i al panell. */
  header.site-header {
    display: none;
  }

  .mainmenu-area {
    background: #fff;
    border-bottom: 1px solid var(--m-line) !important;
  }
  .mainmenu-area.stricky-fixed {
    box-shadow: 0 2px 12px rgba(0, 32, 58, .12);
  }

  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--m-bar-h);
    padding: 0 8px 0 var(--m-gutter);
  }
  .mobile-bar-logo {
    display: block;
    line-height: 0;
  }
  .mobile-bar-logo img {
    display: block;
    height: 40px;
    width: auto;
  }
  .mobile-bar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .mobile-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--m-tap);
    height: var(--m-tap);
    padding: 0;
    border: 0;
    border-radius: var(--m-radius);
    background: transparent;
    color: var(--bsa-blue);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
  }
  .mobile-bar-btn.search-toggle {
    font-size: 19px;
  }
  .mobile-bar-btn:hover,
  .mobile-bar-btn[aria-expanded="true"] {
    background: var(--bsa-hover-bg);
    color: var(--bsa-orange);
  }
  .mobile-bar-btn:focus {
    outline: none;
  }
  .mobile-bar-btn:focus-visible {
    box-shadow: var(--m-focus);
  }

  /* --- Cercador desplegable --- */
  .mainmenu-area.search-open .mobile-search {
    display: flex;
  }
  .mobile-search {
    flex-wrap: wrap;
    padding: 0 var(--m-gutter) 12px;
  }
  .mobile-search .search-input {
    flex: 1;
    min-width: 0;
    height: var(--m-tap);
    margin: 0;
    padding: 0 12px;
    border: 1px solid #b9c6d1;
    border-right: 0;
    border-radius: var(--m-radius) 0 0 var(--m-radius);
    background: #fff;
    color: var(--bsa-ink);
    font-family: "Hind", sans-serif;
    font-size: 16px; /* 16px: evita el zoom automàtic d'iOS */
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .mobile-search .search-input:focus {
    outline: none;
    border-color: var(--bsa-blue);
  }
  .mobile-search button {
    flex: none;
    width: 48px;
    height: var(--m-tap);
    margin: 0;
    border: 0;
    border-radius: 0 var(--m-radius) var(--m-radius) 0;
    background: var(--bsa-blue);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
  }
  .mobile-search button:hover {
    background: var(--bsa-blue-dark);
  }
  .mobile-search button:focus-visible {
    outline: none;
    box-shadow: var(--m-focus);
  }
  .mobile-search .search-error {
    display: none;
    width: 100%;
    margin-top: 6px;
    color: #b42318;
    font-size: 13px;
  }
  .mobile-search.has-error .search-error {
    display: block;
  }
  .mobile-search.has-error .search-input {
    border-color: #b42318;
  }

  /* --- Fila de botons d'accés (Petició de visita / La meva salut) --- */
  .mobile-cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 var(--m-gutter) 10px;
  }
  .mobile-cta a {
    flex: 0 1 132px;
    height: var(--m-tap);
    border-radius: var(--m-radius);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity .16s ease;
  }
  .mobile-cta a:hover {
    opacity: .85;
  }
  .mobile-cta a:focus-visible {
    outline: none;
    box-shadow: var(--m-focus);
  }
  .mobile-cta-visit {
    background-image: url(../img/peticio_visita.svg);
  }
  .mobile-cta-health {
    background-image: url(../img/la_meva_salut.svg);
  }

  /* En fer scroll la barra queda fixa: només logo + cerca + menú */
  .mainmenu-area.stricky-fixed .mobile-cta {
    display: none;
  }

  /* =======================================================================
     2. PANELL DEL MENÚ
     ======================================================================= */

  /* Panell tancat: sense ombra (es veia com una franja al marge dret) i fora
     de l'ordre de tabulació; la visibilitat canvia en acabar la transició. */
  .navigation .nav-header:not(.is-open) {
    box-shadow: none;
    visibility: hidden;
    transition: transform .32s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .32s;
  }
  .navigation .nav-header.is-open {
    visibility: visible;
  }

  /* Capçalera del panell sempre visible en fer scroll dins el panell.
     En columna flex perquè la zona d'utilitats (grisa) arribi fins a baix
     quan el menú és més curt que la pantalla. */
  .navigation .nav-header {
    display: flex !important;
    flex-direction: column;
    padding-top: 0;
  }
  .navigation .nav-header > * {
    flex-shrink: 0;
  }
  .navigation .nav-header > .nav-utils {
    flex-grow: 1;
  }
  .navigation .nav-header .nav-panel-head {
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
  }

  /* Pàgina actual dins un submenú de secció */
  .navigation .nav-header > ul > li > ul.submenu > li > a.current {
    background: #fff;
    color: var(--bsa-orange);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--bsa-orange);
  }

  /* --- Opcions de cada centre (Serveis > centre > opcions) ---
     Mateix llenguatge que la resta del panell: files planes a tota
     l'amplada, separadors d'1px i accent lateral de 3px.
     - Cada centre amb opcions té la seva fletxa (acordió, un obert cada cop);
       el centre on som surt obert.
     - Centre obert: com un ítem obert del 1r nivell (accent blau).
     - Opcions: com les files del 2n nivell, amb més sagnat i icona petita.
     - Opció actual: idèntica a la pàgina actual del 2n nivell (taronja). */
  .navigation .nav-header ul.submenu > li.has-center-menu > a {
    position: relative;
    padding-right: 56px !important; /* espai per a la fletxa */
  }
  /* Separador de la fletxa dibuixat a l'enllaç: així ocupa tota l'alçada de
     la fila quan el nom del centre fa 2 línies (el botó té alçada fixa). */
  .navigation .nav-header ul.submenu > li.has-center-menu > a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 48px;
    bottom: 0;
    width: 1px;
    background: var(--bsa-line);
  }
  .navigation .nav-header ul.submenu > li.is-current-center > a.current-parent {
    color: var(--bsa-blue);
    font-weight: 600;
  }
  .navigation .nav-header ul.submenu > li.open > a,
  .navigation .nav-header ul.submenu > li.open > a:hover {
    padding-left: 34px !important;
    background: var(--bsa-hover-bg);
    box-shadow: inset 3px 0 0 var(--bsa-blue);
    color: var(--bsa-blue);
    font-weight: 600;
  }
  .navigation .nav-header ul.submenu > li > .center-toggle {
    width: 48px;
    height: var(--m-tap);
    border-left: 0;
    font-size: 16px;
  }
  .navigation .nav-header ul.submenu > li.open > .center-toggle {
    color: var(--bsa-orange);
    transform: rotate(180deg);
  }
  .navigation .nav-header ul.submenu > li > .center-toggle:focus-visible {
    box-shadow: inset 0 0 0 2px var(--bsa-orange);
  }
  .navigation .nav-header ul.submenu > li.open > ul.submenu-center {
    display: block;
  }
  .navigation .nav-header ul.submenu-center {
    display: none;
    /* anul·la el desplegable antic de 3r nivell de main.css (absolut, ocult) */
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transition: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bsa-sub-bg);
    border-top: 1px solid #eef2f5;
    box-shadow: none;
  }
  .navigation .nav-header ul.submenu-center > li {
    margin: 0;
    border-bottom: 1px solid #eef2f5;
  }
  .navigation .nav-header ul.submenu-center > li:last-child {
    border-bottom: 0;
  }
  .navigation .nav-header ul.submenu-center > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--m-tap);
    padding: 12px 20px 12px 48px;
    border: 0;
    background: transparent;
    color: var(--bsa-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none; /* main.css hi posa capitalize */
    transition: background .16s ease, color .16s ease;
  }
  .navigation .nav-header ul.submenu-center > li > a:hover {
    background: #fff;
    color: var(--bsa-orange);
  }
  .navigation .nav-header ul.submenu-center > li > a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bsa-orange);
  }
  .navigation .nav-header ul.submenu-center > li > a.current {
    background: #fff;
    color: var(--bsa-orange);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--bsa-orange);
  }
  .navigation .nav-header ul.submenu-center img {
    flex: none;
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  /* --- Utilitats (accés treballadors, treballa amb nosaltres, idioma) --- */
  .nav-utils {
    display: block;
    padding: 12px 22px 24px;
    border-top: 1px solid var(--bsa-line);
    background: var(--bsa-sub-bg);
  }
  .nav-utils > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--m-tap);
    color: var(--bsa-blue);
    font-size: 14px;
  }
  .nav-utils > a:hover {
    color: var(--bsa-orange);
  }
  .nav-utils i {
    width: 18px;
    color: var(--bsa-muted);
    text-align: center;
  }
  .nav-utils-hello {
    display: block;
    padding-top: 8px;
    color: var(--bsa-muted);
    font-size: 12px;
    letter-spacing: .04em;
  }
  .nav-utils-lang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: var(--m-tap);
  }
  .nav-utils-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bsa-ink);
    font-size: 14px;
  }
  .nav-utils-lang .settings-2 {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
  }
  .nav-utils-lang #translationDetector {
    margin-top: 4px;
    color: var(--bsa-muted);
    font-size: 12px;
  }

  /* =======================================================================
     3. CAPÇALERES DE SECCIÓ (.options)
     ======================================================================= */

  /* Submenú de secció / de centre: les opcions ja són al panell del menú.
     Queda una capçalera compacta amb la imatge i el títol. */
  .options.options--submenu {
    height: auto !important;
    min-height: 0;
    margin-bottom: 24px !important;
    padding: 40px var(--m-gutter);
    background-position: center !important;
    background-size: cover !important;
  }
  .options.options--submenu .wrapper {
    overflow: visible !important;
  }
  .options.options--submenu h2 {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: 30ch;
    margin: 0 auto !important;
    transform: none;
    font-size: 22px;
    line-height: 1.25;
    text-align: center;
  }
  .options.options--submenu .options-list {
    display: none !important;
  }
  /* compensació de la llista absoluta antiga (main.css, <=599px) */
  div.options--submenu + div.wrapper {
    padding-top: 0 !important;
  }

  /* Llistat de centres (/pacients): és el contingut de la pàgina, es manté
     però com a llista compacta en lloc de graella absoluta. */
  .options.options--centers {
    height: auto !important;
    margin-bottom: 0 !important;
    background-image: none !important;
  }
  .options.options--centers .wrapper {
    overflow: visible;
  }
  .options.options--centers .wrapper:after {
    display: none;
  }
  .pacients .options.options--centers .info {
    position: static;
    width: auto;
    transform: none;
  }
  .pacients .options.options--centers .info .text {
    margin: 0;
    padding: 0;
  }
  .options.options--centers h2 {
    position: static !important;
    width: auto;
    margin: 0 !important;
    padding: 24px var(--m-gutter) 12px;
    transform: none;
    color: var(--bsa-blue);
    font-size: 22px;
    text-align: left;
  }
  main.pacients .options.options--centers .wrapper .options-list {
    position: static;
    display: block;
    height: auto;
    background: #fff;
    border-top: 1px solid var(--m-line);
  }
  main.pacients .options.options--centers .wrapper .options-list .option-btn-icon {
    width: 100% !important;
    height: auto;
    min-height: 48px;
    max-height: none !important;
    padding: 8px var(--m-gutter);
    border-right: 0;
    border-bottom: 1px solid var(--m-line);
    background: #fff;
  }
  main.pacients .options.options--centers .wrapper .options-list .option-btn-icon:hover {
    background: var(--bsa-hover-bg);
  }
  main.pacients .options.options--centers .wrapper .options-list .option-btn-icon img {
    margin: 0 12px 0 0;
    width: 20px;
  }
  main.pacients .options.options--centers .wrapper .options-list .option-btn-icon h4 {
    color: var(--bsa-ink);
    font-size: 15px;
    line-height: 1.3;
  }

  /* =======================================================================
     4. PRE-FOOTER I FOOTER
     ======================================================================= */

  /* Home: el llistat de centres ja és al menú (Serveis); en mòbil la home
     passa directament als destacats i les notícies. */
  main.home > .pacients,
  main.home > .pacients + div[style] {
    display: none;
  }
  /* main.css reservava ~960px sobre "Destaquem" per al bloc de centres
     (posicionat en absolut); amagat el bloc, aquest marge era un forat blanc. */
  .home .jornades {
    margin-top: 24px;
  }

  /* Memòries (Qui som > Memòries): mateix aspecte que a escriptori (sense
     requadres) però en graella centrada en lloc de blocs flotants de
     120-160px alineats a l'esquerra */
  .memories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 24px 12px;
    margin-top: 24px;
  }
  .memories-grid::after {
    display: none;
  }
  .memories-grid div.blockmem-doc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    float: none;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
  }
  .memories-grid div.blockmem-doc br {
    display: none;
  }
  .memories-grid div.blockmem-doc a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--m-tap);
    height: var(--m-tap);
    border-radius: 50%;
    transition: transform .16s ease;
  }
  .memories-grid div.blockmem-doc a:hover {
    transform: scale(1.06);
  }
  .memories-grid div.blockmem-doc a:focus-visible {
    outline: none;
    box-shadow: var(--m-focus);
  }
  .memories-grid div.blockmem-doc img {
    max-height: 40px;
    margin: 0;
  }
  .memories-grid div.blockmem-doc span {
    flex-basis: 100%;
    margin-top: 4px;
  }

  /* Accessos de la home (Portal de transparència, APP Pediatria):
     dues targetes clicables una al costat de l'altra en lloc d'icones apilades */
  .home .extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 32px 0;
    padding: 0 var(--m-gutter);
  }
  #extras-home div.option {
    width: auto !important; /* porten width:50% inline */
    min-height: 0;
    margin: 0;
  }
  .home .extras .option a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 144px;
    padding: 20px 12px;
    border: 1px solid var(--m-line);
    border-radius: 12px;
    background: var(--bsa-sub-bg);
    text-align: center;
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  .home .extras .option a:hover {
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 32, 58, .12);
    transform: translateY(-2px);
  }
  .home .extras .option a:focus-visible {
    outline: none;
    box-shadow: var(--m-focus);
  }
  .home .extras .option img {
    width: auto;
    max-width: 100%;
    height: 56px;
    max-height: none;
    margin: 0;
    object-fit: contain;
  }
  .home .extras .option .title {
    margin: 0;
    color: var(--bsa-blue);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
  }
  .home .extras .option a:hover .title {
    text-decoration: none;
  }

  /* Notícies i agenda de la home: main.css hi deixava 50px de vora per banda
     (margin 40 + padding 10) i la notícia destacada amb el text al 60%. */
  .home .noticies.wrapper,
  .home .agenda-de-salut .wrapper {
    margin: 40px 0;
    padding: 0 var(--m-gutter);
  }
  .home .noticies.wrapper .noticia,
  .home .noticies.wrapper .esdeveniment {
    margin: 0;
    padding: 24px 0;
    border-bottom: 1px solid var(--m-line);
  }
  .home .noticies.wrapper .title-section {
    margin-bottom: 8px;
  }
  .home .noticies.wrapper .noticia .text .title-noticia {
    margin: 16px 0 8px;
    font-weight: 400;
    line-height: 1.25;
  }
  .noticia.primera-noticia h4 {
    font-size: 24px !important;
  }
  .noticia.primera-noticia a {
    margin-right: 0;
  }
  .home .noticies.wrapper .noticia .text p {
    margin: 0 0 12px;
    line-height: 1.5;
  }
  /* imatges dins la descripció breu (HTML de l'editor) */
  .home .noticies.wrapper .noticia .text img {
    max-width: 100%;
    height: auto;
  }
  .home .noticies.wrapper .more-news {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 24px auto 0;
  }

  /* Cerca: resultats en llista amb separadors (abans blocs flotants tots
     seguits i un contenidor de 0px d'alt) */
  #search_lists {
    display: flow-root;
  }
  #search_lists .search-block {
    float: none;
    width: auto;
    margin: 0 0 24px;
  }
  #search_lists .section-title {
    display: block;
    margin: 0 0 4px;
    color: var(--bsa-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  #search_lists .jb-noticies-titol {
    float: none;
    width: auto;
    margin: 0;
    border-bottom: 1px solid var(--m-line);
  }
  #search_lists .jb-noticies-titol a {
    display: block;
    padding: 12px 0;
    font-size: 16px;
    line-height: 1.35;
  }

  /* Cerca: el botó "Més resultats" flotava a la dreta enganxat al footer */
  #mes-noticies.more-news {
    float: none;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    min-height: var(--m-tap);
    margin: 32px auto 40px;
  }

  /* Bàner de la home: alçada segons el contingut en lloc de 380-520px fixos
     (i 427px per a la imatge), que deixaven espai buit sota la foto. */
  /* Les diapositives del slider (slick) tenen totes l'alçada de la més alta:
     en flex, el títol omple l'espai sobrant (centrat) i la foto queda a baix,
     sense forat blanc sota les diapositives de títol curt. */
  /* slick embolcalla cada diapositiva: .slick-slide > div (inline) > .banner */
  .home .slideshow-banner .slick-track {
    display: flex;
  }
  .home .slideshow-banner .slick-slide {
    display: flex;
    height: auto;
    float: none;
  }
  .home .slideshow-banner .slick-slide > div {
    display: flex;
    width: 100%;
  }
  .home .slideshow-banner .banner {
    display: flex !important; /* slick hi posa display:inline-block inline */
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 24px var(--m-gutter) 0;
  }
  .home .slideshow-banner .banner::after {
    display: none;
  }
  .home .banner h2 {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    float: none;
    top: 0;
    bottom: auto;
    max-width: 22ch;
    margin: 0 auto 16px;
    font-size: 28px;
    line-height: 1.15;
  }
  .home .banner .img-banner {
    float: none;
    flex: none;
    width: 100%;
    height: auto;
    max-width: 480px;
    margin: 0 auto;
    background-image: none;
  }
  .home .banner .img-banner img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* Pre-footer: més compacte (estils de targeta a dalt) */
  #pre-footer {
    padding: 28px 0;
  }
  #pre-footer .wrapper {
    padding: 0 20px;
  }
  #pre-footer .wrapper .content {
    gap: 24px 48px;
  }

  footer {
    padding-top: 32px;
  }
  footer .wrapper {
    padding: 0 20px;
  }
  footer .wrapper .content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding-bottom: 24px;
  }
  footer div.img-and-contact,
  footer div.contact,
  footer div.social {
    float: none;
    width: 100% !important; /* .social porta width:45% inline */
    margin: 0;
  }
  footer .wrapper .content .img-and-contact img {
    width: 180px;
    max-width: 60%;
  }
  footer div.contact-elem {
    float: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-top: 0;
    margin-bottom: 12px;
    line-height: 1.5;
  }
  footer div.contact-elem:last-child {
    margin-bottom: 0;
  }
  footer div.contact-elem img {
    flex: none;
    float: none !important;
    margin: 2px 0 0 !important;
    top: 0 !important;
  }

  /* Xarxes socials: una fila de banda a banda */
  /* nowrap + icones que s'encongeixen: les 7 caben en una fila fins a ~300px */
  footer .social .social-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 4px;
    margin: 0 0 16px;
    padding: 16px 0 0;
    border-top: 1px solid var(--m-footer-line);
  }
  footer .social .social-list li {
    display: block;
    flex: 0 1 var(--m-tap);
    min-width: 0;
    margin: 0;
  }
  footer .social .social-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
  }
  footer .social .social-list a:focus-visible {
    outline: none;
    box-shadow: var(--m-focus);
  }
  footer .social .social-list li img {
    display: block;
    width: 40px;
    max-width: 90%;
    height: auto;
    margin: 0;
    transition: transform .16s ease;
  }
  footer .social .social-list a:hover img {
    transform: scale(1.08);
  }

  footer .footer-bottom {
    padding: 12px 0;
  }
  footer .footer-bottom p {
    font-size: 12px;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .mobile-bar-btn,
  .mobile-cta a,
  .navigation .nav-header ul.submenu-center > li > a,
  footer .social .social-list li img {
    transition: none;
  }
}

/* Tauleta: títol i foto del bàner de la home en fila; xarxes socials agrupades, no escampades */
@media (min-width: 600px) and (max-width: 991px) {
  footer .social .social-list {
    justify-content: flex-start;
    gap: 12px;
  }
  .home .slideshow-banner .banner {
    flex-direction: row;
    align-items: flex-end;
    gap: 24px;
    padding-top: 16px;
  }
  .home .banner h2 {
    align-self: stretch;
    justify-content: flex-start;
    margin: 0 0 16px;
    text-align: left;
    font-size: 32px;
  }
  .home .banner .img-banner {
    flex: 0 0 50%;
    margin: 0;
  }
}

/* Mòbil (<730px, on main.css apila les notícies): tot a amplada completa */
@media (max-width: 729px) {
  .noticia.primera-noticia .text,
  .noticia.otras-noticias .text {
    width: 100%;
  }
  .home .noticies.wrapper .img-noticia {
    width: 100%;
  }
  /* el text justificat de l'editor fa forats entre paraules en columna estreta */
  .home .noticies.wrapper .noticia .text p,
  .home .noticies.wrapper .noticia .text div {
    text-align: left !important;
  }
  .home .noticies.wrapper .img-noticia img,
  .noticia.primera-noticia img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    border-radius: var(--m-radius);
  }
  .home .noticies.wrapper .noticia iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: var(--m-radius);
  }
}

/* Fitxa del centre (/pacients/{centre}): en mòbil les tres columnes
   (adreça, mapa, horaris) s'apilen; abans quedaven a 190/60/125px. */
@media (max-width: 767px) {
  main.pacients > .text.wrapper {
    padding: 0 var(--m-gutter) 24px;
  }
  .centre-fitxa {
    margin-top: 0;
  }
  .centre-fitxa .centre-fitxa-row {
    flex-direction: column;
  }
  .centre-fitxa .centre-fitxa-row > .p {
    flex: none;
    padding: 16px 0;
  }
  .centre-fitxa .centre-fitxa-address {
    line-height: 1.5;
  }
  /* el text de l'editor sol portar paràgrafs buits que fan forats */
  .centre-fitxa .centre-fitxa-address p {
    margin: 0 0 12px;
  }
  .centre-fitxa .centre-fitxa-address p:last-child {
    margin-bottom: 0;
  }
  .centre-fitxa .centre-fitxa-address p.p-empty {
    display: none;
  }
  .centre-fitxa .centre-fitxa-map {
    padding-top: 0;
  }
  .centre-fitxa .centre-fitxa-map a {
    display: block;
    border-radius: var(--m-radius);
    overflow: hidden;
  }
  .centre-fitxa .centre-fitxa-map img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
  }
  .centre-fitxa .centre-fitxa-map a:focus-visible {
    outline: none;
    box-shadow: var(--m-focus);
  }
  .centre-fitxa .centre-fitxa-schedule {
    margin-bottom: 16px;
    padding: 16px !important;
    border-radius: var(--m-radius);
    line-height: 1.5;
  }
  .centre-fitxa .centre-fitxa-schedule p {
    margin: 0 0 8px;
  }
  .centre-userguide {
    margin-top: 24px;
  }
  .centre-userguide > a {
    display: block;
    border-radius: var(--m-radius);
  }
  .centre-userguide > a > .d-flex {
    gap: 12px;
    min-height: var(--m-tap);
    padding: 8px 16px;
    border-radius: var(--m-radius);
    color: var(--bsa-blue);
    font-weight: 600;
  }
  .centre-userguide > a > .d-flex > .p {
    padding: 0;
  }
  .centre-userguide > a:hover > .d-flex {
    background: var(--bsa-hover-bg);
  }
  .centre-userguide > a:focus-visible {
    outline: none;
    box-shadow: var(--m-focus);
  }
}

/* Mòbil estret: cada grup a tota l'amplada i les dues targetes es
   reparteixen la fila. Mai més estretes que el logo a mida real (142px +
   padding): si no hi caben les dues, passen a una per línia. */
@media (max-width: 599px) {
  #pre-footer .colaborem,
  #pre-footer .links-interes {
    flex: 1 1 100%;
  }
  #pre-footer .links-interes-logos {
    gap: 8px;
  }
  #pre-footer .links-interes-logos a {
    flex: 1 1 154px;
    width: auto;
    min-width: 154px;
    padding: 8px 6px;
  }
  #pre-footer .links-interes-logos img {
    flex: none;
    max-width: none;
  }
}