/* Documentation hub: compose the existing solution cards without changing other routes. */
body[data-avds-page="docs"] .seo-main {
  background: var(--surface-canvas);
}

body[data-avds-page="docs"] .solution-hero--hub {
  padding-block: clamp(50px, 6vw, 76px) clamp(26px, 3vw, 38px);
}

body[data-avds-page="docs"] .solution-hero h1 {
  max-width: 23ch;
}

body[data-avds-page="docs"] .solution-section--hub {
  padding-top: clamp(26px, 3vw, 38px);
  padding-bottom: clamp(42px, 5vw, 60px);
}

body[data-avds-page="docs"] .solution-grid--hub {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-avds-page="docs"] .solution-grid--hub .solution-card {
  grid-column: auto;
  display: flex;
  flex-direction: column;
}

body[data-avds-page="docs"] .solution-card::before {
  background: var(--color-accent-primary);
}

body[data-avds-page="docs"] .solution-card > .text-link {
  margin-top: auto;
  padding-top: 20px;
}

body[data-avds-page="docs"] .product-cta {
  padding-block: clamp(40px, 5vw, 58px);
}

body[data-avds-page="docs"] .footer-brand {
  grid-column: 1;
  grid-row: 1;
}

body[data-avds-page="docs"] .footer-tagline {
  grid-column: 1;
  grid-row: 2;
  max-width: 36ch;
}

body[data-avds-page="docs"] .footer-nav {
  grid-column: 2;
  grid-row: 1 / span 2;
}

body[data-avds-page="docs"] .footer-bottom {
  grid-row: 3;
}

html[data-theme="dark"] body[data-avds-page="docs"] {
  --avds-surface-tint: #23262b;
  --avds-rail: #d8ba70;
  --surface-canvas: #17191c;
  --surface-base: #202328;
  --surface-muted: #1c1f23;
  --surface-header: rgba(23, 25, 28, .94);
  --surface-header-scrolled: rgba(23, 25, 28, .98);
  --surface-hover: #2b3036;
  --color-text-primary: #f2f1ed;
  --color-text-secondary: #c5c7c6;
  --color-text-muted: #a5a8aa;
  --color-accent-primary: #d8ba70;
  --color-accent-primary-hover: #ead095;
  --color-accent-primary-subtle: #2d2922;
  --color-accent-primary-active: #f0d99e;
  --color-accent-secondary: #d4bc80;
  --color-border-default: #41464d;
  --color-border-subtle: #33383f;
  --color-text-on-accent: #1b1b1a;
}

@media (max-width: 768px) {
  body[data-avds-page="docs"] .footer-brand,
  body[data-avds-page="docs"] .footer-tagline,
  body[data-avds-page="docs"] .footer-nav,
  body[data-avds-page="docs"] .footer-bottom {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 767px) {
  body[data-avds-page="docs"] .solution-grid--hub {
    grid-template-columns: minmax(0, 1fr);
  }
}