/* ==================================================
   LEKKER KIPPETJE — CONTENT COMPONENTS
   Hub-, kennisartikel- en affiliatecomponenten (zie
   docs/FRONTEND-CONTENT-TEMPLATES.md). Losstaand van design-system.css
   (dat blijft globale tokens/lay-out) — hergebruikt uitsluitend de daar
   gedefinieerde --lk-*-tokens, geen nieuwe kleuren/radius/schaduwen.
================================================== */


/* ==================================================
   1. AFFILIATE — INLINE RECOMMENDATION
================================================== */

.lk-affiliate-inline {
    max-width: 850px;
    margin: var(--lk-space-l) auto;
    padding: var(--lk-space-s) var(--lk-space-m);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-space-s);
    background: var(--lk-section-bg);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius-small);
    font-size: 15px;
}

.lk-affiliate-inline__label {
    color: var(--lk-red);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.lk-affiliate-inline__name {
    color: var(--lk-text);
    font-weight: 600;
}

.lk-affiliate-inline__link {
    margin-left: auto;
    min-height: 36px;
    padding: 6px 14px;
    font-size: 13px;
}

.lk-affiliate-inline__link--inactive {
    color: var(--lk-text-light);
    font-style: italic;
}


/* ==================================================
   2-3. AFFILIATE — PRODUCT CARD & PRODUCT GROUP
   ("Handig voor dit recept")
================================================== */

.lk-affiliate-group {
    max-width: 1160px;
    margin: var(--lk-space-xl) auto 0;
    padding: 0 24px;
}

.lk-affiliate-group__title {
    margin: 0 0 var(--lk-space-m);
    color: var(--lk-text);
    font-size: 18px;
    font-weight: 700;
}

.lk-affiliate-group__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--lk-space-m);
}

.lk-affiliate-card {
    display: flex;
    flex-direction: column;
    background: var(--lk-card-bg);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius-card);
    box-shadow: var(--lk-shadow-small);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lk-affiliate-card:hover {
    box-shadow: var(--lk-shadow-hover);
    transform: translateY(-2px);
}

.lk-affiliate-card__image {
    aspect-ratio: 1 / 1;
    background: var(--lk-section-bg);
}

.lk-affiliate-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lk-affiliate-card__body {
    padding: var(--lk-space-m);
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-s);
    flex: 1;
}

.lk-affiliate-card__merchant {
    margin: 0;
    color: var(--lk-text-light);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lk-affiliate-card__name {
    margin: 0;
    color: var(--lk-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.lk-affiliate-card__context {
    margin: 0;
    color: var(--lk-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.lk-affiliate-card__price {
    margin: 0;
    color: var(--lk-text);
    font-size: 15px;
    font-weight: 700;
}

.lk-affiliate-card__cta {
    margin-top: auto;
    width: 100%;
    font-size: 14px;
}


/* ==================================================
   4. GERELATEERDE KENNIS ("Meer over kip")
   Bewust rustiger dan de Recipe Cards — geen afbeeldingen/schaduwen,
   een simpele, toegankelijke lijst.
================================================== */

.lk-related-knowledge {
    max-width: 850px;
    margin: var(--lk-space-xl) auto 0;
    padding: var(--lk-space-l);
    background: var(--lk-section-bg);
    border: 1px solid var(--lk-border-light);
    border-radius: var(--lk-radius-small);
}

.lk-related-knowledge__title {
    margin: 0 0 var(--lk-space-s);
    color: var(--lk-text);
    font-size: 15px;
    font-weight: 700;
}

.lk-related-knowledge__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--lk-space-xs);
}

.lk-related-knowledge__link {
    display: inline-flex;
    align-items: center;
    gap: var(--lk-space-xs);
    min-height: 32px;
    color: var(--lk-text-muted);
    font-size: 15px;
    text-decoration: none;
}

.lk-related-knowledge__link:hover {
    color: var(--lk-red);
    text-decoration: underline;
}

.lk-related-knowledge__arrow {
    color: var(--lk-red);
}


/* ==================================================
   5. FAQ (SEO Hub- en kennisartikeltemplate)
   Native <details>/<summary> — geen eigen JavaScript nodig, toegankelijk
   via toetsenbord/screenreader by design.
================================================== */

.lk-faq {
    max-width: 850px;
    margin: var(--lk-space-xl) auto 0;
    padding: 0 24px;
}

.lk-faq__item {
    border-bottom: 1px solid var(--lk-border-light);
    padding: var(--lk-space-m) 0;
}

.lk-faq__item:first-child {
    border-top: 1px solid var(--lk-border-light);
}

.lk-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lk-space-m);
    color: var(--lk-text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    min-height: 32px;
}

.lk-faq__question::-webkit-details-marker {
    display: none;
}

.lk-faq__question::after {
    content: "+";
    flex-shrink: 0;
    color: var(--lk-red);
    font-size: 20px;
    font-weight: 400;
    transition: transform 0.2s ease;
}

.lk-faq__item[open] .lk-faq__question::after {
    transform: rotate(45deg);
}

.lk-faq__answer {
    margin-top: var(--lk-space-s);
    color: var(--lk-text-muted);
    font-size: 15px;
    line-height: 1.7;
}


/* ==================================================
   6. SEO HUB TEMPLATE
================================================== */

/* Ruimte onderaan vóór de footer — een hub-pagina is een gewone WordPress
   'page', dus zonder reacties/vorig-volgend-navigatie (die op de
   receptpagina de ruimte tussen .entry-content en de footer vullen). Zonder
   deze regel raakt de laatste kaart de footer letterlijk (0px). Bestond al
   vóór de Recipe Pattern Architecture v1-conversie (ook aanwezig op de
   nog-niet-geconverteerde Pad A-hub-pagina's) — hier voor het eerst
   opgemerkt en centraal gefixt, geldt daardoor voor alle hub-pagina's. */
.lk-hub-page {
    display: block;
    padding-bottom: var(--lk-space-3xl, 64px);
}

/* Sectietitel-component (rode lijnen + koksmuts-icoon) — hergebruikt voor
   ALLE sectietitels op de hub-pagina: de paginatitel zelf (bv. "Kip uit de
   airfryer"), "Meer over kip" en "Andere kiprecepten-hubs". Layout/
   typografie/lijnkleur komt uit de gedeelde ".lk-section-heading-pattern"-
   basis in design-system.css (zelfde bron als single-recipe/homepage/
   archief — vóór de opschoning had elke context zijn EIGEN kopie, wat
   precies de "zelfde pattern, ander resultaat"-inconsistentie veroorzaakte).
   Breedte 1200px — bewust NIET meer 850px: op de receptpagina delen alle
   sectietitels ook één breedte, ongeacht de (soms smallere) kaart die
   eronder volgt.

   .lk-archive-page (de /recepten/-wrapper, includes/single-post-blocks.php)
   deelt dezelfde regels: het is dezelfde "derde tak" van de Recipe Pattern
   Architecture als hub/kennisartikel, met exact dezelfde sectietitel-
   component (zoekbalk direct gevolgd door de H1 "RECEPTEN") — geen eigen
   kopie van deze waarden nodig. Zonder deze regel viel de titel terug op de
   kale basis (geen max-width, geen title-font-size), zichtbaar als een veel
   te brede rode lijn en een veel te grote titel. */
.lk-hub-page .lk-section-heading-pattern,
.lk-archive-page .lk-section-heading-pattern {
    max-width: 1200px;
    margin: var(--lk-space-xl) auto 0;
    padding: 0 24px;
}

/* De paginatitel zelf (het eerste Section Header-blok) volgt direct op de
   zoekband (lekkerkippetje/recipe-search met modifier "lk-single-recipe__
   search-band") en hoort daardoor dezelfde 18px te hebben als de zoekband
   se eigen "margin-bottom: 18px" (design-system.css, "Archive Header
   Pattern") i.p.v. de standaard 32px hierboven — puur structureel
   geselecteerd (volgt direct op .lk-archive-header-pattern), geen nieuwe
   class/modifier nodig. */
.lk-hub-page > .lk-archive-header-pattern + .lk-section-heading-pattern,
.lk-archive-page > .lk-archive-header-pattern + .lk-section-heading-pattern {
    margin-top: 18px;
}

.lk-hub-page .lk-section-heading-pattern__title,
.lk-archive-page .lk-section-heading-pattern__title {
    font-size: 30px;
}

@media (max-width: 767px) {
    .lk-hub-page .lk-section-heading-pattern__title,
    .lk-archive-page .lk-section-heading-pattern__title {
        font-size: 23px;
    }
}

.lk-hub-header {
    max-width: 850px;
    margin: var(--lk-space-l) auto 0;
    padding: 0 24px;
    text-align: center;
}

/* Zelfde typografie als de bestaande receptpaginatitel (.lk-recipe-post-
   title) — geen losse H1-stijl per templatetype. */
.lk-hub-title {
    margin: 0 0 var(--lk-space-s);
    font-family: "Inter", sans-serif;
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--lk-text);
}

.lk-hub-intro {
    color: var(--lk-text-muted);
    font-size: 17px;
    line-height: 1.7;
}

.lk-hub-intro p {
    margin: 0;
}

/* Breedte bewust NIET 1200px (dat is het "gerelateerde recepten"-patroon,
   .lk-related-recipes__grid) — een hub heeft geen filter-sidebar, dus zou
   op 1200px merkbaar bredere kaarten geven dan /recepten/. Deze waarde
   (1280px .lk-filter-query-pattern min 215px sidebar min 26px gap) maakt
   de kaartbreedte gelijk aan de daadwerkelijke Recipe Grid op /recepten/
   — zie docs/PATTERN-LIBRARY.md, "Recipe Grid harde standaard": kaarten
   moeten pixel-voor-pixel overeenkomen met de referentiepagina.
   !important is hier verplicht: dit element draagt ook de .lk-query-loop-
   class (design-system.css: ".lk-query-loop { max-width:none !important;
   width:100% !important }" — bewust zo, want .lk-query-loop moet normaal
   altijd de volle breedte van zijn EIGEN ouder vullen). Zonder !important
   wint die regel altijd, ongeacht bestandsvolgorde, en bleven de kaarten
   pagina-breed. Zelfde reden waarom .lk-related-recipes__grid hieronder
   ook !important gebruikt — zie design-system.css bij die regel. */
/* .lk-hub-grid.lk-query-loop (i.p.v. kaal .lk-hub-grid): sinds de Recipe
   Pattern Architecture v1-conversie is dit een echt native Query Loop-blok
   en draagt het element dus ook de class .wp-block-query. design-system.css
   se gedeelde ".lk-query-loop, .lk-query-loop.wp-block-query"-regel (zelfde
   !important-reden als hierboven) wint dan van een kale .lk-hub-grid
   (specificiteit 0,1,0 vs 0,2,0) — vandaar hier ook de samengestelde
   selector, exact dezelfde aanpak als de kaart-grid-regel hieronder. */
.lk-hub-grid.lk-query-loop {
    max-width: 1039px !important;
    margin: var(--lk-space-l) auto 0 !important;
    padding: 0 24px !important;
    box-sizing: border-box;
}

/* Defensieve, extra-specifieke herhaling van de gedeelde Recipe Grid-regel
   (design-system.css, ".lk-query-loop .lk-recipe-grid") specifiek voor de
   hub-context — geen nieuwe gridwaarden, puur ter voorkoming van elke
   twijfel over cascade-volgorde tussen design-system.css en
   content-components.css. */
.lk-hub-grid.lk-query-loop .lk-recipe-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

@media (max-width: 1100px) {
    .lk-hub-grid.lk-query-loop .lk-recipe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .lk-hub-grid.lk-query-loop .lk-recipe-grid {
        grid-template-columns: 1fr !important;
    }
}

.lk-hub-body {
    max-width: 850px;
    margin: var(--lk-space-xl) auto 0;
    padding: 0 24px;
    color: var(--lk-text-muted);
    font-size: 16px;
    line-height: 1.7;
}


/* ==================================================
   7. KENNISARTIKELTEMPLATE
================================================== */

/* Ruimte onderaan vóór de footer — zelfde reden als .lk-hub-page hierboven
   (SEO Hub Template): een kennisartikel is ook een gewone WordPress 'page'
   zonder reacties/vorig-volgend-navigatie, dus zonder deze regel raakt het
   laatste blok ("Meer over kip") de footer letterlijk (0px). */
.lk-knowledge-page {
    display: block;
    padding-bottom: var(--lk-space-3xl, 64px);
}

/* Zelfde typografie als de bestaande receptpaginatitel (.lk-recipe-post-
   title) — geen losse H1-stijl per templatetype. */
.lk-knowledge-title {
    max-width: 850px;
    margin: var(--lk-space-l) auto 0;
    padding: 0 24px;
    font-family: "Inter", sans-serif;
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--lk-text);
}

.lk-knowledge-intro {
    max-width: 850px;
    margin: var(--lk-space-s) auto 0;
    padding: 0 24px;
    color: var(--lk-text-muted);
    font-size: 17px;
    line-height: 1.7;
}

.lk-knowledge-intro p {
    margin: 0;
}

/* "Direct antwoord" — bewust visueel duidelijk anders dan gewone
   artikeltekst (opdracht: "geef het belangrijkste antwoord vroeg op de
   pagina"), maar met bestaande kleuren/radius, geen nieuwe stijl. */
.lk-knowledge-answer {
    max-width: 850px;
    margin: var(--lk-space-l) auto 0;
    padding: var(--lk-space-l);
    background: var(--lk-red-light);
    border-left: 4px solid var(--lk-red);
    border-radius: var(--lk-radius-small);
}

.lk-knowledge-answer__label {
    margin: 0 0 4px;
    color: var(--lk-red-dark, var(--lk-red));
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lk-knowledge-answer__text {
    margin: 0;
    color: var(--lk-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
}

.lk-knowledge-body {
    max-width: 850px;
    margin: var(--lk-space-xl) auto 0;
    padding: 0 24px;
    color: var(--lk-text-muted);
    font-size: 16px;
    line-height: 1.7;
}

.lk-knowledge-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.lk-knowledge-body table th,
.lk-knowledge-body table td {
    padding: var(--lk-space-s);
    border: 1px solid var(--lk-border);
    text-align: left;
}

.lk-knowledge-body table th {
    background: var(--lk-section-bg);
    color: var(--lk-text);
}

.lk-knowledge-related-recipes {
    margin-top: var(--lk-space-2xl);
}


/* ==================================================
   8. KOOKTIP-KAART (Kooktips-artikeloverzicht)
   Zelfde .lk-recipe-card-basis als de Recipe Grid (design-system.css
   §14-17: image/title/content/button) — hier alleen wat kennisartikelen
   ECHT anders nodig hebben: een korte excerpt i.p.v. de recept-specifieke
   kooktijd/rating-meta (§18-20), en een merkbadge-placeholder voor
   kooktips zonder featured image (i.p.v. een lege/kapotte beeldruimte).
================================================== */

.lk-query-loop .lk-recipe-card__image--placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--lk-section-bg) !important;
}

.lk-query-loop .lk-recipe-card__excerpt {
    display: -webkit-box;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--lk-text-muted);
    font-size: 14px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


/* ==================================================
   9. RESPONSIVE — mobiel (zelfde breekpunten als design-system.css)
================================================== */

@media (max-width: 767px) {
    .lk-hub-title {
        font-size: 26px;
    }

    .lk-knowledge-title {
        font-size: 24px;
    }

    .lk-affiliate-group__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lk-affiliate-inline__link {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .lk-affiliate-group__cards {
        grid-template-columns: 1fr;
    }
}