/* =========================================================================
   Recente Transacties Slider
   - Kop + slider lijnen links uit met de container; pijlen staan rechts.
   - De slider loopt aan de rechterkant door tot de viewport-rand (bleed).
   - Card: links de twee logo's met de transactiewaarde ertussen, rechts de
     foto met datum, titel en "Lees meer". De actieve slide krijgt een
     magenta rand.
   ========================================================================= */

.rw-trx {
    --rw-trx-card-width: 34rem;
    --rw-trx-card-min-height: 0; /* de hoogte volgt de inhoud; dit is alleen een ondergrens */
    --rw-trx-brands-width: 48%;
    --rw-trx-media-height: 9rem;
    --rw-trx-logo-width: 11rem;
    --rw-trx-logo-height: 4.5rem; /* samen met de breedte het kader waar elk logo in past */
    --rw-trx-card-padding: 1.75rem;
    --rw-trx-content-gap: 1.75rem;
    --rw-trx-body-gap: 6rem; /* verticale ruimte tussen de foto en het tekstblok */
    --rw-trx-radius: 0.75rem;
    --rw-trx-media-radius: 0.25rem;
    --rw-trx-gap: 24px;
    --rw-trx-lift: 1rem; /* hoeveel de actieve/gehoverde card omhoog komt */
    --rw-trx-border: #E7E4EA;
    --rw-trx-muted: #8A8792; /* datum en "Lees meer" in rust */
    --rw-trx-primary: var(--primary-color, #1C2945);
    --rw-trx-magenta: #A52A87;

    position: relative;
    color: var(--rw-trx-primary);
}

/* --- Kop ---------------------------------------------------------------- */
/* Titel en link staan naast elkaar op dezelfde baseline; de pijlen rechts. */
.rw-trx__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    /* De negatieve margin-top van de viewport en de padding-top van de slider
       heffen elkaar op, dus dit is exact de zichtbare ruimte tot de cards. */
    margin-bottom: 5rem;
}

.rw-trx__heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    min-width: 0;
}

/* Twee classes: de kit schrijft per heading-tag regels uit met de tag in de
   selector (0,1,1) — zowel voor h2 als voor h4, die via de Titel-tag-control
   gekozen kan worden. Een enkele class zou daarvan verliezen. */
.rw-trx .rw-trx__title {
    margin: 0;
    color: #09122B;
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 2.4rem */
}

/* Accentwoorden: serif-italic, maar inline houden (thema forceert h_ span
   soms naar display:block met marge — hier terugdraaien). */
.rw-trx__title em,
.rw-trx__title i,
.rw-trx__title span {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

.rw-trx__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--rw-trx-magenta);
    transition: opacity 0.2s ease;
}

.rw-trx__more:hover,
.rw-trx__more:focus-visible {
    opacity: 0.75;
    color: var(--rw-trx-magenta);
}

.rw-trx__more-arrow {
    width: 1rem;
    height: auto;
    transition: transform 0.2s ease;
}

.rw-trx__more:hover .rw-trx__more-arrow {
    transform: translateX(3px);
}

/* --- Navigatie (rechtsboven) ------------------------------------------- */
.rw-trx__nav {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.rw-trx__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--rw-trx-magenta);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

/* Thema-/Elementor-knopstijlen vullen een <button> op elke state met een kleur.
   Deze pijlen zijn alleen een rand met een icoon, dus overal transparant. */
.rw-trx .rw-trx__arrow,
.rw-trx .rw-trx__arrow:is(:hover, :focus, :focus-visible, :active) {
    background: transparent !important;
    box-shadow: none;
}

/* Het icoon is 12×12: alleen de breedte zetten, zodat de verhouding klopt.
   De pijl beweegt niet op hover — alleen de rand reageert. */
.rw-trx__arrow img {
    width: 0.85rem;
    height: auto;
    transform: rotate(var(--rw-trx-arrow-rotate, 0deg));
}

.rw-trx__prev {
    --rw-trx-arrow-rotate: 180deg;
}

/* Hover/focus zonder beweging: alleen de knop zelf dimt iets. */
.rw-trx__arrow:hover,
.rw-trx__arrow:focus-visible {
    opacity: 0.65;
}

.rw-trx__arrow:focus-visible {
    outline: 2px solid var(--rw-trx-magenta);
    outline-offset: 2px;
}

/* --- Viewport: bleed naar rechts --------------------------------------- */
/* De container is horizontaal gecentreerd; (50% - 50vw) is negatief en trekt
   de rechterrand door tot de viewport-rand, terwijl links op de container blijft. */
/* De negatieve margin-top compenseert de padding-top hieronder, die de
   omhoog geschoven card ruimte geeft binnen de overflow:hidden van slick. */
.rw-trx__viewport {
    margin-right: calc(50% - 50vw);
    margin-top: calc(var(--rw-trx-lift) * -1);
}

/* Slick zet zelf overflow:hidden op .slick-list; hier alleen een fallback
   vóór init zodat er geen horizontale scroll ontstaat. */
.rw-trx__slider {
    min-width: 0;
}

.rw-trx .slick-list,
.rw-trx__slider:not(.slick-initialized) {
    padding-top: var(--rw-trx-lift);
}

.rw-trx__slider:not(.slick-initialized) {
    display: flex;
    gap: var(--rw-trx-gap);
    overflow: hidden;
}

.rw-trx__slider:not(.slick-initialized) .rw-trx__card {
    flex: 0 0 var(--rw-trx-card-width);
}

/* --- Card -------------------------------------------------------------- */
/* De hoogte volgt de inhoud. Omdat .slick-track een flexbox is met de
   standaard align-items:stretch, worden alle cards even hoog als de langste.
   Onder .rw-trx genest zodat height:auto wint van slick's eigen
   .slick-slide{height:100%} — bij slick ís de card zelf de slide. */
.rw-trx .rw-trx__card {
    position: relative;
    width: var(--rw-trx-card-width);
    max-width: 92vw;
    height: auto;
    min-height: var(--rw-trx-card-min-height, 0);
    margin-right: var(--rw-trx-gap);
    padding: var(--rw-trx-card-padding);
    box-sizing: border-box;
    border: 1px solid var(--rw-trx-border);
    border-radius: var(--rw-trx-radius);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.25s ease, border-width 0.25s ease, transform 0.25s ease;
}

/* Actieve slide + hover: magenta rand van 2px en 1rem omhoog. De
   descendant-selector dekt beide slick-varianten (card mét en zónder
   wrapper-div rond de slide). */
.rw-trx .slick-current .rw-trx__card,
.rw-trx .rw-trx__card.slick-current,
.rw-trx__card:hover,
.rw-trx__card:focus-within {
    border-color: var(--rw-trx-magenta);
    border-width: 2px;
    transform: translateY(calc(var(--rw-trx-lift) * -1));
}

/* height:100% laat de kolommen (en dus de scheidingslijn) de volle cardhoogte
   vullen: de card is als flex-item van de track uitgerekt naar de langste card,
   waardoor die hoogte definitief is en het percentage oplost. */
.rw-trx__inner {
    display: grid;
    grid-template-columns: var(--rw-trx-brands-width) minmax(0, 1fr);
    height: 100%;
}

/* --- Logokolom (links) ------------------------------------------------- */
/* De logo's en de waarde staan als groep verticaal gecentreerd. */
.rw-trx__brands {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    min-width: 0;
    padding-right: var(--rw-trx-content-gap);
    text-align: center;
}

/* Twee gelijke, meegroeiende vlakken boven en onder de waarde. Daardoor staat
   de waarde exact in het midden van de kolom en elk logo in het midden van de
   ruimte die overblijft. */
.rw-trx__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

/* Elk logo krijgt exact hetzelfde kader; object-fit:contain schaalt het bestand
   daarbinnen met behoud van verhouding en centreert het. Twee classes zodat de
   hoogte wint van Elementors .elementor img{height:auto} (0,1,1). Opschalen van
   kleine bestanden is hier verliesvrij: de logo's zijn SVG. */
.rw-trx .rw-trx__logo {
    width: 100%;
    max-width: var(--rw-trx-logo-width);
    height: var(--rw-trx-logo-height);
    object-fit: contain;
}

/* Waarde met een streepje links en rechts: "— 120mlj. transaction —".
   flex:0 0 auto: neemt alleen zijn eigen hoogte, de vlakken eromheen de rest. */
.rw-trx__value {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 0.75rem;
    width: 100%;
    margin: 0 !important; /* zelfde reden als bij .rw-trx__date */
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--rw-trx-magenta);
}

.rw-trx__value::before,
.rw-trx__value::after {
    content: "";
    flex: 0 1 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.65;
}

.rw-trx__value span {
    min-width: 0;
}

/* --- Tekstkolom (rechts) ---------------------------------------------- */
/* Foto bovenaan met een vaste ruimte naar het tekstblok. Omdat de cardhoogte
   vast is, lijnen de tekstblokken onderling automatisch uit. */
.rw-trx__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--rw-trx-body-gap);
    min-width: 0;
    padding-left: var(--rw-trx-content-gap);
    border-left: 1px solid var(--rw-trx-border);
    overflow: hidden;
}

.rw-trx__media {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: var(--rw-trx-media-height);
    border-radius: var(--rw-trx-media-radius);
    overflow: hidden;
    background: #F3F0F5;
}

.rw-trx__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important; /* beat Elementor's global img { height: auto } */
    object-fit: cover;
    border-radius: var(--rw-trx-media-radius);
    display: block;
}

/* Buitenste blok: datum+titel als groep, met 1rem naar de link. */
.rw-trx__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Binnenste blok: datum en titel, 0.5rem van elkaar. */
.rw-trx__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    overflow: hidden;
}

/* !important omdat Elementor per element een p{margin-block-end}-regel kan
   uitschrijven (instelling "Paragraph Spacing") die van een enkele class wint.
   De ruimte tussen datum en titel komt hier van de gap op .rw-trx__meta. */
.rw-trx__date {
    margin: 0 !important;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.8rem;
    color: var(--rw-trx-muted);
}

/* Twee classes: de Elementor-kit schrijft per heading-tag regels uit met een
   tag in de selector (0,1,1) — een enkele class zou daarvan verliezen. */
.rw-trx .rw-trx__card-title {
    margin: 0;
    color: var(--P---Dark-grey, #131931);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 1.8rem */

    /* Afkappen op 3 regels, zodat één lange titel niet alle cards meetrekt. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Rust: tekst én pijl grijs. Het pijltje staat inline in de HTML met
   stroke="currentColor", dus het volgt deze color automatisch. */
.rw-trx__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.5rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rw-trx-muted);
    transition: color 0.25s ease;
}

/* Actieve slide of hover: tekst en pijl magenta. */
.rw-trx .slick-current .rw-trx__card .rw-trx__link,
.rw-trx .rw-trx__card.slick-current .rw-trx__link,
.rw-trx__card:hover .rw-trx__link,
.rw-trx__card:focus-within .rw-trx__link {
    color: var(--rw-trx-magenta);
}

.rw-trx__link-arrow {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.rw-trx__card:hover .rw-trx__link-arrow,
.rw-trx__card:focus-within .rw-trx__link-arrow {
    transform: translateX(3px);
}

/* De hele card is klikbaar. */
.rw-trx__cardlink {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
}

/* Thema-/Elementor-knopstijlen geven <a> en <button> op hover een achtergrond.
   Binnen de card zijn dat tekstlinks en overlays, dus transparant houden.
   Let op: de navigatiepijlen (.rw-trx__arrow) staan hier bewust niet tussen. */
.rw-trx :is(.rw-trx__cardlink, .rw-trx__more),
.rw-trx :is(.rw-trx__cardlink, .rw-trx__more):is(:hover, :focus, :focus-visible, :active) {
    background: transparent !important;
    box-shadow: none;
    border: 0;
}

.rw-trx__cardlink:focus-visible {
    outline: 2px solid var(--rw-trx-magenta);
    outline-offset: -4px;
    text-indent: 0;
    color: transparent;
}

/* --- Slick overrides --------------------------------------------------- */
.rw-trx .slick-track {
    display: flex;
}

/* Slick's .slick-slide{height:100%} uitzetten — maar nooit op de card zelf,
   want die is bij slick de slide en draagt juist de vaste hoogte. De :not()
   dekt dus de variant waarin slick een wrapper-div om de slide zet. */
.rw-trx .slick-slide:not(.rw-trx__card) {
    height: auto;
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 767px) {
    .rw-trx__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .rw-trx__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .rw-trx__brands {
        padding-right: 0;
        padding-bottom: 1.5rem;
    }

    .rw-trx__body {
        padding-left: 0;
        padding-top: 1.5rem;
        border-left: 0;
        border-top: 1px solid var(--rw-trx-border);
        overflow: visible;
    }

    .rw-trx__text,
    .rw-trx__meta {
        overflow: visible;
    }

    /* Zelfde twee classes als de basisregel, anders wint die van deze reset. */
    .rw-trx .rw-trx__card-title {
        display: block;
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-trx__more-arrow,
    .rw-trx__link-arrow,
    .rw-trx__arrow,
    .rw-trx__card {
        transition: none;
    }
}