/* ==========================================================
   MAGAZINE — HERO LIST (archivio rubrica 1 colonna)
   - immagine 16:9, poi meta row (chip + byline), titolo, occhiello
   - NON tocca dimensioni/colore pill (seguono le var globali)
   ========================================================== */

.mag-archive-hero-list{
  max-width: var(--mag-max-width,1280px);
  margin: 0 auto 80px;
  padding: 0 var(--mag-padding-desktop,0px);
  box-sizing: border-box;
}

.mag-card--hero-list{
  border: 0;
  border-radius: 0;
  background: #fff;
  margin-bottom: 56px;
}

/* media */
.mag-card--hero-list .mag-card-media{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;   /* rapporto costante */
  overflow:hidden;
  background:#f3f4f6;
}
.mag-card--hero-list .mag-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;        /* ritaglio elegante, nessuna deformazione */
}

/* corpo */
.mag-card--hero-list .mag-card-body{
  max-width: 1100px;      /* colonna testo più stretta, elegante */
  margin: 12px auto 0;
  padding: 0;
}

/* meta row: chip + byline */
.mag-card--hero-list .mag-meta-row{
  display:flex; align-items:center; gap:12px;
  justify-content:flex-start;
  margin: 6px 0 10px;
}
.mag-card--hero-list .mag-card-byline{
  color:#6b7280; font-size:13px;
  display:flex; align-items:center; gap:6px;
}
.mag-card--hero-list .mag-card-byline .sep{ opacity:.5; }

/* titolo */
.mag-card--hero-list .mag-card-title{
  margin: 6px 0 6px;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem);
  line-height: 1.15;
  font-weight: 300;
  color:#111;
}
.mag-card--hero-list .mag-card-title a{
  color:#111; text-decoration:none;
}
.mag-card--hero-list .mag-card-title a:hover{
  text-decoration:underline; text-underline-offset:.12em;
}

/* occhiello */
.mag-card--hero-list .mag-card-excerpt{
  color:#555; font-weight:300;
  font-size: clamp(1rem, .92rem + .4vw, 1.15rem);
  margin: 0 0 4px;
}

/* responsive */
@media (max-width: 640px){
  .mag-archive-hero-list{ padding: 0 var(--mag-padding-mobile,20px); }
  .mag-card--hero-list .mag-card-media{ aspect-ratio: 4/5; } /* più verticale su mobile */
  .mag-card--hero-list .mag-card-body{ margin-top: 10px; }
}

/* ==========================================================
   PATCH — Hero allineato, meta centrati, titoli più grandi
   ========================================================== */

/* 1) Contenitore allineato ai margini di pagina */
.mag-archive-hero-list{
  max-width: var(--mag-max-width, 1280px);
  margin: 0 auto 80px;
  padding: 0 var(--mag-padding-desktop, 0px); /* ⬅︎ stessi margini di breadcrumb/header */
  box-sizing: border-box;
}

/* Hero full width all'interno del contenitore */
.mag-card--hero-list .mag-card-media{
  width: 100%;
  margin: 0;                    /* no rientri strani */
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f3f4f6;
}
.mag-card--hero-list .mag-card-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Corpo testo centrato e più stretto */
.mag-card--hero-list .mag-card-body{
  max-width: 1100px;            /* colonna elegante */
  margin: 14px auto 0;          /* centrata sotto l'immagine */
  padding: 0;
}

/* 2) Pill + byline centrati in meta-row */
.mag-card--hero-list .mag-meta-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* ⬅︎ centrati */
  align-items: center;
  gap: 10px 14px;
  margin: 6px 0 12px;
  text-align: center;
}
.mag-card--hero-list .mag-card-byline{
  color: #6b7280;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mag-card--hero-list .mag-card-byline .sep{ opacity: .5; }

/* 3) Titolo + sottotitolo più grandi */
.mag-card--hero-list .mag-card-title{
  margin: 6px 0 8px;
  font-weight: 300;
  line-height: 1.12;
  font-size: clamp(2.0rem, 1.2rem + 2.6vw, 2.8rem);  /* ⬅︎ + ~0.6rem */
  color: #111;
}
.mag-card--hero-list .mag-card-excerpt{
  color: #555;
  font-weight: 300;
  margin: 0 0 6px;
  font-size: clamp(1.1rem, 1.0rem + .5vw, 1.3rem);   /* ⬅︎ un filo più grande */
}

/* Mobile: margini coerenti e immagine più verticale */
@media (max-width: 640px){
  .mag-archive-hero-list{ padding: 0 var(--mag-padding-mobile,20px); }
  .mag-card--hero-list .mag-card-media{ aspect-ratio: 4/5; }
  .mag-card--hero-list .mag-card-body{ margin-top: 10px; }
  .mag-card--hero-list .mag-card-title{
    font-size: clamp(1.6rem, 5.6vw, 2.1rem);
    line-height: 1.14;
  }
  .mag-card--hero-list .mag-card-excerpt{
    font-size: clamp(1rem, 3.8vw, 1.15rem);
  }
}

/* ==========================================================
   🧩 SEPARATORE tra i post (filetto nero elegante)
   ========================================================== */

/* Filetto nero dopo ogni card */
.mag-archive-hero-list .mag-card--hero-list {
  position: relative;
  padding-bottom: 56px;       /* spazio sotto ogni post */
  margin-bottom: 56px;        /* spazio visivo + linea */
}

.mag-archive-hero-list .mag-card--hero-list::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;          /* allineato alla colonna testo */
  height: 1px;
  background: #000;
  opacity: 0.15;              /* leggermente attenuato per eleganza */
}

/* Nessuna linea dopo l’ultimo */
.mag-archive-hero-list .mag-card--hero-list:last-of-type::after {
  content: none;
}

/* Mobile: restringe un po’ il filetto */
@media (max-width: 640px){
  .mag-archive-hero-list .mag-card--hero-list::after{
    max-width: 100%;
    opacity: 0.2;
  }
}
/* ==========================================================
   LAYOUT 2 COL — Main + Sidebar
   ========================================================== */
.mag-archive-two-col{
  max-width: var(--mag-max-width,1280px);
  margin: 0 auto;
  padding: 0;                  /* ⬅️ niente padding qui */
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
}
/* Sidebar sticky (ferma gli highlight) */
.mag-archive-sidebar{
  position: sticky;
  top: 24px;              /* distanza dal top */
  align-self: start;
}

/* Blocco sidebar (titolo + lista) */
.mag-side-title{
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #111;
}
.mag-highlights-list{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mag-highlight{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: start;
}
.mag-highlight-media{
  display: block; width: 96px; height: 96px; overflow: hidden; background: #f3f4f6; border:1px solid #eee;
}
.mag-highlight-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-highlight-body .mag-chip.small{ margin-bottom: 4px; display: inline-block; }
.mag-highlight-title{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #111; text-decoration: none; line-height: 1.25; font-weight: 500;
}
.mag-highlight-title:hover{ text-decoration: underline; text-underline-offset: .12em; }

/* ADV placeholder */
.mag-adv-ph{
  height: 280px; border: 1px dashed #ccc; border-radius: 12px; background: #fafafa;
}

/* Mobile: sidebar sotto al main */
@media (max-width: 980px){
  .mag-archive-two-col{
    grid-template-columns: 1fr;
  }
  .mag-archive-sidebar{
    position: static;
  }
}
/* ========== HERO LIST dentro layout 2-col: allineamento esatto ========== */

/* il wrapper 2-col ha già il padding pagina: azzera quello del main */
.mag-archive-two-col .mag-archive-hero-list{
  padding: 0;
}

/* in 2-col la media occupa 100% del main (niente margini negativi) */
.mag-archive-two-col .mag-card--hero-list .mag-card-media{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  aspect-ratio: 16 / 9;        /* ribadito qui per sicurezza */
}
.mag-archive-two-col .mag-card--hero-list .mag-card-media img{
  height: 100%;
  object-fit: cover;
}

.mag-archive-two-col{
  padding: 0 var(--mag-padding-desktop, 0px);
}
@media (max-width: 980px){
  .mag-archive-two-col{ padding: 0 var(--mag-padding-mobile, 20px); }
}

/* Mobile: hero più verticale */
@media (max-width: 640px){
  .mag-archive-hero-list{ padding: 0 var(--mag-padding-mobile,20px); }
  .mag-card--hero-list .mag-card-media{ aspect-ratio: 4 / 5; }
}
/* ======= ALIGN HARD — rubrica 2-colonne: allinea l'hero al margine pagina ======= */

/* Il wrapper 2-col ha già i margini pagina */
.mag-archive-two-col{ padding: 0 var(--mag-padding-desktop,0px); }
@media (max-width:980px){ .mag-archive-two-col{ padding:0 var(--mag-padding-mobile,20px); }}

/* 1) Azzera qualunque padding residuo nel MAIN (sicuro) */
.mag-archive-two-col main.mag-archive-hero-list{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) Niente margini laterali sul wrapper card */
.mag-archive-two-col .mag-card--hero-list{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) Media: occupa il 100% del MAIN (non della viewport) in 16:9 */
.mag-archive-two-col .mag-card--hero-list .mag-card-media{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden;
  background: #f3f4f6;
}
.mag-archive-two-col .mag-card--hero-list .mag-card-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* 4) Mobile: ratio più verticale e nessun rientro */
@media (max-width:640px){
  .mag-archive-two-col .mag-card--hero-list .mag-card-media{
    aspect-ratio: 4 / 5 !important;
  }
}
/* ==========================================================
   OVERRIDE: rimuovi padding wrapper in rubrica 2-colonne
   ========================================================== */

/* Azzeriamo il padding solo per le pagine rubrica */

/* Il layout a 2 colonne mantiene i suoi margini automatici */
body.tax-mag_rubrica .mag-archive-two-col {
  padding: 0 !important;
  max-width: var(--mag-max-width,1280px);
  margin: 0 auto;
}

/* La media hero ora riempie tutto lo spazio disponibile */
body.tax-mag_rubrica .mag-archive-two-col .mag-card--hero-list .mag-card-media {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
}
body.tax-mag_rubrica .mag-archive-two-col .mag-card--hero-list .mag-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* === Rubrica: ritmo verticale più compatto tra i post === */
.mag-archive-hero-list .mag-card--hero-list{
  margin-bottom: 48px;      /* prima 56px: più serrato */
  padding-bottom: 48px;
}
.mag-archive-hero-list .mag-card--hero-list::after{
  opacity: .18;             /* filetto leggermente più visibile */
  max-width: 1100px;        /* resta allineato alla colonna testo */
}

/* Titolo ed occhiello col giusto respiro */
.mag-card--hero-list .mag-card-title{ margin: 8px 0 8px; }
.mag-card--hero-list .mag-card-excerpt{ margin: 0 0 8px; }

/* === Sidebar: highlights più “dritti” e compatti === */
.mag-highlights-list{ gap: 12px; }
.mag-highlight{
  grid-template-columns: 90px 1fr;
  gap: 10px;
}
.mag-highlight-media{ width: 90px; height: 90px; }
.mag-highlight-title{
  font-size: 15px;
  line-height: 1.25;
}
.mag-highlight-body .mag-chip.small{
  margin-bottom: 2px;
}
/* === Pagination rubrica elegante === */
.mag-pagination .page-numbers{
  display:inline-flex; gap:6px; align-items:center; justify-content:center;
  padding: 10px 0; list-style:none;
}
.mag-pagination a.page-numbers,
.mag-pagination span.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 36px; height: 36px;
  padding: 0 10px; border-radius: 999px;
  text-decoration:none; color:#111; border:1px solid #e5e7eb; background:#fff;
}
.mag-pagination .page-numbers.current{
  background: var(--mag-progress-bar, #111);
  color:#fff; border-color: transparent; font-weight:600;
}
.mag-pagination a.page-numbers:hover{ border-color:#cbd5e1; }



/* Sidebar highlights — media coerenti per logo e prodotto */
.mag-highlights-list .mag-highlight{ display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:start; }

/* wrapper base */
.mag-highlight-media{
  display:block; width:96px; height:64px;  /* base per LOGHI */
  background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden;
}
.mag-highlight-media img{ width:100%; height:100%; display:block; object-fit:contain; }

/* prodotti: foto quadrata */
.mag-highlight-media.is-product{ height:96px; }
.mag-highlight-media.is-product img{ object-fit:cover; }

/* svg: proporzioni naturali + respiro */
.mag-highlight-media.is-svg img{ height:auto; width:100%; object-fit:contain; padding:8px; }

/* Titolo + switcher */
.mag-header-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mag-archive-title{ margin: 0; }

/* Form switcher */
.mag-rubrica-switcher{ margin-left: auto; }

/* Select estetica */
.mag-select{
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 36px 8px 12px;
  font-size: .95rem;
  line-height: 1.2;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111;
  cursor: pointer;
  min-width: 220px;
  background-image: url("data:image/svg+xml;utf8,<svg width='12' height='12' viewBox='0 0 20 20' fill='%23888' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 6 5-6H5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
.mag-select:focus{
  outline: none;
  border-color: var(--mag-progress-bar, #111);
  box-shadow: 0 0 0 2px rgba(0,0,0,.03);
}

@media (max-width: 640px){
  .mag-rubrica-switcher{ width: 100%; }
  .mag-select{ width: 100%; min-width: 0; }
}

/* Sidebar rubrica — distanza ADV → gruppi citati */
.mag-archive-sidebar .mag-adv{
  margin-bottom: 24px;              /* respiro sotto lo slot ADV */
}

/* Se c'è subito un blocco "citati" dopo l'ADV, aggiungi ulteriore gap */
.mag-archive-sidebar .mag-adv + .mag-highlights{
  margin-top: 28px;                  /* micro-spazio extra (non collassa) */
}

/* Spaziatura verticale uniforme tra i blocchi della sidebar */
.mag-archive-sidebar .mag-side-block{
  margin-bottom: 18px;
}

/* Versione mobile: spazi leggermente più compatti */
@media (max-width:640px){
  .mag-archive-sidebar .mag-adv{ margin-bottom: 20px; }
  .mag-archive-sidebar .mag-side-block{ margin-bottom: 14px; }
}
/* Sidebar rubrica: sticky con gap confortevole dal bordo alto */
.mag-archive-sidebar{
  position: sticky;
  top: 48px;                 /* ↑ era 24px: più respiro sotto il bordo */
}

/* Quando l'admin bar è visibile (utenti loggati) */
body.admin-bar .mag-archive-sidebar{
  top: calc(32px + 40px);    /* 32 admin bar + 40 di offset = 72px */
}

/* Admin bar su mobile (~46px) */
@media (max-width: 782px){
  body.admin-bar .mag-archive-sidebar{
    top: calc(46px + 28px);  /* ~74px: un filo meno ingombrante su mobile */
  }
}

/* Un filo di spazio sotto il titolo "Sponsorizzato" per sicurezza */
.mag-archive-sidebar .mag-adv .mag-side-title{
  margin-bottom: 10px;
}

/* Sidebar rubrica: sticky con gap confortevole dal bordo alto */
.mag-archive-sidebar{
  position: sticky;
  top: 48px;                 /* ↑ era 24px: più respiro sotto il bordo */
}

/* Quando l'admin bar è visibile (utenti loggati) */
body.admin-bar .mag-archive-sidebar{
  top: calc(32px + 40px);    /* 32 admin bar + 40 di offset = 72px */
}

/* Admin bar su mobile (~46px) */
@media (max-width: 782px){
  body.admin-bar .mag-archive-sidebar{
    top: calc(46px + 28px);  /* ~74px: un filo meno ingombrante su mobile */
  }
}

/* Un filo di spazio sotto il titolo "Sponsorizzato" per sicurezza */
.mag-archive-sidebar .mag-adv .mag-side-title{
  margin-bottom: 10px;
}

/* Titolo + switcher: allineamento di baseline (testi allineati) */
.mag-header-row{
  display: flex;
  align-items: baseline;     /* ⬅️ prima era flex-end */
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mag-archive-title{ margin: 0; line-height: 1.1; }

/* Switcher: la select usa il baseline e il testo resta centrato verticalmente */
.mag-rubrica-switcher{
  margin-left: auto;
  align-self: baseline;      /* ⬅️ aggancia alla baseline dell’H1 */
  display: flex;
  align-items: baseline;
}

/* Select estetica + vertical centering del testo */
.mag-select{
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 36px 8px 12px;
  line-height: 1.2;          /* evita che sembri “caduta” */
  height: auto;              /* lascia calcolare al contenuto */
  font-size: .95rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111;
  min-width: 220px;

  background-image: url("data:image/svg+xml;utf8,<svg width='12' height='12' viewBox='0 0 20 20' fill='%23888' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 6 5-6H5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}

/* Micro-fine tuning (se vuoi alzare di 1–2px la select rispetto alla baseline) */
.mag-rubrica-switcher .mag-select{ transform: translateY(-1px); }

/* Mobile: la select va sotto a tutta larghezza */
@media (max-width: 640px){
  .mag-rubrica-switcher{ width: 100%; align-self: auto; }
  .mag-select{ width: 100%; min-width: 0; transform: none; }
}
/* === Sidebar Citati — stile titoli alleggerito === */

/* Card orizzontale citati – bordo unico */
.mag-highlight {
  display: flex;
  align-items: flex-start;       /* il testo parte in alto, poi lo spostiamo giù manualmente */
  gap: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px 12px;
  background: #fff;
  transition: box-shadow 0.2s ease;
}

.mag-highlight:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Logo senza bordo interno */
.mag-highlight-media {
  flex-shrink: 0;
  border: none !important;
  box-shadow: none !important;
}

/* Riporta la vecchia centratura del titolo */
.mag-highlight-body {
  position: relative;
  top: 20px;   /* ⬅️ abbassa il titolo per riallinearne il centro col logo */
}

.mag-highlight-title {
  font-size: 15px;
  color: #333;
  font-weight: 400;
  text-decoration: none;
  line-height: 1.2;
}

/* Citati — titolo link con accent di rubrica in hover/focus */
.mag-archive-sidebar .mag-highlight-title{
  color: #333;                 /* stato base più soft */
  font-weight: 400;
  text-decoration: none;
  transition: color .2s ease;
}

.mag-archive-sidebar .mag-highlight-title:hover,
.mag-archive-sidebar .mag-highlight-title:focus {
  color: var(--mag-progress-bar, var(--color-accent));  /* accent rubrica */
  text-decoration: underline;
  text-underline-offset: .12em;
}

/* ================================
   Spaziatura tra i gruppi citati
   ================================ */
.mag-side-block.mag-highlights {
  margin-top: 32px;    /* ⬅️ spazio sopra ogni gruppo */
}

.mag-side-block.mag-highlights:first-of-type {
  margin-top: 20px;    /* leggermente meno per il primo dopo l’ADV */
}

.mag-hi-actions{ margin-top: 6px; text-align: right; }
.mag-hi-link{
  font-size: .85rem;
  color: var(--mag-progress-bar, var(--color-accent));
  text-decoration: none;
  font-weight: 500;
  opacity: .85;
  transition: opacity .2s ease;
  display: inline-flex; align-items: center; gap: 3px;
}
.mag-hi-link:hover{ opacity: 1; text-decoration: underline; text-underline-offset: .12em; }
.mag-highlights-list.mag-hi-extra{ margin-top: 8px; }
/* Rispetta SEMPRE l'attributo hidden */
.mag-highlights-list[hidden] { display: none !important; }

/* ======================================================
   FIX — Rispetta sempre l’attributo [hidden]
   + Effetto fade-in / fade-out per "Vedi tutti / Mostra meno"
   ====================================================== */
.mag-highlights-list[hidden] {
  display: none !important;
  opacity: 0;
  transform: translateY(-4px);
}

/* Mantieni: rispetta SEMPRE l'attributo [hidden] */
.mag-highlights-list[hidden] { display: none !important; }

/* Animazione apertura/chiusura extra (Vedi tutti / Mostra meno) */
.mag-highlights-list.mag-hi-extra{
  overflow: hidden;
  max-height: 0;                 /* chiuso */
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height .28s ease,
    opacity .24s ease,
    transform .24s ease;
}

/* Stato aperto (aggiunto via JS) */
.mag-highlights-list.mag-hi-extra.is-open{
  max-height: 10000px;            /* valore grande per contenere gli elementi */
  opacity: 1;
  transform: translateY(0);
}

/* piccolo gap quando visibile */
.mag-highlights-list.mag-hi-extra:not([hidden]){ margin-top: 8px; }


/* ==========================================================
   RUBRICA MAGAZINE — MOBILE LAYOUT + ADV SAFE
   non duplica l'ADV, non rompe observer
   ========================================================== */
@media (max-width: 980px){

  /* layout a colonna */
  body.tax-mag_rubrica .mag-archive-two-col{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 var(--mag-padding-mobile, 20px) !important;
  }

  /* main prima, sidebar dopo */
  body.tax-mag_rubrica #rubrica-main{
    order: 2;
  }

  body.tax-mag_rubrica .mag-archive-sidebar{
    order: 1;
    position: static !important;
    top: auto !important;
    width: 100%;
    margin: 0;
  }

  body.tax-mag_rubrica .mag-sidebar-top{
    position: static;
    width: 100%;
    margin: 0 0 20px;
  }

  /* ADV sidebar in flow normale, aspetto decoroso mobile */
  body.tax-mag_rubrica .mag-archive-sidebar .mag-side-block.mag-adv{
    margin: 0 0 20px;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
  }

  /* se il render ADV produce un contenitore interno, lo lasciamo respirare */
  body.tax-mag_rubrica .mag-archive-sidebar .mag-side-block.mag-adv > *{
    max-width: 100%;
  }

  /* highlights sotto ADV */
  body.tax-mag_rubrica .mag-side-block.mag-highlights{
    margin-top: 0;
    margin-bottom: 18px;
  }

  /* card citati più compatte e meno rigide */
  body.tax-mag_rubrica .mag-highlight{
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  body.tax-mag_rubrica .mag-highlight-media{
    width: 84px;
    height: 84px;
  }

  body.tax-mag_rubrica .mag-highlight-media.is-product{
    height: 84px;
  }

  body.tax-mag_rubrica .mag-highlight-body{
    top: 0;
  }

  /* spazio tra ADV e primo gruppo citati */
  body.tax-mag_rubrica .mag-archive-sidebar .mag-adv + .mag-highlights{
    margin-top: 18px;
  }
}

@media (max-width: 640px){

  /* più aria generale */
  body.tax-mag_rubrica .mag-archive-two-col{
    gap: 22px;
    padding: 0 var(--mag-padding-mobile, 20px) !important;
  }

  /* ADV più "card" sul mobile stretto */
  body.tax-mag_rubrica .mag-archive-sidebar .mag-side-block.mag-adv{
    border-radius: 14px;
  }

  /* citati più leggibili */
  body.tax-mag_rubrica .mag-highlight{
    grid-template-columns: 76px 1fr;
    gap: 10px;
    padding: 10px;
  }

  body.tax-mag_rubrica .mag-highlight-media{
    width: 76px;
    height: 76px;
  }

  body.tax-mag_rubrica .mag-highlight-media.is-product{
    height: 76px;
  }

  body.tax-mag_rubrica .mag-highlight-title{
    font-size: 14px;
    line-height: 1.25;
  }
}


/* ==========================================================
   RUBRICA — citati desktop/mobile split pulito
   desktop invariato, mobile in fondo pagina
   ========================================================== */

/* default */
.mag-citati-mobile{
  display: none;
}

.mag-citati-desktop{
  display: block;
}

/* mobile/tablet */
@media (max-width: 980px){
  .mag-citati-desktop{
    display: none;
  }

.mag-citati-mobile{
  display: block;
  order: 3;              /* dopo sidebar e dopo main */
  margin: 18px 0 8px;
}

  .mag-citati-mobile .mag-side-block.mag-highlights{
    margin-top: 0;
    margin-bottom: 18px;
  }
}

/* ==========================================================
   CITATI — MOBILE POLISH FINALE
   solo mobile, desktop invariato
   ========================================================== */
@media (max-width: 980px){

  .mag-citati-mobile{
    margin: 22px 0 10px;
  }

  .mag-citati-mobile .mag-side-block.mag-highlights{
    margin: 0 0 18px;
  }

  .mag-citati-mobile .mag-side-title{
    margin: 0 0 12px;
    font-size: 1.08rem;
    line-height: 1.2;
    font-weight: 700;
  }

  .mag-citati-mobile .mag-highlights-list{
    gap: 10px;
    margin: 0 0 8px;
  }

  .mag-citati-mobile .mag-highlight{
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
  }

  .mag-citati-mobile .mag-highlight-media{
    width: 78px;
    height: 78px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
  }

  .mag-citati-mobile .mag-highlight-media.is-product{
    height: 78px;
  }

  .mag-citati-mobile .mag-highlight-media img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .mag-citati-mobile .mag-highlight-body{
    position: static;
    top: auto;
    display: flex;
    align-items: center;
    min-height: 78px;
  }

  .mag-citati-mobile .mag-highlight-title{
    display: block;
    font-size: 1rem;
    line-height: 1.28;
    font-weight: 500;
    color: #222;
    text-decoration: none;
  }

  .mag-citati-mobile .mag-hi-actions{
    margin-top: 4px;
    text-align: right;
  }

  .mag-citati-mobile .mag-hi-link{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    opacity: .92;
  }
}

@media (max-width: 640px){

  .mag-citati-mobile{
    margin: 20px 0 8px;
  }

  .mag-citati-mobile .mag-side-title{
    font-size: 1.02rem;
    margin-bottom: 10px;
  }

  .mag-citati-mobile .mag-highlight{
    grid-template-columns: 68px 1fr;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
  }

  .mag-citati-mobile .mag-highlight-media{
    width: 68px;
    height: 68px;
    border-radius: 10px;
  }

  .mag-citati-mobile .mag-highlight-media.is-product{
    height: 68px;
  }

  .mag-citati-mobile .mag-highlight-body{
    min-height: 68px;
  }

  .mag-citati-mobile .mag-highlight-title{
    font-size: .96rem;
    line-height: 1.24;
  }

  .mag-citati-mobile .mag-hi-link{
    font-size: .9rem;
  }
}

/* ==========================================================
   CITATI MOBILE — UPGRADE (logo + nome + CTA pill)
   ========================================================== */
@media (max-width: 980px){

  .mag-citati-mobile .mag-highlight{
    grid-template-columns: 88px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
  }

  /* LOGO più grande */
  .mag-citati-mobile .mag-highlight-media{
    width: 88px;
    height: 88px;
  }

  .mag-citati-mobile .mag-highlight-media.is-product{
    height: 88px;
  }

  /* BLOCCO TESTO */
  .mag-citati-mobile .mag-highlight-body{
    display: flex;
    align-items: center;
    min-height: 88px;
  }

  /* NOME più grande */
  .mag-citati-mobile .mag-highlight-title{
    font-size: 1.08rem;
    line-height: 1.25;
    font-weight: 600;
    color: #111;
  }

  /* CTA pill a destra */


}

/* versione più compatta sotto 640px */
@media (max-width: 640px){

  .mag-citati-mobile .mag-highlight{
    grid-template-columns: 74px 1fr auto;
    gap: 10px;
    padding: 10px;
  }

  .mag-citati-mobile .mag-highlight-media{
    width: 74px;
    height: 74px;
  }

  .mag-citati-mobile .mag-highlight-media.is-product{
    height: 74px;
  }

  .mag-citati-mobile .mag-highlight-body{
    min-height: 74px;
  }

  .mag-citati-mobile .mag-highlight-title{
    font-size: 1rem;
  }

/* CTA pill a destra */
.mag-citati-mobile .mag-highlight{
  display: grid !important;
  grid-template-columns: 88px 1fr auto !important; /* 👈 3 colonne */
  align-items: center;
}


	
	/* ==========================================================
   CITATI MOBILE — REFINEMENT PRO
   ========================================================== */

/* 1️⃣ Media più grande */
.mag-citati-mobile .mag-highlight{
  grid-template-columns: 104px 1fr auto !important; /* ↑ da 88 */
  gap: 12px;
}

.mag-citati-mobile .mag-highlight-media{
  width: 104px !important;
  height: 104px !important;
}

/* prodotti restano proporzionati */
.mag-citati-mobile .mag-highlight-media.is-product{
  height: 104px !important;
}

/* 2️⃣ NO border radius per LOGHI (marchi / negozi) */
.mag-citati-mobile .mag-highlight-media.is-logo{
  border-radius: 0 !important;
  overflow: visible !important;
  border: none !important;
  background: transparent !important;
}

/* evita clipping immagini logo */
.mag-citati-mobile .mag-highlight-media.is-logo img{
  object-fit: contain !important;
  padding: 6px; /* leggero respiro */
}

/* 3️⃣ Prodotti restano “card” */
.mag-citati-mobile .mag-highlight-media.is-product{
  border-radius: 10px;
  overflow: hidden;
}

/* 4️⃣ Titolo più forte e leggibile */
.mag-citati-mobile .mag-highlight-title{
  font-size: 16px !important;     /* ↑ era 14-15 */
  line-height: 1.28 !important;
  font-weight: 600 !important;
  color: #111;
}

/* 5️⃣ Allineamento verticale migliore */
.mag-citati-mobile .mag-highlight-body{
  top: 0 !important; /* togli offset vecchio */
  display: flex;
  align-items: center;
}
	
	/* ==========================================================
   CITATI — CTA PRO cliccabile
   ========================================================== */
.mag-highlight-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.mag-highlight-cta:hover{
  background: #f8fafc;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

@media (max-width: 980px){
  .mag-citati-mobile .mag-highlight{
    grid-template-columns: 104px 1fr auto !important;
    align-items: center;
  }

  .mag-citati-mobile .mag-highlight-cta{
    min-height: 38px;
    padding: 0 16px;
    font-size: .86rem;
    line-height: 1;
    border-radius: 999px;
    white-space: nowrap;
  }
}

@media (max-width: 640px){
  .mag-citati-mobile .mag-highlight{
    grid-template-columns: 104px 1fr auto !important;
    gap: 10px;
    align-items: center;
  }

  .mag-citati-mobile .mag-highlight-cta{
    min-height: 36px;
    padding: 0 14px;
    font-size: .82rem;
    line-height: 1;
    border-radius: 999px;
    white-space: nowrap;
  }
}
	
/* ==========================================================
   RUBRICA MAGAZINE — ADV mobile compatto
   nasconde la seconda foto, mantiene il logo
   e bilancia bene lo spazio sotto la CTA
   ========================================================== */
@media (max-width: 980px){

  body.tax-mag_rubrica #rub-adv .adv-slot[data-adv-position="mag_rubrica_sidebar"] .advv-body{
    margin-bottom: 6px !important;
  }

  body.tax-mag_rubrica #rub-adv .adv-slot[data-adv-position="mag_rubrica_sidebar"] .advv-secondary{
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 6px 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.tax-mag_rubrica #rub-adv .adv-slot[data-adv-position="mag_rubrica_sidebar"] .advv-secondary > img{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
  }

  body.tax-mag_rubrica #rub-adv .adv-slot[data-adv-position="mag_rubrica_sidebar"] .advv-logo{
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.tax-mag_rubrica #rub-adv .adv-slot[data-adv-position="mag_rubrica_sidebar"] .advv-logo img{
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 180px;
    max-height: 72px;
    object-fit: contain;
    margin: 0 auto;
  }
}