/* Fascia titolo full-bleed in banda azzurra chiara (Task 3 colori). Condivisa da Catalogo, archivi categoria e
   pagina Temi: la classe è `ldd-title-band`, non il nome di una pagina, così
   aggiungere una pagina non significa duplicare queste regole.

   Eccezione al GLOBAL RHYTHM di style.css:40-45: qui la fascia deve toccare
   l'header. L'!important batte l'!important di style.css, che a sua volta batte
   lo stile inline di Twenty Twenty-Five. Toglierlo fa ricomparire i 128px del
   tema, non i 52px nostri. */
body.ldd-title-band .wp-site-blocks > main{ margin-top:0 !important; }
body.ldd-title-band .wp-site-blocks > main > .wp-block-group.is-layout-constrained{ padding-top:0 !important; }

/* Il rientro del genitore NON è lo stesso ovunque: le pagine hanno il titolo
   dentro un `.has-global-padding` (16px per lato), gli archivi categoria no.
   Un -16px fisso sfora sugli archivi e genera una scrollbar orizzontale.
   Si parametrizza con --ldd-band-inset, 0 di default e 16px solo quando il
   genitore ha davvero il padding globale.
   Mai `width:100vw`: includerebbe la scrollbar verticale, stesso difetto. */
body.ldd-title-band .wp-block-post-title,
body.ldd-title-band .wp-block-query-title{
  --ldd-band-inset:0px;
  background:var(--wp--preset--color--band,#e4f1f9);
  color:var(--wp--preset--color--band-ink,#0f3d57);
  border-bottom:1px solid var(--wp--preset--color--band-line,#bcdcef);
  margin:0;
  /* !important: il layout core di WP impone margin-left/right:auto !important con
     `.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))`. */
  margin-inline:calc(-1 * var(--ldd-band-inset)) !important;
  max-width:none;
  padding-block:30px 28px;
  padding-inline:calc(max(0px, (100% + var(--ldd-band-inset) * 2 - var(--ldd-w-chrome)) / 2) + var(--ldd-gutter-x));
  /* Il titolo non è più il vecchio display uppercase: Lato 900 in caso
     alto/basso vuole tracking negativo e interlinea stretta ma non compressa. */
  box-sizing:border-box; font-size:var(--bk-fs-h1); letter-spacing:-.01em; line-height:1.15;
  text-transform:none;
}
body.ldd-title-band .has-global-padding > .wp-block-post-title,
body.ldd-title-band .has-global-padding > .wp-block-query-title{ --ldd-band-inset:16px; }

/* Descrizione categoria: sull'archivio sta in un contenitore senza padding globale
   e finiva incollata al bordo sinistro. La riporta sull'asse di logo e sidebar. */
body.ldd-title-band .wp-block-term-description{
  max-width:var(--ldd-w-chrome); margin-inline:auto;
  padding-inline:var(--ldd-gutter-x); box-sizing:border-box;
}

/* Niente font-size qui: al restringersi della viewport ci pensa il clamp di
   --bk-fs-h1. Resta solo la fascia più bassa. */
@media (max-width:900px){
  body.ldd-title-band .wp-block-post-title,
  body.ldd-title-band .wp-block-query-title{ padding-block:20px 18px; }
}

/* ---- Hero catalogo: sottotitolo + sticker giallo SOTTO il titolo, dentro la
   fascia azzurra (solo Catalogo). Iniettati da ldd_catalog_hero() (functions.php)
   come fratello subito dopo l'H1. `.ldd-cat-hero` prosegue la banda: stesso
   fondo e stesso full-bleed dell'H1 (stessa formula di padding-inline e di
   margin-inline negativo), e la riga di fondo della fascia passa da qui. ---- */

/* Sul Catalogo il titolo non chiude più la banda: niente bordo, poco padding
   sotto — titolo, sottotitolo e badge stanno nella stessa fascia. */
body.ldd-catalog-page .wp-block-post-title{
  border-bottom:none;
  padding-block:30px 6px;
}
body.ldd-catalog-page .ldd-cat-hero{
  --ldd-band-inset:0px;
  background:var(--wp--preset--color--band,#e4f1f9);
  color:var(--wp--preset--color--band-ink,#0f3d57);
  border-bottom:1px solid var(--wp--preset--color--band-line,#bcdcef);
  /* !important azzera il margin-block-start:1.5rem che is-layout-constrained > *
     imporrebbe fra H1 e hero, spezzando la banda. */
  margin:0 !important;
  margin-inline:calc(-1 * var(--ldd-band-inset)) !important;
  max-width:none;
  padding-block:0 24px;
  padding-inline:calc(max(0px, (100% + var(--ldd-band-inset) * 2 - var(--ldd-w-chrome)) / 2) + var(--ldd-gutter-x));
  box-sizing:border-box;
  /* Desktop: sottotitolo a sinistra, badge in linea a DESTRA — così la fascia
     resta bassa (una riga sola). Sotto i 900px si impila (vedi media in fondo). */
  display:flex; align-items:center; gap:16px 28px; flex-wrap:wrap;
}
body.ldd-catalog-page .has-global-padding > .ldd-cat-hero{ --ldd-band-inset:16px; }

.ldd-cat-subtitle{
  margin:0;
  flex:1 1 auto;
  font-family:var(--bk-font-sans);
  font-size:var(--bk-fs-xl); font-weight:400; line-height:1.5; letter-spacing:normal;
  color:var(--wp--preset--color--band-ink,#0f3d57);
  max-width:62ch;
}
.ldd-cat-hero .ldd-cat-sticker{
  margin-inline-start:auto;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 15px 6px 21px;
  background:var(--wp--preset--color--brand-amber,#f7bd2d);
  color:var(--wp--preset--color--band-ink,#0f3d57);
  font-family:var(--bk-font-mono);
  font-size:var(--bk-fs-sm); font-weight:600; line-height:1.2; letter-spacing:.04em;
  text-transform:none; white-space:nowrap;
  clip-path:polygon(11% 0,100% 0,100% 100%,11% 100%,0 50%);
  transform:rotate(-3deg);
  position:relative;
}
.ldd-cat-hero .ldd-cat-sticker__hole{
  width:6px; height:6px; border-radius:50%;
  border:1.4px solid rgba(15,61,87,.55);
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
}
@media (max-width:900px){
  body.ldd-catalog-page .wp-block-post-title{ padding-block:20px 4px; }
  /* Mobile/tablet: si impila — sottotitolo sopra, badge sotto a sinistra. */
  body.ldd-catalog-page .ldd-cat-hero{ display:block; padding-block:0 18px; }
  .ldd-cat-subtitle{ font-size:var(--bk-fs-md); margin:0 0 13px; }
  .ldd-cat-hero .ldd-cat-sticker{ margin-inline-start:0; font-size:var(--bk-fs-xs); padding:5px 13px 5px 19px; }
}