/* rijen.css — the homepage (index.html, since 2026-10-23): the three product sections of the
   homepage as alternating rows, text on one side and the product in a laptop on the other,
   after the layout of obsessless.com, with one soft wash behind each laptop. */

.rij { position: relative; padding: clamp(4rem, 8vw, 7.5rem) 0; }
.rij__in { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.rij--om .rij__in { grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); }
.rij--om .rij__tekst { order: 2; }
/* Above the wash, which reaches into the text column on narrow screens. */
.rij__tekst { position: relative; z-index: 1; max-width: 34rem; }
.rij__tekst .w-groot { margin-top: 1.4rem; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; max-width: 34ch; }
.rij__tekst > p:not(.h-label):not(.w-groot) { margin-top: 1rem; color: #46464b; max-width: 46ch; }
.rij__tekst .h-lijst { margin-top: 1.6rem; }
.rij__tekst .knop { margin-top: 2rem; }
/* The laptop runs a little into the page margin on its own side, as the phones do on obsessless.com. */
.rij__beeld { position: relative; margin: 0 calc(var(--pad) * -0.6) 0 0; }
.rij--om .rij__beeld { margin: 0 0 0 calc(var(--pad) * -0.6); }
.rij__beeld figcaption { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin-top: 1.6rem; justify-content: center; }

/* The wash: one per row, toward the outer edge, after the hero's washes (Joost, 2026-10-22,
   in place of a plain circle). The row colour runs into the neighbouring hero colour (--rond2),
   as the hero's peach and lilac do where they meet. Blurred like the hero's washes so no edge
   shows between gradient stops; touch screens skip the blur, as .wash does in site.css. */
.rij__beeld::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1.2; width: 165%; top: 50%; right: -48%;
  transform: translateY(-54%); opacity: 0.95; filter: blur(56px);
  background:
    radial-gradient(closest-side at 42% 44%, var(--rond) 0%, color-mix(in srgb, var(--rond) 85%, transparent) 25%,
      color-mix(in srgb, var(--rond) 45%, transparent) 55%, color-mix(in srgb, var(--rond) 12%, transparent) 80%, transparent 100%),
    radial-gradient(closest-side at 60% 58%, var(--rond2) 0%, color-mix(in srgb, var(--rond2) 80%, transparent) 25%,
      color-mix(in srgb, var(--rond2) 40%, transparent) 55%, color-mix(in srgb, var(--rond2) 10%, transparent) 80%, transparent 100%);
}
.rij--om .rij__beeld::before { right: auto; left: -48%; }
@media (pointer: coarse) { .rij__beeld::before { filter: none; } }
.rij--perzik { --rond: var(--peach); --rond2: var(--rose); }
.rij--lila { --rond: var(--lilac); --rond2: var(--blauwgrijs); }
.rij--geel { --rond: var(--yellow); --rond2: var(--peach); }

/* ---- the laptop, drawn in CSS around a 16:10 screenshot ---------------------- */
.lp { position: relative; z-index: 1; width: 100%; }
.lp__deksel {
  position: relative; width: 88%; margin: 0 auto; padding: 2.4% 2.4% 3.2%;
  border-radius: clamp(0.7rem, 1.6vw, 1.25rem) clamp(0.7rem, 1.6vw, 1.25rem) 0.4rem 0.4rem;
  background: #16171a; box-shadow: inset 0 0 0 1px #3a3b40, inset 0 0 0 3px #0b0b0d;
}
/* the camera */
.lp__deksel::before { content: ""; position: absolute; top: 1%; left: 50%; width: 0.4rem; height: 0.4rem; margin-left: -0.2rem; border-radius: 50%; background: #2c2e33; }
.lp__scherm { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0.2rem; background: #faf8f7; }
.lp__scherm > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.lp__voet {
  position: relative; height: clamp(0.7rem, 1.4vw, 1.1rem); margin-top: -1px;
  border-radius: 0.15rem 0.15rem 50% 50% / 0.15rem 0.15rem 100% 100%;
  background: linear-gradient(#e4e5e8, #c9cbd0 55%, #a4a6ab);
  box-shadow: 0 30px 50px -20px rgba(40, 35, 60, 0.45), 0 2px 3px rgba(13, 14, 17, 0.12);
}
/* the groove to open the lid */
.lp__voet::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 0.6rem 0.6rem; background: linear-gradient(#b8bac0, #d3d5d9); }

/* "Hoe het werkt": a picture of the dialog over the history, as in the app, scaled to the
   screen by rijen.js at every width. */
.lp__dimmer { position: absolute; inset: 0; background: rgba(13, 14, 17, 0.18); }
/* 47% is the middle of the screen within the laptop. */
.lp__venster { position: absolute; z-index: 2; top: 47%; left: 50%; width: 400px; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(var(--z, 0.6)); }
.lp__venster .h-vastleg { box-shadow: 0 30px 70px rgba(13, 14, 17, 0.3), 0 0 0 1px rgba(17, 17, 17, 0.06); }

@media (max-width: 60rem) {
  .rij__in, .rij--om .rij__in { grid-template-columns: minmax(0, 1fr); }
  .rij--om .rij__tekst { order: 0; }
  .rij__beeld, .rij--om .rij__beeld { margin: 0; }
  .rij__beeld::before { width: 150%; right: -55%; }
  .rij--om .rij__beeld::before { left: -55%; }
}