/* Only the Divi-icon escape hatch. The Energy Up glyph paths reuse the child
   theme's existing .eu-tr-icon--* and .eu-why__card--* rules untouched, so
   pages built before these modules render identically. */

.eu-tr-chip__icon--divi,
.eu-why__icon--divi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #00ceaa;
    background-image: none;
    border-radius: 50%;
    color: #fff;
    /* the real family and weight come inline per icon: Divi's picker mixes
       ETmodules and FontAwesome, and FontAwesome solid needs weight 900 */
    font-family: ETmodules, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

.eu-tr-chip__icon--divi {
    font-size: 18px;
}

.eu-why__icon--divi {
    font-size: 21px;
}

/* Adjacent anchors have no whitespace between them, so the knoppen row
   supplies its own gap. Placement classes land on this same element and only
   set margins, so they compose with it. */

.eu-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Divi wraps a parent module's children in `.et_pb_module_inner`, the way the
   code module this replaced wrapped them in `.et_pb_code_inner`, so the row
   that actually holds the anchors is one level down. It spans the module and
   inherits both the gap above and the alignment of whichever placement class
   sits on the module itself. */
.eu-btns > .et_pb_module_inner {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: inherit;
    justify-content: inherit;
}

/* `.eu-pill::before` is an always-on 14px box, so a pill without one of the
   three Energy Up glyphs has to drop it or it renders a blank indent. */

.eu-pill--plain::before,
.eu-pill--divi::before {
    content: none;
}

.eu-pill__icon--divi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 14px;
    height: 14px;
    color: #fff;
    /* the real family and weight come inline per icon: Divi's picker mixes
       ETmodules and FontAwesome, and FontAwesome solid needs weight 900 */
    font-family: ETmodules, sans-serif;
    font-weight: 400;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------- berichtenraster en -carrousel */

/* Both modules reuse the child theme's `.eu-tr-card` block wholesale, so what
   follows is only what a queried card needs on top of a hand-filled one: a
   column count the module owns, a title that survives a real blog headline,
   and the two chrome pieces (load-more button, carousel arrows). */

/* The theme's grid rule is `.eu-tr-section ul.eu-tr-related__grid` at (0,2,1)
   and blocks.css loads after it, so matching that would win at every width and
   flatten the theme's own responsive steps. Both module classes sit on the
   wrapper to clear it at (0,3,1) and keep the breakpoints here. */
.eu-posts.eu-tr-section ul.eu-tr-related__grid {
    grid-template-columns: repeat(3, 1fr);
}

.eu-posts--cols-2.eu-tr-section ul.eu-tr-related__grid {
    grid-template-columns: repeat(2, 1fr);
}

.eu-posts--cols-4.eu-tr-section ul.eu-tr-related__grid {
    grid-template-columns: repeat(4, 1fr);
}

/* the theme sizes the card title for the training pages' two-word names; a
   blog headline at 42px overruns its own photo */
.eu-posts .eu-tr-card__title,
.eu-posts-carousel .eu-tr-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: clamp(18px, 1.6vw, 24px);
}

/* the media block is the card's link, and an anchor is inline by default */
.eu-posts .eu-tr-card__media,
.eu-posts-carousel .eu-tr-card__media {
    display: block;
}

.eu-posts__media--empty {
    background-image: linear-gradient(135deg, #00ceaa 0%, #3291e2 100%);
}

.eu-posts__date {
    font-family: 'Mark Heavy', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #6b6b6b;
}

/* cards in one grid row stretch to the tallest, so pinning the button to the
   bottom keeps the row of buttons on one line */
.eu-posts .eu-tr-card__body .eu-btn,
.eu-posts-carousel .eu-tr-card__body .eu-btn {
    margin-top: auto;
}

.eu-posts__empty {
    margin: 0;
    font-size: 14px;
    color: #1e1e1e;
}

.eu-posts__more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.eu-posts__more-btn {
    cursor: pointer;
}

.eu-posts__more-btn--busy {
    opacity: .6;
    cursor: progress;
}

.eu-posts-carousel__frame {
    position: relative;
}

.eu-posts-carousel__viewport {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.eu-posts-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.eu-tr-section ul.eu-posts-carousel__track {
    display: flex;
    gap: 30px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eu-posts-carousel__track > .eu-tr-card {
    flex: 0 0 clamp(260px, 28vw, 400px);
}

/* the reviews row fades its edges instead; over photography a filled disc is
   what keeps the arrow readable */
.eu-posts-carousel__nav {
    position: absolute;
    /* the media block is 320px tall, so this centres the arrow on the photo
       rather than on a card whose height the excerpt decides */
    top: 160px;
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
    transform: translateY(-50%);
    cursor: pointer;
}

.eu-posts-carousel__nav::before {
    content: "";
    display: block;
    width: 16px;
    height: 20px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20width%3D%2220.7846%22%20height%3D%2215%22%20viewBox%3D%220%200%2020.7846%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M10.3923%200L20.7846%2015H0L10.3923%200Z%22%20fill%3D%22%233291E2%22%2F%3E%20%3C%2Fsvg%3E");
    transition: opacity .2s ease;
}

.eu-posts-carousel__nav:hover::before {
    opacity: .65;
}

.eu-posts-carousel__nav--prev {
    left: 10px;
}

.eu-posts-carousel__nav--prev::before {
    transform: rotate(-90deg);
}

.eu-posts-carousel__nav--next {
    right: 10px;
}

.eu-posts-carousel__nav--next::before {
    transform: rotate(90deg);
}

@media (max-width: 1100px) {
    .eu-posts.eu-tr-section ul.eu-tr-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 780px) {
    .eu-posts.eu-tr-section ul.eu-tr-related__grid {
        grid-template-columns: 1fr;
    }

    .eu-posts__more {
        margin-top: 30px;
    }
}