/* Homepage and the legal pages — on top of studio.css's tokens and
   components. Sections are separated by whitespace and the alternating
   soft-gray background, never by borders or cards. */

/* ---- Hero ---- */
.home-hero {
  padding: 104px 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.eyebrow { margin: 0; font-size: 17px; font-weight: 600; color: var(--accent); }
/* The strip of framed mockups below the hero: a slow loop to the left
   (the track holds the set twice, so moving it by half loops seamlessly),
   paused while hovered. With reduced motion it stands still and scrolls by
   hand instead. */
.home-showcase { background: var(--bg-alt); padding: 72px 0 64px; overflow: hidden; }
.showcase-viewport { overflow: hidden; }
.showcase-track { display: flex; gap: 24px; width: max-content; margin: 0; padding: 0 12px; list-style: none; animation: showcase-slide 150s linear infinite; }
.showcase-viewport:hover .showcase-track, .showcase-viewport:focus-within .showcase-track { animation-play-state: paused; }
@keyframes showcase-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }   /* (padding = half a gap each side: half the track is exactly one set) */
.showcase-track li { flex: 0 0 auto; }
.showcase-track a { display: flex; flex-direction: column; gap: 12px; width: 300px; color: var(--text-secondary); font-size: 14px; text-align: center; }
.showcase-track a:hover { opacity: 1; color: var(--text); }
.showcase-track a.set { width: 450px; }   /* a diptych or triptych: a square tile, as tall as the others */
.showcase-track a.set img { aspect-ratio: 1 / 1; }
.showcase-track img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--bg); }
.showcase-caption { margin: 32px auto 0; padding: 0 24px; text-align: center; font-size: 14px; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .showcase-viewport { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .showcase-viewport::-webkit-scrollbar { display: none; }
  .showcase-track { animation: none; padding: 0 24px; }
  .showcase-track li { scroll-snap-align: center; }
  .showcase-track li:nth-child(n + 16) { display: none; }
}

.home-hero h1 { max-width: 820px; font-size: 64px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; }
.lead { margin: 0; max-width: 620px; font-size: 21px; line-height: 1.45; color: var(--text-secondary); }
.home-hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 12px; }

/* ---- Featured artwork ---- */

/* ---- Section heads ---- */
.home-section-head { max-width: 760px; margin: 0 auto 72px; text-align: center; display: flex; flex-direction: column; gap: 16px; }
.home-section-head h2 { font-size: 48px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
.home-section-head p { margin: 0 auto; max-width: 600px; font-size: 19px; line-height: 1.45; color: var(--text-secondary); }

/* ---- Generators ---- */
.home-generators { max-width: 1100px; margin: 0 auto; padding: 140px 24px 120px; }
/* five: two large, then three */
.generator-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 64px 40px; }
.generator-item { grid-column: span 2; }
.generator-item:nth-child(-n+2) { grid-column: span 3; }
.generator-item { display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.generator-item:hover { opacity: 1; }
.generator-item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); margin-bottom: 14px; background: var(--bg-alt); }
.generator-item h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.generator-item p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.generator-item .link-cta { margin-top: 4px; font-size: 15px; }
.generator-item:hover .link-cta { opacity: 0.72; }

/* ---- How it works ---- */
.home-how { background: var(--bg-alt); padding: 140px 24px; }
.how-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1052px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.how-steps li { display: flex; flex-direction: column; gap: 8px; }
.how-n { font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.how-steps h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.how-steps p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.home-how-cta { display: flex; justify-content: center; margin-top: 72px; }

/* ---- Footer (all marketing and legal pages) ---- */
.site-footer { max-width: 1100px; margin: 0 auto; padding: 40px 24px 32px; font-size: 12px; color: var(--text-secondary); }
.site-footer p { margin: 0 0 6px; }
.site-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer-links a { color: var(--text-tertiary); }

/* ---- Legal and contact pages ---- */
.legal-page { max-width: 720px; margin: 0 auto; padding: 88px 24px 104px; font-size: 17px; line-height: 1.6; }
.legal-page h1 { font-size: 48px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 12px; }
.legal-page h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin: 44px 0 10px; }
.legal-page p, .legal-page li { color: var(--text); }
.legal-page ul { padding-left: 22px; }
.legal-page li { margin-bottom: 8px; }
.legal-updated { margin: 0 0 32px; font-size: 13px; color: var(--text-secondary) !important; }
.legal-page .card { background: var(--bg-alt); border-radius: var(--r-lg); padding: 28px; margin: 28px 0; }

/* ---- Shop the feed (/feed, app/feed/route.js): the Instagram grid, each post opening its piece ---- */
.feed-page { max-width: 960px; margin: 0 auto; padding: 88px 24px 104px; }
.feed-page h1 { font-size: 48px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 12px; }
.feed-intro { max-width: 560px; font-size: 17px; line-height: 1.6; margin: 0 0 20px; }
.feed-grid { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.feed-tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-alt); }
.feed-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.feed-reel { position: absolute; top: 10px; right: 10px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
.feed-tile-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 12px; color: #fff; font-size: 14px; font-weight: 600; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); opacity: 0; transition: opacity 0.25s ease; }
.feed-tile:hover img, .feed-tile:focus-visible img { transform: scale(1.03); }
.feed-tile:hover .feed-tile-label, .feed-tile:focus-visible .feed-tile-label { opacity: 1; }
.feed-empty { margin-top: 40px; }
/* (touch screens have no hover: no label, a clean grid like Instagram's — the intro says to tap) */
@media (hover: none) { .feed-tile-label { display: none; } }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .generator-grid, .how-steps { grid-template-columns: minmax(0, 1fr); }
  .generator-item, .generator-item:nth-child(-n+2) { grid-column: auto; }
  .generator-grid { gap: 56px; }
}
@media (max-width: 640px) {
  .home-showcase { padding: 48px 0 40px; }
  .showcase-track { gap: 16px; padding: 0 8px; }
  .showcase-track a { width: 220px; }
  .showcase-track a.set { width: 330px; }
  .home-hero { padding: 72px 20px 56px; }
  .home-hero h1 { font-size: 40px; }
  .lead { font-size: 19px; }
  .home-section-head { margin-bottom: 48px; }
  .home-section-head h2, .legal-page h1 { font-size: 36px; }
  .home-generators { padding: 96px 20px; }
  .home-how { padding: 96px 20px; }
  .home-how-cta { margin-top: 56px; }
  .legal-page { padding: 56px 20px 80px; }
}