/* ═══ LOW-KEY IMAGES ═══════════════════════════════════════════════════════
   Linked from partials/head-core.html. Everyday photography: no bedroom, no embrace, no product, no text in frame. */

.lk-pic { display: block; margin: 0; overflow: hidden; border-radius: var(--r-panel); background: var(--tile-a); }
.lk-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Home tile: the copy left, a photo right that fades into the tile gradient. */
.tile-photo .tile-txt { width: 60%; }
.tile-photo .tile-pic {
  position: absolute; inset: 0 0 0 auto; width: 52%; border-radius: 0; background: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%);
  mask-image: linear-gradient(to right, transparent 0, #000 38%);
}
.tile-photo .tile-pic img { object-position: 60% 30%; }
@media (min-width: 880px) { .tile-photo .tile-txt { width: 56%; } .tile-photo .tile-pic { width: 56%; } }

/* Calm hero: the copy and a photo side by side, the claims panel full width under them. */
.chero-photo { aspect-ratio: 5 / 4; }
@media (min-width: 900px) {
  .chero-inner { align-items: stretch; }
  .chero-photo { aspect-ratio: auto; min-height: 420px; }
  .chero-panel { grid-column: 1 / -1; }
  .chero-actives { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-lg); }
  .chero-actives li, .chero-actives li:first-child { border-top: 0; padding: 4px 0 0; }
  .chero-actives li + li { border-left: 1px solid color-mix(in oklab, var(--accent) 16%, transparent); padding-left: var(--s-lg); }
  .chero-panel .dose-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-lg); }
  .chero-panel .dose-facts > div { border-top: 0; padding-top: 0; align-content: start; }
}

/* Three steps: a photo heads each step. */
.steps3 li > .step-pic { grid-column: 1 / -1; aspect-ratio: 16 / 9; margin-bottom: var(--s-xs); border-radius: var(--r-control); }
@media (min-width: 880px) { .steps3 li > .step-pic { aspect-ratio: 4 / 3; } }

/* Women's "how it works": one photo under the heading. */
.how-pic { aspect-ratio: 3 / 2; margin-top: var(--s-xl); max-width: 520px; }

/* Who reviews your visit: a photo under the lead. */
.care-pic { aspect-ratio: 3 / 2; margin-top: var(--s-xl); }

/* The price panel: a still life leads it. */
.offer-pic { aspect-ratio: 16 / 9; border-radius: var(--r-control); }
.offer-pic img { object-position: 50% 60%; }
@media (min-width: 880px) {
  .offer-panel:has(> .offer-pic) { grid-template-columns: 220px minmax(0, 1.2fr) auto; gap: var(--s-2xl); }
  .offer-pic { aspect-ratio: 1; }
}