/* Style page specific styles (avoid duplicating base.css rules) */

/* Hero */
.hero-style {
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
.hero-style__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.hero-style__content {
  align-self: center;
}
.hero-style__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

/* Trends */
.trend-card .swatches { display: flex; gap: 10px; margin-top: var(--space-4); }
.trend-card .swatches li {
  width: 28px; height: 28px; border-radius: var(--radius-full);
  border: 1px solid var(--gray-300);
  background: var(--sw, var(--gray-200));
}

/* Inspiration */
.inspo__media { aspect-ratio: 16 / 10; overflow: hidden; }

/* Q&A */
.qa { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--color-surface); padding: 0.5rem 0.75rem; }
.qa + .qa { margin-top: var(--space-4); }
.qa__q { font-weight: 600; cursor: pointer; padding: 0.5rem; outline: none; }
.qa__a { padding: 0 0.75rem 0.75rem; color: var(--gray-700); }

/* Lookbooks */
.lookbook-grid .card { min-height: 180px; }

/* Beauty */
.beauty__media { aspect-ratio: 4 / 3; overflow: hidden; }

/* Responsive */
@media (max-width: 960px) {
  .hero-style__inner { grid-template-columns: 1fr; }
}