/* Blog uses the shared Dentea container, type roles and editorial card language. */
.blog.section { padding-top: 48px; padding-bottom: 72px; }
.blog > .blog-heading {
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  align-items: end; gap: clamp(32px,5vw,72px); max-width: none; margin-bottom: 48px;
}
.blog-heading > div, .blog-heading > p { min-width: 0; }
.blog-heading h1 { max-width: 19ch; margin-bottom: 0; }
.blog-heading > p { max-width: 42ch; margin-bottom: 5px; text-wrap: pretty; }
/* One article per row: the composition is independent of the article count. */
.blog-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.blog-item { min-width: 0; padding-block: 24px; border-bottom: 1px solid var(--line); }
.blog-card-link { display: grid; grid-template-columns: clamp(180px,22vw,280px) minmax(0,1fr); align-items: center; gap: clamp(24px,3.5vw,48px); height: 100%; border-radius: 8px; }
.blog-card-image { min-width: 0; aspect-ratio: 3/2; margin-bottom: 0; border-radius: 8px; }
.blog-card-image img { transition: transform 350ms var(--ease); }
.blog-card-copy { min-width: 0; padding-block: 8px; }
.blog-card time { margin-bottom: 12px; }
.blog-card-title { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 12px; }
.blog-card-title h2 { flex: 1; min-width: 0; max-width: 42ch; margin: 0; }
.blog-card-title h2, .article-heading h1 { overflow-wrap: anywhere; }
.blog-card-arrow { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 8px; margin-inline-start: auto; transition: transform 200ms var(--ease); }
.blog-card p { max-width: 58ch; margin-bottom: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.blog-card-without-image .blog-card-link { grid-template-columns: minmax(0,1fr); }
.blog-card-without-image .blog-card-copy { padding-block: 12px; }
a.blog-card-link:focus-visible { outline: 2px solid var(--green); outline-offset: 7px; }
a.blog-card-link:focus-visible h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* Keep hover cosmetic: the entire public card remains one native link. */
@media(hover:hover) and (pointer:fine) {
  a.blog-card-link:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  a.blog-card-link:hover .blog-card-image img { opacity: 1; transform: scale(1.025); }
  a.blog-card-link:hover .blog-card-arrow { transform: translate(2px,-2px); }
}
.blog-article.section { padding-top: 48px; padding-bottom: 72px; }
.article-content { width: 100%; max-width: var(--reading-width); min-width: 0; margin-inline: auto; }
.article-content > .article-heading { max-width: none; margin: 0; text-align: left; }
.blog-article .article-heading h1 { max-width: none; margin-bottom: 20px; font-size: var(--type-section); }
.article-heading .article-intro { max-width: 64ch; margin-bottom: 22px; text-wrap: pretty; overflow-wrap: anywhere; }
.article-heading time { margin: 0 0 16px; }
.article-content > .article-photo, .article-content > .article-video { width: 100%; max-width: none; margin: 28px 0 0; }
.article-content > .article-body { max-width: none; margin: 28px 0 0; overflow-wrap: anywhere; }
.article-body p { color: var(--ink); margin-bottom: 24px; }
.article-body p:last-child { margin-bottom: 0; }
.article-footer { max-width: var(--reading-width); margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--line); }
.article-footer .article-back { display: inline-flex; margin: 0; max-width: none; gap: 10px; justify-content: flex-start; }
.article-back svg { width: 18px; height: 18px; flex: 0 0 18px; transform: rotate(180deg); }
@media(max-width:900px) {
  .blog > .blog-heading { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .blog-heading > p { max-width: 58ch; margin: 0; }
}
@media(max-width:700px) {
  .blog.section, .blog-article.section { padding-top: 32px; padding-bottom: 48px; }
  .blog > .blog-heading { margin-bottom: 32px; }
  .blog-item { padding-block: 24px; }
  .blog-card-link { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .blog-card-image { aspect-ratio: 8/5; }
  .blog-card-copy { padding-block: 0; }
  .blog-card-title { gap: 18px; }
  .article-content > .article-photo, .article-content > .article-video { margin-top: 24px; }
  .article-content > .article-body { margin-top: 24px; }
  .article-footer { margin-top: 28px; }
}
@media(prefers-reduced-motion:reduce) {
  .blog-card-image img, .blog-card-arrow { transition: none; }
  a.blog-card-link:hover .blog-card-image img, a.blog-card-link:hover .blog-card-arrow { transform: none; }
}