/* Zouqly layout — container 1360 / content 1120, 8px scale, 96px+ section rhythm,
   asymmetric editorial grids. Never a uniform 4-card grid as primary layout. */

.zq-container {
  max-width: var(--zq-layout-container);
  margin-inline: auto;
  padding-inline: var(--zq-space-3);
}

.zq-content {
  max-width: var(--zq-layout-content);
  margin-inline: auto;
  padding-inline: var(--zq-space-3);
}

.zq-section { padding-block: var(--zq-space-6); }
@media (min-width: 900px) {
  .zq-section { padding-block: var(--zq-space-7); } /* >= 96px on desktop — enforced */
}

/* Asymmetric editorial split: 7/5 with offset start — the workhorse grid */
.zq-split {
  display: grid;
  gap: var(--zq-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .zq-split { grid-template-columns: 7fr 5fr; gap: var(--zq-space-6); align-items: end; }
  .zq-split--flip { grid-template-columns: 5fr 7fr; }
  .zq-split--drop > :last-child { margin-top: var(--zq-space-7); } /* staggered baseline */
}

/* Offset rail: content column + bleeding media column */
.zq-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zq-space-4);
}
@media (min-width: 900px) {
  .zq-rail { grid-template-columns: minmax(280px, 4fr) 8fr; gap: var(--zq-space-6); }
}

/* Product grid: 3-up desktop / 2-up tablet / 2-up mobile, generous gutters */
.zq-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--zq-space-4) var(--zq-space-3);
}
@media (min-width: 1100px) {
  .zq-products { grid-template-columns: repeat(3, 1fr); gap: var(--zq-space-6) var(--zq-space-5); }
}

/* Full-bleed horizontal scroll (structural moment: "In the room") */
.zq-bleed-scroll {
  display: flex;
  gap: var(--zq-space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: max(var(--zq-space-3), calc((100vw - var(--zq-layout-container)) / 2));
  scrollbar-width: thin;
}
.zq-bleed-scroll > * { flex: 0 0 auto; scroll-snap-align: start; }
.zq-bleed-scroll .zq-bleed-hero { width: min(150vw, 1800px); }

/* Overlapping caption column (26ch, overlaps image left edge) */
.zq-overlap-caption {
  position: relative;
}
@media (min-width: 900px) {
  .zq-overlap-caption .zq-caption {
    position: absolute;
    left: calc(-1 * var(--zq-space-8));
    bottom: var(--zq-space-6);
    max-width: 26ch;
    background: var(--zq-color-canvas);
    padding: var(--zq-space-4);
  }
}

/* Reveal on scroll — once only, JS-gated (no-JS visible), reduced-motion off */
html.js .zq-reveal { opacity: 0; transform: translateY(16px); }
html.js .zq-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--zq-motion-slow) var(--zq-motion-ease),
              transform var(--zq-motion-slow) var(--zq-motion-ease);
}
@media (prefers-reduced-motion: reduce) {
  html.js .zq-reveal { opacity: 1; transform: none; transition: none; }
}

/* Page transition — 180ms opacity, sirf outgoing navigation par (initial paint kabhi block nahi hota) */
html.js body { transition: opacity var(--zq-motion-base) var(--zq-motion-ease); }
html.js body.zq-leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.js body { transition: none; } }