/* Homepage (index.html). Depends on tokens/base/components/layout. */

/* ---- Hero ---------------------------------------------------------------- */
.home-hero { border-bottom: 1px solid var(--border-color); }
.home-hero-inner { display: grid; gap: var(--space-10); padding-top: var(--space-12); padding-bottom: var(--space-12); align-items: center; }
.home-hero h1 { font-size: var(--text-5xl); margin-top: var(--space-4); text-wrap: balance; }
.home-hero-lead { margin-top: var(--space-5); max-width: 520px; font-size: var(--text-lg); color: var(--text-secondary); }
.home-hero-actions { margin-top: var(--space-8); }
.home-hero-points { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-color); font-size: var(--text-sm); color: var(--text-secondary); }
.home-hero-points li { display: inline-flex; align-items: center; gap: var(--space-2); }
.home-hero-points li::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--brand-gold); }

.home-hero-media { display: grid; gap: var(--space-3); grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 6 / 5; }
.hero-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--background-tertiary); }
.hero-frame-1 { grid-row: span 2; }
.hero-frame picture { display: block; width: 100%; height: 100%; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-base) var(--ease-out); }
.hero-frame.is-cutout { background: var(--background-secondary); }
.hero-frame.is-cutout img { object-fit: contain; padding: 12%; mix-blend-mode: multiply; }
.hero-frame:hover img { transform: scale(1.03); }
.hero-frame-label {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  padding: 6px var(--space-3); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .94);
  font-size: var(--text-xs); font-weight: 600; box-shadow: var(--shadow-sm);
}
@media (max-width: 639px) { .hero-frame .media-placeholder-note { display: none; } }
@media (min-width: 960px) {
  .home-hero-inner { grid-template-columns: 1fr 1.05fr; gap: var(--space-16); padding-top: var(--space-16); padding-bottom: var(--space-16); }
}

/* ---- Categories ------------------------------------------------------------ */
.home-categories { display: grid; gap: var(--space-8) var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Cards are ~25% smaller than a full-width 3/4-column grid: 4 across on
   tablets, and on desktops 4 across within 75% of the page width. */
@media (min-width: 720px) { .home-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); } }
@media (min-width: 1100px) { .home-categories { max-width: 75%; margin-left: auto; margin-right: auto; } }

/* ---- How it works -------------------------------------------------------------- */
.home-steps { display: grid; gap: var(--space-6); counter-reset: step; }
.home-steps li { padding: var(--space-6); background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.home-step-num { display: block; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--brand-gold); line-height: 1; }
.home-steps h3 { margin-top: var(--space-4); font-size: var(--text-xl); }
.home-steps p { margin-top: var(--space-2); color: var(--text-secondary); }
@media (min-width: 768px) { .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Custom shops ----------------------------------------------------------------- */
.home-shops { display: grid; gap: var(--space-10); align-items: start; }
.home-shops h2 { font-size: var(--text-3xl); margin-top: var(--space-3); }
.home-shops-copy > p { margin-top: var(--space-4); color: var(--text-secondary); max-width: 520px; }
.home-shops-list { margin: var(--space-6) 0 var(--space-8); display: grid; gap: var(--space-3); }
.home-shops-list li { display: flex; gap: var(--space-3); align-items: baseline; }
.home-shops-list li::before { content: ""; flex-shrink: 0; width: 14px; height: 1px; background: var(--brand-gold); transform: translateY(-4px); }
.home-shops-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .home-shops-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .home-shops { grid-template-columns: 1fr 1.35fr; gap: var(--space-16); } }

/* ---- Brands ---------------------------------------------------------------------- */
.home-brands { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); text-align: center; }
.home-brands-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-10); margin-top: var(--space-5); }
.home-brands-list li { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--text-muted); }
.home-brands-more { margin-top: var(--space-5); font-size: var(--text-sm); }

/* ---- Occasions + help ----------------------------------------------------------- */
.home-help { display: grid; gap: var(--space-10); align-items: center; }
.home-occasions { flex-wrap: wrap; margin-top: var(--space-5); }
.home-help-card { padding: var(--space-8); border-radius: var(--radius-lg); background: var(--background-secondary); border: 1px solid var(--border-color); }
.home-help-card p { margin: var(--space-3) 0 var(--space-6); color: var(--text-secondary); }
@media (min-width: 960px) { .home-help { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }