/*
 * Ruijs Reset, pagina Downloads (slug downloads).
 *
 * De berichten als kaarten (template-parts/recepten/kaarten.php, gedeeld met de
 * pagina recepten). De kaart zelf is de gedeelde tegel uit base.css; hier staan
 * alleen de ruimte, het raster, de illustratie zonder foto en de labels (concept, PDF). Staat ook in
 * page-recepten.css; houd ze gelijk.
 */

/* de hero heeft zijn eigen ruimte onder, de kaarten sluiten daarop aan */
.rr-kaarten{padding-top:0}

@media (min-width:1000px){
  .rr-kaarten__lijst{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.rr-kaart .rr-tegel__titel{font:400 clamp(24px,2.2vw,30px)/1.1 var(--rr-serif);letter-spacing:-.025em}
.rr-kaart__concept,.rr-kaart__chip{align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--rr-boter);font-size:13px;font-weight:600;letter-spacing:.02em}
.rr-kaart__chip{background:var(--rr-pagina);box-shadow:inset 0 0 0 1px var(--rr-lijn)}
.rr-kaart .rr-tegel__beeld--illustratie img{padding:16%}

/* op de telefoon vult de boogfoto anders het hele eerste scherm */
@media (max-width:759px){
  .rr-hero__foto img{aspect-ratio:4/3;object-position:50% 0} /* bijsnijden vanaf de bovenkant: het hoofd blijft in beeld */
}

/*
 * Het filter op soort download (Handige informatie, Zelfstudie). Zelfde vorm als het filter
 * op soort maaltijd in page-recepten.css; houd ze gelijk.
 */

/* filter: een rij tekstlinks tussen twee lijnen, de actieve met een groene streep op de onderlijn */
.rr-soorten{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rr-lijn);border-bottom:1px solid var(--rr-lijn);margin-bottom:clamp(28px,min(4vw,5vh),48px)}
.rr-soorten__label{padding-top:14px;font:300 italic 20px/1.2 var(--rr-serif);letter-spacing:-.01em}
.rr-soorten__lijst{display:flex;gap:0 24px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rr-soorten__lijst::-webkit-scrollbar{display:none}
.rr-soorten__lijst li{display:flex;flex:none}
.rr-soorten__link{position:relative;display:inline-flex;align-items:center;min-height:52px;font:600 16px/1.2 var(--rr-sans);color:rgba(14,42,27,.72);text-decoration:none;transition:color .15s linear}
.rr-soorten__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--rr-groen);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--rr-ease-koers),background-color .2s}
.rr-soorten__link[aria-current]{color:var(--rr-inkt)}
.rr-soorten__link[aria-current]::after{transform:none}
@media (min-width:640px){
  .rr-soorten{display:flex;align-items:stretch;gap:0 28px}
  .rr-soorten__label{display:flex;align-items:center;padding:0 28px 0 0;border-right:1px solid var(--rr-lijn);font-size:22px}
  .rr-soorten__lijst{flex-wrap:wrap;gap:0 28px;overflow:visible}
  .rr-soorten__link{min-height:60px}
}
@media (hover:hover) and (pointer:fine){
  .rr-soorten__link:hover{color:var(--rr-inkt)}
  .rr-soorten__link:not([aria-current]):hover::after{transform:none;background:var(--rr-muur)}
}

.rr-kaarten__geen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-bottom:24px}