/* ============================================================
   verhuur.css — /verhuur/

   De tenten komen uit de verhuur-collectie en worden door
   cms-collections.js gerenderd in de feature-layout: beeld en tekst
   afwisselend links en rechts. Die basis staat in components.css.
   ============================================================ */

/* ── Het label boven de titel ──
   Er wordt vaak gevraagd of de lokalen te huur zijn. Dat staat hier bovenaan,
   als een speels stickertje in de huisstijl: een zacht geel vlak dat licht
   scheef hangt, met het doorstreepte-lokaal-icoon, de kern in het scoutsletter
   en de nuance eronder in het handgeschreven font. */
.band__head .verhuur-label {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    margin: 0 auto 1.2rem;
    padding: .6rem 1.4rem .7rem;
    background: var(--accent-soft);
    border-radius: 22px;
    transform: rotate(-1.5deg);
    text-align: left;
}

.verhuur-label__ico {
    width: 2.2rem;
    height: 2.2rem;
    flex: none;
    background-color: var(--brand-dark);
    -webkit-mask: var(--ico-geen-lokaal) center / contain no-repeat;
    mask: var(--ico-geen-lokaal) center / contain no-repeat;
}

.verhuur-label__tekst {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.verhuur-label__groot {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-0);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.verhuur-label__klein {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--brand);
}

.verhuurlijst { max-width: 900px; margin: 0 auto; }

/* Kaarten naast elkaar, elk met een foto van de tent zelf. */
.verhuurlijst .cms-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap);
}

.verhuurlijst .cms-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--bg-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Vast kader van 4:3, zodat acht kiekjes van acht verschillende
   telefoons toch een rustig raster geven.

   De foto staat absoluut: als flex-item bepaalt hij anders via
   min-height:auto zelf de hoogte van het kader, en dan rekt een
   staande foto het 4:3-kader alsnog uit. */
.verhuurlijst .cms-item__media {
    position: relative;
    flex: none;
    margin: 0;
    aspect-ratio: 4 / 3;
    min-height: 0;
    overflow: hidden;
    background: var(--brand-soft);
}

.verhuurlijst .cms-item__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.verhuurlijst .cms-item__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: .35rem;
    padding: 1.3rem 1.4rem;
}

.verhuurlijst .cms-item__title {
    margin: 0;
    font-size: var(--step-1);
    color: var(--ink);
    line-height: 1.2;
}

/* De prijs zoals de groep hem zelf formuleert. */
.verhuurlijst .cms-item__price {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--brand-dark);
}

.verhuurlijst .cms-item__summary { margin: 0; color: var(--body); }

/* De reserveer-knop onderaan elke tent-kaart (via verhuur.js toegevoegd).

   margin-top: auto duwt hem naar de ONDERKANT van de kaart, en niet gewoon
   onder de tekst. Dat scheelt: "16 meter tent" past op één regel en "Groen
   oranje spantent" niet, en dan stond de ene knop achtentwintig pixels lager
   dan zijn buurman terwijl de kaarten even hoog zijn. In een raster is dat het
   eerste wat je ziet.

   De marge eronder houdt hem los van de tekst als de kaart toevallig krap is. */
.verhuur-reserveer {
    align-self: flex-start;
    margin-top: auto;
    padding-top: .8rem;
}

.verhuur__leeg {
    max-width: 46ch;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--muted);
}

/* ── Hoe reserveren ── */
.verhuur__uitleg { max-width: 46rem; margin: 0 auto; }

.verhuur__stappen {
    list-style: none;
    counter-reset: stap;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin: 0 0 1.4rem;
    padding: 0;
}

.verhuur__stappen li {
    counter-increment: stap;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    background: var(--bg);
    border-radius: var(--radius);
    padding: 1rem 1.3rem;
}

/* Genummerde bol in plaats van een opsommingsteken: bij een stappenplan
   wil je zien hoeveel stappen er zijn en waar je bent. */
.verhuur__stappen li::before {
    content: counter(stap);
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--brand-deep);
    font-family: var(--font-display);
    font-weight: 600;
}

.verhuur__voorwaarden {
    max-width: var(--measure);
    margin: 0 auto 1.4rem;
    text-align: center;
    color: var(--muted);
    font-size: .95rem;
}