/* ============================================================================
   bsa-pages.css — Home e pagine sport · BikeSportAdventure.com
   ----------------------------------------------------------------------------
   Stile derivato dai template email BSA (vedi 12 Stile Grafico/Linee-Guida).
   Font: Poppins, gia' self-hosted dal tema at_movic — non caricare altri font.
   Le immagini stanno nell'HTML dei blocchi, MAI qui dentro.

   Installazione: caricare in /themes/at_movic/assets/css/ e linkare nel tema
   accanto agli altri bsa-*.css, con versione:
     <link rel="stylesheet" href="/themes/at_movic/assets/css/bsa-pages.css?v=1.0">
   ============================================================================ */

/* --- 1. Token ------------------------------------------------------------- */
:root{
  --bsa-ink:#14151A;
  --bsa-ink-2:#1E2027;
  --bsa-cream:#f2f1ec;
  --bsa-card:#F7F6F2;
  --bsa-white:#ffffff;
  --bsa-text:#2C2C2A;
  --bsa-muted:#6B6B66;
  --bsa-muted-2:#8A8A82;
  --bsa-on-dark:#B8BAC0;
  --bsa-on-dark-2:#8A8D95;
  --bsa-line:#EDEBE4;
  --bsa-line-2:#D6D4D4;
  --bsa-divider-dark:#3A3D45;

  --bsa-r-band:16px;
  --bsa-r-card:12px;
  --bsa-r-pill:999px;

  --bsa-gap:16px;
  --bsa-pad:16px;
  --bsa-max:1320px;

  /* colore di reparto: neutro in home, sovrascritto dalle classi .bsa-dept-* */
  --bsa-dept:var(--bsa-ink);

  --bsa-font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (min-width:768px){ :root{ --bsa-pad:24px; --bsa-gap:20px; } }
@media (min-width:1200px){ :root{ --bsa-pad:32px; } }

/* Colori di reparto — si applicano sulla .bsa-section delle pagine sport.
   Su fondo crema questi colori sono ammessi SOLO come elemento grafico
   (riga accento): come testo vanno usati su bianco. Vedi tools/contrast.py. */
.bsa-dept-ciclismo{ --bsa-dept:#2F6F63; }
.bsa-dept-running { --bsa-dept:#B5542A; }
.bsa-dept-outdoor { --bsa-dept:#4B6B3A; }
.bsa-dept-altri   { --bsa-dept:#6A4C93; }

/* --- 2. Sezione e banda --------------------------------------------------- */
.bsa-section{
  background:var(--bsa-cream);
  padding:0 var(--bsa-pad) var(--bsa-gap);
  font-family:var(--bsa-font);
}
.bsa-section:first-of-type{ padding-top:var(--bsa-gap); }
.bsa-section *,
.bsa-section *::before,
.bsa-section *::after{ box-sizing:border-box; }

.bsa-band{
  max-width:var(--bsa-max);
  margin:0 auto;
  border-radius:var(--bsa-r-band);
  overflow:hidden;                 /* non 'clip': Safari lo supporta solo da 16 */
  position:relative;
}
.bsa-band--dark { background:var(--bsa-ink);   color:var(--bsa-on-dark); }
.bsa-band--white{ background:var(--bsa-white); color:var(--bsa-text); }
.bsa-band--cream{ background:var(--bsa-card);  color:var(--bsa-text); }
.bsa-band--media{ background:var(--bsa-ink);   color:var(--bsa-white); }

.bsa-inner{ padding:28px 20px; }
@media (min-width:768px){ .bsa-inner{ padding:40px 32px; } }

/* --- 3. Tipografia -------------------------------------------------------- */
.bsa-eyebrow{
  display:block;
  margin:0 0 10px;
  font:600 11px/1.6 var(--bsa-font);
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--bsa-muted);
}
.bsa-eyebrow--on-dark{ color:var(--bsa-on-dark-2); }
.bsa-eyebrow--dept{ color:var(--bsa-dept); }   /* solo su fondo bianco */

.bsa-title{
  margin:0;
  font-size:clamp(20px,2.4vw,30px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--bsa-ink);
}
.bsa-band--dark .bsa-title,
.bsa-band--media .bsa-title{ color:var(--bsa-white); }

.bsa-rule{
  width:44px;
  height:3px;
  margin-top:10px;
  background:var(--bsa-dept);
  border:0;
}
.bsa-band--dark .bsa-rule,
.bsa-band--media .bsa-rule{ background:var(--bsa-white); }
.bsa-rule--center{ margin-left:auto; margin-right:auto; }

.bsa-lede{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.65;
  font-weight:400;
  color:var(--bsa-text);
  max-width:62ch;
}
.bsa-band--dark .bsa-lede,
.bsa-band--media .bsa-lede{ color:var(--bsa-on-dark); }
@media (min-width:576px){ .bsa-lede{ font-size:15px; } }

/* --- 4. CTA --------------------------------------------------------------- */
.bsa-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  padding:14px 32px;
  border:0;
  border-radius:var(--bsa-r-pill);
  font:700 13px/1 var(--bsa-font);
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.bsa-btn--light{ background:var(--bsa-white); color:var(--bsa-ink); }
.bsa-btn--light:hover,
.bsa-btn--light:focus-visible{ background:var(--bsa-cream); color:var(--bsa-ink); }

.bsa-btn--dark{ background:var(--bsa-ink); color:var(--bsa-white); }
.bsa-btn--dark:hover,
.bsa-btn--dark:focus-visible{ background:var(--bsa-ink-2); color:var(--bsa-white); }

.bsa-btn--ghost{
  background:transparent;
  color:currentColor;
  box-shadow:inset 0 0 0 1.5px currentColor;
}
.bsa-btn--ghost:hover,
.bsa-btn--ghost:focus-visible{ background:rgba(255,255,255,.12); }

.bsa-btn:focus-visible{ outline:2px solid var(--bsa-dept); outline-offset:3px; }
.bsa-band--dark .bsa-btn:focus-visible,
.bsa-band--media .bsa-btn:focus-visible{ outline-color:var(--bsa-white); }

.bsa-btn-row{
  display:grid;
  grid-auto-flow:row;
  row-gap:10px;
  justify-content:center;
  margin-top:20px;
}
@media (min-width:576px){
  .bsa-btn-row{ grid-auto-flow:column; column-gap:10px; row-gap:0; }
}

/* --- 5. Fondo crema a piena larghezza ------------------------------------- */
/* Home: gia' attivo. Pagine sport: creare le pagine CMS, leggere l'id dal
   <body> (es. body#cms.cms-id-30) e aggiungere qui il selettore.
   Se #content-wrapper non esiste o non e' a piena larghezza, ripiegare sulla
   classe bg-fullwidth-container della riga ApPage (gia' supportata dal tema). */
body.page-home #content-wrapper{ background:var(--bsa-cream); }
/* body#cms.cms-id-XX #content-wrapper{ background:var(--bsa-cream); } */

/* --- 6. Promo strip (blocco 01) ------------------------------------------- */
/* Fascia annuncio: deve restare bassa, non competere con la hero sotto. */
.bsa-promo{ text-align:center; padding:18px 20px; }
@media (min-width:768px){ .bsa-promo{ padding:22px 32px; } }
.bsa-promo .bsa-eyebrow{ margin-bottom:6px; }
.bsa-promo .bsa-btn-row{ margin-top:14px; }
.bsa-promo .bsa-btn{ padding:12px 26px; }
.bsa-promo__msg{
  margin:0;
  font-size:clamp(15px,1.8vw,19px);
  font-weight:600;
  line-height:1.4;
  color:var(--bsa-white);
}

/* --- 7. Hero (blocco 02) -------------------------------------------------- */
.bsa-hero{ display:grid; position:relative; }

.bsa-hero__media{ display:block; position:relative; }
/* Regola di sistema: l'altezza la definisce il contenitore, mai l'immagine.
   L'attributo HTML height="..." vincerebbe su aspect-ratio, e height:100% non
   si risolve in modo affidabile su un elemento di griglia sovrapposto. */
.bsa-hero__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.bsa-hero--overlay .bsa-hero__media{ position:absolute; inset:0; }

.bsa-h1{
  margin:0;
  font-size:clamp(28px,5vw,54px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--bsa-ink);
}
.bsa-band--media .bsa-h1{ color:var(--bsa-white); }

/* 7a. Variante overlay: media e testo sovrapposti nella stessa cella */
.bsa-hero--overlay .bsa-hero__media,
.bsa-hero--overlay .bsa-hero__body{ grid-area:1 / 1; }

.bsa-hero--overlay .bsa-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(20,21,26,.92) 0%,
    rgba(20,21,26,.72) 28%,
    rgba(20,21,26,.30) 62%,
    rgba(20,21,26,.06) 100%);
}
.bsa-hero--overlay .bsa-hero__body{
  position:relative;
  z-index:1;
  align-self:end;
  padding:28px 20px;
  max-width:720px;
}
@media (min-width:768px){
  .bsa-hero--overlay .bsa-hero__body{ padding:48px 40px; }
}
@media (min-width:1200px){
  .bsa-hero--overlay .bsa-hero__body{ padding:56px 56px; }
}
.bsa-hero--overlay .bsa-lede{ max-width:52ch; }
/* Sopra una fotografia il grigio muted non regge: l'eyebrow va in bianco velato. */
.bsa-hero--overlay .bsa-eyebrow{ color:rgba(255,255,255,.88); }
.bsa-hero__cta{ margin-top:22px; }

/* Altezza: doppia dichiarazione per la toolbar di iOS, poi aspect-ratio
   dove supportato (Safari 15+). Sotto, il fallback resta valido. */
.bsa-hero--overlay{ min-height:78vh; min-height:78svh; }
@supports (aspect-ratio:1/1){
  .bsa-hero--overlay{ aspect-ratio:4/5; min-height:0; }
}
@media (min-width:768px){
  .bsa-hero--overlay{ min-height:62vh; min-height:62svh; }
  @supports (aspect-ratio:1/1){ .bsa-hero--overlay{ aspect-ratio:16/9; min-height:0; } }
}
@media (min-width:992px){
  @supports (aspect-ratio:1/1){ .bsa-hero--overlay{ aspect-ratio:22/10; } }
}
/* Telefono in orizzontale: l'hero non deve mangiarsi tutto lo schermo */
@media (max-width:991px) and (orientation:landscape){
  .bsa-hero--overlay{ min-height:320px; max-height:420px; }
  @supports (aspect-ratio:1/1){ .bsa-hero--overlay{ aspect-ratio:auto; } }
  .bsa-hero--overlay .bsa-hero__body{ padding:20px 24px; }
  .bsa-hero--overlay .bsa-h1{ font-size:clamp(24px,4vw,34px); }
  .bsa-hero--overlay .bsa-lede{ display:none; }
}

/* 7b. Variante split: testo e immagine affiancati, fondo chiaro */
.bsa-hero--split{ grid-template-columns:1fr; }
.bsa-hero--split .bsa-hero__media{ order:-1; }
.bsa-hero--split .bsa-hero__media img{ aspect-ratio:4/3; height:auto; }
.bsa-hero--split .bsa-hero__body{ padding:28px 20px; }
@media (min-width:992px){
  .bsa-hero--split{ grid-template-columns:1fr 1fr; align-items:center; }
  .bsa-hero--split .bsa-hero__media{ order:0; }
  .bsa-hero--split .bsa-hero__media img{ aspect-ratio:1/1; height:auto; }
  .bsa-hero--split .bsa-hero__body{ padding:56px 48px; }
}

/* --- 8. Barra sport (blocco 03) ------------------------------------------- */
.bsa-sports{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:var(--bsa-gap);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .bsa-sports{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px){ .bsa-sports{ grid-template-columns:repeat(5,1fr); } }

/* Sotto 576px la barra scorre in orizzontale con aggancio: lo scroll e'
   interno alla lista, non della pagina. */
@media (max-width:575px){
  .bsa-sports{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:64%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .bsa-sports > li{ scroll-snap-align:start; }
}

.bsa-sport-card{
  position:relative;
  display:block;
  border-radius:var(--bsa-r-card);
  overflow:hidden;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.bsa-sport-card{ aspect-ratio:4/5; }
@supports not (aspect-ratio:1/1){ .bsa-sport-card{ height:300px; } }
.bsa-sport-card img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.bsa-sport-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(20,21,26,.86) 0%,
    rgba(20,21,26,.35) 45%,
    rgba(20,21,26,0) 78%);
}
.bsa-sport-card__title{
  position:absolute;
  z-index:1;
  left:0; right:0; bottom:0;
  margin:0;
  padding:18px 16px;
  font-size:clamp(15px,1.5vw,19px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--bsa-white);
}
.bsa-sport-card:focus-visible{ outline:2px solid var(--bsa-ink); outline-offset:3px; }

/* --- 9. Header di sezione sopra i caroselli nativi (blocchi 04/07/11) ------ */
/* Il titolo sta direttamente sul fondo crema: cosi' non deve combaciare al
   pixel con la banda del modulo carosello, che e' una riga ApPage separata. */
.bsa-head{
  max-width:var(--bsa-max);
  margin:0 auto;
  padding:10px 4px 18px;
  display:grid;
  grid-template-columns:1fr;
  row-gap:12px;
  align-items:end;
}
@media (min-width:768px){
  .bsa-head{ grid-template-columns:1fr auto; column-gap:24px; row-gap:0; }
}
.bsa-head__link{
  justify-self:start;
  font:700 12px/1 var(--bsa-font);
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--bsa-ink);
  text-decoration:none;
  border-bottom:2px solid var(--bsa-dept);
  padding-bottom:6px;
  min-height:24px;
}
@media (min-width:768px){ .bsa-head__link{ justify-self:end; } }
.bsa-head__link:hover{ color:var(--bsa-dept); }

/* --- 10. Skin del carosello prodotti nativo (modulo ApPage) ---------------- */
/* Si applica SOLO alle righe ApPage a cui viene aggiunta a mano la classe
   "bsa-plist" (vedi README). Deliberatamente minima: non ridisegna
   .product-miniature nel suo insieme, altrimenti cambierebbero anche le
   pagine categoria. */
.bsa-plist{
  max-width:var(--bsa-max);
  margin:0 auto;
  background:var(--bsa-white);
  border-radius:var(--bsa-r-band);
  padding:20px 16px;
}
@media (min-width:768px){ .bsa-plist{ padding:28px 24px; } }

.bsa-plist .product-title,
.bsa-plist .product-title a{
  font-family:var(--bsa-font);
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  color:var(--bsa-ink);
  text-transform:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.bsa-plist .product-price-and-shipping .price,
.bsa-plist .price{ font-family:var(--bsa-font); font-weight:700; color:var(--bsa-ink); }
.bsa-plist .regular-price{ color:var(--bsa-muted); font-weight:400; }

.bsa-plist .owl-nav button.owl-prev,
.bsa-plist .owl-nav button.owl-next{
  width:44px;
  height:44px;
  border-radius:var(--bsa-r-pill);
  border:1px solid var(--bsa-line-2);
  background:var(--bsa-white);
  color:var(--bsa-ink);
}
.bsa-plist .owl-nav button.owl-prev:hover,
.bsa-plist .owl-nav button.owl-next:hover{ background:var(--bsa-cream); }

/* --- 11. Band editoriale (blocchi 05/08) ---------------------------------- */
.bsa-editorial{ display:grid; position:relative; }
.bsa-editorial__media,
.bsa-editorial__body{ grid-area:1 / 1; }
.bsa-editorial__media{ display:block; position:absolute; inset:0; }
.bsa-editorial__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.bsa-editorial__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(20,21,26,.90) 0%,
    rgba(20,21,26,.62) 34%,
    rgba(20,21,26,.22) 70%,
    rgba(20,21,26,.04) 100%);
}
.bsa-editorial__body{
  position:relative;
  z-index:1;
  align-self:end;
  padding:26px 20px;
  max-width:680px;
}
@media (min-width:768px){ .bsa-editorial__body{ padding:44px 40px; } }
.bsa-editorial__title{
  margin:0;
  font-size:clamp(22px,3.4vw,40px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--bsa-white);
}
.bsa-editorial .bsa-eyebrow{ color:rgba(255,255,255,.88); }
.bsa-editorial__cta{ margin-top:20px; }

.bsa-editorial{ min-height:70vh; min-height:70svh; }
@supports (aspect-ratio:1/1){ .bsa-editorial{ aspect-ratio:1/1; min-height:0; } }
@media (min-width:768px){
  .bsa-editorial{ min-height:52vh; min-height:52svh; }
  @supports (aspect-ratio:1/1){ .bsa-editorial{ aspect-ratio:2/1; min-height:0; } }
}
@media (min-width:992px){
  @supports (aspect-ratio:1/1){ .bsa-editorial{ aspect-ratio:5/2; } }
}
@media (max-width:991px) and (orientation:landscape){
  .bsa-editorial{ min-height:300px; max-height:380px; }
  @supports (aspect-ratio:1/1){ .bsa-editorial{ aspect-ratio:auto; } }
  .bsa-editorial__body{ padding:20px 24px; }
  .bsa-editorial .bsa-lede{ display:none; }
}

/* Variante centrata */
.bsa-editorial--center .bsa-editorial__media::after{
  background:linear-gradient(to bottom,
    rgba(20,21,26,.62) 0%,
    rgba(20,21,26,.72) 50%,
    rgba(20,21,26,.80) 100%);
}
.bsa-editorial--center .bsa-editorial__body{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  align-self:center;
}
.bsa-editorial--center .bsa-lede{ margin-left:auto; margin-right:auto; }

/* --- 12. Griglia card (blocchi 06/09) ------------------------------------- */
.bsa-grid{
  display:grid;
  gap:var(--bsa-gap);
  grid-template-columns:1fr;
  margin-top:22px;
}
@media (min-width:576px){
  .bsa-grid--4,.bsa-grid--3,.bsa-grid--2,.bsa-grid--feature{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:992px){
  .bsa-grid--4{ grid-template-columns:repeat(4,1fr); }
  .bsa-grid--3{ grid-template-columns:repeat(3,1fr); }
  .bsa-grid--feature{ grid-template-columns:repeat(4,1fr); grid-auto-rows:460px; }
  .bsa-grid--feature > .bsa-card:first-child{ grid-column:span 2; }
}

.bsa-card{
  position:relative;
  display:grid;
  border-radius:var(--bsa-r-card);
  overflow:hidden;
  background:var(--bsa-ink);
}
.bsa-card__media,
.bsa-card__body{ grid-area:1 / 1; }

.bsa-card{ aspect-ratio:4/5; }
@supports not (aspect-ratio:1/1){ .bsa-card{ min-height:380px; } }
.bsa-card__media{ display:block; position:absolute; inset:0; }
.bsa-card__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* Nella griglia asimmetrica l'altezza la da' la riga, non il rapporto della card:
   altrimenti la card doppia larghezza trascinerebbe in alto tutte le altre. */
@media (min-width:992px){
  .bsa-grid--feature > .bsa-card{ aspect-ratio:auto; }
}
.bsa-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(20,21,26,.90) 0%,
    rgba(20,21,26,.55) 38%,
    rgba(20,21,26,.12) 72%,
    rgba(20,21,26,0) 100%);
}
.bsa-card__body{
  position:absolute;
  z-index:2;
  left:0; right:0; bottom:0;
  padding:20px 18px;
}
.bsa-card .bsa-eyebrow{ color:rgba(255,255,255,.82); margin-bottom:6px; }
.bsa-card__title{
  margin:0 0 16px;
  font-size:clamp(16px,1.6vw,22px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--bsa-white);
}
/* card interamente cliccabile con UN solo link: la CTA si estende sulla card */
.bsa-card__cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.bsa-card__ctas{
  display:grid;
  grid-auto-flow:column;
  column-gap:8px;
  justify-content:start;
}
.bsa-card--dual .bsa-card__cta::before{ content:none; }  /* due link: niente stesa */
.bsa-card--dual .bsa-btn{ padding:13px 24px; }

/* --- 13. Eventi e storie (blocco 10) -------------------------------------- */
.bsa-stories{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:var(--bsa-gap);
  grid-template-columns:1fr;
}
@media (min-width:576px){ .bsa-stories{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .bsa-stories{ grid-template-columns:repeat(4,1fr); } }

.bsa-story{
  position:relative;
  display:block;
  border-radius:var(--bsa-r-card);
  overflow:hidden;
  text-decoration:none;
  background:var(--bsa-ink);
  -webkit-tap-highlight-color:transparent;
}
.bsa-story{ aspect-ratio:1/1; }
@supports not (aspect-ratio:1/1){ .bsa-story{ height:300px; } }
.bsa-story img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.bsa-story::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(20,21,26,.90) 0%,
    rgba(20,21,26,.48) 45%,
    rgba(20,21,26,.10) 80%);
}
/* Il logo e' un <img> dentro .bsa-story: serve piu' specificita' di
   ".bsa-story img" (0,1,1), altrimenti eredita width/height 100% e inset:0. */
.bsa-story img.bsa-story__logo{
  position:absolute;
  z-index:1;
  top:14px;
  left:16px;
  right:auto;
  bottom:auto;
  width:auto;
  max-width:120px;
  height:22px;
  object-fit:contain;
  filter:brightness(0) invert(1);   /* uniforma i loghi dei brand a bianco */
}
.bsa-story__body{ display:block; position:absolute; z-index:1; left:0; right:0; bottom:0; padding:18px 16px; }
.bsa-story__title{
  display:block;
  margin:0 0 10px;
  font-size:16px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--bsa-white);
}
.bsa-story__more{
  display:inline-block;
  font:700 12px/1 var(--bsa-font);
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--bsa-white);
  border-bottom:2px solid var(--bsa-white);
  padding-bottom:5px;
}
.bsa-story:focus-visible{ outline:2px solid var(--bsa-ink); outline-offset:3px; }

/* --- 14. Instagram (blocco 12) -------------------------------------------- */
.bsa-ig__head{
  display:grid;
  grid-template-columns:1fr;
  row-gap:14px;
  align-items:end;
}
@media (min-width:768px){
  .bsa-ig__head{ grid-template-columns:1fr auto; column-gap:24px; row-gap:0; }
}
.bsa-ig__handle{
  margin:10px 0 0;
  font-size:14px;
  font-weight:600;
  color:var(--bsa-muted);
}
.bsa-ig{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:576px){ .bsa-ig{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px){ .bsa-ig{ grid-template-columns:repeat(6,1fr); } }
.bsa-ig a{
  display:block;
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--bsa-r-card);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
@supports not (aspect-ratio:1/1){ .bsa-ig a{ height:180px; } }
.bsa-ig img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.bsa-ig a:focus-visible{ outline:2px solid var(--bsa-ink); outline-offset:3px; }

/* --- 15. Newsletter Klaviyo (blocco 13) ----------------------------------- */
.bsa-newsletter{ text-align:center; }
.bsa-newsletter .bsa-title{ color:var(--bsa-white); }
.bsa-newsletter .bsa-rule{ background:var(--bsa-white); margin-left:auto; margin-right:auto; }
.bsa-newsletter .bsa-lede{ margin-left:auto; margin-right:auto; }

.bsa-nl__form{ margin:24px auto 0; max-width:560px; }
.bsa-nl__row{ display:grid; grid-template-columns:1fr; row-gap:10px; }
@media (min-width:576px){
  .bsa-nl__row{ grid-template-columns:1fr auto; column-gap:10px; row-gap:0; }
}
.bsa-nl__input{
  width:100%;
  min-height:48px;
  padding:14px 22px;
  border:1px solid var(--bsa-divider-dark);
  border-radius:var(--bsa-r-pill);
  background:var(--bsa-ink-2);
  color:var(--bsa-white);
  font:400 15px/1.4 var(--bsa-font);
  -webkit-appearance:none;
  appearance:none;
}
.bsa-nl__input::placeholder{ color:var(--bsa-on-dark-2); }
.bsa-nl__input:focus{ outline:2px solid var(--bsa-white); outline-offset:2px; border-color:transparent; }

.bsa-nl__consent{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  align-items:start;
  margin-top:16px;
  text-align:left;
  font-size:12px;
  line-height:1.5;
  color:var(--bsa-on-dark);
}
.bsa-nl__consent input{ width:18px; height:18px; margin:2px 0 0; accent-color:#ffffff; }
.bsa-nl__consent a{ color:var(--bsa-white); }
.bsa-nl__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.bsa-nl__micro{ margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--bsa-on-dark-2); }
.bsa-nl__ok,.bsa-nl__err{
  margin:14px 0 0;
  padding:12px 18px;
  border-radius:var(--bsa-r-card);
  font-size:13px;
  font-weight:600;
  line-height:1.45;
}
.bsa-nl__ok{ background:var(--bsa-white); color:var(--bsa-ink); }
.bsa-nl__err{ background:var(--bsa-ink-2); color:var(--bsa-white); box-shadow:inset 0 0 0 1px var(--bsa-divider-dark); }

/* --- 16. Griglia sotto-categorie (pagine sport, blocco 02) ---------------- */
.bsa-subcats{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:var(--bsa-gap);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .bsa-subcats{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px){ .bsa-subcats{ grid-template-columns:repeat(5,1fr); } }

.bsa-subcat{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  border-radius:var(--bsa-r-card);
  overflow:hidden;
  text-decoration:none;
  background:var(--bsa-ink);
  -webkit-tap-highlight-color:transparent;
}
@supports not (aspect-ratio:1/1){ .bsa-subcat{ height:200px; } }
.bsa-subcat img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.bsa-subcat::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(20,21,26,.88) 0%,
    rgba(20,21,26,.40) 50%,
    rgba(20,21,26,.05) 85%);
}
.bsa-subcat__title{
  position:absolute;
  z-index:1;
  left:0; right:0; bottom:0;
  margin:0;
  padding:14px 14px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--bsa-white);
}
.bsa-subcat:focus-visible{ outline:2px solid var(--bsa-ink); outline-offset:3px; }

/* Sulle pagine sport la riga accento e i link di sezione prendono il colore
   del reparto; il testo resta neutro (vincolo di contrasto, vedi contrast.py). */