/* assets/css/pages/single-project.css -- per-pagina laag (CLAUDE.md CSS-architectuur). In via mb_reve_pagina_css('single-project') in single-project.php. Tokens/componenten uit reve-base.css + reve-pages.css. */ .project-hero { width: 100%; } .project-hero img { width: 100%; height: 62vh; object-fit: cover; display: block; } /* section.blk's eigen padding-top (var(--sec), 64-96px) overschreven -- de foto erboven geeft al genoeg scheiding, dus de breadcrumb mag er dicht tegenaan liggen. padding-bottom blijft ongemoeid (var(--sec) uit de gedeelde regel). "section.blk." ervoor: anders verliest deze regel altijd van reve-pages.css's `section.blk` (element+class weegt zwaarder dan één class). */ section.blk.project-detail-section { padding-top: 0; } .project-detail { padding-top: 18px; } .project-nav { display: flex; justify-content: space-between; margin: 0 0 24px; } .project-nav a { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1 var(--f-body); color: var(--c-primary); text-decoration: none; } .project-nav a:hover { text-decoration: underline; } .project-nav-next { margin-left: auto; } /* ---------- fotogalerij -- masonry via CSS multi-column, geen JS-layout nodig ---------- */ .project-gallery { column-count: 3; column-gap: 16px; padding: 0 24px var(--sec); } .project-gallery-thumb { display: block; width: 100%; margin: 0 0 16px; break-inside: avoid; border: 0; padding: 0; background: none; cursor: pointer; } .project-gallery-thumb img { width: 100%; height: auto; display: block; transition: opacity .2s ease; } .project-gallery-thumb:hover img { opacity: .88; } @media (max-width: 860px) { .project-gallery { column-count: 2; } } @media (max-width: 560px) { .project-gallery { column-count: 1; } } /* ---------- lightbox-slider -- zelfde patroon als store-location (7.1) ---------- */ .gallery-lightbox { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .92); align-items: center; justify-content: center; } .gallery-lightbox:not([hidden]) { display: flex; } .lightbox-image { max-width: 88vw; max-height: 84vh; object-fit: contain; } .lightbox-close, .lightbox-arrow { position: absolute; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; } .lightbox-close { top: 20px; right: 20px; } .lightbox-arrow.prev { left: 20px; top: 50%; transform: translateY(-50%); } .lightbox-arrow.next { right: 20px; top: 50%; transform: translateY(-50%); } @media (max-width: 860px) { .lightbox-arrow { width: 36px; height: 36px; } } /* ---------- "More articles" -- zwarte sectie, hergebruikt .jr-kaart--overlay (3.10) ---------- */ .project-more { background: #000; padding: var(--sec) 0; } .project-more h2 { color: #fff; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); margin: 0 0 30px; } .project-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } @media (max-width: 640px) { .project-more-grid { grid-template-columns: 1fr; } }