/*
Theme Name: MOP
Theme URI:
Description: Custom thema ontwikkeld door Pixelz Digital
Version: 1.0.0
Author: MOP
Author URI:
Text Domain: mop
*/



@font-face {
    font-family: "Cormorant Garamond";
    src: url("assets/fonts/Cormorant_Garamond/CormorantGaramond-VariableFont_wght.ttf") format("truetype");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
  
@font-face {
    font-family: "Cormorant Garamond";
    src: url("assets/fonts/Cormorant_Garamond/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}
  
@font-face {
    font-family: "Great Vibes";
    src: url("assets/fonts/Great_Vibes/GreatVibes-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
  
@font-face {
    font-family: "Google Sans";
    src:
      local("Google Sans"),
      local("GoogleSans-Regular"),
      local("Product Sans"),
      local("ProductSans-Regular");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
  
  
  
:root {
    --font-primary: "Cormorant Garamond", serif;
    --font-script: "Great Vibes", cursive;
    --font-sans: "Google Sans", "Avenir Next", "Segoe UI", sans-serif;
  
    --spacing-lg: 75px;
    --spacing-md: 45px;
    --spacing-sm: 25px;
  
    --color-white: #FFF;
    --color-white-semi: rgba(255,255,255,0.65);
    --color-dark: #000;
    --color-green: #62b532;
    --color-red: #b53241;

    --blur-md: blur(20px) saturate(150%);
    --blur-sm: blur(5px) saturate(150%);
}
  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 16px;
    background: var(--color-dark);
    background-image: linear-gradient(335deg,rgba(51, 5, 35, 0.5) 0%, rgba(50, 9, 51, 0.5) 33%, rgba(32, 7, 41, 0.5) 65%, rgba(0, 0, 0, 0.5) 85%) !important;
    background-size: cover;
}
  
.font-cormorant {
    font-family: var(--font-primary);
}
  
.font-great-vibes {
    font-family: var(--font-script);
}
  
.font-google-sans {
    font-family: var(--font-sans);
}
  
  
  
.title-lg {
    font-family: var(--font-primary);
    font-size: 5rem;
    font-weight: 500;
}
  
.title-md {
    font-family: var(--font-primary);
    font-size: 3.5rem;
    font-weight: 500;
}

.title-sm {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 500;
}

.text-lg {
    font-size: 1.25em;
    font-family: var(--font-sans);
  }
  
  
  
  
.wrapper {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}










 /* OSMO BUTTON */

 .btn-group {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
    justify-content: center;
    display: flex;
  }
  
  .btn-icon-link {
    width: fit-content;
    background-color: rgba(255,255,255,0.05);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    grid-column-gap: .5em;
    grid-row-gap: .5em;
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    display: flex;
    padding: 16px 28px 15px 28px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: 450ms backdrop-filter ease;
  }
  
  .btn-icon-icon {
    z-index: 1;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    display: flex;
    position: relative;
    transform: translateY(1px);
  }
  
  .btn-icon-icon__bg {
    background-color: currentColor;
    border-radius: .125em;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  
  .btn-icon-icon__wrap {
    color: #a29a65;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  
  .btn-icon-icon__wrap.color--white {
    color: #fff;
  }
  
  .btn-icon-icon__list {
    flex: none;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    display: flex;
  }
  
  .btn-icon-icon__arrow {
    flex: none;
    width: 1em;
    height: 100%;
    padding: .2em;
    color: var(--color-dark);
  }
  
  .btn-icon-content {
    grid-column-gap: .5em;
    grid-row-gap: .5em;
    color: #fff;
    background-color: #a29a65;
    border-radius: .25em;
    justify-content: flex-start;
    align-items: center;
    padding: .6125em .75em;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  
  .btn-icon-content__text {
    font-size: 1em;
  }
  
  .btn-icon-content__mask {
    z-index: 1;
    flex: none;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  
  .btn-icon-content__bg {
    z-index: 0;
    background-color: #302d1c;
    width: 120%;
    height: 100%;
    position: absolute;
    bottom: 0%;
    left: -10%;
    transform: translate(0, 175%) rotate(15deg);
  }
  
  /* Global attribute to easily control easing and timing of all targetted elements */
  [data-button-anim-target]{
    transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1);
  }
  
  /* Fake a duplicate text element using text shadow without blur  */
  /* We save the distance in a variable for easy use in the CSS animation */
  .btn-icon-content__text{
    --text-duplicate-distance: 1.5em;
    text-shadow: 0px var(--text-duplicate-distance) currentColor;
  }
  
  /* Only apply hover animations if they are actually not supported */
  @media (hover:hover) and (pointer:fine){

    .btn-icon-link:hover {
        backdrop-filter: var(--blur-sm);
        -webkit-backdrop-filter: var(--blur-sm);
    }
  
    .btn-icon-link:hover .btn-icon-content__text{ transform: translate(0px, calc(-1 * var(--text-duplicate-distance))); }
      
    .btn-icon-link:hover .btn-icon-icon__bg{ transform: rotate(90deg); }
    
    .btn-icon-link:hover .btn-icon-icon__arrow{ transform: translate(200%, 0px); }
    
    .btn-icon-link:hover .btn-icon-content__bg{ transform: translate(0px, 0%) rotate(0deg); }

  }


  /* ── Escort card (shared between aanbod block & archive) ── */

  .aanbod__card {
      display: block;
      position: relative;
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 15px;
      overflow: hidden;
      transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
      text-decoration: none;
      color: inherit;
  }
  .aanbod__card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      box-shadow: inset 0 0 1px rgba(255,255,255,0.75);
      border-radius: inherit;
      pointer-events: none;
  }
  .aanbod__card:hover {
      transform: translateY(-4px);
      border-color: rgba(255,255,255,0.15);
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  }
  .aanbod__thumb {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      display: block;
  }
  .aanbod__name {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10px;
      padding: 10px 16px;
      font-size: 1rem;
      font-weight: 600;
      background-color: rgba(0,0,0,0.1);
      backdrop-filter: var(--blur-md);
      -webkit-backdrop-filter: var(--blur-md);
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.05);
      display: flex;
      flex-direction: column;
      gap: 2px;
      transition: 450ms backdrop-filter ease;
  }
  .aanbod__card:hover .aanbod__name {
      backdrop-filter: var(--blur-sm);
      -webkit-backdrop-filter: var(--blur-sm);
  }
  .aanbod__name strong {
      font-family: var(--font-primary);
      font-size: 1.35rem;
      font-weight: 500;
  }
  .aanbod__name ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  .aanbod__name ul li {
      text-align: left;
  }
  .aanbod__name ul li span {
      font-size: 0.8em;
      font-family: var(--font-sans);
  }
  .aanbod__name ul li.availability.available span {
      color: var(--color-green);
  }
  .aanbod__name ul li.availability.unavailable span {
      color: var(--color-red);
  }
  /* ── Beschikbaarheid badge op card ── */
  .aanbod__badge {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 8px;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.08);
      font-family: var(--font-sans);
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,0.7);
  }
  .aanbod__badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
  }
  .aanbod__badge.is-available .aanbod__badge-dot {
      background: var(--color-green);
      box-shadow: 0 0 6px rgba(98,181,50,0.5);
  }
  .aanbod__badge.is-available {
      color: var(--color-green);
  }
  .aanbod__badge.is-unavailable .aanbod__badge-dot {
      background: var(--color-red);
      box-shadow: 0 0 6px rgba(220,60,60,0.4);
  }
  .aanbod__badge.is-unavailable {
      color: rgba(255,255,255,0.4);
  }