/* Schildervereniging - stijl voor Bootstrap 4 */
:root {
    --ink: #242923;
    --muted: #73776f;
    --paper: #f7f5ef;
    --cream: #eee9df;
    --green: #334b3f;
    --green-dark: #23372e;
    --orange: #c86c45;
    --line: rgba(36, 41, 35, .14);
}
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { color: var(--ink); font-family: "Aptos", "Segoe UI", Arial, sans-serif; line-height: 1.7; }
a { color: inherit; }
a:hover { color: var(--orange); text-decoration: none; }
.site-nav { background: rgba(35, 55, 46, .97); box-shadow: 0 3px 18px rgba(0,0,0,.12); padding: 12px 0; }
.navbar-brand { color: #fff !important; font-weight: 700; font-size: 1rem; letter-spacing: .02em; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 9px; color: var(--green-dark); background: #e4b38b; border-radius: 50%; font-family: Georgia, serif; font-size: 1.2rem; }
.site-nav .nav-link { color: rgba(255,255,255,.82) !important; font-size: .86rem; padding: .55rem .65rem !important; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: #fff !important; }
.site-nav .nav-contact { color: #f0c29f !important; }
.hero { min-height: 670px; position: relative; display: flex; align-items: center; overflow: hidden; color: white; background: #33473b; }
/*.hero:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,38,31,.92) 0%, rgba(24,38,31,.74) 46%, rgba(24,38,31,.12) 100%), url("https://images.unsplash.com/photo-1513364776144-60967b0f800f?auto=format&fit=crop&w=2000&q=85") center 48%/cover no-repeat; }*/

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(24,38,31,.92) 0%,
            rgba(24,38,31,.74) 46%,
            rgba(24,38,31,.12) 100%
        ),
        url("../images/header.avif") center 48%/cover no-repeat;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,30,23,.35), transparent 40%); }
.hero-content { position: relative; z-index: 1; padding-top: 65px; }
.eyebrow { color: var(--orange); text-transform: uppercase; font-size: .72rem; font-weight: 800; letter-spacing: .19em; margin-bottom: 16px; }
.eyebrow-light { color: #e8b18e; }
.hero h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.035em; line-height: 1.08; }
.hero h1 { font-size: clamp(3.2rem, 7vw, 6.3rem); margin-bottom: 24px; }
h2 { font-size: clamp(2.35rem, 4vw, 3.7rem); margin-bottom: 22px; }
h1 em, h2 em { color: #dba47d; font-weight: 400; }
.hero-lead { font-size: 1.15rem; max-width: 480px; color: rgba(255,255,255,.84); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-eyebrow {font-size: 1.2rem; letter-spacing: .15em;}
.btn { border-radius: 2px; font-size: .88rem; font-weight: 700; padding: 12px 22px; }
.btn-art { background: var(--orange); border: 1px solid var(--orange); color: white; }
.btn-art:hover, .btn-art:focus { background: #ad5735; border-color: #ad5735; color: white; }
.hero-note { position: absolute; bottom: 27px; right: 5%; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; }
.hero-note span { display: inline-block; width: 28px; height: 1px; margin: 0 10px 4px 0; background: #dba47d; }
.section { padding: 100px 0; }
.section-paper { background: var(--paper); }
.section-heading { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.section-heading > p:last-child { color: var(--muted); }
.section-heading h2 em { color: var(--orange); }
.agenda-card { background: #fff; padding: 29px 27px; border-top: 3px solid var(--orange); box-shadow: 0 8px 26px rgba(31,38,31,.045); }
.agenda-date { color: var(--orange); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px; }
.agenda-card h3, .info-card h3 { font-family: Georgia, serif; font-size: 1.45rem; font-weight: 400; margin-bottom: 10px; }
.agenda-time { font-size: .8rem; color: var(--green); font-weight: 700; }
.agenda-card p:last-child { color: var(--muted); font-size: .93rem; }
.section-dark { background: var(--green-dark); color: white; }
.section-dark h2 em { color: #e1a37c; }
.section-copy { color: rgba(255,255,255,.75); max-width: 500px; margin-bottom: 27px; }
.artwork-collage { position: relative; min-height: 390px; margin: 0 15px; }
.artwork { position: absolute; display: flex; align-items: end; padding: 15px; background-size: cover; background-position: center; box-shadow: 0 15px 35px rgba(0,0,0,.2); }
.artwork span { background: rgba(20,30,24,.72); color: white; padding: 5px 9px; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.artwork-one { left: 0; top: 8px; width: 62%; height: 255px; background-image: url("../images/werkavond-3.jpg"); transform: rotate(-3deg);}
.artwork-two { right: 0; top: 110px; width: 48%; height: 245px; background-image: url("../images/werkavond-2.jpg"); transform: rotate(4deg); }
.artwork-three { left: 17%; bottom: 0; width: 35%; height: 145px; background-image: url("../images/werkavond-1.jpg"); transform: rotate(2deg); }
.about-art { min-height: 390px; position: relative; background: #e7dfd1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.about-art:before, .about-art:after { content: ""; position: absolute; border-radius: 50%; }
.about-art:before { width: 290px; height: 290px; background: #c86c45; left: -40px; top: -35px; }
.about-art:after { width: 230px; height: 230px; background: #617a62; right: -30px; bottom: -40px; }
.about-art-circle { position: absolute; width: 185px; height: 260px; border-radius: 48% 52% 42% 58%; background: #d4aa6f; transform: rotate(28deg); z-index: 1; }
.about-art-label { position: relative; z-index: 2; font-family: Georgia, serif; font-size: 2rem; line-height: 1.1; color: white; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.values-row { display: flex; gap: 32px; border-top: 1px solid var(--line); margin-top: 30px; padding-top: 22px; }
.values-row div { display: flex; flex-direction: column; }
.values-row strong { color: var(--orange); font-family: Georgia, serif; font-size: 1.5rem; font-weight: 400; }
.values-row span { color: var(--muted); font-size: .82rem; }
.members-section { background: #eee9df; }
.member-card { display: block; height: 100%; background: #fff; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.member-card:hover, .member-card:focus { color: var(--ink); transform: translateY(-5px); box-shadow: 0 13px 28px rgba(36,41,35,.13); }
.member-image-wrap { position: relative; overflow: hidden; background: #d8d0c2; }
.member-image { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; transition: transform .35s ease; }
.member-card:hover .member-image { transform: scale(1.04); }
.member-arrow { position: absolute; right: 10px; top: 10px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--green); font-size: 1.1rem; }
.member-info { padding: 17px 17px 19px; }
.member-info h3 { font-family: Georgia, serif; font-size: 1.22rem; font-weight: 400; margin: 0 0 3px; }
.member-info p { color: var(--muted); font-size: .8rem; margin: 0; }
.join-section { background: var(--paper); padding-top: 30px; }
.join-panel { display: flex; align-items: center; justify-content: space-between; gap: 35px; background: var(--green); color: white; padding: 55px 7%; }
.join-panel h2 em { color: #e8b18e; }
.join-panel p:not(.eyebrow) { color: rgba(255,255,255,.76); max-width: 550px; margin-bottom: 0; }
.join-action { flex-shrink: 0; text-align: center; }
.join-action .btn { color: var(--green-dark); white-space: nowrap; }
.join-action small { display: block; color: rgba(255,255,255,.65); margin-top: 12px; }
.info-card { background: #fff; padding: 28px; height: 100%; border-bottom: 2px solid #d9d1c4; }
.info-number { display: block; color: var(--orange); font-family: Georgia, serif; font-size: 1.8rem; margin-bottom: 20px; }
.info-card p { color: var(--muted); font-size: .93rem; margin-bottom: 0; }
.contact-section { background: var(--green-dark); color: white; }
.contact-section h2 em { color: #e8b18e; }
.contact-detail { border-top: 1px solid rgba(255,255,255,.18); padding: 13px 0; }
.contact-detail span { display: block; color: #e8b18e; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 800; }
.contact-detail p, .contact-detail a { margin: 2px 0 0; color: white; }
.contact-form { background: #fff; color: var(--ink); padding: 32px; }
.contact-form label { font-size: .8rem; font-weight: 700; }
.contact-form .form-control { border-radius: 0; border-color: #dcded8; padding: 11px 12px; height: auto; font-size: .92rem; }
.contact-form .form-control:focus { border-color: var(--orange); box-shadow: 0 0 0 .15rem rgba(200,108,69,.15); }
.form-note { display: block; margin-top: 13px; color: var(--muted); line-height: 1.4; }
.site-footer { background: #19271f; color: rgba(255,255,255,.65); padding: 28px 0 18px; font-size: .8rem; }
.footer-brand { color: white; font-weight: 700; }
.back-top { color: #e8b18e; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 20px; padding-top: 14px; font-size: .72rem; }
@media (max-width: 991.98px) {
    .site-nav .navbar-collapse { padding-top: 12px; }
    .site-nav .nav-link { padding: .55rem 0 !important; }
    .hero { min-height: 610px; }
    .section { padding: 75px 0; }
    .join-panel { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 575.98px) {
    .hero { min-height: 590px; }
    .hero h1 { font-size: 3.25rem; }
    .hero-actions .btn { width: 100%; }
    .section { padding: 62px 0; }
    .section-heading { margin-bottom: 32px; }
    .artwork-collage { min-height: 320px; margin: 10px 0 0; }
    .artwork-one { height: 210px; }
    .artwork-two { top: 90px; height: 195px; }
    .artwork-three { height: 110px; }
    .about-art { min-height: 300px; }
    .member-info { padding: 12px; }
    .member-info h3 { font-size: 1rem; }
    .member-info p { font-size: .72rem; }
    .join-panel { padding: 35px 25px; }
    .join-action, .join-action .btn { width: 100%; white-space: normal; }
    .contact-form { padding: 22px; }
    .site-footer .container { gap: 10px; align-items: flex-start !important; }
}
@supports not (aspect-ratio: 3 / 2) {
    .member-image { height: 0; padding-bottom: 66.666%; }
}

/* Jaarlijkse expositie */

/* Expositie: afbeeldingen */
.exhibition-section {
    background: #fff;
}

.exhibition-images {
    position: relative;
    width: 100%;
    height: 430px;
    margin: 0 auto;
}

/* Algemene instellingen voor beide foto's */
.exhibition-photo {
    position: absolute;
    display: block;
    object-fit: cover;
    box-sizing: border-box;
    border: 8px solid #fff;
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    max-width: 100%;
}

/* Achterste foto: groter */
.exhibition-photo-one {
    top: 5px;
    left: 2%;
    width: 75%;
    height: 350px;
    transform: rotate(-2deg);
    z-index: 1;
}

/* Voorste foto: kleiner */
.exhibition-photo-two {
    right: 2%;
    bottom: 5px;
    width: 55%;
    height: 260px;
    transform: rotate(2deg);
    z-index: 2;
}

/* Tablet */
@media (max-width: 991.98px) {
    .exhibition-images {
        height: 390px;
        max-width: 600px;
    }

    .exhibition-photo-one {
        width: 75%;
        height: 310px;
    }

    .exhibition-photo-two {
        width: 58%;
        height: 235px;
    }
}

/* Mobiel */
@media (max-width: 575.98px) {
    .exhibition-images {
        height: 290px;
        max-width: 420px;
    }

    .exhibition-photo {
        border-width: 5px;
        border-radius: 5px;
        box-shadow: 0 7px 18px rgba(0, 0, 0, 0.16);
    }

    .exhibition-photo-one {
        top: 5px;
        left: 1%;
        width: 78%;
        height: 230px;
    }

    .exhibition-photo-two {
        right: 1%;
        bottom: 5px;
        width: 58%;
        height: 175px;
    }
}

/* Overige expositiestijlen */
.exhibition-section h2 em {
    color: var(--orange);
}

.exhibition-section p:not(.eyebrow) {
    color: var(--muted);
}

.exhibition-details {
    margin-top: 25px;
    border-top: 1px solid var(--line);
}

.exhibition-details div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.exhibition-details span {
    flex: 0 0 auto;
    color: var(--orange);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.exhibition-details strong {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
    font-size: .88rem;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .exhibition-details div {
        flex-direction: column;
        gap: 2px;
    }

    .exhibition-details strong {
        text-align: left;
    }
}