/* =====================================================================
   GS — glc-blog.css
   Solo blog.html, caricato DOPO css/glc.css (stesso ?v=).
   Ridisegna le classi che lo script inline della pagina scrive
   (blog-card*, blog-filter, blog-single*, blog-comment*…):
   - card degli articoli come le card dei progetti della home
     (immagine 16:10 su mezzatinta, grigia fino al passaggio del mouse,
     etichetta Bitcount, titolo Titan One, "Leggi →" sottolineato);
   - articolo con il livello .pg-prose di glc.css;
   - commenti come i moduli della home (card bianca, campi a pillola).
   Gli stili inline scritti dallo script erano pensati per 1rem = 16px
   (qui 1rem = 10px): dove serve sono corretti con !important.
   Mobile first: 768 (md) · 1024 (lg) · 1280 (xl).
   ===================================================================== */

/* ---------- B0. Le due viste: lista / articolo (lo script alterna .hidden e .active) ---------- */
.blog-main { min-height: 80vh; }
/* finché gli articoli non arrivano dal server il footer resta sotto il bordo dello schermo:
   quando compaiono l'elenco o l'articolo non lo spingono giù sotto gli occhi (CLS) */
.blog-main:has(#blogGrid:empty) { min-height: 100vh; }
.blog-list-view.hidden { display: none; }
.blog-single { display: none; width: 100%; max-width: 120rem; margin-inline: auto; }
.blog-single.active { display: flex; flex-direction: column; gap: 4rem; }
@media (min-width: 768px) { .blog-single.active { gap: 6rem; } }

/* ---------- B1. Intestazione della lista ---------- */
/* Titan One non ha il corsivo: niente obliquo finto su "Pensieri" */
.blog-hero-title em { font-style: normal; }
.blog-hero-doodle { margin-block: .5rem; }

/* ---------- B2. Card degli articoli (come .project-card della home) ---------- */
.blog-card {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-m);
  cursor: var(--cursor-hover);
  transition: rotate .12s var(--ease-in);
}
@media (hover: hover) {
  .blog-card:hover { rotate: 2deg; }
  .blog-card:nth-child(even):hover { rotate: -2deg; }
  .blog-card:hover .blog-card-read { text-decoration-line: none; }
}
.blog-card:focus-visible { outline: none; box-shadow: var(--focus); }

/* copertina: stile inline dello script "height:180px" → riquadro 16:10 come le anteprime dei progetti */
.blog-card-img {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--halftone), var(--bg);
  border-bottom: var(--bw) solid var(--brown);
  font-size: 6rem; line-height: 1;            /* icona della categoria quando manca la copertina */
}
.blog-card-img img {
  width: 100% !important; height: 100% !important;
  object-fit: cover;
  transition: filter .15s var(--ease-in);
}
@media (min-width: 768px) and (hover: hover) {
  .blog-card-img img { filter: grayscale(100%); }
  .blog-card:hover .blog-card-img img, .blog-card:focus-visible .blog-card-img img { filter: grayscale(0%); }
}

.blog-card-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  flex: 1;
  padding: 2rem 2rem 2.5rem;
}
.blog-card-cat {
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  font-size: 1.8rem; line-height: 1.3;
}
.blog-card-title {
  font-family: var(--font-titles);
  font-size: 2.6rem; line-height: 1.1;
  overflow-wrap: anywhere;
}
/* i titoli con un dominio lungo ("loungebarlacaupona.com") non vanno a capo a metà parola:
   sotto i 372px il titolo scala con lo schermo; nelle 3 colonne strette (1024–1237) scende fino a 23px */
@media (max-width: 767px) { .blog-card-title { font-size: min(2.6rem, 7vw); } }
@media (min-width: 1024px) { .blog-card-title { font-size: clamp(2.3rem, 2.1vw, 3.4rem); } }
.blog-card-excerpt { font-size: var(--fs-base); line-height: 1.3; overflow-wrap: anywhere; }
.blog-card-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1.6rem;
  width: 100%;
  margin-top: auto; padding-top: .6rem;
}
.blog-card-date {
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  font-size: 1.6rem; line-height: 1.3;
}
.blog-card-read {
  white-space: nowrap;
  text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
  transition: all .1s var(--ease-in);
}

/* "Nessun articolo pubblicato." (occupa tutta la griglia) */
.blog-empty {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  font-size: var(--fs-base); line-height: 1.3;
  text-align: center;
}

/* ---------- B3. Articolo ---------- */
.blog-single-head { width: 100%; }
/* sui telefoni stretti il titolo scala con la larghezza: "professionale" resta intero anche a 320px */
.blog-single-title { font-size: min(var(--fs-2xl), 10vw); overflow-wrap: anywhere; }
.blog-single-meta { margin-top: .6rem; }
.blog-single-meta:empty, .blog-single-cat:empty { display: none; }

/* copertina scritta dallo script con stile inline (raggio 12px, margine in rem da 16px).
   Riquadro 15:8 fisso (come le vecchie foto 900×480): l'altezza è già giusta prima che la foto arrivi */
.blog-single-content > :is(.blog-single-cover, img[alt="copertina"]) {
  display: block;
  width: 100%;
  aspect-ratio: 15 / 8;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-m) !important;
  margin-bottom: 0 !important;
}
/* foto non più disponibile (link esterno che il sito non carica): il disegno del blog, intero, su mezzatinta */
.blog-single-content > .blog-single-cover.is-doodle,
.blog-card-img img.is-doodle {
  object-fit: contain;
  padding: 1.5rem;
  background: var(--halftone), var(--bg);
}
/* immagini nel testo: gli articoli (e l'editor di admin.html) le scrivono con stile inline
   (raggio 12px o 8px, margine "1.5rem 0" o "1rem 0" pensato per 1rem = 16px) → stessi angoli
   della copertina e lo stesso ritmo verticale del resto dell'articolo */
.blog-single-content img { border-radius: var(--radius-m) !important; }
.blog-single-content img:not(.blog-single-cover, [alt="copertina"]) { margin-block: 1em !important; }
.blog-single-content > img:first-child { margin-top: 0 !important; }

/* tabelle e h5 consentiti dal filtro del server (php/config.php): stesso aspetto di .pg-table.
   La tabella diventa il proprio contenitore: su telefono scorre di lato invece di essere tagliata */
.blog-single-content table {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-m);
  font-size: 1.6rem; line-height: 1.4;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) { .blog-single-content table { font-size: 1.7rem; } }
.blog-single-content table:focus-visible { outline: none; box-shadow: var(--focus); }
.blog-single-content th, .blog-single-content td { padding: 1.2rem 1.6rem; text-align: left; vertical-align: top; }
.blog-single-content th {
  background: var(--pink);
  border-bottom: var(--bw) solid var(--brown);
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
}
/* telefono: colonne leggibili (come .pg-table min-width 56rem); la tabella scorre di lato */
@media (max-width: 767px) { .blog-single-content :is(th, td) { min-width: 14rem; } }
.blog-single-content td { border-top: 1px solid color-mix(in oklab, var(--brown) 35%, transparent); }
.blog-single-content tr:first-child > td { border-top: 0; }
.blog-single-content th + th, .blog-single-content td + td,
.blog-single-content th + td, .blog-single-content td + th { border-left: 1px solid color-mix(in oklab, var(--brown) 35%, transparent); }
.blog-single-content h5 { margin-top: 1.5em; font-weight: 600; line-height: 1.3; }
.blog-single-content h5 + * { margin-top: .6em; }

/* telefoni: il testo dell'articolo non poggia sul margine di 10px della pagina.
   Solo i blocchi di testo rientrano: copertina, immagini e riquadri restano allineati alla card del titolo */
@media (max-width: 767px) {
  .blog-single-content > :is(p, h2, h3, h4, h5, ul, ol),
  .blog-comments-header { padding-inline: .6rem; }
}
/* riquadro "File allegati" (stili inline dello script) */
.blog-single-content > div[style*="var(--bg2)"] {
  display: flex; flex-direction: column; gap: 1rem;
  margin-top: 2em !important;
  padding: 2rem !important;
  background: var(--green) !important;
  border: var(--bw) solid var(--brown) !important;
  border-radius: var(--radius-m) !important;
}
@media (min-width: 768px) { .blog-single-content > div[style*="var(--bg2)"] { padding: 2.5rem 3rem !important; } }
.blog-single-content > div[style*="var(--bg2)"] > div:first-child {
  margin-bottom: 0 !important;
  font-size: 1.8rem !important; font-weight: 300 !important; line-height: 1.3;
  font-synthesis: none; -webkit-font-smoothing: auto;
}
.blog-single-content .blog-file-link {
  gap: 1rem !important;
  margin: 0 !important;
  padding: 1rem 1.8rem !important;
  border: var(--bw) solid var(--brown) !important;
  border-radius: 9999px !important;
  font-size: 1.6rem !important; line-height: 1.3;
  text-decoration: none;
  transition: background-color .1s var(--ease-in);
}
.blog-single-content .blog-file-link > span:last-child {
  flex: none;
  font-family: var(--font-special); font-weight: 300; -webkit-font-smoothing: auto;
  font-size: 1.4rem !important;
  color: inherit !important;
}
@media (hover: hover) { .blog-single-content .blog-file-link:hover { background: var(--pink) !important; } }
.blog-single-content .blog-file-link:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- B4. Commenti (come i moduli della home) ---------- */
.blog-comments-section {
  display: flex; flex-direction: column; gap: 2.5rem;
  width: 100%;
  max-width: 40em;                 /* stessa colonna del testo dell'articolo */
  margin-inline: auto;
  padding-top: 4rem;
  border-top: var(--bw) solid var(--brown);
  font-size: var(--fs-base);
}
@media (min-width: 768px) { .blog-comments-section { gap: 3rem; padding-top: 6rem; } }
.blog-comments-section:empty { display: none; }
.blog-comments-count {
  font-family: var(--font-titles);
  font-size: calc(var(--fs-xl) * .8); line-height: 1.15;
  -webkit-text-stroke: .02em currentColor;
}

.blog-comment-form {
  display: flex; flex-direction: column; gap: 1.6rem;
  width: 100%;
  padding: 3rem 2rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-l);
}
@media (min-width: 768px) { .blog-comment-form { gap: 2rem; padding: 4rem; } }
/* titolo: come .form-card__title della home ("Lascia una recensione") */
.blog-comment-form-title {
  font-family: var(--font-titles);
  font-size: var(--fs-xl); line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  -webkit-text-stroke: .02em currentColor;
}
.blog-comment-form .form-note { font-size: 1.6rem; line-height: 1.45; }
.blog-comment-form .form-note a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) { .blog-comment-form .form-note a:hover { text-decoration-line: none; } }
.blog-comment-form .form-note a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: .4rem; }

/* campi: come .field input/textarea della home (lo script li scrive con margin/width inline) */
.blog-comment-input {
  display: block;
  width: 100% !important;
  margin: 0 !important;
  padding: 1.2rem 2rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  font-size: var(--fs-base); line-height: 1.25;
  transition: background-color .15s var(--ease-in), box-shadow .1s var(--ease-in);
}
textarea.blog-comment-input { min-height: 14rem; border-radius: var(--radius-m); resize: vertical; }
.blog-comment-input:focus { background-color: var(--green); outline: none; }
.blog-comment-input:focus-visible { box-shadow: var(--focus); }

/* bottone: come .btn.btn--solid della home (il testo è lungo: può andare a capo) */
.blog-comment-submit {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  max-width: 100%;
  margin-top: .5rem;
  padding: .8rem 1.6rem;
  background: var(--brown);
  color: var(--bg);
  border: var(--bw) solid var(--brown);
  border-radius: 9999px;
  font-size: var(--fs-base); line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  transition: all .1s var(--ease-in);
}
@media (min-width: 768px) { .blog-comment-submit { align-self: flex-start; } }
@media (hover: hover) { .blog-comment-submit:hover { background: var(--pink); color: var(--brown); } }
.blog-comment-submit:focus-visible { outline: none; box-shadow: var(--focus); }

.blog-comments-list { display: flex; flex-direction: column; gap: 1.6rem; }
@media (min-width: 768px) { .blog-comments-list { gap: 2rem; } }
.blog-comment {
  display: flex; align-items: flex-start; gap: 1.5rem;
  padding: 2rem;
  background: var(--white);
  border: var(--bw) solid var(--brown);
  border-radius: var(--radius-m);
}
@media (min-width: 768px) { .blog-comment { padding: 2.5rem 3rem; gap: 2rem; } }
.blog-comment:nth-child(even) { background: var(--pink); }
/* avatar con le iniziali: come .pg-avatar */
.blog-comment-avatar {
  display: grid; place-items: center;
  width: 4.8rem; height: 4.8rem; flex: none;
  background: var(--pink);
  border: var(--bw) solid var(--brown);
  border-radius: 50%;
  font-family: var(--font-titles); font-size: 1.8rem; line-height: 1;
  text-transform: uppercase;
}
.blog-comment:nth-child(even) .blog-comment-avatar { background: var(--white); }
.blog-comment-body { display: flex; flex-direction: column; gap: .6rem; flex: 1; min-width: 0; }
.blog-comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem; font-size: var(--fs-base); line-height: 1.3; }
.blog-comment-meta strong { font-weight: 600; overflow-wrap: anywhere; }
.blog-comment-date {
  font-family: var(--font-special); font-weight: 300; font-synthesis: none; -webkit-font-smoothing: auto;
  font-size: 1.4rem; line-height: 1.3;
}
.blog-comment-text { font-size: var(--fs-base); line-height: 1.4; overflow-wrap: anywhere; }

/* ---------- B5. Movimento ridotto e stampa ---------- */
@media (prefers-reduced-motion: reduce) {
  .blog-card:hover, .blog-card:nth-child(even):hover { rotate: none !important; }
}
@media print {
  .blog-filters, .blog-single-back, .blog-comment-form { display: none !important; }
  .blog-card-img img { filter: none !important; }
}