/* Patient article template: references/article/01.png–05.png.
 * PNG proportions and mobile choices are provisional; text remains server-rendered. */
html { scroll-behavior: auto; }
.article-intro { padding-top: var(--catalog-intro-top); }
.article-intro h1 {
  margin: 0 0 var(--space-6);
  overflow-wrap: anywhere;
  font-size: var(--font-size-48);
  line-height: var(--line-height-48-48);
  letter-spacing: var(--letter-spacing-heading);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.article-reading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--caption-size);
  line-height: var(--caption-line-height);
}
.article-reading > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.article-reading .icon { width: var(--icon-size-small); height: var(--icon-size-small); }
.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  max-width: 100%;
  color: var(--text-secondary);
  font-size: var(--caption-size);
  line-height: var(--caption-line-height);
}
.article-share .button { max-width: 100%; }
.article-share-status { flex-basis: 100%; margin: 0; text-align: right; font-size: var(--caption-size); line-height: var(--caption-line-height); overflow-wrap: anywhere; }
.article-intro [data-article-link] {
  flex-basis: 100%;
  width: 100%;
  min-width: 0;
  min-height: var(--button-min-height);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-field);
  color: var(--text-primary);
  background: var(--surface-page);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
}
.article-hero {
  position: relative;
  overflow: hidden;
  margin-block: var(--space-6) 0;
  border-radius: var(--radius-card-image);
  background: var(--surface-soft);
}
.article-hero > img { width: 100%; aspect-ratio: var(--article-hero-ratio); object-fit: cover; }
.article-category {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  max-width: calc(100% - var(--space-4) * 2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface-page);
  font-size: var(--caption-size);
  line-height: var(--caption-line-height);
  overflow-wrap: anywhere;
}
a.article-category:hover, .article-category a:hover { color: var(--link-color); text-decoration: underline; }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--article-toc-width)) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.article-toc {
  min-width: 0;
  padding: var(--space-6);
  border-radius: var(--radius-panel);
  background: var(--surface-soft);
}
.article-toc h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-18);
  line-height: var(--line-height-18-28);
  letter-spacing: 0;
}
.article-toc ol { margin: 0; padding-left: var(--space-6); list-style: decimal; }
.article-toc li {
  padding-left: var(--space-1);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16-22);
}
.article-toc li:last-child { margin-bottom: 0; }
.article-toc li::marker { color: var(--link-color); }
.article-toc a { color: var(--link-color); overflow-wrap: anywhere; }
.article-toc a:hover { color: var(--link-hover-color); text-decoration: underline; text-underline-offset: var(--space-1); }
.article-toc a[aria-current="location"] { color: var(--link-hover-color); font-weight: var(--font-weight-semibold); text-decoration: underline; }
.article-toc ol ol { padding-top: var(--space-3); padding-left: var(--space-4); list-style: none; }
.article-toc ol ol a { color: var(--text-secondary); }
.article-body { min-width: 0; font-size: var(--body-size); line-height: var(--body-line-height); overflow-wrap: break-word; }
.article-body h2 {
  margin: var(--space-12) 0 var(--space-4);
  font-size: var(--font-size-28);
  line-height: var(--line-height-28-38);
  overflow-wrap: anywhere;
}
.article-body > h2:first-child,
.article-body > .article-section:first-child > h2:first-child { margin-top: 0; }
.article-body h3 {
  margin: var(--space-8) 0 var(--space-3);
  color: var(--color-primary);
  font-size: var(--font-size-20);
  line-height: var(--line-height-20-28);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}
.article-body h2 { scroll-margin-top: var(--space-8); }
.article-body p { margin-bottom: var(--space-4); }
.article-body ul, .article-body ol { margin: 0 0 var(--space-6); padding-left: var(--space-6); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { padding-left: var(--space-1); margin-bottom: var(--space-3); }
.article-body li::marker { color: var(--link-color); }
.article-body a:not(.button) { color: var(--link-color); text-decoration: underline; text-underline-offset: var(--space-1); overflow-wrap: anywhere; }
.article-body a:not(.button):hover { color: var(--link-hover-color); }
.article-body blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: var(--border-width) solid var(--color-gray);
  font-style: italic;
}
.article-body blockquote > :last-child { margin-bottom: 0; }
.article-body figure { margin: var(--space-8) 0; }
.article-body figure img { width: 100%; height: auto; border-radius: var(--radius-card-image); }
.article-body figcaption {
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  border-left: var(--border-width) solid var(--color-gray);
  color: var(--text-secondary);
  font-size: var(--caption-size);
  line-height: var(--caption-line-height);
}
.article-sources { margin-top: var(--space-12); padding-top: var(--space-6); border-top: var(--border-width) solid var(--border-color); }
.article-sources h2 { margin-top: 0; }
.article-sources ol { font-size: var(--font-size-16); line-height: var(--line-height-16-22); }
.article-care { margin-top: var(--space-8); padding: var(--space-6); border-radius: var(--radius-panel); background: var(--surface-soft); }
.article-care h2 { margin: 0 0 var(--space-4); font-size: var(--font-size-22); line-height: var(--line-height-22-22); }
.article-care .button { max-width: 100%; }
.article-care-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.article-care > :last-child { margin-bottom: 0; }
.article-related .blog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.article-page .appointment { margin-top: var(--space-10); }

@media (max-width: 64rem) {
  .article-intro h1 { font-size: var(--font-size-32); line-height: var(--line-height-32-40); }
  .article-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); }
  .article-toc { padding: var(--space-5); }
  .article-related .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .article-meta { align-items: flex-start; flex-direction: column; }
  .article-share { justify-content: flex-start; }
  .article-share-status { text-align: left; }
  .article-hero > img { aspect-ratio: var(--guide-photo-ratio); }
  .article-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .article-care-buttons { flex-direction: column; align-items: stretch; }
}
@media (max-width: 36rem) {
  .article-related .blog-grid { grid-template-columns: 1fr; }
}