/* Portada · portal editorial (novembre 2026)
   El capvespre ocupa tota la primera pantalla, el titular és molt més gran,
   un sol botó principal (cita) i Urgències com a enllaç discret.
   La targeta de l'horari passa a sota del capvespre. Només es carrega a les portades. */

/* ---------- Ordinador (> 1100 px) ---------- */
@media (min-width:1101px){
  html body .sunset-hero.sunset-hero{min-height:max(640px,100svh)!important;overflow:hidden!important}
  /* la foto i el cel viu (WebGL) omplen exactament el portal, ja no continuen per sota de l'horari */
  html body .sunset-hero.sunset-hero>img,
  html body .sunset-hero.sunset-hero>picture>img{top:0!important;height:100%!important;clip-path:none!important;object-position:68% top!important}
  html body .sunset-hero.sunset-hero>.hz-stage{top:0!important;height:100%!important;clip-path:none!important}
  html body .sunset-hero.sunset-hero:after{bottom:0!important;background:
    linear-gradient(0deg,rgba(6,25,35,.55) 0,rgba(6,25,35,0) 42%),
    linear-gradient(90deg,rgba(6,25,35,.6),rgba(6,25,35,.26) 52%,rgba(6,25,35,0) 78%),
    radial-gradient(ellipse 120% 95% at 50% 38%,rgba(6,25,35,0) 58%,rgba(6,25,35,.28) 100%)!important}

  /* el text baixa cap a la part inferior esquerra, com la portada d'una revista */
  html body .sunset-hero.sunset-hero .sunset-inner{justify-content:flex-end!important;padding-top:140px!important;padding-bottom:clamp(44px,6.5vh,76px)!important;width:min(1300px,calc(100% - 96px))!important}
  html body .sunset-copy{max-width:none}
  html body .sunset-copy h1{font-size:clamp(84px,8.6vw,148px)!important;line-height:.9!important;letter-spacing:-.045em!important;margin:0 0 clamp(26px,3.4vh,40px)!important;text-wrap:nowrap;text-shadow:0 2px 40px rgba(6,25,35,.25)}
  html body .sunset-copy h1 .hl+.hl>span{padding-left:.62em} /* la segona línia entra una mica, com un sagnat de revista */
  html body .sunset-copy .eyebrow{margin-bottom:22px!important}

  /* subtítol i accions en una sola fila, a sota del titular */
  html body .sunset-copy h1+p{display:inline-block;vertical-align:middle;max-width:380px;margin:0 44px 0 0!important;font-size:18px!important;line-height:1.55!important}
  html body .sunset-copy .hero-actions{display:inline-flex!important;vertical-align:middle;align-items:center;gap:30px!important;margin:0!important}
  html body .hero-actions .ha-primary{min-height:58px!important;padding:0 34px!important;font-size:16px!important}
  /* Urgències: ja no és un segon botó, és un enllaç discret amb el punt de llum */
  html body .hero-actions .ha-ghost.ha-ghost{min-height:auto!important;padding:4px 0!important;border:0!important;border-radius:0!important;background:none!important;backdrop-filter:none!important;
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.45);font-weight:500!important;letter-spacing:.02em}
  html body .hero-actions .ha-ghost.ha-ghost:hover{box-shadow:inset 0 -1px 0 #fff;transform:none}

  /* l'horari, ara a sota del capvespre, sobre el color crema de la pàgina */
  html body .sunset-hero.sunset-hero + .opening-hours-section{background:transparent!important;padding:clamp(40px,5vw,64px) 0 8px!important;margin-top:0!important}
}

/* ---------- Tauleta i mòbil (≤ 1100 px) ---------- */
@media (max-width:1100px){
  html body .sunset-hero.sunset-hero{min-height:max(620px,100svh)!important}
  /* la foto omple tota la pantalla, fins a baix */
  html body .sunset-hero.sunset-hero>img,
  html body .sunset-hero.sunset-hero>picture>img{top:0!important;height:100%!important;object-position:68% top!important}
  html body .sunset-hero.sunset-hero>.hz-stage{height:100%!important}
  html body .sunset-hero.sunset-hero:after{background:
    linear-gradient(0deg,rgba(6,25,35,.78) 0,rgba(6,25,35,.35) 38%,rgba(6,25,35,0) 60%),
    linear-gradient(90deg,rgba(6,25,35,.42),rgba(6,25,35,.12) 70%)!important}
  html body .sunset-hero.sunset-hero .sunset-inner{justify-content:flex-end!important;padding-bottom:26px!important}
  html body .sunset-copy h1{font-size:clamp(54px,15vw,104px)!important;line-height:.9!important;letter-spacing:-.045em!important;margin-bottom:20px!important}
  html body .sunset-hero .sunset-bottom{background:rgba(6,25,35,.55)!important}
}
@media (max-width:600px){
  html body .sunset-hero.sunset-hero>img,
  html body .sunset-hero.sunset-hero>picture>img{object-position:50% top!important}
}
@media (max-width:380px){
  html body .sunset-copy h1{font-size:clamp(44px,13.6vw,52px)!important}
}