/* layout.css — SpinAdvisor */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

.site-header {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 14px var(--gutter);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text-on-dark); text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 20px; }
.brand-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: inline-block; }
.age-badge {
  background: var(--accent); color: #101214; font-family: var(--font-heading); font-weight: 700;
  font-size: 13px; padding: 4px 9px; border-radius: 999px; letter-spacing: 0.02em;
}
.site-nav { margin-left: auto; }
.nav-toggle { display: none; background: transparent; color: var(--text-on-dark); border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; padding: 8px 12px; }
.nav-list { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-list a { color: var(--text-on-dark); text-decoration: none; font-size: 14.5px; }
.nav-list a[aria-current="page"] { color: var(--accent); font-weight: 600; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .nav-list { display: none; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-dark); padding: 16px var(--gutter); }
  .nav-list.open { display: flex; }
}

.breadcrumbs { padding-top: 18px; font-size: 13.5px; }
.breadcrumbs ol { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: 6px; color: #888; }

main { display: block; padding-bottom: 64px; }
.hero {
  background: var(--bg-dark); color: var(--text-on-dark); padding: 56px 0 48px;
}
.hero .wrap { display: grid; gap: 20px; }
.hero h1 { font-size: 40px; max-width: 20ch; }
.hero p.lede { font-size: 18px; max-width: 56ch; color: var(--text-on-dark); opacity: 0.92; }

section { padding: 40px 0; }
section.tight { padding: 24px 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.site-footer { background: var(--bg-dark); color: var(--text-on-dark); padding: 40px 0 28px; margin-top: 40px; }
.footer-inner p, .footer-inner a { color: var(--text-on-dark); }
.footer-responsible { border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; }
.footer-nav { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0; }
.footer-copy { font-size: 13px; opacity: 0.75; }

.divider {
  height: 28px; background-repeat: repeat-x; background-size: 48px 28px; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28'%3E%3Cpath d='M0 28 L24 0 L48 28' stroke='%235B8DEF' fill='none' stroke-width='2'/%3E%3C/svg%3E");
}