/* ========================================
   KLEUREN + PORTFOLIO MATEN
======================================== */

:root {

  --color-bg-soft: #faefeb;
  --color-accent: #cfbdb2;
  --color-text: #66615e;
  --color-white: #ffffff;
  --color-text-light: #8a827d;
  --color-overlay: rgba(0, 0, 0, 0.18);

  --portfolio-width: min(90vw, 1200px);

  --portfolio-column-gap:
    clamp(62px, 5.8vw, 84px);

  --portfolio-row-gap:
    clamp(92px, 8vw, 112px);

  --portfolio-row-small:
    clamp(138px, 14.4vw, 198px);

  --portfolio-row-tall:
    clamp(255px, 28.8vw, 395px);
}


/* ========================================
   ALGEMEEN
======================================== */

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  padding-top: 50px;
  margin: 0;

  font-family:
    'Open Sans', sans-serif;

  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.015em;

  color:
    var(--color-text);

  background:
    var(--color-white);

  font-weight: 300;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;

  transition:
    color 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease;
}

a:hover,
a:focus {
  color:
    var(--color-accent);
}


/* ========================================
   TITELS
======================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.parallax-text {

  font-family:
    'Cinzel', serif;

  color:
    var(--color-text);

  font-weight: 400;

  letter-spacing: 0.05em;
}


/* ========================================
   ACHTERGRONDEN
======================================== */

.bg-1,
.bg-2 {
  background:
    var(--color-accent);

  color:
    var(--color-white);
}

.bg-3,
.bg-6,
.bg-7 {
  background:
    var(--color-white);

  color:
    var(--color-text);
}

.bg-4,
.bg-5 {
  background:
    var(--color-bg-soft);

  color:
    var(--color-text);
}

.bg-2 h3,
.bg-2 p,
.bg-2 a {
  color:
    var(--color-white);
}


/* ========================================
   ALGEMENE AFBEELDINGEN
======================================== */

.fotoshoot-img {
  max-width: 100%;
  border-radius: 50%;
  margin-top: 20px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.portfolio-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;

  transition:
    transform 0.3s ease;
}

.portfolio-card:hover
.portfolio-img {
  transform:
    scale(1.05);
}

.portfolio-text {
  margin-top: 10px;

  font-family:
    'Cinzel', serif;

  font-size: 16px;

  color:
    var(--color-text);

  text-align: center;

  letter-spacing: 0.04em;
}

.portfolio-text h3 {
  margin: 0;

  color:
    var(--color-text);

  font-family:
    'Cinzel', serif;

  font-size: 1rem;
}


/* ========================================
   KAARTEN
======================================== */

.card {
  border: none;
  border-radius: 0;

  background-color:
    var(--color-white);

  transition:
    box-shadow 0.5s ease;
}

.card:hover {
  box-shadow:
    5px 0 40px rgba(0,0,0,0.12);
}


/* ========================================
   KNOPPEN
======================================== */

.btn-primary {
  background-color:
    var(--color-accent);

  border-color:
    var(--color-accent);

  color:
    var(--color-white);

  font-family:
    'Open Sans', sans-serif;

  font-weight: 400;
  letter-spacing: 0.04em;
}

.btn-primary:hover {
  background-color:
    var(--color-text);

  border-color:
    var(--color-text);

  color:
    var(--color-white);
}

.btn-tarief {
  background-color:
    var(--color-bg-soft);

  border:
    1px solid var(--color-accent);

  color:
    var(--color-text);

  font-family:
    'Open Sans', sans-serif;

  font-weight: 400;
  letter-spacing: 0.04em;
}

.btn-tarief:hover {
  background-color:
    var(--color-accent);

  border-color:
    var(--color-accent);

  color:
    var(--color-white);
}


/* ========================================
   NAVIGATIE
======================================== */

.navbar {
  background-color:
    var(--color-bg-soft);

  padding:
    0.9rem 0;

  font-family:
    'Open Sans', sans-serif;

  font-size: 0.84rem;
  letter-spacing: 0.08em;

  border-bottom:
    1px solid rgba(102,97,94,0.08);
}

.navbar-brand img {
  display: block;
  width: 65px;
  height: auto;
}

.navbar .navbar-nav {
  gap: 0.35rem;
}

.navbar .nav-link,
.navbar .navbar-brand {
  color:
    var(--color-text) !important;

  font-weight: 400;

  padding:
    0.5rem 0.85rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color:
    var(--color-text) !important;

  opacity: 0.75;

  background-color:
    transparent;
}

.nav-item-secondary .nav-link {
  opacity: 0.72;
}

.nav-link-contact {
  border:
    1px solid rgba(102,97,94,0.22);

  border-radius: 999px;

  padding:
    0.5rem 1rem !important;
}

.nav-link-contact:hover,
.nav-link-contact:focus {
  opacity: 1;

  background-color:
    rgba(255,255,255,0.55);
}


/* ========================================
   DROPDOWN
======================================== */

.dropdown-menu {
  border: none;
  border-radius: 0;

  padding:
    0.75rem 0;

  background:
    var(--color-white);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.08);
}

.dropdown-item {
  padding:
    0.55rem 1.2rem;

  font-family:
    'Open Sans', sans-serif;

  font-size: 0.82rem;
  letter-spacing: 0.03em;

  color:
    var(--color-text);

  font-weight: 300;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color:
    transparent;

  color:
    var(--color-text);

  opacity: 0.75;
}

.navbar-toggler {
  border: none;

  padding:
    0.25rem 0.4rem;

  box-shadow:
    none !important;
}

.navbar-toggler:focus {
  box-shadow:
    none;
}


/* ========================================
   HERO HOMEPAGE
======================================== */

.hero {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media picture,
.hero-media img {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-media img {
  object-fit: cover;
  object-position:
    center center;
}

.hero-overlay {
  position: absolute;
  inset: 0;

  background:
    var(--color-overlay);
}

.hero-content {
  position: relative;

  z-index: 2;

  max-width: 760px;

  padding: 2rem;

  text-align: center;

  color:
    var(--color-white);
}

.hero-kicker {
  margin:
    0 0 1rem;

  font-size: 0.9rem;
  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    var(--color-white);

  font-weight: 400;
}

.hero-content h1 {
  margin:
    0 0 1.5rem;

  font-family:
    'Open Sans', sans-serif;

  font-size:
    clamp(2rem,5vw,4rem);

  line-height: 1.2;

  font-weight: 300;
  letter-spacing: 0.015em;

  color:
    var(--color-white);
}

.hero-button {
  display: inline-block;

  padding:
    0.9rem 1.4rem;

  background:
    var(--color-bg-soft);

  color:
    var(--color-text);

  text-decoration: none;

  border-radius: 999px;
  border: none;

  transition:
    opacity 0.2s ease,
    background-color 0.3s ease,
    color 0.3s ease;

  font-family:
    'Open Sans', sans-serif;

  font-weight: 400;
  letter-spacing: 0.04em;

  cursor: pointer;
}

.hero-button:hover {
  background:
    var(--color-accent);

  color:
    var(--color-white);
}


/* ========================================
   PARALLAX / BGIMG
======================================== */

.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4 {
  position: relative;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  align-items: center;
  justify-content: center;
}

.bgimg-1::before,
.bgimg-2::before,
.bgimg-3::before,
.bgimg-4::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.bgimg-1 {
  background-image: url("/portf/zwangerschapsshoot-139.jpg");
  min-height: 100vh;
  background-attachment: fixed;
}

.bgimg-2 {
  background-image: url("/portf/zwangerschapsshoot-139.jpg");
  min-height: 600px;
  background-attachment: fixed;
}

.bgimg-3 {
  background-image: url("/portf/zwangerschapsshoot-275.jpg");
  min-height: 600px;
  background-attachment: fixed;
}

.bgimg-4 {
  background-image: url("/portf/newbornshoot-49.webp");
  min-height: 600px;
  background-attachment: fixed;
}

.parallax-text {
  position: relative;
  z-index: 1;

  font-size: 2.2rem;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0.06em;
  font-weight: 400;
  max-width: 700px;
  padding: 0 1.5rem;
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .bgimg-1,
  .bgimg-2,
  .bgimg-3,
  .bgimg-4 {
    background-attachment: scroll;
  }
}

@media (max-width: 768px) {
  .bgimg-2,
  .bgimg-3 {
    min-height: 260px;
  }

  .parallax-text {
    font-size: 1.5rem;
    letter-spacing: 0.04em;
  }
}


/* ========================================
   HOMEPAGE INTRO
======================================== */

.intro {
  padding:
    clamp(4.5rem,8vw,6.5rem)
    1.5rem
    clamp(3rem,5vw,4rem);

  background:
    var(--color-white);
}

.intro-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.intro-lead {
  max-width: 860px;

  margin:
    0 auto 2rem;

  font-size:
    clamp(1.6rem,2.8vw,2.4rem);

  line-height: 1.55;

  color:
    var(--color-text);

  font-weight: 300;
}

.intro-text {
  max-width: 760px;

  margin: 0 auto;

  font-size: 1.05rem;
  line-height: 2;

  color:
    var(--color-text-light);
}


/* ========================================
   ERVARING
======================================== */

.experience-section {
  padding:
    clamp(3.5rem,6vw,5rem)
    1.5rem;

  background:
    var(--color-white);
}

.experience-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.section-title {
  margin:
    0 0 2.5rem;

  font-size:
    clamp(1.6rem,2.4vw,2.4rem);

  line-height: 1.2;
  letter-spacing: 0.035em;

  text-align: center;
}

.experience-subtitle {
  max-width: 620px;

  margin:
    -0.5rem auto 3.25rem;

  font-size: 0.98rem;
  line-height: 1.8;

  color:
    var(--color-text-light);

  text-align: center;
}

.experience-item {
  padding:
    0 1.25rem;
}

.experience-line {
  width: 56px;
  height: 1px;

  background:
    var(--color-accent);

  margin-bottom: 1.4rem;
}

.experience-heading {
  margin:
    0 0 1rem;

  font-family:
    'Cinzel', serif;

  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.05em;

  font-weight: 400;
}

.experience-item p {
  margin: 0;

  font-size: 1rem;
  line-height: 2;

  color:
    var(--color-text-light);

  max-width: 330px;
}


/* ========================================
   HOMEPAGE PORTFOLIO
======================================== */

.portfolio-preview {
  padding:
    clamp(3rem,5vw,4.5rem)
    1.5rem
    clamp(4.5rem,7vw,6rem);

  background:
    var(--color-white);
}

.portfolio-preview-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.portfolio-intro {
  max-width: 700px;

  margin:
    -0.25rem auto 1.75rem;

  font-size: 1rem;
  line-height: 1.8;

  color:
    var(--color-text-light);

  text-align: center;
}

.portfolio-grid {
  margin-top: 0;
}

.portfolio-tile {
  display: block;
  color: inherit;
}

.portfolio-tile-img {
  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  display: block;
}

.portfolio-tile-content {
  padding-top: 0.85rem;
  text-align: center;
}

.portfolio-tile-content h3 {
  margin: 0;

  font-family:
    'Cinzel', serif;

  font-size: 0.9rem;
  line-height: 1.35;
  letter-spacing: 0.025em;

  color:
    var(--color-text-light);

  font-weight: 400;
}

.portfolio-tile:hover
.portfolio-tile-img {
  opacity: 0.92;
}


/* ========================================
   INVESTERING
======================================== */

.investment-section {
  padding:
    clamp(6.5rem,9vw,8.5rem)
    4rem
    clamp(5.5rem,8vw,7rem);

  background:
    var(--color-white);
}

.investment-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.investment-text-wrap {
  max-width: 560px;
}

.investment-title {
  margin-bottom: 2rem;
  text-align: left;
}

.investment-content p {
  margin:
    0 0 1.2rem;

  font-size: 1rem;
  line-height: 1.95;

  color:
    var(--color-text-light);
}

.investment-note {
  margin-top: 1.8rem;
  font-size: 1.02rem;
  color:
    var(--color-text);
}

.investment-cta {
  margin-top: 3rem;
}

.investment-image-wrap {
  width: 100%;
  margin:
    3.5rem 0;
}

.investment-image {
  width: 100%;
  max-width: 450px;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  display: block;

  margin-left: auto;
}


/* ========================================
   OVER MIJ
======================================== */

.about-section {
  padding:
    clamp(5.5rem,8vw,7.5rem)
    1.5rem;

  background:
    var(--color-accent);
}

.about-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.about-image {
  width: 100%;
  max-width: 370px;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  display: block;
}

.about-text-wrap {
  max-width: 500px;
}

.about-title {
  margin-bottom: 1.35rem;
  text-align: left;
  color:
    var(--color-white);
}

.about-lead {
  margin:
    0 0 1.35rem;

  font-size: 1.08rem;
  line-height: 1.8;

  color:
    var(--color-white);
}

.about-text p {
  margin:
    0 0 1.15rem;

  font-size: 1rem;
  line-height: 1.9;

  color:
    var(--color-white);
}


/* ========================================
   BLOG
======================================== */

.blog-preview-section {
  padding:
    clamp(4.5rem,7vw,6rem)
    1.5rem;

  background:
    var(--color-white);
}

.blog-preview-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.blog-preview-intro {
  max-width: 520px;

  margin:
    -0.5rem auto 2.25rem;

  font-size: 1rem;
  line-height: 1.8;

  color:
    var(--color-text-light);

  text-align: center;
}

.blog-preview-image {
  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  display: block;

  transition: opacity 0.3s ease;
}

.blog-preview-grid .col-md-4 {
  display: flex;
}

.blog-preview-card {
  display: block;
  width: 100%;
}

.blog-preview-content {
  padding-top: 0.85rem;
  text-align: center;
}

.blog-preview-content h3 {
  margin: 0;

  font-family: 'Open Sans', sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  letter-spacing: 0.01em;

  color: var(--color-text);
  font-weight: 300;
}

.blog-preview-card:hover .blog-preview-image {
  opacity: 0.94;
}

.blog-preview-cta {
  margin-top: 2rem;
  text-align: center;
}

.text-link {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  letter-spacing: 0.015em;

  color: var(--color-text);
  text-decoration: none;

  border-bottom: 1px solid rgba(102, 97, 94, 0.35);
  padding-bottom: 0.15rem;
}

.text-link:hover {
  color: var(--color-text);
  border-bottom-color: rgba(102, 97, 94, 0.65);
}


/* ========================================
   CONTACT
======================================== */

.contact-section {
  padding:
    clamp(5rem,8vw,7rem)
    1.5rem;

  background:
    var(--color-white);
}

.contact-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.contact-title {
  text-align: left;
  margin-bottom: 1.25rem;
}

.contact-lead {
  max-width: 440px;

  margin:
    0 0 2rem;

  font-size: 1.05rem;
  line-height: 1.9;

  color:
    var(--color-text-light);
}

.contact-details p {
  margin:
    0 0 0.85rem;

  color:
    var(--color-text);
}

.contact-label {
  display: block;

  margin-bottom: 0.1rem;

  font-size: 0.72rem;
  letter-spacing: 0.1em;

  text-transform: uppercase;

  color:
    var(--color-text-light);
}

.contact-form {
  width: 100%;
}

.contact-form-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 1rem;

  margin-bottom: 1rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;

  padding:
    1rem 1.1rem;

  border:
    1px solid rgba(102,97,94,0.18);

  background:
    var(--color-white);

  font-family:
    'Open Sans', sans-serif;

  font-size: 1rem;
  line-height: 1.6;

  color:
    var(--color-text);

  border-radius: 0;
  box-shadow: none;
  outline: none;
}

.contact-form textarea {
  resize: vertical;
  margin-bottom: 1.25rem;
}


/* ========================================
   FOOTER
======================================== */

.footer-bar {
  background:
    var(--color-bg-soft);

  padding:
    1rem 0;

  font-size: 0.82rem;
  line-height: 1.7;
  letter-spacing: 0.04em;

  color:
    var(--color-text);
}

.footer-link {
  color:
    var(--color-text);

  margin-left: 1rem;

  opacity: 0.9;
}

.footer-link:hover {
  color:
    var(--color-text);

  opacity: 1;
}

.footer-link-center {
  margin:
    0 0.75rem;
}


/* ========================================
   PORTFOLIO PAGINA INTRO
======================================== */

.portfolio-page-header {
  position: relative;

  overflow: hidden;

  background:
    var(--color-white);
}

.portfolio-page-header--image {
  min-height:
    clamp(420px, 52vw, 620px);

  display: flex;

  align-items: center;
  justify-content: center;
}

.portfolio-page-header__media {
  position: absolute;
  inset: 0;
}

.portfolio-page-header__media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center 42%;
}

.portfolio-page-header__overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.14) 0%,
      rgba(0, 0, 0, 0.26) 100%
    );
}

.portfolio-page-header__inner {
  position: relative;
  z-index: 2;

  max-width: 760px;

  margin: 0 auto;

  padding:
    clamp(4.5rem, 7vw, 6rem)
    1.5rem;

  text-align: center;
}

.portfolio-page-header__kicker {
  margin:
    0 0 0.85rem;

  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.15em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.92);
}

.portfolio-page-header h1 {
  max-width: 720px;

  margin:
    0 auto 1.15rem;

  font-family:
    'Cinzel', serif;

  font-size:
    clamp(2rem, 3.5vw, 3.15rem);

  line-height: 1.3;
  letter-spacing: 0.035em;
  font-weight: 400;

  color:
    var(--color-white);
}

.portfolio-page-header__text {
  max-width: 560px;

  margin: 0 auto;

  font-size: 0.95rem;
  line-height: 1.85;

  color:
    rgba(255,255,255,0.88);
}


/* ========================================
   EDITORIAL SERIEBALK
======================================== */

.portfolio-series-band {
  width: 100%;

  background:
    var(--color-accent);

  color:
    var(--color-white);
}

.portfolio-series-band__inner {
  width:
    var(--portfolio-width);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    auto minmax(360px, 1fr);

  column-gap:
    clamp(2rem, 3.2vw, 3.8rem);

  align-items: start;

  padding:
    clamp(3.8rem, 5.5vw, 5.2rem)
    0;
}

.portfolio-series-band h2 {
  margin: 0;

  transform:
    translateX(-36px);

  font-family:
    'Cinzel', serif;

  font-size:
    clamp(2.3rem, 3.6vw, 3.7rem);

  line-height: 0.95;
  letter-spacing: 0.055em;
  font-weight: 400;

  color:
    var(--color-white);

  white-space: nowrap;
}

.portfolio-series-band p {
  max-width: 610px;

  margin:
    clamp(1rem, 1.5vw, 1.45rem)
    0
    0;

  font-family:
    'Open Sans', sans-serif;

  font-size: 0.92rem;
  line-height: 1.9;
  letter-spacing: 0.015em;
  font-weight: 300;

  color:
    rgba(255,255,255,0.88);
}


/* ========================================
   EDITORIAL 12-KOLOMS GRID
======================================== */

.portfolio-editorial-grid {
  width:
    var(--portfolio-width);

  margin:
    0 auto;

  display: grid;

  grid-template-columns:
    repeat(12,minmax(0,1fr));

  column-gap:
    var(--portfolio-column-gap);

  row-gap:
    var(--portfolio-row-gap);

  padding:
    clamp(48px,4.5vw,64px)
    0
    clamp(120px,10vw,155px);
}


/* ========================================
   FOTO
======================================== */

.portfolio-plate {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: visible;
}

.portfolio-plate__button {
  display: block;

  width: 100%;
  height: 100%;

  padding: 0;
  border: 0;

  overflow: hidden;

  background:
    #f7f3f0;

  cursor: pointer;
}

.portfolio-plate img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition:
    opacity 0.3s ease;
}

@media (hover:hover) {
  .portfolio-plate__button:hover img {
    opacity: 0.94;
  }
}


/* ========================================
   EDITORIAL CAPTIONS
======================================== */

.portfolio-caption {
  position: absolute;

  top:
    calc(100% + 16px);

  left: 0;

  width: 100%;

  margin: 0;

  color:
    var(--color-text-light);
}

.portfolio-caption::before {
  content: "";

  display: block;

  width: 34px;
  height: 1px;

  margin-bottom: 9px;

  background:
    var(--color-text-light);

  opacity: 0.5;
}

.portfolio-caption__title {
  display: block;

  font-family:
    'Open Sans', sans-serif;

  font-size: 0.62rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    var(--color-text-light);
}

.portfolio-caption__sub {
  display: block;

  max-width: 92%;

  margin-top: 5px;

  font-family:
    'Cormorant Garamond', serif;

  font-size:
    clamp(0.92rem,1.05vw,1.05rem);

  line-height: 1.3;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;

  color:
    var(--color-text);
}


/* ========================================
   PATROON A
======================================== */

.portfolio-editorial-grid--pattern-a {
  grid-template-rows:
    var(--portfolio-row-small)
    var(--portfolio-row-small)
    var(--portfolio-row-tall);

  grid-template-areas:
    "a a a a a a a a b b b b"
    "a a a a a a a a c c c c"
    "d d d d e e e e e e e e";
}

.portfolio-editorial-grid--pattern-a
.grid-a {
  grid-area: a;
}

.portfolio-editorial-grid--pattern-a
.grid-b {
  grid-area: b;
}

.portfolio-editorial-grid--pattern-a
.grid-c {
  grid-area: c;
}

.portfolio-editorial-grid--pattern-a
.grid-d {
  grid-area: d;
}

.portfolio-editorial-grid--pattern-a
.grid-e {
  grid-area: e;
}


/* ========================================
   GLOED - PORTRET MET HOED OVER TWEE RIJEN
======================================== */

.portfolio-editorial-grid--gloed {
  /*
    Boven: twee sterke ankerbeelden.
    Onder: drie staande beelden naast elkaar.
  */
  grid-template-rows:
    var(--portfolio-row-small)
    var(--portfolio-row-small)
    clamp(340px, 38vw, 500px);

  grid-template-areas:
    "a a a a a a a a b b b b"
    "a a a a a a a a b b b b"
    "d d d d e e e e k k k k";
}

.portfolio-editorial-grid--gloed
.grid-k {
  grid-area: k;
}

/*
  Foto met hoed volledig zichtbaar.
  Het beeld staat in een hoger vak en wordt
  niet met object-fit: cover afgesneden.
*/
.portfolio-editorial-grid--gloed
.portfolio-plate--show-full img {
  object-fit: contain;
  object-position: center center;
}


/* ========================================
   PATROON B
======================================== */

.portfolio-editorial-grid--pattern-b {
  grid-template-rows:
    var(--portfolio-row-small)
    var(--portfolio-row-small)
    var(--portfolio-row-tall);

  grid-template-areas:
    "f f f f g g g g g g g g"
    "h h h h g g g g g g g g"
    "i i i i i i i i j j j j";
}

.portfolio-editorial-grid--pattern-b
.grid-f {
  grid-area: f;
}

.portfolio-editorial-grid--pattern-b
.grid-g {
  grid-area: g;
}

.portfolio-editorial-grid--pattern-b
.grid-h {
  grid-area: h;
}

.portfolio-editorial-grid--pattern-b
.grid-i {
  grid-area: i;
}

.portfolio-editorial-grid--pattern-b
.grid-j {
  grid-area: j;
}


/* ========================================
   SAMEN - DRIE STAANDE FOTO'S ONDERAAN
======================================== */

.portfolio-editorial-grid--samen {
  grid-template-rows:
    var(--portfolio-row-small)
    var(--portfolio-row-small)
    clamp(340px, 38vw, 500px);

  grid-template-areas:
    "f f f f g g g g g g g g"
    "h h h h g g g g g g g g"
    "i i i i k k k k j j j j";
}

.portfolio-editorial-grid--samen
.grid-k {
  grid-area: k;
}


/* ========================================
   INDIVIDUELE CROP-CORRECTIES
======================================== */

img[src*="135.jpg"] {
  object-position:
    center 50%;
}

img[src*="292.jpg"] {
  object-position:
    center 52%;
}

img[src*="331.jpg"] {
  object-position:
    center 48%;
}

img[src*="334.jpg"] {
  object-position:
    center 48%;
}

img[src*="286.jpg"] {
  object-position:
    54% center;
}

img[src*="287.jpg"] {
  object-position:
    center 48%;
}

img[src*="257.jpg"] {
  object-position:
    center 48%;
}

img[src*="162.jpg"] {
  object-position:
    center 44%;
}

img[src*="233.jpg"] {
  object-position:
    center 42%;
}

img[src*="212.jpg"] {
  object-position:
    center 45%;
}

img[src*="204.jpg"] {
  object-position:
    center 48%;
}


/* ========================================
   EDITORIAL PANORAMA
======================================== */

.portfolio-panorama {
  position: relative;

  width:
    var(--portfolio-width);

  margin:
    0 auto
    clamp(145px, 12vw, 190px);

  overflow: visible;
}

.portfolio-panorama__button {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio:
    2.25 / 1;

  padding: 0;
  border: 0;

  overflow: hidden;

  background:
    #f7f3f0;

  cursor: pointer;
}

.portfolio-panorama__button img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 56%;

  transition:
    opacity 0.3s ease;
}

@media (hover:hover) {
  .portfolio-panorama__button:hover img {
    opacity: 0.94;
  }
}


/* ========================================
   LIGHTBOX
======================================== */

.sm-lightbox {
  width: 100vw;
  height: 100dvh;

  max-width: none;
  max-height: none;

  padding: 0;
  border: 0;

  background:
    rgba(20,18,17,0.97);
}

.sm-lightbox::backdrop {
  background:
    rgba(20,18,17,0.97);
}

.sm-lightbox__stage {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  padding:
    clamp(18px,4vw,60px);
}

.sm-lightbox__img {
  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
}

.sm-lightbox__close,
.sm-lightbox__prev,
.sm-lightbox__next {
  position: absolute;
  z-index: 2;

  border: 0;

  color:
    #ffffff;

  background:
    rgba(0,0,0,0.22);

  cursor: pointer;

  border-radius: 50%;

  display: grid;
  place-items: center;
}

.sm-lightbox__close {
  top: 18px;
  right: 18px;

  width: 46px;
  height: 46px;

  font-size: 26px;
}

.sm-lightbox__prev,
.sm-lightbox__next {
  top: 50%;

  transform:
    translateY(-50%);

  width: 48px;
  height: 48px;

  font-size: 30px;
}

.sm-lightbox__prev {
  left: 18px;
}

.sm-lightbox__next {
  right: 18px;
}

.sm-lightbox__count {
  position: absolute;

  left: 50%;
  bottom: 18px;

  transform:
    translateX(-50%);

  color:
    #ffffff;

  font-size: 0.72rem;
  letter-spacing: 0.14em;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 991px) {

  :root {
    --portfolio-width:
      min(92vw,1200px);

    --portfolio-column-gap:
      clamp(38px,4.5vw,52px);

    --portfolio-row-gap:
      clamp(70px,7vw,90px);

    --portfolio-row-small:
      clamp(118px,13.8vw,170px);

    --portfolio-row-tall:
      clamp(218px,27vw,340px);
  }

  .navbar-collapse {
    padding-top: 1rem;
  }

  .navbar .navbar-nav {
    gap: 0;

    align-items:
      flex-start !important;
  }

  .navbar .nav-link {
    padding:
      0.65rem 0;
  }

  .nav-link-contact {
    border: none;

    padding:
      0.65rem 0 !important;
  }

  .dropdown-menu {
    box-shadow: none;

    background: transparent;

    padding:
      0.25rem 0 0.5rem 0.75rem;
  }

  .portfolio-series-band__inner {
    grid-template-columns:
      auto minmax(300px, 1fr);

    column-gap: 2rem;
  }

  .portfolio-series-band h2 {
    transform:
      translateX(-24px);

    font-size:
      clamp(2rem, 3.8vw, 2.7rem);
  }

  .portfolio-series-band p {
    margin-top: 0.9rem;
  }

  .portfolio-caption__sub {
    font-size: 0.92rem;
  }
}


/* ========================================
   MOBIEL
======================================== */

@media (max-width: 768px) {

  body {
    font-size: 15px;
  }

  .hero {
    aspect-ratio:
      4 / 5;
  }

  .hero-content {
    max-width: 90%;
    padding: 1.5rem;
  }

  .intro {
    padding:
      2.75rem
      1.5rem
      2rem;
  }

  .intro-lead {
    font-size: 1.15rem;
    line-height: 1.55;
    margin-bottom: 1.1rem;
  }

  .intro-text {
    font-size: 0.98rem;
    line-height: 1.75;
  }

  .experience-section {
    padding:
      2.5rem 1.5rem;
  }

  .section-title {
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
  }

  .experience-item {
    padding: 0;
    margin-bottom: 1.75rem;
  }

  .investment-section {
    padding:
      3.5rem 1.25rem;
  }

  .investment-image {
    max-width: 100%;
    margin: 0 auto;
  }

  .contact-section {
    padding:
      4rem 1.25rem;
  }

  .contact-title,
  .contact-lead,
  .contact-details {
    text-align: center;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-page-header--image {
    min-height: 420px;
  }

  .portfolio-page-header__media img {
    object-position: center 46%;
  }

  .portfolio-page-header__inner {
    max-width: 100%;

    padding:
      3.5rem
      1.35rem;
  }

  .portfolio-page-header__kicker {
    margin-bottom: 0.7rem;

    font-size: 0.62rem;
  }

  .portfolio-page-header h1 {
    margin-bottom: 0.95rem;

    font-size: 1.7rem;
    line-height: 1.38;
  }

  .portfolio-page-header__text {
    max-width: 30rem;

    margin: 0 auto;

    font-size: 0.91rem;
    line-height: 1.7;
  }

  .portfolio-series-band__inner {
    width: 100%;

    display: block;

    padding:
      2.6rem
      1.4rem
      2.8rem;
  }

  .portfolio-series-band h2 {
    transform: none;

    margin:
      0 0 1.25rem;

    font-size: 1.8rem;
  }

  .portfolio-series-band p {
    max-width: 100%;

    margin-top: 0;

    font-size: 0.91rem;
    line-height: 1.75;
  }

  .portfolio-editorial-grid,
  .portfolio-editorial-grid--pattern-a,
  .portfolio-editorial-grid--pattern-b {
    width: 100%;

    display: grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    grid-template-rows: none;
    grid-template-areas: none;

    grid-auto-flow: dense;

    column-gap: 12px;
    row-gap: 58px;

    padding:
      12px
      12px
      72px;
  }

  .portfolio-editorial-grid
  .portfolio-plate {
    grid-area:
      auto !important;

    grid-row:
      auto !important;

    position: relative;

    height: auto;
  }

  .portfolio-plate__button {
    height: auto;
  }

  .portfolio-plate--landscape {
    grid-column:
      1 / -1;
  }

  .portfolio-plate--landscape
  .portfolio-plate__button {
    aspect-ratio:
      1.42 / 1;
  }

  .portfolio-plate--portrait {
    grid-column:
      span 1;
  }

  .portfolio-plate--portrait
  .portfolio-plate__button {
    aspect-ratio:
      0.82 / 1;
  }

  /* =====================================
     FOTO MET HOED MOBIEL
  ===================================== */

  .portfolio-plate--show-full
  .portfolio-plate__button {
    aspect-ratio:
      2 / 3;
  }

  .portfolio-plate--show-full img {
    object-fit: contain;
    object-position: center center;
  }

  /*
    Bij drie staande foto's staat de derde op mobiel
    bewust gecentreerd onder de eerste twee.
  */
  .portfolio-editorial-grid--gloed
  .grid-k {
    grid-area:
      auto / 1 / auto / -1 !important;

    width:
      calc((100% - 12px) / 2);

    justify-self: center;
  }

  /*
    Samen: de twee nieuwe portretten staan naast elkaar.
    De bestaande gezinsfoto staat gecentreerd eronder.
  */
  .portfolio-editorial-grid--samen
  .grid-j {
    grid-area:
      auto / 1 / auto / -1 !important;

    width:
      calc((100% - 12px) / 2);

    justify-self: center;
  }


  .portfolio-caption {
    position: static;

    width: 100%;

    margin-top: 11px;
  }

  .portfolio-caption::before {
    width: 26px;
    margin-bottom: 7px;
  }

  .portfolio-caption__title {
    font-size: 0.55rem;
    line-height: 1.35;
    letter-spacing: 0.1em;
  }

  .portfolio-caption__sub {
    max-width: 100%;

    margin-top: 3px;

    font-size: 0.84rem;
    line-height: 1.25;
  }

  /* =====================================
     PANORAMA MOBIEL
  ===================================== */

  .portfolio-panorama {
    width: calc(100% - 24px);

    margin:
      8px auto
      95px;
  }

  .portfolio-panorama__button {
    aspect-ratio:
      1.55 / 1;
  }

  .portfolio-panorama__button img {
    object-position:
      center 52%;
  }


  .sm-lightbox__prev {
    left: 8px;
  }

  .sm-lightbox__next {
    right: 8px;
  }

  .sm-lightbox__close {
    top: 8px;
    right: 8px;
  }
}


/* ========================================
   STUDIO - PORTFOLIO GRID
   Vaste beeldverhouding per foto-formaat, automatisch
   bepaald op basis van de echte afmeting van het bestand.
   Geen met JavaScript gemeten hoogtes meer: elke foto
   staat op zichzelf, het grid blijft altijd rustig en
   voorspelbaar - ook bij het verwisselen van foto's.
======================================== */

.studio-page
.portfolio-page-header__media img {
  object-position: center 50%;
}

.studio-page
.portfolio-page-header__overlay {
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.25) 100%
    );
}


/* ========================================
   GRID
======================================== */

.portfolio-smart-grid {
  width:
    var(--portfolio-width);

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  grid-auto-rows:
    auto;

  /*
    "dense": zodra een liggende/panoramafoto niet meer
    naast een staande/vierkante foto past, vult het grid
    het lege vakje op met de eerstvolgende foto die er wél
    past - in plaats van een gat open te laten. Elke foto
    blijft gekoppeld aan zijn eigen bijschrift; alleen de
    volgorde in het grid kan hierdoor licht afwijken van de
    volgorde in de broncode.
  */
  grid-auto-flow:
    row dense;

  column-gap:
    var(--portfolio-column-gap);

  row-gap:
    clamp(64px, 6vw, 96px);

  padding:
    clamp(48px, 4.5vw, 64px)
    0
    clamp(120px, 10vw, 155px);
}

.portfolio-smart-grid
.portfolio-plate {
  align-self: start;
}


/* ========================================
   BEELDVERHOUDING PER FORMAAT
   Drie gewichten in plaats van twee (klein / groot /
   vol) geven het grid een editorial ritme: een liggende
   foto krijgt twee derde van de breedte en deelt de rij
   met één staande of vierkante foto ernaast (2/3 + 1/3),
   in plaats van dat alles overal even groot is. Panorama
   krijgt de volle breedte - de "grote adem" in de pagina.
   Bij drie staande/vierkante foto's op een rij hoeven de
   hoogtes niet elke keer millimeter gelijk te lopen; dat
   lichte verschil in bijschrift-hoogte is juist wat een
   editorial layout van een keurig rooster onderscheidt.
======================================== */

.portfolio-smart-grid
.portfolio-plate {
  grid-column: span 4;
}

.portfolio-smart-grid
.portfolio-plate .portfolio-plate__button {
  aspect-ratio: 4 / 5;
}

.portfolio-smart-grid
.portfolio-plate[data-format="landscape"] {
  grid-column: span 8;
}

.portfolio-smart-grid
.portfolio-plate[data-format="landscape"] .portfolio-plate__button {
  aspect-ratio: 3 / 2;
}

.portfolio-smart-grid
.portfolio-plate[data-format="panorama"] {
  grid-column: 1 / -1;
}

.portfolio-smart-grid
.portfolio-plate[data-format="panorama"] .portfolio-plate__button {
  aspect-ratio: 2 / 1;
}

.portfolio-smart-grid
.portfolio-plate__button {
  height: auto;
}

.portfolio-smart-grid
.portfolio-plate img {
  height: 100%;
}


/* ========================================
   CAPTION
   Ongewijzigd t.o.v. de rest van de site - staat
   gewoon onder de foto, op de eigen hoogte.
======================================== */

.portfolio-smart-grid
.portfolio-caption {
  position: static;
  width: 100%;
  padding-top: 16px;
  margin: 0;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 991px) {

  .portfolio-smart-grid {
    column-gap:
      clamp(34px, 4.8vw, 58px);

    row-gap:
      clamp(48px, 6vw, 72px);
  }

}


/* ========================================
   MOBIEL
   Op een telefoon krijgt iedere foto de volle
   breedte - rustiger dan twee kleine foto's
   naast elkaar op een klein scherm.
======================================== */

@media (max-width: 768px) {

  .portfolio-smart-grid {
    width: 100%;

    grid-template-columns:
      1fr;

    row-gap: 40px;

    padding:
      12px
      12px
      72px;
  }

  .portfolio-smart-grid
  .portfolio-plate,
  .portfolio-smart-grid
  .portfolio-plate[data-format="landscape"],
  .portfolio-smart-grid
  .portfolio-plate[data-format="panorama"] {
    grid-column: 1 / -1;
  }

  .portfolio-smart-grid
  .portfolio-caption {
    padding-top: 11px;
  }

}