/* =============================================================================
   Blok: losse knop(pen).

   Maten uit Figma (NVT61IBlNbt4LyTpo3CVlI):
     Onze winkel      één knop 276×44 op x=823 → gecentreerd (2330:4739)
     Openingstijden   twee knoppen 276×44 op x=301 en x=593 → links, 16px ertussen
     Ruilen           "Download retourformulier" 317×53 → breder label, zelfde knop

   De knop is minimaal 276 breed met 28px zijruimte; een label van 220px komt
   daarmee exact op 276 uit (2330:4739/4740) en een langer label groeit mee.
   Goud = #d3bb6c met Outfit Bold 16 wit uppercase.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Afstand tot de tekst.

   pages/page.css zet tussen twee opeenvolgende blokken 56px. Voor een knop die
   bij de tekst hoort is dat te veel — het ontwerp houdt daar ongeveer één lege
   tekstregel aan:

     Onze winkel   tekst 343…577 (2330:4730), knop op y=605 (2330:4739)  → 28px
     Ruilen        de knop (2217:7115, y=623…676) staat ín het tekstvak
                   2199:6873: de tekst boven hem eindigt op 595 en gaat op 699
                   verder → 28px erboven en 23px eronder

   Vandaar 28px boven en 23px onder, in plaats van 56 + 56. Deze regels staan in
   knop.css en dat bestand laadt alleen als er een knop-blok op de pagina staat;
   ze hebben dezelfde specificiteit als de 56px-regel maar laden later, dus
   winnen ze zonder !important.
   -------------------------------------------------------------------------- */

.hinke-block--tekst + .hinke-block--knop,
.hinke-block--tekst_media + .hinke-block--knop {
	padding-top: 28px;
}

.hinke-block--knop + .hinke-block--tekst {
	padding-top: 23px;
}

.hinke-knop__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.hinke-knop--midden .hinke-knop__rij {
	justify-content: center;
}

.hinke-knop--links .hinke-knop__rij {
	justify-content: flex-start;
}

/* -----------------------------------------------------------------------------
   Grote maat — alleen "Download retourformulier" op Ruilen & Retourneren.

   Het ontwerp maakt die knop 317×53 met een KLEINER label dan de andere knoppen:
   Outfit Bold 14px in plaats van 16 (knoprechthoek 2217:7115, label 2217:7116 van
   223×18 op x=848 binnen een knop die op x=801 begint → 47px zijruimte).

   De rekensom volgt de basisknop in layout.css, die zijn maat opbouwt uit padding
   + regelhoogte + 1px rand:
     hoogte  16,5 + 18 + 16,5 + 2 = 53
     breedte 46 + 223 + 46 + 2 = 317
   Daarom een aparte maat en geen vaste width/height: bij een langer label groeit
   de knop mee in plaats van de tekst af te kappen.
   -------------------------------------------------------------------------- */

.hinke-knop--groot .hinke-blkbtn {
	min-width: 317px;
	padding: 16.5px 46px;
	font-size: 14px;
	line-height: 18px;
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

/* Onder 900px maakt layout.css elke .hinke-blkbtn 100% breed; de grote maat volgt
   dat, anders zou hij met zijn min-width van 317px op een 360-scherm (312px
   kolom) net niet passen. Gemeten @360 op Ruilen & Retourneren: 312×53, dus ruim
   boven de 44px die een aanraakdoel nodig heeft (WCAG 2.5.8), en @360 op Onze
   winkel: 312×44 voor de normale maat — precies de ondergrens. De zijruimte gaat
   van 46 naar 24px omdat 2×46 van de 312px kolom te weinig overlaat voor het
   label "Download retourformulier". */
@media (max-width: 900px) {
	.hinke-knop--groot .hinke-blkbtn {
		min-width: 0;
		width: 100%;
		padding: 16.5px 24px;
	}
}