/* Foodnu — beeldblok op de landingspagina's.
 *
 * Twee smaken, omdat het bronmateriaal twee vormen heeft:
 *   .telefoon  een schermafdruk van 390x844 — die tonen we heel, op ware
 *              grootte, anders wordt hij uitvergroot en dus wazig.
 *   .breed     een liggende afdruk — die snijden we aan tot een detail dat
 *              rechts uit het paneel loopt, zoals op de homepage.
 */
.lp-beeld { padding-block: var(--section, clamp(72px, 9vw, 128px)); }
.lp-beeld .wrap { display: grid; gap: clamp(20px, 3vw, 44px); align-items: center; }
.lp-beeld .bijschrift { font-size: 16.5px; color: var(--ink-soft); line-height: 1.62; margin: 0; }
.lp-beeld .bijschrift b { color: var(--aubergine); font-weight: 700; display: block; margin-bottom: 6px; font-size: 19px; }

/* Liggend: detail dat rechts doorloopt. */
.lp-beeld.breed .paneel {
  border-radius: var(--r-l) 0 0 var(--r-l);
  overflow: hidden;
  border: 1px solid var(--hair);
  border-right: none;
  box-shadow: 0 24px 60px -28px rgba(28, 16, 24, .45);
  aspect-ratio: 16 / 9;
  margin-right: calc(-1 * clamp(20px, 5vw, 40px));
}
.lp-beeld.breed .paneel img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top left;
}

/* Kaart: een bijgesneden stuk scherm, helemaal in beeld. Geen vaste
   verhouding, want de uitsnede bepaalt zelf hoe hoog hij is. */
.lp-beeld.kaart .paneel {
  border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--hair);
  box-shadow: 0 24px 60px -30px rgba(28, 16, 24, .4);
  background: var(--white);
}
.lp-beeld.kaart .paneel img { width: 100%; height: auto; display: block; }

/* Telefoon: heel, gecentreerd, niet opgerekt. */
.lp-beeld.telefoon .paneel {
  max-width: 330px; margin-inline: auto;
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--hair);
  box-shadow: 0 30px 70px -30px rgba(28, 16, 24, .5);
  background: var(--white);
}
.lp-beeld.telefoon .paneel img { width: 100%; height: auto; display: block; }

@media (min-width: 861px) {
  .lp-beeld .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .lp-beeld.telefoon .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); }
  .lp-beeld.kaart .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); }
}