/* ============================================================
   assets/css/blogs.css
   Blog posts (single articles). Loaded after global.css via
   $page_css = array("blogs").

   Tokens, header/footer chrome and .call-bar come from global.css.
   Everything here is scoped to .blog-* so it can't leak into the
   service pages.
============================================================ */

/* ------------------------------------------------------------
   1. Post header: prev/next strip, H1, featured image.
------------------------------------------------------------ */
.blog-header {
  position: relative;
  padding: clamp(28px, 4vw, 44px) 5vw 0;
  background:
    radial-gradient(rgba(14, 57, 94, .06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--green-050) 0%, var(--paper-000) 100%);
}
.blog-header-inner { max-width: 1040px; margin: 0 auto; }

.blog-allposts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line-200);
  border-radius: 999px;
  background: var(--paper-000);
  font-size: 14px;
  font-weight: 600;
  color: var(--green-900);
  transition: border-color .15s ease, color .15s ease;
}
.blog-allposts:hover { border-color: var(--amber-500); color: var(--amber-600); }
.blog-allposts svg { width: 16px; height: 16px; }

.blog-title {
  max-width: 900px;
  margin: 28px auto 0;
  text-align: center;
}
.blog-title h1,
.blog-title h2:where(.h1-look) {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.15;
  color: var(--green-900);
}
.blog-title h1::after,
.blog-title h2:where(.h1-look)::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 4px;
  background: var(--amber-500);
}

.blog-cover {
  margin: clamp(28px, 4vw, 44px) 0 0;
}
.blog-cover-frame {
  overflow: hidden;
  border-radius: 26px;
  background: var(--green-100);
  box-shadow: var(--shadow-pop);
}
.blog-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 480;
  object-fit: cover;
}
.blog-cover figcaption,
.blog-cover .wp-caption-text {
  margin: 12px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--ink-500);
}

/* ------------------------------------------------------------
   2. Article body. Generic WordPress content styles.
------------------------------------------------------------ */
.blog-body {
  padding: clamp(40px, 5vw, 64px) 5vw clamp(48px, 6vw, 80px);
  background: var(--paper-000);
}
.blog-content {
  max-width: 780px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-900);
}
.blog-content::after { content: ""; display: table; clear: both; }

.blog-content h1,
.blog-content h2:where(:not(.h1-look)),
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6,
.blog-content h2:where(.h1-look) {
  margin: 1.8em 0 .6em;
  line-height: 1.25;
  color: var(--green-900);
  text-wrap: wrap;
}
.blog-content > :first-child { margin-top: 0; }
.blog-content h1,
.blog-content h2:where(.h1-look) { font-size: clamp(26px, 3vw, 34px); color: var(--amber-600); }
.blog-content h2:where(:not(.h1-look)) {
  font-size: clamp(22px, 2.5vw, 28px);
  padding-left: 16px;
  border-left: 4px solid var(--amber-500);
}
.blog-content h3 { font-size: clamp(20px, 2.1vw, 24px); }
.blog-content h4 { font-size: clamp(18px, 1.8vw, 20px); }
.blog-content h4 a,
.blog-content h3 a,
.blog-content h2:where(:not(.h1-look)) a { color: var(--amber-600); }

.blog-content p { margin: 0 0 1.2em; }
.blog-content strong { color: var(--green-900); }
.blog-content a {
  color: var(--amber-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.blog-content a:hover { color: var(--green-700); }

/* Images placed inline by the editor. */
.blog-content img { max-width: 100%; height: auto; border-radius: 18px; }
.blog-content img.alignright,
.blog-content img.alignleft,
.blog-content img.aligncenter { display: block; margin: 8px auto 20px; }
@media (min-width: 760px) {
  /* photos moved out of the float by the .blog-photo* classes keep their own width */
  .blog-content img.alignright:not(:is(.blog-photo, .blog-photo-end, h2:where(:not(.h1-look)), h3, h4) img) { float: right; width: 46%; margin: 6px 0 16px 28px; }
  .blog-content img.alignleft:not(:is(.blog-photo, .blog-photo-end, h2:where(:not(.h1-look)), h3, h4) img)  { float: left;  width: 46%; margin: 6px 28px 16px 0; }
}

/* Captioned images (WordPress .wp-caption box): a full-width card with the
   photo on one side and the caption as a title panel on the other. Never
   floated, so the surrounding text doesn't wrap around it. */
.blog-content .wp-caption {
  display: grid;
  gap: 18px;
  align-items: center;
  float: none;
  max-width: 100%;
  margin: 2em 0;
  padding: 16px;
  border: 1px solid var(--line-200);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--green-050) 0%, var(--paper-000) 75%);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
  .blog-content .wp-caption { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding: 18px 28px 18px 18px; }
}
.blog-content .wp-caption img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  background: var(--green-100);
}
.blog-content .wp-caption .wp-caption-text {
  position: relative;
  margin: 0;
  padding: 4px 6px 8px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  color: var(--green-900);
}
.blog-content .wp-caption .wp-caption-text::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--green-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M21 16l-5-5-9 8'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 10px 22px rgba(14, 57, 94, .25);
}
.blog-content .wp-caption .wp-caption-text::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: var(--amber-500);
}
/* Keep headings from wrapping around a floated image. */
.blog-content h1, .blog-content h2:where(:not(.h1-look)), .blog-content h3, .blog-content h4,
/* Keep headings from wrapping around a floated image. */ .blog-content h2:where(.h1-look) { clear: both; }

/* A paragraph holding only a photo: a centred feature image between
   sections instead of a float that leaves an empty half-row beside it. */
.blog-content p.blog-photo {
  margin: 2em 0;
  text-align: center;
}
.blog-content p.blog-photo img,
.blog-content p.blog-photo img.alignleft,
.blog-content p.blog-photo img.alignright {
  display: block;
  float: none;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: 0 18px 40px -22px rgba(15, 40, 60, .35);
}
/* photo + short label in one paragraph: label sits under the photo,
   left-aligned, as a small lead-in to what follows */
.blog-content p.blog-photo--label { text-align: left; }
.blog-content p.blog-photo--label img,
.blog-content p.blog-photo--label img.alignleft,
.blog-content p.blog-photo--label img.alignright { margin: 0 auto 22px; }

/* paragraph that ends with a photo: the photo drops below the text,
   centred, instead of floating beside nothing */
.blog-content p.blog-photo-end img,
.blog-content p.blog-photo-end img.alignleft,
.blog-content p.blog-photo-end img.alignright {
  display: block;
  float: none;
  max-width: 100%;
  margin: 28px auto 0;
  border-radius: 24px;
  box-shadow: 0 18px 40px -22px rgba(15, 40, 60, .35);
}

/* numbered lists: one card per item with a round number badge */
.blog-content ol {
  list-style: none;
  counter-reset: blog-ol;
  display: grid;
  gap: 14px;
  margin: 1.4em 0 1.8em;
  padding: 0;
}
.blog-content ol > li {
  counter-increment: blog-ol;
  position: relative;
  margin: 0;
  padding: 18px 20px 18px 66px;
  border: 1px solid var(--line, rgba(15, 40, 60, .1));
  border-radius: 18px;
  background: var(--paper-000, #fff);
  box-shadow: 0 10px 26px -20px rgba(15, 40, 60, .35);
  line-height: 1.75;
}
.blog-content ol > li::before {
  content: counter(blog-ol);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--amber-500);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}

/* wide banner photos (2:1 or wider) use the full column width */
.blog-content p.blog-photo--wide img,
.blog-content p.blog-photo--wide img.aligncenter { max-width: 100%; border-radius: 20px; }

/* Image placed inside a heading (source markup kept as is): the photo sits
   centred above the heading text, and the heading's side bar is dropped
   so it doesn't run down the photo. */
.blog-content :is(h2:where(:not(.h1-look)), h3, h4) > img {
  display: block;
  float: none;
  margin: 0 auto 18px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-500, #6b7280);
}
.blog-content h2:where(:not(.h1-look)):has(> img) { padding-left: 0; border-left: 0; }

/* Image + short call text paragraph, shown as a call-out card
   instead of a floated image (keeps the text from wrapping oddly). */
.blog-content p.blog-media-card {
  display: grid;
  gap: 20px;
  align-items: center;
  margin: 2em 0;
  padding: 16px;
  border: 1px solid rgba(255, 81, 0, .18);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--amber-050) 0%, var(--paper-000) 70%);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
  .blog-content p.blog-media-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 18px 28px 18px 18px; }
}
.blog-content p.blog-media-card > br { display: none; }
.blog-content p.blog-media-card img {
  float: none;
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 16px;
  background: var(--green-100);
}
.blog-media-text {
  display: block;
  padding: 4px 6px 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ink-700);
}
.blog-media-text::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--amber-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 10px 22px rgba(255, 81, 0, .3);
}
.blog-media-text a {
  display: block;
  margin: 2px 0 8px;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--green-900);
}
.blog-media-text a:hover { color: var(--amber-600); }
.blog-media-text br { display: none; }

/* Lists: two-column check cards. */
.blog-content ul {
  display: grid;
  gap: 10px;
  margin: 0 0 1.6em;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .blog-content ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.blog-content ul li {
  position: relative;
  padding: 12px 16px 12px 46px;
  border: 1px solid var(--line-200);
  border-radius: 14px;
  background: var(--green-050);
  font-size: 15.5px;
  line-height: 1.5;
}
.blog-content ul li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--amber-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* Lists whose items hold a title line + a description (<li>Title<br>Text)
   read better full width, one per row. */
.blog-content ul.blog-list-long { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.blog-content ul.blog-list-long li {
  padding: 18px 20px 18px 56px;
  background: var(--paper-000);
  box-shadow: var(--shadow-card);
  font-size: 16px;
  line-height: 1.7;
}
.blog-content ul.blog-list-long li::before { left: 18px; top: 22px; margin-top: 0; width: 24px; height: 24px; background-size: 14px; }
.blog-content ul.blog-list-long li::first-line { font-weight: 800; color: var(--green-900); }

/* "Articoli correlati:" style paragraphs: a run of links in a soft card. */
.blog-content p.blog-links {
  margin: 2em 0 0;
  padding: 20px 24px;
  border: 1px solid var(--line-200);
  border-radius: 20px;
  background: var(--green-050);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-700);
}


.blog-content blockquote {
  margin: 0 0 1.6em;
  padding: 18px 22px;
  border-left: 4px solid var(--amber-500);
  border-radius: 0 16px 16px 0;
  background: var(--amber-050);
  font-style: italic;
}

/* The old posts used <pre> for the "Puoi anche visitare" link box. */
.blog-content pre {
  margin: 2em 0 0;
  padding: 22px 24px;
  border: 1px solid var(--line-200);
  border-radius: 20px;
  background: var(--green-050);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
  text-align: center;
  color: var(--ink-700);
}
.blog-content pre strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-900);
}

/* ------------------------------------------------------------
   3. Author box.
------------------------------------------------------------ */
.blog-author {
  max-width: 780px;
  margin: clamp(36px, 4vw, 48px) auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--line-200);
  border-radius: 20px;
  background: var(--paper-050);
}
.blog-author img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green-100);
}
.blog-author p { margin: 0; font-weight: 700; }
.blog-author a { color: var(--green-900); }
.blog-author a:hover { color: var(--amber-600); }
.blog-author .desc:empty { display: none; }

/* ------------------------------------------------------------
   4. Previous / next post.
------------------------------------------------------------ */
.blog-nav {
  padding: 0 5vw clamp(48px, 6vw, 72px);
  background: var(--paper-000);
}
.blog-nav-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  /* minmax(0,1fr): an implicit track never shrinks below the longest
     word of a post title, which overflowed 320px phones. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.blog-nav-desc p { overflow-wrap: anywhere; }
@media (min-width: 760px) {
  .blog-nav-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.blog-nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line-200);
  border-radius: 20px;
  background: var(--paper-000);
  box-shadow: var(--shadow-card);
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-nav-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: rgba(255, 81, 0, .4); }
.blog-nav-link--next { flex-direction: row-reverse; text-align: right; }
.blog-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--amber-500);
  color: var(--paper-000);
}
.blog-nav-arrow svg { width: 18px; height: 18px; }
.blog-nav-photo {
  width: 96px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--green-100);
}
.blog-nav-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-nav-photo:empty {
  background:
    radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(150deg, var(--green-900), var(--green-700));
}
.blog-nav-desc { min-width: 0; }
.blog-nav-desc p {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--green-900);
}
.blog-nav-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-500);
}
.blog-nav-date svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------
   5. Related posts.
------------------------------------------------------------ */
.blog-related {
  padding: clamp(48px, 6vw, 80px) 5vw;
  background: var(--green-050);
}
.blog-related-inner { max-width: 1040px; margin: 0 auto; }
.blog-related-heading {
  margin: 0 0 24px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  text-align: center;
  color: var(--green-900);
}
.blog-related-grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 700px) {
  .blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .blog-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-200);
  border-radius: 22px;
  background: var(--paper-000);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.blog-card-media {
  display: block;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(150deg, var(--green-900), var(--green-700));
}
.blog-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-caption {
  margin: 0;
  padding: 8px 22px 0;
  font-size: 12px;
  color: var(--ink-500);
}
.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px 22px;
}
.blog-card h4 { margin: 0; font-size: 17px; line-height: 1.35; }
.blog-card h4 a { color: var(--green-900); }
.blog-card h4 a:hover { color: var(--amber-600); }
.blog-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--amber-500);
  font-size: 14px;
  font-weight: 700;
  color: var(--paper-000);
  transition: background .15s ease;
}
.blog-card-more:hover { background: var(--amber-600); }
.blog-card-more svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   6. Blog index (/blog/) — the listing page.

   The cards themselves are §5's .blog-card family reused as-is; a
   listing card and a related-post card are the same object. Only the
   page-level layout around them is new, and every selector below is
   prefixed .blog-index- so nothing above this line changes.
------------------------------------------------------------ */

/* §1's .blog-header deliberately ends flush at the bottom because a
   post's cover image comes next. The index has no cover, so it needs
   the bottom padding back. */
.blog-index-header { padding-bottom: clamp(28px, 4vw, 44px); }

/* Eyebrow label above the H1 and the intro paragraph below it. */
.blog-index-eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber-600);
}
.blog-index-lead {
  max-width: 680px;
  margin: 20px auto 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--ink-700);
}

.blog-index {
  padding: clamp(40px, 5vw, 64px) 5vw clamp(56px, 7vw, 88px);
  background: var(--paper-000);
}
.blog-index-inner { max-width: 1040px; margin: 0 auto; }

.blog-index-grid { display: grid; gap: 20px; }
@media (min-width: 700px) {
  .blog-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .blog-index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* §5 sizes the card photo with height:100%, which only resolves when
   the parent has a definite height — .blog-card-media's height comes
   from aspect-ratio, which is not definite for percentage resolution,
   so the image falls back to its OWN intrinsic ratio and stretches the
   box. Measured: a 1688x1125 photo rendered its media block 221px tall
   where the imageless cards beside it were 207px, knocking the whole
   row out of alignment — and every photo that isn't exactly 16:10
   would do the same. Giving the image the box's own ratio pins it to
   16:10 at width:100%, and §5's object-fit:cover crops the overflow.
   Scoped to the index so §5's related-post cards keep their current
   behaviour untouched. */
.blog-index-grid .blog-card-media img { aspect-ratio: 16 / 10; }

/* On the index the cards carry the page's real headings, so they are
   <h2> here where §5's related-post cards are <h4>. Same size, right
   level — global.css's own h2 clamp would otherwise land a 3rem
   display heading inside a 17px card. */
.blog-index-grid .blog-card h2:where(:not(.h1-look)) { margin: 0; font-size: 17px; line-height: 1.35; }
.blog-index-grid .blog-card h2:where(:not(.h1-look)) a { color: var(--green-900); }
.blog-index-grid .blog-card h2:where(:not(.h1-look)) a:hover { color: var(--amber-600); }

/* Date and category belong to the title, not to the card at large:
   grouping them means .blog-card-body's own 16px gap separates
   head / excerpt / button instead of prising every line apart. */
.blog-index-card-head { display: grid; gap: 10px; }

.blog-index-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.blog-index-card-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-500);
}
.blog-index-card-date svg { width: 14px; height: 14px; }
.blog-index-card-cat {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--green-050);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green-700);
}

/* Clamped to three lines so one long excerpt can't stretch a whole
   grid row; .blog-card is a flex column with the button on
   margin-top:auto, so the buttons stay aligned either way. */
.blog-index-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
}

/* Shown when no post has a _post.php yet, so the page reads as empty
   on purpose rather than broken. */
.blog-index-empty {
  margin: 0;
  padding: clamp(32px, 5vw, 56px);
  border: 1px dashed var(--line-200);
  border-radius: 22px;
  background: var(--paper-050);
  text-align: center;
  color: var(--ink-500);
}

/* A card past the initial batch starts [hidden] (see blog/index.php)
   so every post is still real, crawlable markup — "Load more" only
   reveals rows already in the DOM, it never fetches anything.
   §5's .blog-card{display:flex} is an author rule at the same
   specificity as the UA stylesheet's [hidden]{display:none}, and
   author beats UA on a tie, so the card would stay visible without
   this — same reason #blog-load-more needs its own [hidden] override
   against global.css's .btn{display:inline-flex}. */
.blog-card[hidden] { display: none; }
#blog-load-more[hidden] { display: none; }

.blog-index-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 5vw, 44px);
}

/* Search box (in the header band, under the H1) and category chips
   (above the grid). Both start [hidden] and are revealed by the
   script in blog/index.php; the [hidden] overrides are needed for the
   same author-vs-UA reason as .blog-card[hidden] above. */
.blog-index-search {
  position: relative;
  max-width: 520px;
  margin: 24px auto 0;
}
.blog-index-search[hidden] { display: none; }
.blog-index-search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--ink-700);
  pointer-events: none;
}
.blog-index-search input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  border: 1px solid var(--line-200);
  border-radius: 999px;
  background: var(--paper-000);
  font: inherit;
  font-size: 16px;
  color: var(--ink-900);
  box-shadow: 0 4px 18px rgba(14, 57, 94, .06);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.blog-index-search input::placeholder { color: var(--ink-700); }
.blog-index-search input:focus {
  outline: none;
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(34, 117, 172, .18);
}

/* Always one row: when the chips don't fit (phones) the row scrolls
   sideways instead of wrapping. "safe center" falls back to start
   alignment on overflow so the first chip is never cut off.
   The row breaks out of .blog-index-inner's 1040px cap (up to
   1280px, centred on the grid) so on desktop every chip fits without
   the last one being clipped. */
.blog-index-filters {
  --filters-w: min(1280px, calc(100vw - 32px));
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: 8px;
  width: var(--filters-w);
  margin-left: calc((100% - var(--filters-w)) / 2);
  margin-bottom: clamp(24px, 4vw, 36px);
  padding: 4px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.blog-index-filters::-webkit-scrollbar { display: none; }
.blog-index-filters .blog-index-chip { flex: 0 0 auto; white-space: nowrap; }
.blog-index-filters[hidden] { display: none; }
.blog-index-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line-200);
  border-radius: 999px;
  background: var(--paper-000);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-900);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.blog-index-chip:hover { border-color: var(--amber-500); }
.blog-index-chip:focus-visible { outline: 3px solid rgba(34, 117, 172, .35); outline-offset: 2px; }
.blog-index-chip span {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--green-100);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--green-700);
}
.blog-index-chip[aria-pressed="true"] {
  border-color: var(--green-900);
  background: var(--green-900);
  color: var(--paper-000);
}
.blog-index-chip[aria-pressed="true"] span {
  background: rgba(255, 255, 255, .18);
  color: var(--paper-000);
}

.blog-index-empty[hidden] { display: none; }

/* ------------------------------------------------------------
   7. Per-post additions.
   The old editor sometimes formatted a heading/paragraph directly
   with inline style="" (centering, an inline color, a second image
   layout) — inline style="" is never allowed in our markup, so each
   one-off gets a small class here instead. Added by whoever builds
   that post; leave earlier sections alone.
------------------------------------------------------------ */

/* "CHIAMA {numero}" paragraphs (was style="text-align:center;
   font-size:20px"). First used by cosa-tenere-a-mente-... */
.blog-content p.blog-cta {
  margin: 2em 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.blog-content p.blog-cta a { color: var(--amber-600); }

/* Centered heading/paragraph (was style="text-align:center") and an
   inline colored phrase inside one (was style="color:#ff6600").
   First used by sistemi-di-sicurezza. */
.blog-content .text-center { text-align: center; }
.blog-content .text-accent { color: var(--amber-600); }

/* Justified heading/paragraph/list (was style="text-align:justify").
   First used by come-trovare-un-cortocircuito-in-casa, whose old
   editor set this on every block in the post. */
.blog-content .text-justify { text-align: justify; }

/* A lone "alignnone" image — the existing align rule above only
   covers right/left/center. First used by sistemi-di-sicurezza. */
.blog-content img.alignnone { display: block; margin: 8px auto 20px; }

/* Two alignnone images the old editor placed in the same <p> — put
   side by side as a row instead of stacking. Stays single-column on
   phones (two ~170px images side by side reads too cramped there),
   matching the same mobile-first breakpoint .blog-content ul already
   uses for its own two-column layout. First used by
   sistemi-di-sicurezza. */
.blog-content p.blog-img-row {
  display: grid;
  gap: 16px;
  align-items: start;
}
@media (min-width: 640px) {
  .blog-content p.blog-img-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.blog-content p.blog-img-row img.alignnone { margin: 0; width: 100%; }

/* .blog-cover (§1) has no width cap of its own, so a post's featured
   image runs full viewport width — every other band on the page
   (header, body, related) is capped at 1040px/780px. Capping it to
   the same 1040px the header/nav/related bands use, rather than
   editing that rule directly, so it is clear this was added for this
   reason. First used by sistemi-di-sicurezza. */
.blog-cover {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5vw;
}

/* A raw <iframe> embed (e.g. a YouTube video) — the old editor left it
   at a fixed 560x315, which overflows any viewport narrower than
   that. Scaled to the column width at the same ratio instead.
   First used by idraulico-milano. */
.blog-content iframe {
  display: block;
  max-width: 100%;
  aspect-ratio: 560 / 315;
  height: auto;
  margin: 0 0 1.2em;
  border-radius: 18px;
}

/* A light tinted panel the old editor made with a raw
   style="background-color:#f1f1f1;padding:10px" div wrapping a whole
   subsection (heading + paragraph + button). First used by
   emergenza-elettricista. */
.blog-content .blog-panel {
  background: var(--paper-050);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 1.6em 0;
}
.blog-content .blog-panel > :first-child { margin-top: 0; }
.blog-content .blog-panel > :last-child { margin-bottom: 0; }

/* A narrow source image (e.g. 201x277) still gets floated at the
   §-above 46% width, upscaling it well past its real size and
   leaving it blurry. Caps it near its own native width instead.
   First used by idraulico-milano. */
.blog-content img.img-narrow {
  width: 220px;
}
@media (min-width: 760px) {
  .blog-content img.alignleft.img-narrow,
  .blog-content img.alignright.img-narrow { width: 220px; }
}
/* ============================================================
   consent.css — cookie banner (assets/js/consent.js), every page.
   global.css supplies tokens and .btn; nothing here redefines them.

   The bar sits at the bottom of the viewport. On phones it sits
   ABOVE the green call bar (global.css §20) instead of covering it:
   the call button must stay tappable while the banner is open.
============================================================ */

.cc{ display:none; }
.cc.cc--open{ display:block; }

.cc-bar{
  position:fixed;
  left:50%; transform:translateX(-50%);
  bottom:16px;
  z-index:10001;
  width:min(100% - 32px, 980px);
  max-height:calc(100vh - 120px);
  overflow:auto;
  background:var(--paper-000);
  color:var(--ink-900);
  border:1px solid var(--line-200);
  border-radius:var(--radius-m);
  box-shadow:0 18px 50px rgba(14,57,94,.22);
  padding:22px 24px 20px;
  font-size:.92rem;
  line-height:1.5;
}

@media (max-width:768px){
  .cc-bar{
    bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom) + 8px);
    width:calc(100% - 16px);
    max-height:calc(100vh - var(--callbar-h) - 90px);
    padding:18px 16px 16px;
  }
}

.cc-title{
  margin:0 32px 8px 0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  color:var(--green-900);
}

.cc-desc p, .cc-intro, .cc-cat p{
  margin:0 0 8px;
  color:var(--ink-700);
  font-size:.88rem;
}
.cc-desc a, .cc-intro a{ color:var(--green-700); text-decoration:underline; }

.cc-x{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px;
  border:0; border-radius:50%;
  background:transparent;
  color:var(--ink-700);
  font-size:26px; line-height:1;
  cursor:pointer;
}
.cc-x:hover{ background:var(--line-100); }

.cc-actions{
  display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center;
  gap:10px;
  margin-top:12px;
}
.cc-actions .btn{ padding:12px 22px; font-size:.92rem; }

.cc-links{ display:none; }

/* Phones: keep the bar short so the page's own CHIAMA button and the
   green call bar stay usable while the banner is open.
   Rifiuta and Accetta keep the same size side by side (Garante 2021:
   rejecting must be as easy as accepting); "Impostazioni cookie"
   drops to a text link underneath. */
@media (max-width:600px){
  .cc-bar{ padding:14px 14px 12px; }
  .cc-title{ font-size:.98rem; margin-bottom:6px; }
  .cc-desc .cc-more{ display:none; }
  .cc-desc p, .cc-links{ font-size:.82rem; line-height:1.4; margin-bottom:6px; }
  .cc-links{ display:block; }
  .cc-links a{ color:var(--green-700); text-decoration:underline; }
  .cc-bar .cc-actions{
    display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px;
  }
  .cc-bar .cc-actions .btn{
    width:100%; min-height:44px; padding:10px 8px;
    font-size:.82rem; white-space:normal; line-height:1.2;
  }
  .cc-bar .cc-actions [data-cc="reject"]{ grid-column:1; grid-row:1; }
  .cc-bar .cc-actions [data-cc="accept"]{ grid-column:2; grid-row:1; }
  .cc-bar .cc-actions [data-cc="settings"]{ grid-column:1 / -1; grid-row:2; min-height:36px; padding:4px; }
  .cc-panel .cc-actions{ flex-direction:column-reverse; align-items:stretch; }
  .cc-panel .cc-actions .btn{ width:100%; }
}

/* While the banner is open the green call bar never slides away
   (site.js §4 hides it when another CHIAMA is on screen — here that
   button may sit under the banner). */
.cc-visible .call-bar.call-bar--hidden{ transform:none; }

/* ---- settings modal ---- */
.cc-modal{
  position:fixed; inset:0;
  z-index:10002;
  background:rgba(26,27,39,.55);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.cc-modal[hidden]{ display:none; }

.cc-panel{
  position:relative;
  width:min(100%, 640px);
  max-height:calc(100vh - 32px);
  overflow:auto;
  background:var(--paper-000);
  border-radius:var(--radius-m);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  padding:24px;
}

.cc-cat{
  border-top:1px solid var(--line-200);
  padding:14px 0 6px;
}
.cc-cat-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:4px;
  cursor:pointer;
}
.cc-cat-name{ font-weight:700; color:var(--ink-900); }
.cc-always{ font-size:.8rem; font-weight:700; color:var(--live-500); }

/* Toggle switch built on a real checkbox (keyboard + screen reader) */
.cc-switch{
  appearance:none; -webkit-appearance:none;
  position:relative; flex-shrink:0;
  width:44px; height:26px; margin:0;
  border-radius:999px;
  background:var(--ink-500);
  cursor:pointer;
  transition:background .15s ease;
}
.cc-switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:var(--paper-000);
  transition:transform .15s ease;
}
.cc-switch:checked{ background:var(--green-700); }
.cc-switch:checked::after{ transform:translateX(18px); }
.cc-switch:focus-visible{ outline:2px solid var(--amber-500); outline-offset:2px; }