/* Publieke /links-overzicht ("handige links") — per categorie/subcategorie gegroepeerd, met een logo
   per link. Template-ONAFHANKELIJK: geladen door Views/Site/Shared/Links.cshtml voor elke template, dus
   uitsluitend de altijd-aanwezige --brand-* tokens (uit _SiteLayout), geen template-specifieke classes.
   Externe links openen in een nieuw tabblad; er is bewust geen detailpagina per link. */
.wf-linkdir { max-width: 1000px; margin: 0 auto; }
.wf-linkdir-cathead { font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--brand-ink, #232323); margin: 54px 0 4px; }
.wf-linkdir > .wf-linkdir-cathead:first-child { margin-top: 0; }
.wf-linkdir-catrule { display: inline-block; width: 46px; height: 3px; border-radius: 2px; background: var(--brand-secondary, #4b5563); margin-bottom: 20px; }
.wf-linkdir-subhead { font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-secondary-ink, #4b5563); margin: 26px 0 4px; }
.wf-linkdir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
/*  Scheidslijn en introtekst volgen de tekstkleur (currentColor) in plaats van een vaste zwarte/bruine
    waarde. In de donkere variant was een lijn van rgba(0,0,0,.1) op een bijna-zwarte pagina onzichtbaar. */
.wf-linkdir-row {
    display: flex; align-items: center; gap: 16px; padding: 16px 4px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    color: var(--dark-gray, #232323);
    transition: padding-left .2s ease, border-color .2s ease;
}
.wf-linkdir-row:hover { padding-left: 10px; border-color: color-mix(in srgb, var(--brand-secondary) 55%, transparent); }
/*  Logo's staan VRIJSTAAND op de pagina: geen wit plaatje, geen randje, geen schaduw eronder. Dat
    leest rustiger dan een raster van kaartjes en is ook in de donkere versie het mooiste. Valt een logo
    ergens echt weg tegen de achtergrond, geef dán pas dát ene logo een vlakje (zie --vlak hieronder) —
    niet allemaal. */
.wf-linkdir-logo { flex: none; width: 42px; height: 42px; object-fit: contain; object-position: center; }
.wf-linkdir-ico { flex: none; width: 42px; font-size: 22px; text-align: center; color: var(--brand-secondary-ink, #4b5563); }
/*  Logobaan in een groep waar minstens één link een logo heeft: één vast vak van ongeveer drie
    tekstregels hoog, voor élke rij even breed en even hoog. Het logo staat er optisch in het midden,
    dus een breed (horizontaal) logo vult de breedte en een vierkant of staand logo de hoogte — ze
    blijven onderling even groot en staan netjes onder elkaar. In een 42px-vakje las een horizontaal
    logo als een favicon. */
.wf-linkdir-grid--logo .wf-linkdir-logo {
    width: clamp(96px, 12vw, 130px); height: 64px; padding: 6px 8px;
}
.wf-linkdir-grid--logo .wf-linkdir-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(96px, 12vw, 130px); height: 64px;
}
/*  Noodgreep voor het uitzonderingsgeval: een logo dat zelf zo licht of zo donker is dat het tegen de
    achtergrond wegvalt. Staat klaar, maar wordt bewust nog nergens opgezet — er is geen veld in het CMS
    dat dit aangeeft en we gaan het niet raden. Zelfde afspraak als bty-lnk-logo--vlak in beauty1. */
.wf-linkdir-logo--vlak { background: rgba(255, 255, 255, .92); border-radius: 8px; padding: 6px 8px; }
.wf-linkdir-text { flex: 1; min-width: 0; }
.wf-linkdir-name { display: block; font-weight: 600; font-size: 16px; line-height: 1.35; overflow-wrap: break-word; }
.wf-linkdir-intro { display: block; font-size: 13px; line-height: 1.4; color: color-mix(in srgb, currentColor 68%, transparent); margin-top: 2px; }
.wf-linkdir-arrow { flex: none; font-size: 18px; opacity: .5; transition: transform .2s ease; }
.wf-linkdir-row:hover .wf-linkdir-arrow { transform: translateX(3px); }
/* ── Donkere versie: logo's in een wit kader ──────────────────────────────────
   Alleen onder [data-bs-theme="dark"], dus in de donkere template (of in de voorbeeldstand
   ?template=business1-dark). De lichte versie houdt de vrijstaande logo's uit de regel hierboven.

   Waarom hier wél een vlakje: de logo's van andere organisaties zijn vrijwel allemaal voor een WITTE
   ondergrond gemaakt — donkere letters, een donker woordmerk naast een gekleurd icoon. Op een diepe
   donkere pagina valt daar de helft van weg, en per logo een uitzondering maken (.wf-linkdir-logo--vlak)
   werkt niet zonder een veld in het CMS dat aangeeft welk logo dat nodig heeft. Eén wit kader voor
   allemaal leest dan rustiger dan een rij half onzichtbare logo's (keuze Jenny, 11-09-2026).

   Alle kaders even breed: dat was in de logobaan al zo, en de breedte staat hier ook op de logo's
   buiten die baan, zodat een groep zonder baan geen kadertjes van 42px oplevert. De hoogte gaat mee
   omhoog, want met ruime padding in een vak van 64px zou het logo zelf platgedrukt worden. */
[data-bs-theme="dark"] .wf-linkdir-logo {
    width: clamp(96px, 12vw, 130px);
    height: 76px;
    padding: 14px 16px;
    background: #fff;
    border-radius: var(--wf-radius-image, 10px);
}
[data-bs-theme="dark"] .wf-linkdir-grid--logo .wf-linkdir-ico { height: 76px; }

@media (max-width: 767px) { .wf-linkdir-grid { grid-template-columns: 1fr; } }
/*  Op een telefoon zou een logobaan van 96px te veel van de regel opeten; smaller mag, zolang alle
    logo's onderling even groot blijven. */
@media (max-width: 480px) {
    .wf-linkdir-grid--logo .wf-linkdir-logo,
    .wf-linkdir-grid--logo .wf-linkdir-ico { width: 76px; height: 46px; }
    .wf-linkdir-row { gap: 12px; }
    /*  Het witte kader krimpt mee. De padding gaat omlaag maar niet weg: zonder marge raakt een breed
        woordmerk de rand van zijn kader. */
    [data-bs-theme="dark"] .wf-linkdir-logo { width: 76px; height: 56px; padding: 8px 10px; }
    [data-bs-theme="dark"] .wf-linkdir-grid--logo .wf-linkdir-ico { height: 56px; }
}