/* Pagina-eigen regels van de demosalon. Al het andere komt uit assets/system.css. */

/* Prijslijst: het groepslabel staat los boven zijn rijen, de toelichting is grijs en even groot.
   De foto ernaast is even hoog als de drie groepen. */
.price-group > .t-label { margin-bottom: var(--s-3); }
.price-group .rows > li > p { color: var(--muted); }
.price-grid { align-items: stretch; }
.price-photo { margin: 0; min-height: 320px; }

/* Resultaten: drie foto's van verschillende breedte, even hoog, op één rij. */
.results-row > .frame { margin: 0; height: 480px; }

/* Afspraak: links de vraag met een foto, rechts het formulier op een wit vlak met daaronder
   adres en openingstijden. */
.booking__text .section-head { margin-bottom: var(--s-6); }
.booking__photo { margin: 0; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; }
.booking__photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.booking__side { display: grid; gap: var(--s-6); align-content: start; }
.booking__form { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-7); }
.booking__facts { display: grid; gap: var(--s-5); }
.booking__facts > div { display: grid; gap: var(--s-2); align-content: start; }
.booking__facts address { font-style: normal; }

/* Smalle laptop en tablet: twee prijsgroepen naast elkaar, de foto vult de vierde plek. */
@media (min-width: 640px) and (max-width: 1279px) {
    #prijzen { --h: 2 !important; }
    .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); }
    .price-grid > * { grid-column: auto; }
}

/* Tablet: de prijslijst past op één scherm (naam en prijs, twee groepen naast elkaar); het
   formulier staat open op de grond, zodat de velden op de lijnen van de pagina beginnen en
   eindigen, met adres en openingstijden eronder naast elkaar. */
@media (min-width: 640px) and (max-width: 1023px) {
    #prijzen { --h: 1 !important; }
    .price-grid { row-gap: var(--s-6); }
    .price-group .rows > li { padding-block: var(--s-3); }
    .price-group .rows > li > p { display: none; }
    .booking__photo { aspect-ratio: 4 / 1; }
    .booking__reply { display: none; }
    .booking__form .form { column-gap: var(--s-5); }
    .booking__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
    .results-row > .span-5 { grid-column: span 5; }
    .results-row > .span-4 { grid-column: span 4; }
    .results-row > .span-3 { grid-column: span 3; }
    .results-row > .frame { height: min(640px, 56svh); }
    #werkwijze .mo-pc__visual > img { max-height: 18svh; }
    .footer__hours { display: none; }
}

@media (max-width: 1023px) {
    .booking__form { background: none; border-radius: 0; padding: 0; }
}

/* Telefoon: de prijslijst toont naam en prijs; foto's staan onder de tekst. */
@media (max-width: 639px) {
    .price-group .rows > li > p { display: none; }
    .price-group .rows > li { padding-block: var(--s-3); }
    .price-photo { min-height: 0; aspect-ratio: 6 / 5; }
    #behandelingen .section-head p { display: none; }
    #behandelingen .grid.fill { flex: none; }
    #behandelingen .frame--photo { height: auto; aspect-ratio: 2 / 1; }
    #werkwijze { min-height: 200lvh; }
    #werkwijze .mo-pc__visual > img { aspect-ratio: 1 / 1; max-height: none; }
    .results-row > .frame { height: 420px; }
    .booking__photo { aspect-ratio: 5 / 8; }
    .footer__hours { display: none; }
}