/* ==========================================================================
   Portfolio: lichtbundel achter de featured image + pop-up (lightbox)
   Hoort bij de listing-kaarten op /portfolio/ (listing-item 306).
   De opbouw van de overlay staat in portfolio-modal.js.
   ========================================================================== */

/* ==========================================================================
   Lichtbundel achter de featured image
   Zelfde idee als de glans op de meterbalken (webdesign > optimalisatie):
   een gradient die via background-position doorloopt.

   Waarom: de logo's staan met object-fit:contain op een donkere achtergrond.
   Een deel ervan is behoorlijk donker - Victima haalt 31 gemiddelde helderheid
   met 81% donkere pixels, Restaurant Rijnzicht 38/75%. Donkere tekst valt daar
   weg. De bundel zet daar een zachte lichtere baan achter.

   De bundel ligt ACHTER de afbeelding (z-index), zodat het beeld zelf niet
   overstraald wordt - alleen de ruimte eromheen licht op.
   ========================================================================== */

/* De lichtere ondergrond achter het logo staat NIET hier maar in de custom_css
   van listing-item 306. Reden: Elementor schrijft die weg als
   `.elementor-306 .elementor-element.elementor-element-pfimgw`, en dat wint qua
   specificiteit van elke regel die we hier zetten.

   Waarom die ondergrond nodig is: de featured images zijn PNG's die voor ~90%
   transparant zijn. De donkere delen zitten IN het logo ("VICTIMA" staat op
   helderheid 35) en worden niet lichter van een gradient erachter of een
   screen-laag erover - er moet licht achter de letters vandaan komen. */

/* Laag 1: de lichtval achter het beeld, voor de ruimte rondom het logo. */
.elementor .portfolio-img-wrap::before{
  content:"";
  position:absolute;inset:0;
  z-index:0;                 /* onder de afbeelding, boven de kaartgradient */
  pointer-events:none;
  /* 115deg volgt de diagonaal van de kaart; de bundel is breed en zacht,
     zodat het meer een lichtval is dan een streep */
  background:linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.06) 42%,
    rgba(255,255,255,.13) 50%,
    rgba(255,255,255,.06) 58%,
    transparent 70%);
  background-size:200% 100%;
  background-position:100% 0;
  animation:tm-pf-sweep 7s linear infinite;
}

/* de afbeelding en de categorie-pill blijven boven de achterste bundel */
.elementor .portfolio-img-wrap > .elementor-element{position:relative;z-index:1;}

@keyframes tm-pf-sweep{to{background-position:-100% 0;}}

/* Laag 2: dezelfde bundel BOVEN het beeld, in screen-blendmodus.
   Dit is de laag die het echte werk doet. De logo's hebben zelf een donkere
   achtergrond die de laag eronder afdekt, dus daar helpt laag 1 niet: donkere
   letters in het logo (Victima, Restaurant Rijnzicht) blijven dan onleesbaar.
   `mix-blend-mode:screen` licht alleen donkere partijen op en laat lichte
   kleuren vrijwel ongemoeid, dus het logo verkleurt niet. */
.elementor .portfolio-img-wrap::after{
  content:"";
  position:absolute;inset:0;
  z-index:3;
  pointer-events:none;
  mix-blend-mode:screen;
  /* Brede, hoge piek: de bundel moet door de eigen donkere achtergrond van de
     logo's heen werken. Met een smalle, zwakke gradient was de winst midden in
     de kaart gemeten 0 helderheidspunten - precies waar het logo staat. */
  background:linear-gradient(115deg,
    transparent 28%,
    rgba(130,155,195,.13) 41%,
    rgba(190,212,245,.30) 50%,
    rgba(130,155,195,.13) 59%,
    transparent 72%);
  background-size:200% 100%;
  background-position:100% 0;
  animation:tm-pf-sweep 7s linear infinite;
  transition:opacity .4s ease;
}

/* Bij hover loopt dezelfde bundel sneller en feller door, zodat de kaart
   oplicht op het moment dat je erover gaat. */
.elementor .portfolio-card:hover .portfolio-img-wrap::after{
  animation:tm-pf-sweep 2.6s linear infinite;
  background-image:linear-gradient(115deg,
    transparent 28%,
    rgba(150,175,215,.18) 41%,
    rgba(215,232,255,.42) 50%,
    rgba(150,175,215,.18) 59%,
    transparent 72%);
}

@media (prefers-reduced-motion:reduce){
  .elementor .portfolio-img-wrap::before,
  .elementor .portfolio-img-wrap::after,
  .elementor .portfolio-card:hover .portfolio-img-wrap::after{
    animation:none;background-position:50% 0;
  }
}

/* ---- overlay ---- */
.tm-pf-modal{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
  background:rgba(4,6,9,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .32s ease, visibility 0s linear .32s;
}
.tm-pf-modal.is-open{
  opacity:1;visibility:visible;
  transition:opacity .32s ease, visibility 0s linear 0s;
}

/* ---- venster ---- */
.tm-pf-modal__box{
  position:relative;
  width:min(1040px, 100%);
  max-height:calc(100vh - 64px);
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,#10141a,#0b0e12);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  overflow:hidden;
  transform:translateY(18px) scale(.97);
  transition:transform .36s cubic-bezier(.2,.7,.2,1);
}
.tm-pf-modal.is-open .tm-pf-modal__box{transform:translateY(0) scale(1);}

/* ---- sluitknop ----
   Staat boven de afbeelding, die licht kan zijn. Vandaar de donkere,
   vrijwel dekkende bol met schaduw: zo blijft het kruisje overal leesbaar. */
.tm-pf-modal__close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(8,11,15,.92);
  box-shadow:0 4px 14px rgba(0,0,0,.5);
  color:#eef2f6;
  cursor:pointer;
  font-size:0;               /* het kruisje is een SVG, geen tekst */
  transition:background .25s ease, border-color .25s ease,
             color .25s ease, transform .25s ease;
}
.tm-pf-modal__close:hover{
  background:#df6624;border-color:#df6624;color:#08111a;
  transform:rotate(90deg);
}
/* !important omdat het thema een eigen breedte op inline-SVG zet; zonder dit
   krimpt het kruisje tot een streepje van 4px. */
.tm-pf-modal .tm-pf-modal__close svg{
  width:17px !important;height:17px !important;
  min-width:17px;min-height:17px;
  max-width:none;max-height:none;
  display:block;flex:0 0 auto;
}
.tm-pf-modal__close:focus-visible{
  outline:2px solid #df6624;outline-offset:3px;
}

/* ---- afbeelding ----
   De hoogte wordt op de <img> zelf begrensd, niet met max-height:100% op een
   percentage van het figuur. Dat laatste werkt hier niet: in een flex-container
   rekent het percentage tegen de content-hoogte terwijl de flex-regels het kind
   toch laten groeien, waardoor het beeld over de padding heen liep en de
   overflow:hidden van het venster er een strook af sneed.

   --tm-pf-fig-h is de ruimte voor de afbeelding zelf; de padding komt daar
   buiten (content-box), dus het figuur wordt in totaal 52px hoger. */
.tm-pf-modal__figure{
  --tm-pf-fig-h:min(48vh, 460px);
  margin:0;flex:0 0 auto;
  box-sizing:content-box;
  position:relative;          /* dragend vlak voor de bundels hieronder */
  /* Zelfde ondergrond als het beeldkader in de kaart: de logo's zijn grotendeels
     transparante PNG's, dus donkere logotekst heeft licht achter de letters
     nodig. Hier iets ingetogener dan in de kaart, omdat het beeld veel groter
     is en de bundel dus meer oppervlak raakt. */
  background:
    radial-gradient(110% 88% at 32% 26%,
      rgba(226,234,248,.16) 0%,
      rgba(190,205,228,.10) 40%,
      rgba(140,158,186,.04) 66%,
      transparent 88%),
    linear-gradient(150deg,#212934 0%,#19202a 46%,#111721 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
  /* de hele afbeelding blijft zichtbaar, net als in de kaart */
  display:flex;align-items:center;justify-content:center;
  height:var(--tm-pf-fig-h);
  padding:26px 30px;
  overflow:hidden;            /* houdt de bundels binnen het vlak */
}

/* Bundel achter de afbeelding, zelfde beweging als op de kaart. */
.tm-pf-modal__figure::before{
  content:"";
  position:absolute;inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.05) 42%,
    rgba(255,255,255,.11) 50%,
    rgba(255,255,255,.05) 58%,
    transparent 70%);
  background-size:200% 100%;
  background-position:100% 0;
  animation:tm-pf-sweep 9s linear infinite;
}

/* En dezelfde bundel eroverheen in screen-blend, die de donkere logotekst
   oplicht zonder de lichte partijen te laten verbleken. Rustiger dan op de
   kaart (9s, lagere dekking): in de pop-up kijk je langer naar hetzelfde beeld,
   dus een snelle felle sweep gaat daar storen. */
.tm-pf-modal__figure::after{
  content:"";
  position:absolute;inset:0;
  z-index:2;
  pointer-events:none;
  mix-blend-mode:screen;
  background:linear-gradient(115deg,
    transparent 28%,
    rgba(130,155,195,.10) 41%,
    rgba(190,212,245,.24) 50%,
    rgba(130,155,195,.10) 59%,
    transparent 72%);
  background-size:200% 100%;
  background-position:100% 0;
  animation:tm-pf-sweep 9s linear infinite;
}

.tm-pf-modal__figure img{
  position:relative;z-index:1;   /* tussen de twee bundels in */
  max-width:100%;
  max-height:var(--tm-pf-fig-h);
  width:auto;height:auto;
  object-fit:contain;display:block;
  border-radius:10px;
}

@media (prefers-reduced-motion:reduce){
  .tm-pf-modal__figure::before,
  .tm-pf-modal__figure::after{animation:none;background-position:50% 0;}
}

/* ---- tekst ---- */
.tm-pf-modal__body{
  padding:26px 30px 30px;
  overflow-y:auto;           /* lange beschrijvingen scrollen binnen het venster */
  -webkit-overflow-scrolling:touch;
}
.tm-pf-modal__cat{
  display:inline-block;margin:0 0 12px;
  padding:5px 12px;border-radius:999px;
  background:rgba(223,102,36,.92);color:#fff;
  font-family:"Sora",sans-serif;font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}
.tm-pf-modal__title{
  margin:0 0 14px;
  font-family:"Sora",sans-serif;font-size:1.6rem;font-weight:700;
  line-height:1.3;color:#eef2f6;
}
.tm-pf-modal__text{
  font-family:"Inter",sans-serif;font-size:1rem;font-weight:400;
  line-height:1.75;color:#aeb6c2;
}
.tm-pf-modal__text p{margin:0 0 1em;}
.tm-pf-modal__text p:last-child{margin-bottom:0;}
.tm-pf-modal__text a{color:#df6624;}

/* het venster scrollt vanbinnen; de pagina erachter staat stil */
body.tm-pf-modal-open{overflow:hidden;}

/* ---- smallere schermen ---- */
@media(max-width:767px){
  .tm-pf-modal{padding:16px 12px;}
  .tm-pf-modal__box{max-height:calc(100vh - 32px);border-radius:16px;}
  .tm-pf-modal__figure{--tm-pf-fig-h:min(32vh, 300px);padding:16px 18px;}
  .tm-pf-modal__body{padding:20px 20px 24px;}
  .tm-pf-modal__title{font-size:1.25rem;}
  .tm-pf-modal__text{font-size:.95rem;}
}

/* ---- bewegingsvoorkeur ---- */
@media (prefers-reduced-motion:reduce){
  .tm-pf-modal,
  .tm-pf-modal__box,
  .tm-pf-modal__close{transition:none;}
  .tm-pf-modal__close:hover{transform:none;}
}