/* ============================================================================
   aPlaceToGo — Restyle blog 2026
   Sorgente: design handoff "Articolo Blog APTG" e "Card Blog APTG".

   Due blocchi, entrambi in produzione dal 14/09/2026:

     .aptg-a26  PAGINA ARTICOLO — classe sul template Bricks 662
                (condizione postType=post): vale per tutti gli articoli.

     .aptg-c26  CARD NELL'ELENCO — classe sulla radice del componente Bricks
                `svgovp` "APTG Articles list": vale per l'elenco del blog
                (pagina 14) e per gli archivi di categoria (template 532).

     .aptg-m26  TESTATA E MENU CATEGORIE, SOLO MOBILE — classi sugli elementi
                gia' esistenti della pagina 14 e del template 532. Tutto dentro
                una media query sotto i 900px: il desktop resta com'era.

   Tutto e' scoped su quelle tre classi: nessuna regola qui dentro puo'
   raggiungere una pagina che non sia il blog.

   NOTA Bricks: il core forza html{font-size:62.5%} -> 1rem = 10px su questo
   sito. Qui si usano SOLO px, come nei mockup.
   NOTA Bricks: il CSS per-elemento viene generato con selettore #brxe-<id>,
   piu' specifico di una classe: dove serve si usa !important (segnalato).
   NOTA: blog-typography.css resta caricato prima di questo file; le regole
   nuove vincono per specificita'. I due file andranno fusi, prima o poi.
   ========================================================================== */

.aptg-a26,
.aptg-c26,
.aptg-m26,
.aptg-m26__hero {
  --a26-primary: #1d71b8;
  --a26-primary-hover: #165a93;
  --a26-ink: #19213d;
  --a26-gray: #6d758f;
  --a26-soft: #f8faff;
  --a26-line: #e2e6f0;
  --a26-line-soft: #c3c9d9;
  --a26-serif: Georgia, "Times New Roman", serif;
  --a26-sans: "Montserrat", system-ui, -apple-system, sans-serif;
  /* L'header del sito e' position:fixed e sta SOPRA il contenuto (nel mockup
     e' invece nel flusso). Misurato: 119px da desktop, 112px sotto i 900px.
     La testata dell'articolo parte da qui + i 64px di respiro del mockup. */
  --a26-header-h: 119px;
}

/* --- Impalcatura -------------------------------------------------------- */
/* Le sezioni Bricks portano padding e centratura flex di default: qui il
   ritmo verticale lo danno i blocchi interni, come nel mockup. */
.aptg-a26.brxe-section {
  display: block;
  padding: 0;
  background: #fff;
}

.aptg-a26__wrap.brxe-container {
  display: block;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.aptg-a26__body.brxe-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 72px;
  align-items: start;
  padding: 56px 0 96px;
}

.aptg-a26__main.brxe-block {
  display: block;
  min-width: 0;
  max-width: 720px;
}

/* Colonna sidebar: contenuto attuale del sito, NON modificato.
   Qui si imposta solo la posizione della colonna. */
.aptg-a26__side.brxe-block {
  display: block;
  position: sticky;
  top: 40px;
  min-width: 0;
}

/* --- Testata ------------------------------------------------------------ */
.aptg-a26__head.brxe-block {
  display: block;
  max-width: 760px;
  padding-top: calc(var(--a26-header-h) + 64px);
}

.aptg-a26__meta.brxe-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  font-family: var(--a26-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--a26-gray);
}

.aptg-a26__dot.brxe-div {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  min-height: 0;
  border-radius: 50%;
  background: var(--a26-line-soft);
}

/* !important: sovrascrive le regole globali di blog-typography.css, che
   colpiscono .brxe-post-meta.post-meta con !important (meta a 18px/700). */
.aptg-a26 .aptg-a26__cat.brxe-post-meta.post-meta,
.aptg-a26 .aptg-a26__cat.brxe-post-meta.post-meta a,
.aptg-a26 .aptg-a26__date.brxe-post-meta.post-meta,
.aptg-a26 .aptg-a26__date.brxe-post-meta.post-meta a {
  font-family: var(--a26-sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.09em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  text-decoration: none !important;
}

.aptg-a26 .aptg-a26__cat.brxe-post-meta.post-meta,
.aptg-a26 .aptg-a26__cat.brxe-post-meta.post-meta a {
  color: var(--a26-primary) !important;
}

.aptg-a26 .aptg-a26__cat.brxe-post-meta.post-meta a:hover {
  color: var(--a26-primary-hover) !important;
  text-decoration: underline !important;
}

.aptg-a26 .aptg-a26__date.brxe-post-meta.post-meta,
.aptg-a26 .aptg-a26__date.brxe-post-meta.post-meta a {
  color: var(--a26-gray) !important;
}

.aptg-a26 .brxe-post-meta.post-meta .item {
  padding: 0;
  margin: 0;
}

/* Il mockup prevedeva anche il tempo di lettura in coda alla riga meta
   ("8 min di lettura", elemento Reading time di Bricks, calcolato via JS).
   RIMOSSO il 14/09/2026 su richiesta — "per ora". Per rimetterlo: elemento
   post-reading-time nella riga meta, preceduto da un .aptg-a26__dot. */

.aptg-a26 .aptg-a26__title,
.aptg-a26 .aptg-a26__title a {
  font-family: var(--a26-serif);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--a26-primary);
  margin: 22px 0 0;
  text-wrap: pretty;
  text-decoration: none;
}

.aptg-a26 .aptg-a26__lead {
  font-family: var(--a26-serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.6;
  color: var(--a26-gray);
  margin: 24px 0 0;
  text-wrap: pretty;
}

.aptg-a26 .aptg-a26__lead:empty {
  display: none;
}

/* --- Foto di apertura --------------------------------------------------- */
.aptg-a26__figure.brxe-block {
  display: block;
  margin-top: 44px;
}

/* L'elemento immagine di Bricks cambia tag secondo le opzioni: senza link e
   senza didascalia il tag radice e' l'<img> stesso; con un link diventa una
   <a> che lo avvolge, con didascalia una <figure>. Le classi finiscono sempre
   sulla radice, quindi la regola deve valere sia per l'elemento sia per
   l'immagine contenuta: un selettore solo con " img" non colpisce nulla. */
.aptg-a26 .aptg-a26__hero,
.aptg-a26 .aptg-a26__hero img {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: var(--a26-soft);
}

/* DIDASCALIE — sospese il 14/09/2026 su richiesta ("togliamo per ora").
   Il mockup le prevedeva in due posti: sotto la foto di apertura, con un
   numero progressivo ("01"), prese dalla didascalia dell'immagine in libreria
   media; e sotto le immagini dentro l'articolo, dal campo didascalia del
   blocco immagine.
   La prima e' gia' spenta nel template (elemento immagine, caption: none).
   La seconda si spegne qui: e' testo che sta dentro il contenuto del post.
   Per riaccenderle: rimettere caption "attachment" sull'elemento immagine del
   template e togliere la regola qui sotto. Prima pero' va sistemato il campo
   didascalia in libreria media, che su 24 articoli su 32 contiene il nome del
   file caricato ("img 5619", "whatsapp image 2026 05 15 at 18.19.03"). */
.aptg-a26 .brxe-post-content figcaption,
.aptg-a26 .brxe-post-content figcaption.wp-element-caption {
  display: none;
}

/* ==========================================================================
   CORPO DEL TESTO — .brxe-post-content
   Tutto quello che segue lavora sull'HTML che esce dall'editor Gutenberg:
   vale quindi per gli articoli gia' scritti, senza rimetterci le mani.
   ========================================================================== */

.aptg-a26 .brxe-post-content {
  font-family: var(--a26-serif);
  font-size: 19.5px;
  line-height: 1.72;
  color: var(--a26-ink);
  max-width: none;
  letter-spacing: 0;
}

.aptg-a26 .brxe-post-content > *:first-child {
  margin-top: 0;
}

.aptg-a26 .brxe-post-content p {
  font-family: var(--a26-serif);
  font-size: 19.5px;
  line-height: 1.72;
  color: var(--a26-ink);
  margin: 0 0 26px;
}

/* Il capolettera di blog-typography.css qui non c'e': l'attacco e' un
   paragrafo normale, come nel mockup. */
.aptg-a26 .brxe-post-content > p:first-of-type {
  font-size: 19.5px;
  line-height: 1.72;
  color: var(--a26-ink);
}

.aptg-a26 .brxe-post-content > p:first-of-type::first-letter {
  float: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

.aptg-a26 .brxe-post-content strong,
.aptg-a26 .brxe-post-content b {
  font-weight: 600;
  color: inherit;
}

.aptg-a26 .brxe-post-content em {
  font-style: italic;
}

.aptg-a26 .brxe-post-content a {
  color: var(--a26-primary);
  text-decoration: none;
  border: 0;
}

.aptg-a26 .brxe-post-content a:hover {
  color: var(--a26-primary-hover);
  text-decoration: underline;
}

/* --- Titoli di sezione --------------------------------------------------- */
.aptg-a26 .brxe-post-content h2 {
  font-family: var(--a26-serif);
  font-weight: 600;
  font-size: 31px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--a26-ink);
  margin: 54px 0 20px;
  padding: 0;
  border: 0;
  max-width: none;
  text-transform: none;
  text-wrap: pretty;
}

.aptg-a26 .brxe-post-content h4,
.aptg-a26 .brxe-post-content h5,
.aptg-a26 .brxe-post-content h6 {
  font-family: var(--a26-sans);
  font-weight: 600;
  color: var(--a26-ink);
  margin: 36px 0 12px;
  letter-spacing: 0;
  text-transform: none;
}

.aptg-a26 .brxe-post-content h4 { font-size: 21px; line-height: 1.35; }
.aptg-a26 .brxe-post-content h5 { font-size: 18px; line-height: 1.4; }
.aptg-a26 .brxe-post-content h6 { font-size: 16px; line-height: 1.45; }

/* --- Citazione ----------------------------------------------------------- */
.aptg-a26 .brxe-post-content blockquote,
.aptg-a26 .brxe-post-content .wp-block-quote {
  margin: 46px 0;
  padding: 0 0 0 26px;
  border: 0;
  border-left: 2px solid var(--a26-primary);
  background: none;
  border-radius: 0;
  font-family: var(--a26-serif);
  font-size: 25px;
  font-style: italic;
  line-height: 1.45;
  color: var(--a26-ink);
}

/* blog-typography.css mette una virgoletta decorativa in ::before */
.aptg-a26 .brxe-post-content .wp-block-quote::before {
  content: none;
}

.aptg-a26 .brxe-post-content blockquote p,
.aptg-a26 .brxe-post-content .wp-block-quote p {
  font-family: var(--a26-serif);
  font-size: 25px;
  font-style: italic;
  line-height: 1.45;
  color: var(--a26-ink);
  margin: 0;
}

.aptg-a26 .brxe-post-content .wp-block-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--a26-sans);
  font-size: 13.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--a26-gray);
}

.aptg-a26 .brxe-post-content .wp-block-quote cite::before {
  content: none;
}

/* --- Elenchi ------------------------------------------------------------- */
.aptg-a26 .brxe-post-content ul,
.aptg-a26 .brxe-post-content ol {
  margin: 0 0 26px;
  padding-left: 26px;
}

.aptg-a26 .brxe-post-content li {
  font-family: var(--a26-serif);
  font-size: 19.5px;
  line-height: 1.72;
  color: var(--a26-ink);
  margin-bottom: 10px;
  padding-left: 4px;
}

.aptg-a26 .brxe-post-content ul > li::marker,
.aptg-a26 .brxe-post-content ol > li::marker {
  color: var(--a26-primary);
}

/* blog-typography.css disegna i pallini con ::before: qui si torna ai marker */
.aptg-a26 .brxe-post-content ul.wp-block-list > li::before,
.aptg-a26 .brxe-post-content ol.wp-block-list > li::before {
  content: none;
}

.aptg-a26 .brxe-post-content ul.wp-block-list,
.aptg-a26 .brxe-post-content ol.wp-block-list {
  list-style: revert;
  counter-reset: none;
}

/* --- Immagini interne ---------------------------------------------------- */
.aptg-a26 .brxe-post-content figure.wp-block-image {
  margin: 40px 0;
  width: 100%;
  max-width: 100%;
}

.aptg-a26 .brxe-post-content figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  background: var(--a26-soft);
}

/* Aspetto delle didascalie quando verranno riaccese (vedi nota sopra):
   Montserrat 13px grigio, allineate a sinistra, 12px sotto l'immagine.
.aptg-a26 .brxe-post-content figcaption {
  margin: 12px 0 0; padding: 0;
  font-family: var(--a26-sans); font-size: 13px; font-weight: 400;
  font-style: normal; line-height: 1.5; color: var(--a26-gray);
  text-align: left; border: 0;
}
*/

/* Coppia di immagini: una verticale e una orizzontale allineate in basso.
   Nell'editor si ottiene con un blocco "Colonne" di due colonne. */
.aptg-a26 .brxe-post-content .wp-block-columns.aptg-img-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  /* !important: il CSS dei blocchi di WordPress impone
     .wp-block-columns{align-items:normal!important} */
  align-items: end !important;
  margin: 40px 0;
}

.aptg-a26 .brxe-post-content .aptg-img-pair .wp-block-column {
  flex-basis: auto !important;
  min-width: 0;
}

.aptg-a26 .brxe-post-content .aptg-img-pair figure.wp-block-image {
  margin: 0;
}

.aptg-a26 .brxe-post-content .aptg-img-pair .wp-block-column:first-child img {
  aspect-ratio: 3 / 4;
}

/* --- Sottotitoli H3 ------------------------------------------------------ */
/* Default: un H3 e' un sottotitolo di sezione, piu' piccolo dell'H2 ma sempre
   piu' grande del corpo del testo. 15 articoli su 32 li usano cosi'. */
.aptg-a26 .brxe-post-content h3 {
  font-family: var(--a26-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--a26-ink);
  margin: 40px 0 14px;
  padding: 0;
  border: 0;
  max-width: none;
  text-transform: none;
  text-wrap: pretty;
}

/* --- FAQ ----------------------------------------------------------------- */
/* Nessun markup nuovo: nel corpo dell'articolo una FAQ e' un H3 seguito da un
   elenco di una sola voce (e' come sono scritte le FAQ oggi). :has() riconosce
   quel pattern e lo trasforma in una lista con separatori, senza toccare il
   contenuto ne' chiedere nulla a chi scrive.
   Tutte le regole partono dall'H3 che apre la coppia: cosi' un elenco di una
   voce che sta altrove nell'articolo non viene scambiato per una risposta. */
.aptg-a26 .brxe-post-content h3:has(+ ul li:only-child) {
  font-family: var(--a26-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0 0 10px;
  padding: 22px 0 0;
  border-top: 1px solid var(--a26-line);
}

.aptg-a26 .brxe-post-content h3:has(+ ul li:only-child) + ul {
  list-style: none;
  margin: 0;
  padding: 0 0 22px;
}

.aptg-a26 .brxe-post-content h3:has(+ ul li:only-child) + ul > li {
  font-family: var(--a26-serif);
  font-size: 18px;
  line-height: 1.68;
  color: var(--a26-gray);
  margin: 0;
  padding: 0;
}

/* riga di chiusura del blocco FAQ */
.aptg-a26 .brxe-post-content h3:has(+ ul li:only-child) + ul + h2 {
  border-top: 1px solid var(--a26-line);
  padding-top: 34px;
  margin-top: 0;
}

/* --- Chiusura dell'articolo ---------------------------------------------- */
/* L'articolo si chiude con un paragrafo che rimanda a un'altra lettura del
   blog. Il mockup ne faceva un box su fondo chiaro con occhiello "Continua a
   leggere": scartato il 14/09/2026 su indicazione del cliente — quel rimando
   e' copy della pagina e resta un paragrafo come gli altri. */

/* --- Tabelle (ereditate dal formato attuale) ------------------------------ */
.aptg-a26 .brxe-post-content table {
  font-family: var(--a26-sans);
  font-size: 15px;
}

/* --- Separatore ----------------------------------------------------------- */
.aptg-a26 .brxe-post-content hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid var(--a26-line);
}

/* ==========================================================================
   ARTICOLI CORRELATI
   ========================================================================== */
.aptg-a26__related.brxe-section {
  border-top: 1px solid var(--a26-line);
}

.aptg-a26__related .aptg-a26__wrap.brxe-container {
  padding-top: 56px;
  padding-bottom: 96px;
}

.aptg-a26 .aptg-a26__related-title {
  font-family: var(--a26-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  color: var(--a26-ink);
  margin: 0 0 32px;
  text-transform: none;
  letter-spacing: 0;
}

.aptg-a26__cards.brxe-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.aptg-a26__card.brxe-block {
  display: block;
  min-width: 0;
}

.aptg-a26 .aptg-a26__card-img {
  display: block;
  margin: 0;
}

.aptg-a26 .aptg-a26__card-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
  background: var(--a26-soft);
}

/* !important: come sopra, per battere le regole globali su .brxe-post-meta */
.aptg-a26 .aptg-a26__card-cat.brxe-post-meta.post-meta,
.aptg-a26 .aptg-a26__card-cat.brxe-post-meta.post-meta a {
  font-family: var(--a26-sans) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--a26-gray) !important;
}

.aptg-a26 .aptg-a26__card-cat.brxe-post-meta.post-meta {
  margin: 16px 0 8px;
}

.aptg-a26 .aptg-a26__card-title,
.aptg-a26 .aptg-a26__card-title a {
  font-family: var(--a26-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--a26-ink);
  margin: 0;
  text-decoration: none;
  text-wrap: pretty;
}

.aptg-a26 .aptg-a26__card-title a:hover {
  color: var(--a26-primary-hover);
  text-decoration: none;
}

.aptg-a26 .aptg-a26__card-img a:hover {
  text-decoration: none;
}

/* ==========================================================================
   RESPONSIVE — unico breakpoint a 900px, come da handoff
   ========================================================================== */
@media (max-width: 900px) {
  .aptg-a26 {
    --a26-header-h: 112px;
  }

  .aptg-a26__wrap.brxe-container {
    padding: 0 20px;
  }

  .aptg-a26__body.brxe-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 40px 0 64px;
  }

  .aptg-a26__side.brxe-block {
    position: static;
    top: auto;
  }

  .aptg-a26__head.brxe-block {
    padding-top: calc(var(--a26-header-h) + 36px);
  }

  .aptg-a26 .aptg-a26__title {
    font-size: 38px;
  }

  .aptg-a26 .aptg-a26__lead {
    font-size: 19px;
  }

  .aptg-a26 .brxe-post-content h2 {
    font-size: 26px;
    margin: 40px 0 16px;
  }

  .aptg-a26 .brxe-post-content blockquote,
  .aptg-a26 .brxe-post-content .wp-block-quote,
  .aptg-a26 .brxe-post-content blockquote p,
  .aptg-a26 .brxe-post-content .wp-block-quote p {
    font-size: 21px;
  }

  .aptg-a26 .brxe-post-content .wp-block-columns.aptg-img-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .aptg-a26__related .aptg-a26__wrap.brxe-container {
    padding-top: 40px;
    padding-bottom: 64px;
  }
}

@media (max-width: 600px) {
  .aptg-a26 .aptg-a26__title {
    font-size: 32px;
  }

  .aptg-a26 .brxe-post-content,
  .aptg-a26 .brxe-post-content p,
  .aptg-a26 .brxe-post-content li {
    font-size: 18px;
  }

}

/* ==========================================================================
   CARD DEL SINGOLO ARTICOLO NELL'ELENCO — .aptg-c26
   Sorgente: design handoff "Card Blog APTG" (14/09/2026).

   In produzione dal 14/09/2026. La classe sta sulla radice del componente
   Bricks `svgovp` "APTG Articles list", che disegna sia l'elenco del blog
   (pagina 14) sia gli archivi di categoria (template 532): un solo posto,
   due pagine servite.

   La griglia intorno NON e' stata toccata: la card resta nella colonna al 67%
   dell'elenco attuale e si adatta alla sua larghezza.
   ========================================================================== */

/* Distanza fra una card e l'altra. Sta qui e non nel componente perche' il
   margine impostato da Bricks diventa CSS su #brxe-<id>, che batterebbe
   qualunque regola di classe. */
.aptg-c26__card.brxe-block + .aptg-c26__card.brxe-block {
  margin-top: 56px;
}
/* Nessun bordo, nessuna ombra, nessun padding: la card e' definita dal
   contenuto. `position: relative` serve al link steso (vedi il titolo). */
.aptg-c26__card.brxe-block {
  display: block;
  position: relative;
  min-width: 0;
}

/* Vale la stessa nota della foto di apertura: la classe sta sulla radice
   dell'elemento Bricks, che qui e' l'<img> stesso. */
.aptg-c26 .aptg-c26__img,
.aptg-c26 .aptg-c26__img img {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
  background: var(--a26-soft);
}

.aptg-c26__meta.brxe-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
}

.aptg-c26__dot.brxe-div {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  min-height: 0;
  border-radius: 50%;
  background: var(--a26-line-soft);
}

/* !important: blog-typography.css colpisce .brxe-post-meta.post-meta con
   !important (18px/700/blu), e vincerebbe su una classe sola. */
.aptg-c26 .aptg-c26__cat.brxe-post-meta.post-meta,
.aptg-c26 .aptg-c26__cat.brxe-post-meta.post-meta a,
.aptg-c26 .aptg-c26__date.brxe-post-meta.post-meta,
.aptg-c26 .aptg-c26__date.brxe-post-meta.post-meta a {
  font-family: var(--a26-sans) !important;
  font-size: 11.5px !important;
  font-style: normal !important;
  letter-spacing: 0.09em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  text-decoration: none !important;
}

.aptg-c26 .aptg-c26__cat.brxe-post-meta.post-meta,
.aptg-c26 .aptg-c26__cat.brxe-post-meta.post-meta a {
  font-weight: 700 !important;
  color: var(--a26-primary) !important;
}

.aptg-c26 .aptg-c26__date.brxe-post-meta.post-meta,
.aptg-c26 .aptg-c26__date.brxe-post-meta.post-meta a {
  font-weight: 600 !important;
  color: var(--a26-gray) !important;
}

.aptg-c26 .brxe-post-meta.post-meta .item {
  padding: 0;
  margin: 0;
}

.aptg-c26 .aptg-c26__title,
.aptg-c26 .aptg-c26__title a {
  font-family: var(--a26-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--a26-ink);
  margin: 12px 0 0;
  text-decoration: none;
  text-wrap: pretty;
}

/* Un solo link per card, con il titolo come nome accessibile: l'ancora del
   titolo viene stesa su tutta la card. Evita di dare agli screen reader tre
   link alla stessa destinazione (immagine, titolo, "leggi l'articolo"). */
.aptg-c26 .aptg-c26__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.aptg-c26 .aptg-c26__excerpt {
  font-family: var(--a26-serif);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--a26-gray);
  margin: 12px 0 0;
  text-wrap: pretty;
}

.aptg-c26 .aptg-c26__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-family: var(--a26-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--a26-primary);
}

.aptg-c26 .aptg-c26__cta::after {
  content: "\2192";
  font-size: 15px;
  line-height: 1;
}

.aptg-c26__card:hover .aptg-c26__cta,
.aptg-c26__card:focus-within .aptg-c26__cta {
  color: var(--a26-primary-hover);
}

.aptg-c26 .aptg-c26__card a:hover {
  text-decoration: none;
}

/* La card non ha breakpoint propri: e' fluida e segue la colonna che la
   contiene. Sotto i 380px il titolo scende di un gradino, come da handoff. */
@media (max-width: 900px) {
  .aptg-c26__card.brxe-block + .aptg-c26__card.brxe-block {
    margin-top: 44px;
  }

  /* Respiro ai lati, uguale a quello della riga delle categorie e della
     testata (20px). La colonna dell'elenco arrivava a bordo schermo per un
     refuso nel builder: sotto i 478px il padding e' impostato a
     `var(--brxw-0-xl)`, variabile che non esiste, quindi valeva zero.
     Qui si fissa il valore invece di inseguire quella variabile. */
  .brxe-block:has(> .aptg-c26__card) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 380px) {
  .aptg-c26 .aptg-c26__title,
  .aptg-c26 .aptg-c26__title a {
    font-size: 21px;
  }
}

/* ==========================================================================
   TESTATA E MENU CATEGORIE DEL BLOG, SOLO MOBILE — .aptg-m26
   Sorgente: design handoff "Menu categorie mobile APTG" (15/09/2026).

   Il desktop resta esattamente com'era: tutto quello che segue vive dentro
   la media query sotto i 900px, tranne una riga — la chip "Tutti", che e'
   l'unico elemento aggiunto e sopra i 900px non deve vedersi.

   Cosa risolve: su un telefono da 375px la testata con foto era alta ~400px e
   le cinque categorie ~600px, cioe' quasi tre schermate prima del primo
   articolo. Con foto 16:9 e categorie in chip scorrevoli si passa a ~270px.

   Le classi stanno sugli elementi gia' esistenti della pagina 14 e del
   template 532: non e' stata rifatta la struttura, e nessuna illustrazione e'
   stata ricaricata — sono le stesse, a 24px.
   ========================================================================== */

/* Fuori dalla media query: sopra i 900px la chip "Tutti" non esiste. */
.aptg-m26__all.brxe-block {
  display: none;
}

@media (max-width: 900px) {

  /* --- Testata con foto ------------------------------------------------- */
  /* !important: l'altezza (40vh sulla 14, 55vh sul 532) e' CSS per-elemento
     con selettore #brxe-<id>, che batte qualunque classe. */
  .aptg-m26__hero.brxe-section {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: var(--a26-ink);
    justify-content: flex-end;
  }

  /* La sezione che avvolge la testata e quella che avvolge le chip portano il
     padding verticale delle sezioni Bricks: qui lo spazio lo danno i blocchi. */
  section:has(> .aptg-m26__hero),
  section:has(> .aptg-m26) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Velatura: serve al contrasto del testo bianco, che senza cade su porzioni
     chiare dell'acqua. Sta sopra la foto (z-index 1) e sotto il testo (2). */
  .aptg-m26__hero.brxe-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(25, 33, 61, 0.86) 0%,
      rgba(25, 33, 61, 0.55) 45%,
      rgba(25, 33, 61, 0.25) 100%
    );
  }

  /* L'immagine della testata e' una <figure class="overlay"> con una velatura
     nera piatta (0.53) nel ::before: da sola e' gia' scura, sommata al
     gradiente spegnerebbe la foto. Sul mobile vale il gradiente. */
  .aptg-m26__hero .brxe-image.overlay::before {
    background-color: transparent !important;
  }

  /* !important e margin-top:auto: la centratura verticale e orizzontale del
     testo arriva da #brxe-<id>, che batte le classi. */
  .aptg-m26__hero-text.brxe-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-top: auto !important;
    align-self: stretch !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    row-gap: 8px;
    padding: 0 20px 20px !important;
    text-align: left;
  }

  .aptg-m26 .aptg-m26__hero-title,
  .aptg-m26__hero .aptg-m26__hero-title {
    font-family: var(--a26-sans) !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em !important;
    color: #fff !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* Due righe al massimo: sugli archivi di categoria questo testo e' la
     descrizione del termine, che su "Sport e outdoor" arriva a cinque righe e
     spingerebbe il titolo fuori dalla testata 16:9.
     NOTA: sul template dell'archivio il testo e' scritto come
     "{term_description}Esperienze, racconti e ispirazioni di viaggio in stile
     APTG" — i due pezzi si concatenano invece di fare da ripiego l'uno
     all'altro. E' un difetto preesistente, che si vede anche da desktop. */
  .aptg-m26__hero .aptg-m26__hero-sub {
    font-family: var(--a26-serif) !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #fff !important;
    margin: 0 !important;
    text-align: left !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- Riga delle categorie (chip scorrevoli) --------------------------- */
  /* !important su overflow e padding: il contenitore li ha impostati per
     breakpoint (hidden su desktop, visible su tablet) via #brxe-<id>. */
  .aptg-m26.brxe-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    max-width: none;
    margin: 0;
    /* Spazio uguale sopra e sotto: le chip stanno in mezzo fra la foto della
       testata e la riga che chiude la sezione. */
    padding: 10px 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* Senza questo la prima chip si aggancia al bordo del contenitore invece
       che al suo padding, e la riga parte gia' scrollata di 20px: il respiro
       a sinistra sparisce da solo appena la pagina e' pronta. */
    scroll-padding-left: 20px;
    /* niente barra di scorrimento: l'ultima chip tagliata dal bordo destro e'
       gia' l'indizio che la riga scorre */
    scrollbar-width: none;
  }

  .aptg-m26.brxe-container::-webkit-scrollbar {
    display: none;
  }

  .aptg-m26__item.brxe-block {
    flex: 0 0 auto;
    width: auto;
    padding: 0 !important;
    background: none !important;
    scroll-snap-align: start;
  }

  .aptg-m26__chip.brxe-block {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    padding: 7px 15px 7px 9px !important;
    background: #fff !important;
    border: 1px solid #dde3ef;
    border-radius: 999px;
    transition: border-color 150ms ease;
  }

  .aptg-m26__chip--on.brxe-block {
    background: var(--a26-primary) !important;
    border-color: var(--a26-primary);
  }

  .aptg-m26__all.brxe-block {
    display: flex;
    padding: 10px 16px !important;
  }

  .aptg-m26__item:hover .aptg-m26__chip,
  .aptg-m26__chip:hover {
    border-color: var(--a26-primary);
  }

  /* Le illustrazioni restano quelle di sempre, solo piccole. Il tag radice
     dell'elemento immagine di Bricks e' l'<img> stessa: la regola vale per
     entrambe le forme. !important perche' il max di 90px e' su #brxe-<id>. */
  .aptg-m26 .aptg-m26__ico,
  .aptg-m26 .aptg-m26__ico img {
    flex: 0 0 auto;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain;
  }

  .aptg-m26 .aptg-m26__label,
  .aptg-m26 .aptg-m26__label a {
    font-family: var(--a26-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: var(--a26-ink) !important;
    white-space: nowrap;
    text-decoration: none !important;
  }

  .aptg-m26__chip--on .aptg-m26__label,
  .aptg-m26__chip--on .aptg-m26__label a {
    font-weight: 600 !important;
    color: #fff !important;
  }
}