/* traint.me — layout-integratie van het badge/hero-systeem in EduBlink-templates.
   Alle visuele tokens, basis-classes en kleuren staan in tm-hero.css; hier
   alleen positie/marges binnen de bestaande EduBlink-structuur. */

/* Badges-rij: niveau + label met ruimte rond de titel */
.tm-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
}

/* Card: hero overneemt nu de plek van de oude .thumbnail <img>.
   Hero zelf krijgt 12px radius (alle 4 hoeken), past binnen de card-container
   die ook 12px radius + overflow:hidden heeft. Zo zien de hero's er overal
   hetzelfde uit (homepage, archive, bedankpagina). */
.edublink-single-course .thumbnail {
    position: relative;
    overflow: hidden;
}
.edublink-single-course .thumbnail .tm-hero {
    border-radius: 12px;
    aspect-ratio: 2 / 1;
}

/* SVG-illustratie iets inkorten zodat hij niet onder de "1 dag" duur-badge
   loopt (badge zit op top:12px, ~22px hoog). Padding-top op het rechter
   paneel maakt ruimte; SVG schaalt automatisch naar de overgebleven hoogte
   omdat hij preserveAspectRatio="meet" is. */
.edublink-single-course .tm-hero .tm-hero__right {
    padding-top: 26px;
}

/* Card-titel zwaarder zetten — EduBlink default is 600/700, design vraagt
   800 voor extra accent. */
.edublink-single-course .content > h6,
.edublink-single-course .content > h6 a,
.edublink-single-course .course-hover-content .content > h6,
.edublink-single-course .course-hover-content .content > h6 a {
    font-weight: 800;
}

/* === Card-achtergrond + frame: overal wit, met zachte schaduw + radius ===
   EduBlink zet `.edublink-single-course.course-style-1 .inner .content` op
   --edublink-color-lighten04 (crème). Wij willen overal — archive, related,
   homepage — een witte cardbody met dezelfde zachte schaduw en afgeronde
   hoeken. Padding wordt los geschaald, alleen op archive + related, zodat
   de homepage-cards niet groter worden.
   Selector-specificiteit matcht parent zodat geen !important nodig is. */
.edublink-single-course {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.edublink-single-course.course-style-1 .inner .content,
.edublink-single-course .inner > .content {
    background: #ffffff;
}

/* === Categorie- en archive-pagina's ===
   Zelfde "Populaire trainingen"-look als de homepage: zachte grijze
   achtergrond rand-tot-rand, witte cards met schaduw en afgeronde hoeken.
   Body krijgt de grijze achtergrond; de breadcrumb-area
   (.edublink-page-title-area, eigen #fff6f6) en de footer behouden hun
   eigen kleur. */
body.post-type-archive-lp_course,
body.tax-course_category {
    background: #f0f4f5;
}
body.post-type-archive-lp_course #content.site-content,
body.tax-course_category #content.site-content {
    background: #f0f4f5;
}
body.post-type-archive-lp_course .site-content-inner,
body.tax-course_category .site-content-inner {
    padding-top: 56px;
    padding-bottom: 56px;
}
body.post-type-archive-lp_course .edublink-single-course .inner > .content,
body.tax-course_category .edublink-single-course .inner > .content,
.tm-related .edublink-single-course .inner > .content {
    padding: 18px 20px 22px;
}

/* === Gelijke card-hoogte ===
   Cards in een rij krijgen dezelfde hoogte zodat een kortere card niet
   "stops half" is. Reserveer ruimte voor:
     - tm-badges-row van 2 regels (bv "Beginner" + "Nieuwe methode 2026")
     - titel van 2 regels
   Meta-rij wordt met margin-top:auto naar de onderkant geduwd. */
.edublink-single-course {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.edublink-single-course .inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.edublink-single-course .content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Badges-rij: reserveer ruimte voor 2 regels (Project heeft "Beginner" +
   "Nieuwe methode 2026" die wrappen). Bij 1 regel staan ze bovenaan. Dit
   maakt de cards intrinsiek gelijk hoog, ook als grid niet stretcht. */
.edublink-single-course .content > .tm-badges-row {
    min-height: 52px;
    align-content: flex-start;
}
/* Titel: vaste ruimte voor 2 regels — 1-regel-titels reserveren dezelfde
   hoogte zodat alle cards intrinsiek gelijk uitkomen. 3em past 2 regels
   bij line-height 1.5 (EduBlink h6 default). */
.edublink-single-course .content > h6 {
    min-height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.edublink-single-course .content > h6 a {
    display: inline;
}
/* Meta-rij plakt aan onderkant van de card */
.edublink-single-course .content > .course-meta {
    margin-top: auto;
}

/* Prijs: bedrag in hero-kleur, suffix (p.p./p.d.) zwart en in dezelfde
   stijl als de meta-rij (Max 10 / Certificaat). Card heeft `--tm-color`
   inline ge-injecteerd; valt anders terug op EduBlink-oranje. */
.edublink-single-course .course-price .tm-price__amount {
    color: var(--tm-color, var(--edublink-color-secondary));
    font-weight: 700;
}
.edublink-single-course .course-price .tm-price__suffix {
    color: var(--edublink-color-heading, #1a1a1a);
    font-weight: 500;
    font-size: 0.85em;
}

/* In de hover-state (paarse achtergrond) moeten prijs-bedrag én suffix
   wit zijn — anders onleesbaar op het paars. */
.edublink-single-course .course-hover-content .course-price .tm-price__amount,
.edublink-single-course .course-hover-content .course-price .tm-price__suffix {
    color: #fff;
}

/* Meta-row icons (Max 10 / Certificaat) ook wit in hover-state — anders
   blijven ze in hun teal/oranje duotone-kleuren steken op het paars. */
.edublink-single-course .course-hover-content .course-meta .tm-ico {
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
    --fa-secondary-opacity: 0.7;
}

/* EduBlink legt een rgba(0,0,0,.2) overlay op .thumbnail a::after, bedoeld
   voor donkerder maken van foto-thumbnails op hover. Voor onze gekleurde
   hero ziet dat eruit als een vale waas — uitschakelen. */
.edublink-single-course .thumbnail a:has(.tm-hero):after {
    display: none;
}

/* Glyph in cards smaller dan hero-package default (12vw te groot voor
   smalle 4-koloms cards). Gebruik containerbreedte als anker. */
.edublink-single-course .tm-hero__glyph {
    font-size: clamp(40px, 7vw, 84px);
}

/* Naam onder de glyph (bv "POWER AUTOMATE") moet op 1 regel passen in een
   smalle card-helft (~150px). Pakketversie was 11px / 0.12em letterspacing
   en wrapte daarop. Verkleinen + minder spacing + nowrap. */
.edublink-single-course .tm-hero__name {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover-state: hele hero (en thumbnail) wegfaden zodat de paarse
   hover-content vrij staat. */
.edublink-single-course.course-style-1:hover .thumbnail {
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* CTA-rij in hover: knop neemt alle ruimte, hartje rechts ervan op exact
   dezelfde hoogte (geen absolute positionering). De rij plakt aan de
   onderkant van de hover-content (margin-top:auto). */
.edublink-single-course .tm-cta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}
.edublink-single-course .tm-cta-row__btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
    white-space: nowrap;
    text-align: center;
}
.edublink-single-course .tm-cta-row__wishlist {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Reset EduBlink's absolute-positioning op de wishlist-wrapper binnen de
   nieuwe inline context, en maak het hartje iets compacter. */
.edublink-single-course .tm-cta-row__wishlist .edublink-wishlist-wrapper {
    position: static;
    top: auto;
    right: auto;
    width: 36px;
    height: 36px;
    line-height: 36px;
}
/* In hover-context: meta niet meer naar bottom duwen — de cta-row neemt
   die rol over. Anders krijg je een gat tussen meta en knop. */
.edublink-single-course .course-hover-content .content > .course-meta {
    margin-top: 0;
}

/* Hover-overlay: vier overrides op EduBlink-parent (main.css §9009):
   1. `display: flex` (column) i.p.v. `inline-table` — die liet de overlay
      krimpen tot de breedste regel, waardoor de full-width-CTA per kaart
      een andere breedte kreeg.
   2. `top: 0` i.p.v. `50%` + `transform: none` i.p.v. `translateY(-50%)` —
      de parent positioneert de overlay op de onderste helft van de kaart;
      onze content (badges + titel + 2 prijsregels + meta + CTA) past daar
      niet in, waardoor de knop onderuit de kaart puilde en er bovenin
      een gat tussen hartje en badges ontstond. Door op 0/0 te zetten
      vult de overlay de hele kaart en plakt de CTA-rij netjes onderin
      via de bestaande `margin-top: auto`.
   3. Symmetrisch padding (parent was `50px 20px 45px 30px`). */
.edublink-single-course .course-hover-content {
    display: flex;
    flex-direction: column;
    top: 0;
    bottom: 0;
    transform: none;
    padding: 22px 20px;
}

/* Single-course pagina: hero + badges-rij in een nette container onder de
   breadcrumb-banner, boven de course-tabs. */
.tm-single-course-top {
    margin: 24px auto 8px;
}
.tm-single-course-hero {
    margin-bottom: 18px;
    border-radius: 12px;
    overflow: hidden;
}
.tm-single-course-top .tm-badges-row {
    margin: 0 0 24px;
}