/* Inspiration Page Styles - GardenLite */
.hero-inspiration { padding: var(--space-16) 0; }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-copy p { color: var(--color-muted); }
.hero-cta { display: flex; gap: var(--space-4); margin-block: var(--space-5) var(--space-3); flex-wrap: wrap; }
.hero-highlights { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero-media figcaption { margin-top: var(--space-3); }

.section { padding: var(--space-16) 0; }
.section-head p { color: var(--color-muted); max-width: 65ch; }
.section-figure { margin-top: var(--space-8); }
.section-figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

.trend-grid .card h3 { margin-bottom: var(--space-2); }
.card-actions { margin-top: var(--space-4); }

.tips-list { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tips-list { grid-template-columns: 1fr; } }
.tips-list h3 { margin-bottom: var(--space-2); }

.mood-grid { display: grid; gap: var(--space-8); grid-template-columns: 1.2fr 0.8fr; align-items: start; }
@media (max-width: 1000px) { .mood-grid { grid-template-columns: 1fr; } }
.palette h3 { margin-bottom: var(--space-3); }
.swatches { display: grid; grid-template-columns: repeat(5, minmax(54px, 1fr)); gap: var(--space-3); }
.swatch { appearance: none; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md); border: 1px solid var(--gray-200); background: var(--sw, #eee); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard); }
.swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.cta-bar { margin-top: var(--space-8); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Reveal on scroll */
[data-observe] { opacity: 0; transform: translateY(16px); transition: opacity var(--transition-slow) var(--ease-standard), transform var(--transition-slow) var(--ease-standard); }
[data-observe].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-observe] { opacity: 1 !important; transform: none !important; transition: none !important; }
}