/* Magazine (inc/magazine.php): articolo, pagina indice, sezione home, riquadro
   sulla scheda prodotto. Caricato solo in quei contesti (ldd_mag_enqueue).

   Tesi visiva: una pagina da LEGGERE. Colonna di testo stretta (circa 70
   caratteri), foto piu' larghe del testo, una sola cosa colorata — il pulsante
   della scheda del set. La scheda del set usa il codice in mono come la scheda
   prodotto: e' lo stesso oggetto, visto da un'altra parte del sito.
   Nessuna animazione: niente qui cambia stato oltre al passaggio del mouse. */

.ldd-mag-art,
.ldd-mag-page,
.ldd-home-mag,
.ldd-mag-prodbox{
  --border:var(--wp--preset--color--border,#e4e4e7);
  --surface:var(--wp--preset--color--surface,#f4f4f5);
  --ink:var(--wp--preset--color--contrast,#171717);
  --muted:var(--wp--preset--color--muted,#52525b);
  --mag-text:68ch;
}

/* ==========================================================================
   Pezzi comuni
   ========================================================================== */
.ldd-mag-eyebrow{
  font-family:var(--bk-font-mono);
  font-size:var(--bk-fs-xs);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bk-blue-700);
}

.ldd-mag-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px 28px;
}

.ldd-mag-card-link{ display:flex; flex-direction:column; gap:16px; color:inherit; text-decoration:none; height:100%; }
/* La foto sta in una VETRINA: riquadro grigio chiaro, set intero (contain, mai
   tagliato) e fondo bianco della foto fuso nel riquadro (multiply). Senza, le
   foto prodotto su bianco galleggiavano sulla pagina bianca e non si capiva
   dove finisse una card. */
.ldd-mag-card-img{
  aspect-ratio:4/3; overflow:hidden; border-radius:12px;
  background:var(--surface);
  padding:7%; box-sizing:border-box;
}
/* perf-images avvolge l'<img> in <picture>: la misura va data a entrambi. */
.ldd-mag-card-img picture,
.ldd-mag-card-img img{ display:block; width:100%; height:100%; }
.ldd-mag-card-img img{ object-fit:contain; mix-blend-mode:multiply; }
.ldd-mag-card-body{ display:flex; flex-direction:column; gap:8px; }
.ldd-mag-card-title{
  margin:0;
  font-family:var(--bk-font-sans);
  font-weight:900;
  font-size:var(--bk-fs-xl);
  line-height:1.3;
  color:var(--ink);
}
.ldd-mag-card-link:hover .ldd-mag-card-title{ text-decoration:underline; text-underline-offset:3px; }
.ldd-mag-card-link:focus-visible{ outline:var(--bk-focus); outline-offset:4px; border-radius:12px; }
.ldd-mag-card-excerpt{
  margin:0; font-size:var(--bk-fs-base); line-height:1.55; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ldd-mag-card-meta{ font-size:var(--bk-fs-sm); color:var(--muted); }
.ldd-mag-card-go{ margin-top:6px; font-weight:700; font-size:var(--bk-fs-md); color:var(--bk-blue-700); }

/* ==========================================================================
   Articolo
   ========================================================================== */
body.ldd-mag-article-body .wp-site-blocks > main{ margin-top:0 !important; }

.ldd-mag-art{
  max-width:var(--ldd-w-page);
  margin:0 auto;
  padding:28px var(--ldd-gutter-x) 72px;
  box-sizing:border-box;
}
.ldd-mag-head{ max-width:calc(var(--mag-text) + 360px); margin-bottom:28px; }
.ldd-mag-crumbs{ font-size:var(--bk-fs-sm); color:var(--muted); margin-bottom:18px; }
.ldd-mag-crumbs a{ color:var(--bk-blue-700); text-decoration:none; }
.ldd-mag-crumbs a:hover{ text-decoration:underline; }
.ldd-mag-title{
  margin:0 0 12px;
  font-family:var(--bk-font-sans);
  font-weight:900;
  font-size:var(--bk-fs-h1);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ink);
  max-width:28ch;
}
.ldd-mag-meta{ margin:0; font-size:var(--bk-fs-md); color:var(--muted); }

/* Due colonne su desktop: a sinistra foto, corpo, fonti; a destra la scheda
   del set che segue lo scroll. Su telefono una colonna sola, e la scheda cade
   subito dopo la foto principale (ordine del DOM). */
.ldd-mag-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  grid-template-areas:
    "hero    aside"
    "body    aside"
    "sources aside";
  column-gap:56px;
  align-items:start;
}
.ldd-mag-hero{ grid-area:hero; margin:0 0 32px; }
.ldd-mag-set{ grid-area:aside; }
.ldd-mag-body{ grid-area:body; }
.ldd-mag-sources{ grid-area:sources; }

.ldd-mag-hero img{ display:block; width:100%; height:auto; border-radius:12px; background:var(--surface); }
.ldd-mag-hero picture{ display:block; }
.ldd-mag-hero figcaption,
.ldd-mag-body figcaption{
  margin-top:10px;
  font-size:var(--bk-fs-base);
  line-height:1.5;
  color:var(--muted);
}

/* La scheda del set */
.ldd-mag-set{
  position:sticky;
  top:24px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:22px;
  background:var(--bk-on-fill);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ldd-mag-set-code{
  font-family:var(--bk-font-mono);
  font-size:var(--bk-fs-sm);
  font-weight:500;
  letter-spacing:.06em;
  color:var(--muted);
}
.ldd-mag-set-name{
  margin:0;
  font-weight:900;
  font-size:var(--bk-fs-xl);
  line-height:1.3;
  color:var(--ink);
}
.ldd-mag-set-dl{ margin:0; display:flex; flex-direction:column; border-top:1px solid var(--border); }
.ldd-mag-set-dl > div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:var(--bk-fs-base);
}
.ldd-mag-set-dl dt{ color:var(--muted); }
.ldd-mag-set-dl dd{ margin:0; text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.ldd-mag-set-cta{
  display:block;
  text-align:center;
  padding:13px 18px;
  border-radius:10px;
  background:var(--bk-blue-600);
  color:var(--bk-on-fill);
  font-weight:700;
  font-size:var(--bk-fs-lg);
  text-decoration:none;
}
.ldd-mag-set-cta:hover{ background:var(--bk-blue-700); color:var(--bk-on-fill); }
.ldd-mag-set-cta:focus-visible{ outline:var(--bk-focus); outline-offset:3px; }

/* Il corpo */
.ldd-mag-body{ max-width:var(--mag-text); }
.ldd-mag-body > *{ margin-top:0; }
.ldd-mag-body p{
  margin:0 0 1.1em;
  font-size:var(--bk-fs-xl);
  line-height:1.7;
  color:var(--ink);
}
.ldd-mag-body p.ldd-mag-lead{ font-size:var(--bk-fs-2xl); line-height:1.65; }
.ldd-mag-body h2{
  margin:2.1em 0 .6em;
  font-family:var(--bk-font-sans);
  font-weight:900;
  font-size:var(--bk-fs-3xl);
  line-height:1.25;
  color:var(--ink);
}
.ldd-mag-body .wp-block-image{ margin:1.6em 0 1.8em; }
.ldd-mag-body .wp-block-image img{ display:block; width:100%; height:auto; border-radius:10px; background:var(--surface); }

/* Lightbox: l'immagine dichiara di essere ingrandibile solo col cursore, senza
   icone sopra la foto. */
.ldd-mag-zoom{ display:block; cursor:zoom-in; }
.ldd-mag-zoom:focus-visible{ outline:var(--bk-focus); outline-offset:3px; border-radius:10px; }

/* Fonti */
.ldd-mag-sources{
  max-width:var(--mag-text);
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.ldd-mag-sources h2{ margin:0 0 10px; font-size:var(--bk-fs-lg); font-weight:900; color:var(--ink); }
.ldd-mag-sources ul{ margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:6px; }
.ldd-mag-sources li{ font-size:var(--bk-fs-base); color:var(--muted); }
.ldd-mag-sources a{ color:var(--bk-blue-700); overflow-wrap:anywhere; }

/* Altri articoli */
.ldd-mag-more{ margin-top:64px; padding-top:40px; border-top:1px solid var(--border); }
.ldd-mag-more > h2{ margin:0 0 24px; font-weight:900; font-size:var(--bk-fs-h2); line-height:1.15; color:var(--ink); }

/* PhotoSwipe: didascalia leggibile e nel font del sito. */
.pswp__caption__center{ font-family:var(--bk-font-sans); font-size:var(--bk-fs-base); line-height:1.5; text-align:center; max-width:70ch; }

/* ==========================================================================
   Pagina Magazine
   ========================================================================== */
/* Stesso asse dell'H1 nella fascia titolo (title-band.css): rientro calcolato
   sulla larghezza del chrome, mai 100vw (includerebbe la scrollbar). */
.ldd-mag-page{
  --mag-pad:calc(max(0px, (100% - var(--ldd-w-chrome)) / 2) + var(--ldd-gutter-x));
  box-sizing:border-box;
  max-width:none;
  padding:0 var(--mag-pad) 72px;
}
body.ldd-mag-page-body .wp-block-post-title + .wp-block-post-content{ margin-block-start:0; }
/* Il sottotitolo continua la fascia del titolo: stesso azzurro, la riga di
   separazione si sposta sotto di lui. Prima stava schiacciato sul bianco,
   staccato dal titolo che descrive. */
body.ldd-title-band.ldd-mag-page-body .wp-block-post-title{ border-bottom:0; padding-bottom:6px; }
.ldd-mag-sub{
  margin:0 calc(-1 * var(--mag-pad)) 40px; padding:0 var(--mag-pad) 26px;
  background:var(--bk-band); border-bottom:1px solid var(--bk-band-line);
  font-size:var(--bk-fs-2xl); line-height:1.5; color:var(--bk-band-ink);
}
.ldd-mag-empty{ font-size:var(--bk-fs-lg); color:var(--muted); }

/* Il primo articolo: un pannello unico, foto a sinistra e testo a destra, sullo
   stesso grigio della vetrina. Occupa la riga ma non lascia mezza pagina vuota. */
/* Quattro per riga solo da 1400px: sotto, le vetrine diventerebbero francobolli. */
@media (min-width:1400px){
  .ldd-mag-grid--page{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.ldd-mag-grid--page .ldd-mag-card--big{ grid-column:1 / -1; }
.ldd-mag-card--big .ldd-mag-card-link{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0; align-items:stretch;
  background:var(--surface); border-radius:16px; overflow:hidden;
}
.ldd-mag-card--big .ldd-mag-card-img{ aspect-ratio:4/3; border-radius:0; padding:6%; max-height:460px; width:100%; }
.ldd-mag-card--big .ldd-mag-card-body{ justify-content:center; gap:12px; padding:40px 48px; }
.ldd-mag-card--big .ldd-mag-card-excerpt{ -webkit-line-clamp:4; font-size:var(--bk-fs-lg); color:var(--ink); }
.ldd-mag-card--big .ldd-mag-card-title{ font-size:var(--bk-fs-h2); line-height:1.15; }

/* Strumenti dell'indice (compaiono solo quando servono, vedi ldd_mag_strumenti):
   categorie come bottoni, tema e ricerca in una riga sola. */
.ldd-mag-tools{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin:0 0 28px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.ldd-mag-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ldd-mag-chips a{
  display:inline-flex; align-items:center; min-height:38px; padding:0 14px;
  border:1px solid var(--border); border-radius:999px;
  font-size:var(--bk-fs-base); font-weight:700; color:var(--ink); text-decoration:none; background:var(--bk-on-fill);
}
.ldd-mag-chips a:hover{ border-color:var(--bk-blue-100); background:var(--bk-blue-050); }
.ldd-mag-chips a[aria-current="true"]{ background:var(--bk-blue-600); border-color:var(--bk-blue-600); color:var(--bk-on-fill); }
.ldd-mag-chips a:focus-visible,
.ldd-mag-pager a:focus-visible{ outline:var(--bk-focus); outline-offset:2px; }
.ldd-mag-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.ldd-mag-field{ display:flex; flex-direction:column; gap:6px; font-size:var(--bk-fs-sm); font-weight:700; color:var(--muted); }
.ldd-mag-field select,
.ldd-mag-field input{
  min-height:40px; padding:0 12px; box-sizing:border-box;
  border:1px solid var(--border); border-radius:10px; background:var(--bk-on-fill);
  font-family:var(--bk-font-sans); font-size:var(--bk-fs-md); color:var(--ink);
}
.ldd-mag-field--q input{ width:260px; max-width:100%; }
.ldd-mag-field select:focus-visible,
.ldd-mag-field input:focus-visible,
.ldd-mag-submit:focus-visible{ outline:var(--bk-focus); outline-offset:2px; }
.ldd-mag-submit{
  min-height:40px; padding:0 18px; border:0; border-radius:10px; cursor:pointer;
  background:var(--bk-blue-600); color:var(--bk-on-fill);
  font-family:var(--bk-font-sans); font-size:var(--bk-fs-md); font-weight:700;
}
.ldd-mag-submit:hover{ background:var(--bk-blue-700); }
.ldd-mag-count{ margin:0 0 24px; font-size:var(--bk-fs-md); color:var(--muted); }
.ldd-mag-count a{ color:var(--bk-blue-700); font-weight:700; }

/* Paginazione numerata */
.ldd-mag-pager{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 20px; margin-top:52px; padding-top:28px; border-top:1px solid var(--border); }
.ldd-mag-pager-dir{ font-weight:700; font-size:var(--bk-fs-md); color:var(--bk-blue-700); }
.ldd-mag-pager-num{ display:flex; align-items:center; gap:6px; margin:0; padding:0; list-style:none; }
.ldd-mag-pager-num a,
.ldd-mag-pager-num span{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:0 6px; box-sizing:border-box;
  border-radius:10px; font-weight:700; font-size:var(--bk-fs-md); font-variant-numeric:tabular-nums; text-decoration:none;
}
.ldd-mag-pager-num a{ color:var(--ink); border:1px solid var(--border); }
.ldd-mag-pager-num a:hover{ border-color:var(--bk-blue-100); background:var(--bk-blue-050); }
.ldd-mag-pager-num span[aria-current]{ background:var(--bk-blue-600); color:var(--bk-on-fill); }
.ldd-mag-pager-gap{ color:var(--muted); padding:0 2px; }

/* ==========================================================================
   Sezione in home (dentro .ldd-home: sec-head, eyebrow e wrap sono di home.css)
   ========================================================================== */
.ldd-home .ldd-home-mag{ border-top:1px solid var(--border); }

/* ==========================================================================
   Riquadro sulla scheda prodotto
   ========================================================================== */
.ldd-mag-prodbox{ margin-top:28px; }
.ldd-mag-prodbox a{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  color:inherit;
  text-decoration:none;
  background:var(--bk-on-fill);
}
.ldd-mag-prodbox a:hover{ border-color:var(--bk-blue-100); background:var(--bk-blue-050); }
.ldd-mag-prodbox a:focus-visible{ outline:var(--bk-focus); outline-offset:3px; }
.ldd-mag-prodbox-img{ flex:0 0 112px; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--surface); }
.ldd-mag-prodbox-img picture,
.ldd-mag-prodbox-img img{ display:block; width:100%; height:100%; }
.ldd-mag-prodbox-img img{ object-fit:cover; }
.ldd-mag-prodbox-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ldd-mag-prodbox-txt strong{ font-weight:900; font-size:var(--bk-fs-lg); line-height:1.3; color:var(--ink); }
.ldd-mag-prodbox-go{ font-size:var(--bk-fs-md); font-weight:700; color:var(--bk-blue-700); }

/* ==========================================================================
   Larghezze
   ========================================================================== */
@media (max-width:1100px){
  .ldd-mag-layout{ grid-template-columns:minmax(0,1fr) 260px; column-gap:36px; }
}
@media (max-width:900px){
  .ldd-mag-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ldd-mag-layout{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"hero" "aside" "body" "sources";
  }
  .ldd-mag-set{ position:static; margin-bottom:32px; }
  .ldd-mag-card--big .ldd-mag-card-link{ grid-template-columns:minmax(0,1fr); gap:0; }
  .ldd-mag-card--big .ldd-mag-card-body{ padding:22px 22px 26px; }
  .ldd-mag-card--big .ldd-mag-card-excerpt{ -webkit-line-clamp:3; }
}
@media (max-width:600px){
  .ldd-mag-grid{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .ldd-mag-form,
  .ldd-mag-field,
  .ldd-mag-field--q input{ width:100%; }
  .ldd-mag-chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .ldd-mag-chips a{ flex:none; }
  .ldd-mag-pager-dir{ flex-basis:100%; text-align:center; }
  /* Indice su telefono: card in riga (miniatura + titolo). In colonna, tredici
     card a tutta larghezza erano 4500px di scorrimento per pagina. */
  .ldd-mag-grid--page{ gap:20px; }
  .ldd-mag-grid--page .ldd-mag-card:not(.ldd-mag-card--big) .ldd-mag-card-link{ flex-direction:row; align-items:flex-start; gap:14px; }
  .ldd-mag-grid--page .ldd-mag-card:not(.ldd-mag-card--big) .ldd-mag-card-img{ flex:0 0 112px; aspect-ratio:1/1; border-radius:8px; padding:3px; }
  .ldd-mag-grid--page .ldd-mag-card:not(.ldd-mag-card--big) .ldd-mag-card-body{ gap:5px; min-width:0; }
  .ldd-mag-grid--page .ldd-mag-card:not(.ldd-mag-card--big) .ldd-mag-card-excerpt{ display:none; }
  .ldd-mag-art{ padding-top:18px; }
  .ldd-mag-hero{ margin-bottom:22px; }
  .ldd-mag-hero img,
  .ldd-mag-body .wp-block-image img{ border-radius:8px; }
  .ldd-mag-body p{ font-size:var(--bk-fs-lg); }
  .ldd-mag-body p.ldd-mag-lead{ font-size:var(--bk-fs-xl); }
  .ldd-mag-prodbox-img{ flex-basis:88px; }
}