/*Eigen CSS voor goed eweergave lijst center Details*/

/*Algemeen*/
.Eriba-grijs {
    background-color: rgb(249, 249, 249);
}

.height-20 {
    height: 20px;
}
.height-30 {
    height: 30px;
}
/*De oranje call to action buttons*/
body .button-01 {
    border-radius: 3px;
    background-color: #f2600c;
    min-width: 150px;
    height: 40px;
    color: #FFF;
    font-family: var(--family2);
    font-weight: 400;
    padding-bottom: 2px;
}
body .button-01:hover {
        background-color: #F2CB05;
        text-decoration: none;
    }

.button-02 {
    color: #ff6600 !important;
    border-color: #ff6600;
}

.button-02:hover {
        color: #FFF !important;
        border-color: #ff8330;
        background-color: #ff8330;
    }

/*Lijst & Cards*/
.Edulijst-opsom {
    }

    .Edulijst-opsom li span {
        font-weight: bold;
    }

/*In lijst en Cards afbeelding met banner*/
.pic {
    position: relative;
    overflow: hidden;
}

.pic .banner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    color: #f2600c;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem;
}

/*Details*/

/* --- Terug naar lijst--- */
.oc-backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
    text-decoration: none;
    color: #f58220; /* brand orange */
    transition: color 0.25s ease, transform 0.25s ease;
}

    .oc-backlink:hover {
        color: #d96e16;
        transform: translateX(-3px); /* slight motion on hover */
    }

    .oc-backlink i {
        font-size: 0.9em;
        transition: transform 0.25s ease;
    }

    .oc-backlink:hover i {
        transform: translateX(-2px);
    }


.Opsommen-data {
    background-color: rgb(239, 239, 239);
    font-weight: bold;
    padding-left: 10px;
}

/*En de slider voor afbeeldingen*/
/* --- Gallery: fit hero to left column --- */
.oc-gallery {
    width: 100%;
}

.oc-hero {
    position: relative;
    width: 100%;
    margin: 0;
}

.oc-hero-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* keep thumbs inside column */
.oc-thumbs-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
}

.oc-thumbs {
    display: flex;
    gap: .5rem;
    padding: .25rem 0;
}

.oc-thumb-img {
    display: block;
    width: auto;
    height: auto;
}

/* optional: keep nav buttons inside the hero area */
.oc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.4);
    border: 0;
    color: #fff;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 999px;
    cursor: pointer;
}

.oc-prev {
    left: .5rem;
}

.oc-next {
    right: .5rem;
}

/* --- Readmore: fade-out + centered button --- */
.oc-readmore {
    position: relative;
}

.oc-readmore__content {
    max-height: 8.5em; /* ~5 lines depending on font-size; tweak to taste */
    overflow: hidden;
    position: relative;
}

.oc-readmore--clamped .oc-readmore__content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.5em; /* how tall the fade is */
    pointer-events: none;
    /* uses current bg; adjust if section bg differs */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.Eriba-grijs .oc-readmore--clamped .oc-readmore__content::after {
    /* if Eriba-grijs has a grey bg, blend to that instead (optional) */
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--eriba-grijs, #f2f2f2));
}

.oc-readmore__actions {
    text-align: center;
    margin-top: 0.75rem;
}

.oc-readmore__toggle {
    background: none; /* remove default button bg if any */
    border: none;
    padding: .25rem .5rem;
    line-height: 1;
    font-size: 1.5rem; /* size of chevron */
    color: #f58220; /* your orange tone */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .25s ease, transform .25s ease;
}

    .oc-readmore__toggle:hover {
        color: #d96e16; /* slightly darker on hover */
    }

    .oc-readmore__toggle .fa {
        display: inline-block; /* ensures rotation works */
        transition: transform .25s ease;
        transform: rotate(0deg);
    }

/* rotate chevron when open */
.oc-readmore.is-open .oc-readmore__toggle .fa {
    transform: rotate(180deg) !important;
}

.oc-readmore.is-open .oc-readmore__content {
    max-height: none;
}

    .oc-readmore.is-open .oc-readmore__content::after {
        display: none;
    }