/* Guide-only surfaces. Loaded after existing guide and G4 styles. */
main.guide-card-layout {
  --guide-card-padding: 24px;
  --guide-heading-size: clamp(1.2rem, 2.5vw, 1.5rem);
  --guide-heading-weight: 700;
  --guide-heading-line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Rendered information guides use the same spacing as static detail guides. */
main.guide-card-layout.content-pages-shell { display: grid; gap: 24px; }
/* The title and article stay outside the cards. Each section includes its heading. */
main.guide-card-layout :is(.guide-section, .guide-article > section, .guide-article > .guide-lead, .guide-article > .g4-lead, .guide-intro, .content-panel:not(.guide-article)),
body.dark main.guide-card-layout :is(.guide-section, .guide-article > section, .guide-article > .guide-lead, .guide-article > .g4-lead, .guide-intro, .content-panel:not(.guide-article)) {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: max(20px, var(--guide-card-padding)) var(--guide-card-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
  backdrop-filter: none;
}
/* Retain every body wrapper and its grid layout inside the enclosing section. */
main.guide-card-layout .guide-body-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
main.guide-card-layout h2,
.guide-card-layout .guide-section h2,
.guide-card-layout .guide-article h2,
.guide-card-layout.guide-detail .related-guides h2,
.guide-card-layout .guide-lead > strong,
.guide-card-layout .g4-lead > strong,
.guide-card-layout .guide-process > figcaption,
.guide-card-layout .guide-process > figcaption > strong {
  font-size: var(--guide-heading-size);
  font-weight: var(--guide-heading-weight);
  line-height: var(--guide-heading-line-height);
}
main.guide-card-layout h2 { margin: 0; }
.guide-card-layout :is(.guide-lead, .g4-lead) > strong { display: block; margin-bottom: 16px; }
main.guide-card-layout .guide-article :is(.guide-lead, .g4-lead) { font-size: 1.08rem; line-height: 1.75; }
.guide-card-layout .guide-article h3,
.guide-card-layout .guide-item h3,
.guide-card-layout .g4-reading h3,
.guide-card-layout.guide-detail .guide-interpretation h3,
.guide-card-layout.guide-choice-guide .guide-choice-column h3,
.guide-card-layout.guide-concept-guide .guide-misconception h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 600px) {
  main.guide-card-layout { --guide-card-padding: 20px; }
}
@media (max-width: 300px) {
  main.guide-card-layout { --guide-card-padding: 12px; }
  body:has(main.guide-card-layout) .brand { max-width: 100%; }
  body:has(main.guide-card-layout) .brand span { min-width: 0; overflow-wrap: anywhere; }
  body:has(main.guide-card-layout) .brand strong { white-space: normal; overflow-wrap: anywhere; }
  body:has(main.guide-card-layout) .header-actions { flex-wrap: wrap; gap: 4px 8px; }
  body:has(main.guide-card-layout) .header-nav-link { white-space: normal; }
}