/* Page-level layout for lizhong site — built on design-system tokens/components */

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg); }
.nav { border-bottom: var(--border-width) solid var(--color-border); }
.nav-logo img { height: 44px; width: auto; }
.nav-cta { flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: none; padding: var(--space-2); cursor: pointer; color: var(--color-primary-700); }

/* Hero */
.hero { position: relative; background: var(--color-primary-900); overflow: hidden; }
.hero img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,25,48,.82) 0%, rgba(10,25,48,.55) 45%, rgba(10,25,48,0) 75%); }
.hero-inner { position: relative; padding: var(--space-9) 0; max-width: 560px; }
.hero-inner h1 { font: var(--text-display); color: #fff; }
.hero-inner p { font: var(--text-body-lg); color: var(--color-primary-100); margin-top: var(--space-4); }
.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* Category button row — flush row directly under the hero */
.category-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: var(--color-border); }
.category-row .btn { border-radius: 0; padding: var(--space-4) var(--space-2); white-space: normal; line-height: 1.3; }

/* Sections */
.section { padding: var(--space-8) 0; }
.section-alt { background: var(--color-bg-alt); }
.section .section-heading { margin-bottom: var(--space-6); }

/* Card grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.card-media.square { aspect-ratio: 1/1; }

/* Stats band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); text-align: center; }
.stat-value { font: var(--text-h2); color: var(--color-primary-700); }
.stat-label { font: var(--text-body-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

/* Contact band */
.contact-band { background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-500)); color: #fff; }
.contact-band .section-heading .label, .contact-band h2 { color: #fff; }
.contact-band .section-heading .chevron { color: var(--color-primary-200); }
.contact-band p { color: var(--color-primary-100); }
.contact-band .btn-secondary { border-color: #fff; color: #fff; }
.contact-band .btn-secondary:hover { background: rgba(255,255,255,.12); }

/* Breadcrumbs */
.breadcrumbs { font: var(--text-body-sm); color: var(--color-text-muted); padding: var(--space-4) 0; }
.breadcrumbs a { color: var(--color-text-muted); }

/* Category bar on products page */
.allcat-bar { background: var(--color-primary-500); color: #fff; padding: var(--space-4) var(--space-5); font: var(--text-h4); }
.cat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* Sticky toolbar (products page) */
.toolbar-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; }
.toolbar-sticky .toolbar-item { text-decoration: none; color: #fff; }
.toolbar-sticky svg { display: block; }
.has-toolbar { padding-bottom: 72px; }

/* Two-column blocks (about, contact) */
.split { display: flex; gap: var(--space-7); flex-wrap: wrap; align-items: flex-start; }
.split > div { flex: 1 1 320px; min-width: 0; }
.prose { display: flex; flex-direction: column; gap: var(--space-4); }
.prose p { color: var(--color-text-muted); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Contact page form */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-lines { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-lines a { font: var(--text-h4); }

/* Footer */
.footer-grid { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; gap: var(--space-7); padding-bottom: var(--space-6); }
.footer-logo img { height: 40px; width: auto; margin-bottom: var(--space-4); }
.footer p { font: var(--text-body-sm); }
.footer .contact-lines a { font: var(--text-body); color: #fff; }

/* Responsive */
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .category-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav.menu-open { flex-wrap: wrap; }
  .nav.menu-open .nav-links { display: flex; flex-direction: column; width: 100%; order: 10; gap: var(--space-4); padding: var(--space-4) 0 var(--space-2); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .category-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-inner { padding: var(--space-8) 0; }
  .hero-inner h1 { font: 700 1.75rem/1.2 var(--font-heading); }
  .hero img.hero-bg { object-position: 12% center; }
  .hero-scrim { background: linear-gradient(90deg, rgba(10,25,48,.85) 0%, rgba(10,25,48,.65) 60%, rgba(10,25,48,.35) 100%); }
  .nav-cta { display: none; }
}