/**
 * quick-link-tiles: de "Snel naar"-sectie op de homepage (Figma 4222:5).
 * Wordt via block.json conditioneel geladen.
 */

/*
 * De sectie. Vervangt de wp:group met tagName section en
 * blockGap var:preset|spacing|40 die hier eerst in het pattern stond; WordPress
 * genereert die layout-CSS alleen voor blokken die het zelf serialiseert, dus
 * het blok regelt de tussenruimte nu zelf.
 */
.quick-link-tiles-section {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

/*
 * De sectiekop komt uit acf-blocks/shared/section-head.css (handle
 * mijn-oosterparkwijk-section-head, via block.json). Die laag zet zelf
 * margin: 0 en text-transform: uppercase op de kop, dus daar is hier niets
 * meer voor nodig.
 *
 * Wel de margin-bottom terugzetten: de gedeelde laag zet spacing-50 onder de
 * kop, maar deze sectie is een flex-kolom die de tussenruimte al met gap
 * regelt (spacing-40 hierboven). Zonder deze regel telt de marge daarbovenop op.
 */
.quick-link-tiles-section .opw-section-head.opw-section-head {
    margin-bottom: 0;
}

/*
 * Het raster, de tegelbasis en de padding komen uit acf-blocks/shared/tile.css
 * (.opw-tile-grid, .opw-tile, .opw-tile--media), dat via block.json onder de
 * handle mijn-oosterparkwijk-tile meelaadt. Hieronder staat alleen wat van dit
 * blok zelf is.
 */

/*
 * De drie blokken worden over de tegelhoogte verdeeld, niet met een vaste gap
 * opgestapeld. Figma 4205:3478 zet ze op 40..88, 115..211 en 238..294 in een
 * contentbox van 254px: twee gelijke gaten van 27,15px, en dat is precies wat
 * space-between geeft. Met gap: 16px plus margin-top: auto op de knop klopten
 * kop en knop wel, maar begon de tekst 23px te hoog.
 *
 * Home-head verdeelt anders (gap: 10px met flex: 1 op de tekst); Figma schrijft
 * dat per blok anders voor, dus dat is bewust niet gelijkgetrokken.
 */
.quick-link-tiles__tile {
    justify-content: space-between;
}

/*
 * De tegelkop staat in acf-blocks/shared/tile.css onder .opw-tile-title, samen
 * met de kop van home-head. Daar staat ook waarom die regel een ouderselector
 * draagt: zonder kwalificatie kreeg de kop hier 40px marge uit de global styles
 * en liepen drie van de vier tegels over hun rijhoogte heen, waarvan een 35px.
 */

/* Tekstkolom smaller dan de tegel: Figma 283 in een contentbox van 321.
   Zelfde inspringing als in home-head. */
.quick-link-tiles__tile .quick-link-tiles__tile-text {
    margin: 0;
    padding-right: var(--wp--preset--spacing--60);
    line-height: 1.5;
}

/* De hoogte komt uit .opw-tile--media; hier alleen de figure-eigen reset.
   position: relative is het containing block voor de absoluut geplaatste
   afbeelding in de mediaquery hieronder. Deze figure draagt geen .opw-tile en
   krijgt het dus niet uit de gedeelde tegellaag, anders dan de fototegels van
   home-head. */
.quick-link-tiles__photo {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.quick-link-tiles__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Vanaf 1024px staat de afbeelding buiten de flow.
 *
 * In de flow lost height: 100% niet op - de figure heeft geen definitieve
 * hoogte - en valt de afbeelding terug op haar eigen verhouding. Die
 * intrinsieke hoogte wordt de contenthoogte van de figure en daarmee de
 * rijhoogte, en die rij deelt de fotocel vanaf 1024px met de tekst-tegels.
 * Gemeten op viewport 1600: grid-template-rows werd "334px 370.312px" in plaats
 * van tweemaal 334px, waarbij de twee tegels naast de brede foto meegroeiden.
 * Buiten de flow is de contenthoogte 0, valt de rij terug op de tegels ernaast
 * en rekt het raster de figure uit tot die rijhoogte.
 *
 * Bewust NIET onder 1024px. Daar staat de brede foto alleen in zijn rij, dus is
 * er geen buur die de hoogte pint en blijft alleen de min-height van
 * .opw-tile--media over. Gemeten op viewport 1000 zakt de cel dan van 476px naar
 * 320px: van een 2:1-uitsnede naar bijna 3:1. Die 320px is daar een bodem tegen
 * inklappende lege cellen, geen ontwerphoogte.
 */
@media (min-width: 1024px) {
    .quick-link-tiles__photo img {
        position: absolute;
        inset: 0;
    }
}

/*
 * De kinderwijkraad-CTA. #ffdcce is een eenmalige ontwerpkleur zonder preset in
 * theme.json (nagemeten tegen alle 28 palette-kleuren), vandaar de kale hex.
 * De class sticky-box is bewust niet overgenomen: die zet position: sticky met
 * een top-offset voor een zijbalk en kan in een gridcel met vaste rijhoogte
 * niets doen.
 */
/*
 * gap is spacing-50, niet de spacing-20 die als blockGap op de oude wp:group
 * stond. Die kop droeg namelijk een eigen inline margin van spacing-50 boven en
 * onder, en in een flow-layout wint zo'n eigen marge van de blockGap; de
 * werkelijke ruimte rond de kop was dus 2.25rem en niet 0.67rem. Met flex-gap
 * telt alleen de gap, dus die moet de grootste van de twee overnemen.
 *
 * De ouderselector staat erbij omdat deze cel ook quick-link-tiles__tile draagt,
 * en die zet justify-content: space-between. Beide zijn 0,1,0, dus zonder
 * kwalificatie zou alleen de volgorde in het bestand beslissen welke wint. De
 * comment noemde hier eerder de padding als reden, maar die staat sinds de
 * gedeelde tegellaag niet meer in deze regel.
 */
/* De CTA verdeelt anders dan de gewone tegels: Figma 4205:3520 zet de
   illustratie bovenaan, de kop 40px daaronder en de knop tegen de onderrand.
   Daarom geen space-between maar een gap plus een knop die naar beneden zakt. */
.quick-link-tiles .quick-link-tiles__cta {
    /* 24px: met 36 telt de inhoud op tot 281px in een contentbox van 262 en
       vreet de knop zijn eigen onderpadding op. */
    gap: var(--wp--preset--spacing--50);
    justify-content: flex-start;
    /* Geen eigen padding meer: de gedeelde tegelpadding geeft op desktop
       dezelfde 36px die hier stond, dus de regelval van "Wil jij meer weten
       over" blijft daar gelijk. Alleen op mobiel worden de zijkanten 20px, net
       als bij de andere tegels; gemeten op 385px verandert dat de kopregels
       noch de hoogte. */
    background-color: #ffdcce;
}

.quick-link-tiles__cta .wp-block-buttons {
    margin-top: auto;
}

.quick-link-tiles__cta .quick-link-tiles__cta-image {
    width: 100px;
    height: auto;
}

/*
 * De kop is een h3 geworden (koppenboom), maar moet er hetzelfde uitzien als de
 * h2 die er stond. Zonder deze twee regels pakt hij de element-styles uit
 * theme.json, en die verschillen per niveau: gemeten ging de kop van 23,2px/30,16
 * naar 21,6px/33,48 en de cel van 358,88px naar 368,81px hoog. 0,2,0 wint van de
 * element-selectors in de global styles.
 */
.quick-link-tiles__cta .quick-link-tiles__cta-title {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
    line-height: 1.3;
}

@media (min-width: 640px) {
    .quick-link-tiles__photo--wide {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    /*
     * Alleen de rijhoogte; de vier kolommen komen uit .opw-tile-grid.
     *
     * minmax en geen vaste 334px: vlak boven de 1024-grens zijn de vier kolommen
     * op hun smalst (gemeten 233px op een viewport van 1025) en past de tekst
     * niet in een vaste rij. Dat gebeurde al vóór de gedeelde tegellaag: twee
     * tegels liepen daar 23px over, onzichtbaar afgekapt door overflow: hidden.
     * Met minmax groeit de rij mee (gemeten 357px) en is er nergens overloop,
     * terwijl de rij op bredere schermen gewoon 334px blijft.
     */
    .quick-link-tiles {
        grid-auto-rows: minmax(334px, auto);
    }
}