/* ==========================================================================
   Homepage 2025 — scoped under .home2025 so nothing leaks to other pages.
   Design tokens & spec: docs/design_handoff_homepage/README.md
   ========================================================================== */

/* padding-bottom clears the 50px absolute #footer (other pages use #main) */
.home2025 { font-size: 16px; line-height: 1.5; color: #333; overflow-x: hidden; padding-bottom: 50px; }
.home2025 *, .home2025 *::before, .home2025 *::after { box-sizing: border-box; }
.home2025 img { max-width: 100%; }
.home2025 a { color: inherit; text-decoration: none; }
.home2025 ::selection { background: #d3e9f7; }

.home-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; width: 100%; }
.home-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.home-eyebrow--red { color: #c8332a; }
.home-eyebrow--light { font-size: 12px; letter-spacing: .18em; color: #f8e8c9; }
.home-eyebrow--small { font-size: 10.5px; letter-spacing: .14em; color: #c8332a; }
.home-eyebrow--lightblue { color: #a9c8ea; }
.home-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #4f6f99; }
.home-h2 { margin: 0; font-size: clamp(24px, 3vw, 31px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: #222; }
.home-link-underline { border-bottom: 2px solid #1e3d8f; padding-bottom: 2px; }
.home-link-muted { color: #6b6b6b; }
.home-link-muted:hover { color: #1e3d8f; }

/* --- Buttons ------------------------------------------------------------- */
.home-btn { display: inline-block; font-size: 14px; font-weight: 700; padding: 14px 24px; cursor: pointer; text-align: center; }
.home-btn--primary { background: #1e3d8f; color: #fff; }
.home-btn--primary:hover { background: #16307a; color: #fff; }
.home-btn--ghost { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.6); color: #fff; padding: 13px 24px; }
.home-btn--ghost:hover { background: rgba(255,255,255,.28); color: #fff; }
.home-btn--donate { background: #c8332a; color: #fff; padding: 15px 24px; font-size: 15px; }
.home-btn--donate:hover { background: #b02a22; color: #fff; }
.home-btn--outline { border: 1px solid rgba(255,255,255,.6); padding: 14px 24px; font-size: 15px; color: #fff; }
.home-btn--outline:hover { border-color: #fff; color: #fff; }

/* --- Hero ---------------------------------------------------------------- */
.home-hero { position: relative; min-height: clamp(420px, 42vw, 520px); display: flex; align-items: center; overflow: hidden; }
.home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero__filter { position: absolute; inset: 0; background: #f2b705; mix-blend-mode: multiply; opacity: .5; }
.home-hero__gradient { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(56,36,4,.86) 0%, rgba(80,52,6,.55) 48%, rgba(120,80,0,0) 100%); }
.home-hero__inner { position: relative; display: flex; flex-direction: column; gap: 18px; color: #fff; padding-top: 48px; padding-bottom: 48px; }
.home-hero__title { margin: 0; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.12; font-weight: 800; letter-spacing: -.015em; max-width: 22ch; }
.home-hero__intro { margin: 0; font-size: clamp(15px, 1.6vw, 16px); line-height: 1.65; max-width: 52ch; color: rgba(255,255,255,.9); }
.home-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }

/* --- Info bar ------------------------------------------------------------ */
.home-info { background: #d3e9f7; }
.home-info__grid { max-width: 1180px; margin: 0 auto; padding: 24px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 22px 30px; }
.home-info__col { display: flex; flex-direction: column; gap: 5px; }
.home-info__value { font-size: 15.5px; font-weight: 700; color: #1e3d8f; }
.home-info__value--status { display: flex; align-items: center; gap: 8px; }
.home-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #3f9142; flex: none; }
.home-status-dot--closed { background: #c8332a; }
.home-info__line { font-size: 13px; line-height: 1.5; color: #3f4a60; }
.home-info__link { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 700; color: #1e3d8f; align-self: flex-start; border-bottom: 1px solid #8fb3d3; }
.home-info__link:hover { border-color: #1e3d8f; color: #1e3d8f; }

/* --- Accessibility strip ------------------------------------------------- */
.home-access { background: #eef7fc; }
.home-access__inner { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; line-height: 1.5; color: #3f4a60; }
.home-access__title { font-weight: 700; color: #1e3d8f; }
.home-access__text { flex: 1 1 300px; }
.home-access__link { font-weight: 700; color: #1e3d8f; border-bottom: 1px solid #1e3d8f; }

/* --- Museum + film ------------------------------------------------------- */
.home-museum { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 6vw, 56px) 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 30px 50px; align-items: center; }
.home-museum__text { display: flex; flex-direction: column; gap: 15px; }
.home-museum__body { margin: 0; font-size: 15.5px; line-height: 1.75; color: #4a4a4a; }
.home-museum__links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; font-weight: 700; color: #1e3d8f; }
.home-film { display: flex; flex-direction: column; gap: 10px; }
.home-film__frame { position: relative; aspect-ratio: 16 / 9; background: #101a36; overflow: hidden; cursor: pointer; }
.home-film__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.home-film__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.home-play-btn { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; }
.home-play-tri { width: 0; height: 0; border-left: 19px solid #1e3d8f; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 6px; }
.home-film__caption { font-size: 12.5px; line-height: 1.5; color: #6b6b6b; }

/* --- Highlights (niet te missen) ----------------------------------------- */
.home-highlights { border-top: 1px solid #e4e6ea; }
.home-highlights__inner { max-width: 1180px; margin: 0 auto; padding: clamp(36px, 5vw, 46px) 20px clamp(40px, 6vw, 56px); display: flex; flex-direction: column; gap: 22px; }
.home-highlights__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; }
.home-highlights__title { margin: 0; font-size: clamp(24px, 2.8vw, 28px); font-weight: 700; letter-spacing: -.01em; color: #222; }
.home-highlights__intro { font-size: 14px; line-height: 1.6; color: #6b6b6b; max-width: 48ch; }
.home-highlights__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 3.5vw, 48px); }
.home-hl { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.home-hl__img { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background-color: #e8ecf1; background-size: cover; background-position: center; }
.home-hl__badge { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.94); color: #1e3d8f; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; line-height: 1; }
.home-hl__overlay { position: absolute; inset: 0; background: rgba(16,26,54,.92); color: #fff; padding: clamp(14px, 2vw, 22px); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.home-hl.is-open .home-hl__overlay { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (hover: hover) { .home-hl:hover .home-hl__overlay { opacity: 1; transform: translateY(0); pointer-events: auto; } }
.home-hl__more { font-size: clamp(12.5px, 1.3vw, 14px); line-height: 1.6; }
.home-hl__morelink { font-size: 13px; font-weight: 700; color: #fff; border-bottom: 2px solid #fff; align-self: flex-start; padding-bottom: 2px; }
.home-hl__tag { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #c8332a; }
.home-hl__title { font-size: 17px; font-weight: 700; line-height: 1.3; color: #1e3d8f; }
.home-hl__body { font-size: 13.5px; line-height: 1.6; color: #6b6b6b; }

/* --- Object of the month + news ------------------------------------------ */
.home-featured { background: #eef7fc; }
.home-featured__grid { max-width: 1180px; margin: 0 auto; padding: 40px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 36px 50px; }
.home-oom { display: grid; grid-template-columns: minmax(110px, 180px) 1fr; gap: clamp(18px, 3vw, 30px); align-items: center; }
.home-oom__img { aspect-ratio: 4 / 5; background-color: #dce7f0; background-size: cover; background-position: center; }
.home-oom__text, .home-news { display: flex; flex-direction: column; gap: 11px; }
.home-news { justify-content: center; }
.home-featured__title { margin: 0; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; font-weight: 700; color: #1e3d8f; }
.home-featured__title--news { font-size: clamp(19px, 2vw, 21px); line-height: 1.25; }
.home-featured__body { margin: 0; font-size: 14.5px; line-height: 1.7; color: #4a4a4a; }
.home-featured__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; font-weight: 700; color: #1e3d8f; }

/* --- Collection band ----------------------------------------------------- */
.home-band { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 4vw, 40px) 20px; }
.home-band__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.home-band__tile { position: relative; aspect-ratio: 1; background-color: #e8ecf1; overflow: hidden; }
.home-band__layer { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 2.4s ease-in-out; }

/* --- Search -------------------------------------------------------------- */
.home-search { background: #eef7fc; }
.home-search__inner { max-width: 1180px; margin: 0 auto; padding: clamp(36px, 5vw, 48px) 20px; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.home-search__title { margin: 0; font-size: clamp(23px, 3vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: #222; max-width: 30ch; }
.home-search__form { display: flex; border: 1px solid #1e3d8f; background: #fff; width: 100%; max-width: 540px; }
.home-search__input { flex: 1; min-width: 0; border: none; background: transparent; padding: 14px 16px; font-family: inherit; font-size: 15px; color: #333; outline: none; }
.home-search__btn { border: none; background: #1e3d8f; color: #fff; padding: 14px 22px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.home-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 13px; font-weight: 600; }
.home-chip { border: 1px solid #bcd4e6; background: #fff; color: #3f4a60; padding: 9px 14px; }
.home-chip:hover { background: #1e3d8f; color: #fff; }

/* --- Shop + reviews ------------------------------------------------------ */
.home-shoprev { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 6vw, 56px) 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 30px; }
.home-shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); background: #f2cf72; border: 1px solid #e0b850; }
.home-shop__img { background-color: #dce7f0; background-size: cover; background-position: center; min-height: 200px; }
.home-shop__text { padding: 26px; display: flex; flex-direction: column; gap: 11px; justify-content: center; }
.home-shop__title { font-size: 21px; font-weight: 700; line-height: 1.25; color: #1e3d8f; }
.home-shop__body { font-size: 14px; line-height: 1.65; color: #4a4a4a; }
.home-shop__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; font-weight: 700; color: #1e3d8f; }
.home-reviews { border: 1px solid #e0e4ea; padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.home-reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.home-reviews__scores { display: flex; gap: 18px; font-size: 13px; color: #6b6b6b; }
.home-reviews__score strong { font-size: 17px; color: #1e3d8f; }
.home-review { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid #eceef2; padding-top: 14px; }
.home-review__stars { color: #d39a1c; font-size: 13px; letter-spacing: 2px; }
.home-review__text { font-size: 14.5px; line-height: 1.6; color: #333; }
.home-review__src { font-size: 12px; color: #7a7a7a; }
.home-reviews__score:hover, a.home-review__src:hover { text-decoration: underline; }

/* --- Support (steun ons) ------------------------------------------------- */
.home-support { background: #1e3d8f; color: #fff; }
.home-support__grid { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 6vw, 50px) 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 28px 50px; align-items: center; }
.home-support__text { display: flex; flex-direction: column; gap: 13px; }
.home-support__title { margin: 0; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; max-width: 26ch; }
.home-support__body { margin: 0; font-size: 15.5px; line-height: 1.7; max-width: 56ch; color: rgba(255,255,255,.88); }
.home-support__actions { display: flex; flex-direction: column; gap: 10px; max-width: 440px; width: 100%; }
.home-support__bank { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.72); }

/* --- Socials + keurmerken ------------------------------------------------ */
.home-social { max-width: 1180px; margin: 0 auto; padding: 28px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.home-social__group { display: flex; align-items: center; gap: 14px; }
.home-social__icons { display: flex; gap: 10px; }
.home-social__icon { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; }
.home-social__icon:hover { opacity: .85; color: #fff; }
.home-social__icon--ig { background: linear-gradient(45deg, #f9a825 0%, #e1306c 55%, #833ab4 100%); }
.home-social__icon--fb { background: #1877f2; }
.home-social__icon--yt { background: #ff0000; }
.home-keurmerken { display: flex; gap: 14px; align-items: center; }
.home-keurmerk { height: 52px; }
.home-keurmerk--placeholder { height: 52px; padding: 0 12px; border: 1px dashed #bcc5d2; display: flex; align-items: center; font-size: 11px; font-weight: 700; color: #7a7a7a; text-align: center; line-height: 1.25; }

/* --- Modals -------------------------------------------------------------- */
.home-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; }
.home-modal[hidden] { display: none; }
.home-modal--video { background: rgba(10,16,34,.9); padding: 64px 16px 24px; }
.home-modal--donate { background: rgba(10,16,34,.72); padding: 16px; }
.home-modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; font-family: inherit; }
.home-modal__close:hover { background: rgba(255,255,255,.26); }

.home-video { display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 100%; }
.home-video__frame { position: relative; height: min(78vh, 760px); max-width: calc(100vw - 32px); aspect-ratio: 9 / 16; background: #000; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.home-video__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.home-video__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #fff; text-align: center; padding: 24px; }
.home-video__placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.home-video__caption { font-size: 13px; color: rgba(255,255,255,.8); text-align: center; }

.home-donate { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; color: #333; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.home-donate .home-modal__close { background: transparent; color: #6b6b6b; }
.home-donate .home-modal__close:hover { color: #1e3d8f; background: transparent; }
.home-donate__topbar { height: 3px; background: #1e3d8f; }
.home-donate__body { padding: 28px clamp(20px, 5vw, 32px) 26px; display: flex; flex-direction: column; gap: 20px; }
.home-donate__intro { display: flex; flex-direction: column; gap: 8px; padding-right: 36px; }
.home-donate__title { margin: 0; font-size: 23px; line-height: 1.25; font-weight: 700; color: #1e3d8f; }
.home-donate__lead { margin: 0; font-size: 14px; line-height: 1.65; color: #4a4a4a; }
.home-donate__freq { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #1e3d8f; }
.home-donate__freqbtn { border: none; padding: 13px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; background: #fff; color: #1e3d8f; }
.home-donate__freqbtn.is-active { background: #1e3d8f; color: #fff; }
.home-donate__amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.home-donate__amount { padding: 13px 0; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid #cfd6e0; background: #fff; color: #3f4a60; }
.home-donate__amount.is-active { background: #d3e9f7; color: #1e3d8f; border-color: #1e3d8f; }
.home-donate__custom { display: flex; align-items: center; border: 1px solid #cfd6e0; }
.home-donate__custom span { padding-left: 14px; font-size: 15px; font-weight: 700; color: #6b6b6b; }
.home-donate__custom input { flex: 1; min-width: 0; border: none; padding: 13px 12px; font-family: inherit; font-size: 16px; color: #333; outline: none; background: transparent; }
.home-donate__names { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.home-donate__input { min-width: 0; border: 1px solid #cfd6e0; padding: 13px 14px; font-family: inherit; font-size: 16px; color: #333; outline: none; width: 100%; }
.home-donate__input.is-invalid { border-color: #c8332a; background: #fcecea; }
.home-donate__note { background: #eef7fc; padding: 14px 16px; font-size: 13px; line-height: 1.6; color: #3f4a60; }
.home-donate__cta { border: none; background: #c8332a; color: #fff; padding: 16px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.home-donate__cta:hover { background: #b02a22; }
.home-donate__methods { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.home-donate__method { border: 1px solid #e0e4ea; padding: 4px 9px; font-size: 11.5px; font-weight: 600; color: #6b6b6b; }
.home-donate__fineprint { font-size: 12px; line-height: 1.55; color: #6b6b6b; text-align: center; }
.home-donate__label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #4f6f99; }
.home-donate__done { padding: 44px 28px 36px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.home-donate__check { width: 56px; height: 56px; border-radius: 50%; background: #d3e9f7; color: #1e3d8f; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; }
.home-donate__backbtn { margin-top: 6px; border: 1px solid #1e3d8f; background: #fff; color: #1e3d8f; padding: 13px 26px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.home-donate__backbtn:hover { background: #eef7fc; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
  .home-highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-band__grid { grid-template-columns: repeat(4, 1fr); }
}