/* Articoli: estende il tema condiviso senza modificare le altre pagine. */
.dl-blog-page { color: var(--dl-text); }
.dl-blog-page :is(a, button, summary):focus-visible {
  outline: 3px solid var(--dl-g500);
  outline-offset: 5px;
}
.dl-blog-page .dl-skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 110;
  padding: .8rem 1.2rem;
  background: white;
  color: var(--dl-g900);
  border-radius: var(--dl-r);
  transform: translateY(-160%);
}
.dl-blog-page .dl-skip-link:focus { transform: translateY(0); }
.dl-blog-page .dl-blog-container {
  width: min(100% - 3rem, 1140px);
  margin-inline: auto;
}
.dl-blog-page #header { z-index: 50; }
.dl-blog-page #nav-mobile-panel {
  position: fixed;
  top: var(--dl-nav-h);
  right: 0;
  bottom: 0;
  width: min(310px, 85vw);
  padding: 1.5rem;
  background: white;
  box-shadow: -4px 0 32px rgba(0,0,0,.14);
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(110%);
  transition: transform .3s ease, visibility 0s .3s;
}
.dl-blog-page #nav-mobile-panel.open {
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}
.dl-blog-page #nav-mobile-panel ul { list-style: none; padding: 0; margin: 0; }
.dl-blog-page #nav-mobile-panel li { border-bottom: 1px solid var(--dl-section); }
.dl-blog-page #nav-mobile-panel li a {
  display: block;
  padding: .9rem 0;
  color: var(--dl-text);
  font-weight: 600;
  text-decoration: none;
}
.dl-blog-page .dl-mobile-cta { width: 100%; margin-top: 1.5rem; background: var(--dl-cta-dk); }
.dl-blog-page .dl-mobile-contact {
  display: block;
  margin-top: 1.25rem;
  color: var(--dl-g700);
  font-weight: 600;
}
.dl-blog-page .dl-blog-hero {
  padding-top: calc(var(--dl-nav-h) + 2.25rem);
  background: var(--dl-gradient);
  color: white;
}
.dl-blog-page .dl-blog-breadcrumb { margin-bottom: 2rem; font-size: .85rem; }
.dl-blog-page .dl-blog-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,.85);
}
.dl-blog-page .dl-blog-breadcrumb li + li::before { content: '›'; margin-right: .6rem; }
.dl-blog-page .dl-blog-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.dl-blog-page .dl-blog-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.dl-blog-page .dl-blog-hero h1 {
  max-width: 760px;
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.dl-blog-page .dl-blog-deck { max-width: 680px; font-size: 1.1rem; line-height: 1.75; color: rgba(255,255,255,.92); }
.dl-blog-page .dl-blog-byline {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  margin-top: 1.5rem;
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  line-height: 1.8;
}
.dl-blog-page .dl-blog-byline a { color: white; text-decoration: underline; text-underline-offset: 3px; }
.dl-blog-page .dl-blog-photo { margin: 0; max-width: 450px; width: 100%; }
.dl-blog-page .dl-blog-photo img { display: block; width: 100%; border-radius: var(--dl-r-lg); box-shadow: var(--dl-shadow-lg); }
.dl-blog-page .dl-blog-photo figcaption { margin-top: .8rem; font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.85); }
.dl-blog-page .dl-blog-wave { margin-top: 2.5rem; }
.dl-blog-page .dl-blog-wave svg { height: 48px; }
.dl-blog-page .dl-blog-main { background: white; }
.dl-blog-page .dl-blog-layout { display: grid; gap: 2.5rem; padding-block: 3rem 4rem; align-items: start; }
.dl-blog-page .dl-article-index { background: var(--dl-g50); border: 1px solid var(--dl-border); border-radius: var(--dl-r); }
.dl-blog-page .dl-article-index summary {
  cursor: pointer;
  padding: 1.15rem 1.25rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--dl-g900);
}
.dl-blog-page .dl-article-index nav { padding: 0 1.25rem 1rem; }
.dl-blog-page .dl-article-index ol { list-style: none; padding: 0; margin: 0; }
.dl-blog-page .dl-article-index li + li { border-top: 1px solid var(--dl-border); }
.dl-blog-page .dl-article-index a {
  display: block;
  padding: .6rem 0;
  color: var(--dl-text-m);
  font-size: .84rem;
  line-height: 1.5;
  text-decoration: none;
}
.dl-blog-page .dl-article-index a:hover { color: var(--dl-g700); text-decoration: underline; }
.dl-blog-page .dl-blog-body { min-width: 0; max-width: 68ch; font-size: 1.0625rem; line-height: 1.85; overflow-wrap: break-word; }
.dl-blog-page .dl-blog-body section { scroll-margin-top: 0; }
.dl-blog-page .dl-blog-body section + section {
  margin-top: 2.75rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--dl-border);
}
.dl-blog-page .dl-blog-body section:is(.dl-blog-faq, .dl-blog-start) {
  margin-top: 3rem;
  padding: 1.75rem;
  border-top: 0;
}
.dl-blog-page .dl-blog-body .dl-article-callout {
  margin-block: 1.75rem;
  padding: 1.25rem 1.4rem;
  border-left: 3px solid var(--dl-g500);
  border-radius: 0 var(--dl-r) var(--dl-r) 0;
  background: var(--dl-g50);
  color: var(--dl-g900);
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.65;
}
.dl-blog-page .dl-article-question {
  padding: 1.5rem;
  margin-top: 1rem;
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-r);
  background: var(--dl-warm);
}
.dl-blog-page .dl-article-question h3 { margin-top: 0; }
.dl-blog-page .dl-article-question p { margin-bottom: 0; }
.dl-blog-page .dl-article-visual {
  width: min(100%, 640px);
  margin: 2.75rem auto;
  padding: .65rem;
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-r-lg);
  background: var(--dl-g50);
}
.dl-blog-page .dl-article-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--dl-r-lg) - .65rem);
}
.dl-blog-page .dl-blog-body h2 {
  margin: 0 0 1.25rem;
  color: var(--dl-g900);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.dl-blog-page .dl-blog-body p { margin: 0 0 1.25rem; }
.dl-blog-page .dl-blog-body p:last-child { margin-bottom: 0; }
.dl-blog-page .dl-blog-body ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1.25rem; }
.dl-blog-page .dl-blog-body li + li { margin-top: .65rem; }
.dl-blog-page .dl-blog-body h3 { margin: 1.75rem 0 .65rem; color: var(--dl-g900); font-size: 1.15rem; font-weight: 700; line-height: 1.5; }
.dl-blog-page .dl-blog-body a { color: var(--dl-g700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dl-blog-page .dl-blog-body a:hover { color: var(--dl-g900); }
.dl-blog-page .dl-article-key {
  border-left: 4px solid var(--dl-g700);
  border-radius: 0 var(--dl-r) var(--dl-r) 0;
  padding: 1.4rem 1.5rem;
  background: var(--dl-g50);
  color: var(--dl-g900);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.6;
}
.dl-blog-page .dl-blog-faq { padding: 1.75rem; background: var(--dl-section); border-radius: var(--dl-r-lg); }
.dl-blog-page .dl-blog-faq h3 { margin: 1.4rem 0 .5rem; color: var(--dl-g900); font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
.dl-blog-page .dl-blog-faq h3:first-of-type { margin-top: 0; }
.dl-blog-page .dl-blog-faq p { font-size: 1rem; line-height: 1.8; }
.dl-blog-page .dl-blog-start { padding: 2rem; background: var(--dl-gradient); border-radius: var(--dl-r-lg); color: rgba(255,255,255,.94); }
.dl-blog-page .dl-blog-start h2 { color: white; }
.dl-blog-page .dl-blog-start a:not(.dl-btn) { color: white; }
.dl-blog-page .dl-blog-start .dl-btn { margin-top: 1.5rem; text-decoration: none; line-height: 1.4; }
.dl-blog-page .dl-blog-related { padding: 3rem 0; background: var(--dl-section); }
.dl-blog-page .dl-blog-related + .dl-blog-related { padding-top: 0; }
.dl-blog-page .dl-blog-related h2 { margin-bottom: 1.5rem; color: var(--dl-g900); }
.dl-blog-page .dl-blog-related-grid { display: grid; gap: 1rem; }
.dl-blog-page .dl-blog-related-grid .dl-studio-link { min-width: 0; }
.dl-blog-page .dl-blog-related-grid .arrow { flex-shrink: 0; }
.dl-blog-page .dl-blog-footer-grid { display: grid; gap: 2rem; padding-block: 2.5rem; }
.dl-blog-page .dl-footer .f-label { color: rgba(255,255,255,.72); }
.dl-blog-page .dl-footer .f-copy { color: rgba(255,255,255,.72); }
.dl-blog-page .dl-float-bar { z-index: 30; }
.dl-blog-page .dl-float-wa { background: var(--dl-g700); }
.dl-blog-page .dl-float-book { background: var(--dl-cta-dk); }
@media (min-width: 640px) {
  .dl-blog-page .dl-blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-blog-page .dl-blog-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .dl-blog-page .dl-blog-hero-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3.5rem; }
  .dl-blog-page .dl-blog-layout { grid-template-columns: 260px minmax(0, 740px); gap: 4rem; padding-block: 3.5rem 5rem; }
  .dl-blog-page .dl-blog-layout > aside { position: sticky; top: calc(var(--dl-nav-h) + 1.5rem); }
  .dl-blog-page .dl-article-index { max-height: calc(100vh - var(--dl-nav-h) - 3rem); overflow-y: auto; }
  .dl-blog-page .dl-blog-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .dl-blog-page .dl-blog-container { width: calc(100% - 2rem); }
  .dl-blog-page .dl-blog-hero { padding-top: calc(var(--dl-nav-h) + 1.5rem); }
  .dl-blog-page .dl-blog-breadcrumb { margin-bottom: 1.5rem; }
  .dl-blog-page .dl-blog-photo { max-width: 360px; }
  .dl-blog-page .dl-blog-body { font-size: 1rem; line-height: 1.8; }
  .dl-blog-page .dl-blog-body section + section { margin-top: 2.25rem; padding-top: 2.25rem; }
  .dl-blog-page .dl-blog-body section:is(.dl-blog-faq, .dl-blog-start) { padding: 1.25rem; }
  .dl-blog-page .dl-blog-body .dl-article-callout { padding: 1rem 1.15rem; }
  .dl-blog-page .dl-article-question { padding: 1.15rem; }
  .dl-blog-page .dl-blog-start .dl-btn { width: 100%; padding: .9rem 1rem; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-blog-page *, .dl-blog-page *::before, .dl-blog-page *::after { transition: none !important; }
}