/* J&G's Hair Fashion · sections.css
   Per-section layout, breakpoints (390 / 768 / 1024 / 1440), reduced-motion. */

/* ===== 3 · Hero (isolated module; see js/hero.js for the DOM contract) ===== */
.hero { position: relative; width: 100%; background: var(--color-paper-white); }
.hero__frames { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100svh - var(--nav-h) - 96px); min-height: 420px; overflow: hidden; background: var(--color-driftwood); }
.hero__frame { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0s linear 0.7s; }
.hero__frame.is-active { opacity: 1; visibility: visible; transition: opacity 0.7s ease, visibility 0s; }
.hero__media { position: absolute; inset: 0; transform-origin: 50% 50%; overflow: hidden; }
.hero__media .slot { position: absolute; inset: 0; height: 100%; border: 0; place-items: start; }
.hero__media .slot__label { padding: var(--spacing-16) var(--gutter); }
.hero__media img { object-position: 50% 35%; }
.hero__copy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: var(--spacing-16); padding: var(--gutter); color: var(--color-ink); }
.hero__frame[data-tone="dark"] .hero__copy { color: var(--color-paper-white); }
.hero__frame[data-tone="dark"] .btn--ghost { border-color: var(--color-paper-white); color: var(--color-paper-white); }
.hero__frame[data-tone="dark"] .btn--ghost:hover { background: var(--color-paper-white); color: var(--color-ink); }
.hero__copy .h-display { max-width: min(40ch, 46vw); font-size: clamp(24px, 6.4vw, var(--text-display)); }
/* copy placement: each frame declares where its photograph leaves room */
.hero__frame[data-align="left"] .hero__copy { justify-content: start; justify-items: start; text-align: left; padding-left: max(var(--gutter), 6vw); }
.hero__frame[data-align="left"] .hero__actions { justify-content: flex-start; }
.hero__frame[data-align="right"] .hero__copy { justify-content: end; justify-items: end; text-align: right; padding-right: max(var(--gutter), 6vw); }
.hero__frame[data-align="right"] .hero__actions { justify-content: flex-end; }
.hero__actions { display: flex; align-items: center; justify-content: center; gap: var(--spacing-24); flex-wrap: wrap; }
.slide-bars { display: flex; justify-content: center; gap: var(--spacing-8); padding-top: var(--spacing-12); }
.slide-bars [role="tab"] { position: relative; width: 30px; height: 16px; }
.slide-bars [role="tab"]::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--color-stone-gray); }
.slide-bars [role="tab"][aria-selected="true"]::before { background: var(--color-ink); }
@media (max-width: 767px) {
  /* phones: the 4:5 photograph stands alone; the copy sits below it on paper-white, no overlay, no scrim */
  .hero__frames { aspect-ratio: auto; max-height: none; min-height: 0; overflow: hidden; background: none; }
  .hero__frame { overflow: hidden; }
  .hero__frame.is-active { position: relative; }
  .hero__media { position: relative; inset: auto; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--nav-h) - 176px); background: var(--color-driftwood); }
  .hero__copy, .hero__frame[data-align="right"] .hero__copy, .hero__frame[data-align="left"] .hero__copy { position: relative; inset: auto; place-content: start; justify-content: start; justify-items: start; text-align: left; gap: var(--spacing-12); padding: var(--spacing-24) var(--gutter) var(--spacing-8); color: var(--color-ink); }
  .hero__frame[data-tone="dark"] .hero__copy { color: var(--color-ink); }
  .hero__frame[data-tone="dark"] .btn--ghost { border-color: var(--color-ink); color: var(--color-ink); }
  .hero__frame[data-tone="dark"] .btn--ghost:hover { background: var(--color-ink); color: var(--color-paper-white); }
  .hero__actions, .hero__frame[data-align="right"] .hero__actions { justify-content: flex-start; }
  .hero__copy .h-display { max-width: 22ch; }
  .slide-bars { padding-top: var(--spacing-8); }
}

/* ===== 4 · Shop by category ===== */
#category .section-head { margin-bottom: var(--spacing-16); }

/* ===== 6 · Split editorial ===== */
.split-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: var(--page-max-width); margin-inline: auto; }
.split-editorial__frame { position: relative; display: block; overflow: hidden; color: var(--color-ink); }
.split-editorial__frame[data-tone="dark"] { color: var(--color-paper-white); }
.split-editorial__media { position: relative; }
.split-editorial__caption { position: absolute; left: var(--spacing-24); right: var(--spacing-24); bottom: var(--spacing-24); display: grid; justify-items: start; gap: var(--spacing-8); z-index: 2; }
.split-editorial__caption .h-display { max-width: 20ch; }
.split-editorial__caption .btn { margin-top: var(--spacing-8); }
.split-editorial__frame:hover .btn--ghost { background: var(--color-ink); color: var(--color-paper-white); }
.split-editorial__frame[data-tone="dark"]:hover .btn--ghost { background: var(--color-paper-white); color: var(--color-ink); }
@media (max-width: 767px) {
  /* phones: each frame stacks, caption below the photograph in ink on paper-white */
  .split-editorial { grid-template-columns: 1fr; gap: var(--spacing-24); }
  .split-editorial__frame, .split-editorial__frame[data-tone="dark"] { color: var(--color-ink); }
  .split-editorial__caption { position: relative; left: auto; right: auto; bottom: auto; padding: var(--spacing-12) var(--gutter) 0; }
  .split-editorial__frame[data-tone="dark"] .btn--ghost { border-color: var(--color-ink); color: var(--color-ink); }
  .split-editorial__frame:hover .btn--ghost, .split-editorial__frame[data-tone="dark"]:hover .btn--ghost { background: var(--color-ink); color: var(--color-paper-white); }
}

/* ===== 10 · Reviews / UGC ===== */
#reviews .section-head { margin-bottom: var(--spacing-16); }

/* ===== Reduced motion: static, fully readable, no pins or scrubs ===== */
@media (prefers-reduced-motion: reduce) {
  .hero__media { transform: none !important; }
  .hero__frame { transition: none; }
}