/* ==========================================================================
   Beech & Bolster — homepage styles
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.hero { background: var(--paper-warm); border-bottom: 1px solid var(--line-2); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
  padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px);
}
.hero__title { font-size: clamp(36px, 4.4vw, 58px); max-width: 15ch; margin: 14px 0 0; }
.hero__sub {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.3;
  color: var(--ink-2); max-width: 32ch; margin: 16px 0 0;
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.hero__stage { position: relative; }
/* The animation's own styles live inside partials/hero-motion.svg, so they
   always arrive with its markup. */

.motion__toggle {
  position: absolute; left: 4px; bottom: 4px;
  font-family: var(--body); font-size: 12px; letter-spacing: .04em; color: var(--muted-2);
  padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line-2); background: rgba(250,247,240,.85);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.motion__toggle:hover { color: var(--ink); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .motion__toggle { display: none; }
}

/* ---- Category grid ------------------------------------------------------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

/* ---- Gallery ------------------------------------------------------------- */
.look-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.look-grid .tile__media { aspect-ratio: 4/5; }
/* The wide tile spans two columns and takes the row height of its neighbours. */
.look-grid .tile--wide { grid-column: span 2; }
.look-grid .tile--wide .tile__media { aspect-ratio: auto; height: 100%; }
.look-grid .tile--wide .tile__media img { position: absolute; inset: 0; object-position: 50% 70%; }

/* ---- Re-upholstery feature ---------------------------------------------- */
.reup-feature {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

/* ---- Editorial split ----------------------------------------------------- */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--paper-warm);
  border-top: 1px solid var(--line-2);
}
.editorial__media { min-height: 420px; overflow: hidden; }
.editorial__media img { width: 100%; height: 100%; object-fit: cover; }
.editorial__body {
  padding: clamp(40px, 5vw, 72px) clamp(28px, 5vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
}

/* ---- Promise strip ------------------------------------------------------- */
.promise { background: var(--sage-deep); color: #f7f3ea; }
.promise__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  padding-top: 58px; padding-bottom: 58px;
}
.promise__k {
  font-family: var(--display); font-size: 22px; font-weight: 300;
  color: #fbf8f1; margin-bottom: 8px;
}
.promise p { margin: 0; font-size: 15px; line-height: 1.62; color: #f7f3ea; max-width: 36ch; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid .tile:nth-child(4),
  .cat-grid .tile:nth-child(5) { grid-column: span 1; }
  .editorial { grid-template-columns: 1fr; }
  .editorial__media { min-height: 300px; }
  .promise__grid { grid-template-columns: 1fr; gap: 26px; }
  .reup-feature { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { order: -1; max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 700px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .look-grid { grid-template-columns: 1fr; }
  .look-grid .tile--wide { grid-column: auto; }
  .look-grid .tile--wide .tile__media { aspect-ratio: 4/3; height: auto; }
  .look-grid .tile--wide .tile__media img { position: static; }
}