/**
Theme Name: MAOSS
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maoss
Template: astra
*/

.project-grid-container {
  width: 100%;
  margin: 0 auto;
  padding: 0px 0px 0px 0px;
  z-index: 2; 
}

.project-grid-container-project-page {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
}

.project-item {
  width: 25%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  padding: 5px;
  border: 5px solid;
  border-color: #fff;
  background-color: #FFF;
}

.project-item:hover {
  background-color: #fff; /* of weghalen */
}

@media (max-width: 600px) {
  .project-item {
    width: 50%;
    padding: 0px;
  }

  .project-grid-container-project-page {
    padding: 5px;
  }

  .project-grid-container {
    width: 100%;
  }

}

.project-item img,
.project-item video {
  width: 100%;
  height: auto;
  position: relative;
}

.project-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.project-content h2 {
  color: #fff;
  text-align: center;
  padding: 15px;
}

.project-content h2 {
  text-align: center;
  padding: 15px;
}


.additional-media-item {
  position: relative;
}

.media-wall-title-container {
  display: flex;
  align-items: left;
  /* Zorgt dat de afbeelding en tekst in het midden worden uitgelijnd */
  justify-content: left;
  /* Centreert de inhoud horizontaal */
  width: 100%;
  margin-left: 10%;
  color: #000;
}

.media-wall-title {
  display: none;
}

@media (max-width: 767px) {
  .media-wall-title-container h1.media-wall-title {
    display: none;
    color: #000;
  }

  .header-image {
    display: none;
  }

  .project-content {
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
    /* Verplaats inhoud naar de onderkant */
    align-items: center;
    /* Centreer de inhoud horizontaal, indien gewenst */
    height: 100%;
    /* Zorg ervoor dat de container de volledige hoogte heeft */
  }

  .project-content h2 {
    font-size: 10px;
    width: 100%;
  }

  .all-projects-button .button {
    display: none;
  }

  .ast-builder-layout-element .ast-site-identity{
    margin: 0px;
  }

  .project-item-space, .project-content {
    /* Donkere achtergrond voor alleen de overlay */
    opacity: 1;
    background-color: rgba(000, 000, 000, 0.5);
    backdrop-filter: blur(1px);
    /* Voeg het blur-effect toe */
    -webkit-backdrop-filter: blur(1px);
    /* Voor oudere versies van Safari */
  }

  .site-above-footer-wrap[data-section="section-above-footer-builder"] .ast-builder-grid-row{
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .project-item {
    width: 33.3%;
  }

  .ast-builder-layout-element .ast-site-identity{
    margin: 0px;
  }

  .site-above-footer-wrap[data-section="section-above-footer-builder"] .ast-builder-grid-row{
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}


.media-wall-title {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 50px;
}

.header-image {
  width: 65px;
  /* Pas dit aan op basis van de gewenste grootte */
  height: auto;
  margin-right: 10px;
  /* Ruimte tussen afbeelding en tekst */
}

.ast-container,
.ast-container-fluid {
  margin: none !important;
}

.project-highlighted-image {
  text-align: center;
  margin-top: 15px;
  /* Ruimte tussen titel en afbeelding */
}

.project-highlighted-image img {
  max-width: 100%;
  height: auto;
}

.project-gallery-image {
  margin-top: 20px;
}


.all-projects-button .button {
  text-decoration: none;
  border-radius: 0, 0, 5, 5;
  padding-top: 10px;
  top: 20;
}

.project-meta {
  text-align: left;
  color: #000;
  margin-left: 10%;
}

@media (min-width: 1024px) {

  /* Alleen toepassen op grotere schermen zoals een pc */
  .project-gallery-image img, .project-gallery-image video {
    max-width: 1200px;
    /* Gewenste max breedte */
    max-height: 800px;
    /* Gewenste max hoogte */
    display: block;
    margin: 0 auto;
    /* Centreert de afbeelding horizontaal */
    object-fit: cover;
  }

.site-above-footer-wrap[data-section="section-above-footer-builder"] .ast-builder-grid-row{
	padding-left: 26px !important;
	padding-right: 36px !important;
}
}


.entry-title {
  display: none;
}

.justifytext {
  text-align: justify;
}

.media-wall-titles{
  color: #000;
  text-align: left;
}

.ast-container, .ast-container-fluid{
  padding: none;
}
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 9999;
  background-color: transparent; /* Startkleur van de header */
  transition: background-color 0.3s ease; /* Zorgt voor een overgangseffect */
}

.ast-container, .site-above-footer-wrap[data-section="section-above-footer-builder"] .ast-builder-grid-row{
max-width: 100%;
}
p{
  margin-bottom: 0px;
}
.project-page-container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.back-to-projects {
  margin-bottom: 10px; /* Optionele extra ruimte onder de knop */
}

.back-button {
  text-decoration: none;
  background-color: #000; /* Zwarte knop */
  color: #fff; /* Witte tekst */
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 14px;
  display: inline-block;
  text-align: center;
}

.back-button:hover {
  background-color: #333; /* Donkerder bij hover */
}

.project-content-wrapper {
  display: flex;
  align-items: flex-start; /* Beide kolommen bovenaan uitlijnen */
  gap: 20px; /* Ruimte tussen de tekst en afbeeldingen */
}

.project-details {
  width: 25%; /* Linker kolom: 25% breedte */
  position: sticky;
  top: 120px; /* Zorgt dat de tekst en knop onder de header blijven */
  color: #000; /* Zwarte tekst */
  background-color: #fff; /* Optioneel: achtergrondkleur om overlap te voorkomen */
  z-index: 10; /* Zorgt dat de sticky kolom boven andere elementen blijft */
  display: flex;
  flex-direction: column;
}

.project-details h3{
  color: #000; /* Zwarte tekst */
}

.project-title {
  margin-bottom: 50px;
  color: #000; /* Zwarte titel */
}

.details-meta {
  font-size: 14px;
  color: #000;
  margin-bottom: 15px;
}

.details-meta.justify {
  text-align: justify;
}

.project-gallery-section {
  width: 75%; /* Rechter kolom: 75% breedte */
  display: flex;
  flex-direction: column; /* Afbeeldingen onder elkaar */
  gap: 20px; /* Ruimte tussen afbeeldingen */
}

.gallery-item img {
  max-width: 100%; /* Afbeelding past binnen de kolom */
  width: auto; /* Geen forcering van breedte */
  height: auto; /* Behoud originele proporties */
  margin: 10px auto; /* Voeg marge toe rondom elke afbeelding */
  display: block; /* Centraal uitlijnen */
  border-radius: 0; /* Geen afgeronde hoeken */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optioneel: schaduw voor een lichte scheiding */
}
/* Standaard weergave voor desktop */
.project-content-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-direction: row; /* Tekst links, afbeeldingen rechts */
}

/* Tekst sticky op desktop */
.project-details {
  width: 25%; /* Breedte tekstkolom op desktop */
  position: sticky;
  top: 100px; /* Zorgt dat de tekst blijft staan onder de header */
  color: #000; /* Zwarte tekst */
  padding: 10px;
}

/* Afbeeldingen rechts */
.project-gallery-section {
  width: 75%; /* Breedte afbeeldingskolom op desktop */
}

/* Responsiveness voor mobiele apparaten */
@media (max-width: 768px) {
  .project-content-wrapper {
      flex-direction: column; /* Zet tekst boven afbeeldingen */
  }

  .project-details,
  .project-gallery-section {
      width: 100%; /* Beide secties gebruiken de volledige breedte */
  }

  .project-details {
      position: static; /* Sticky gedrag uitschakelen op mobiel */
      padding: 0; /* Geen extra padding nodig op mobiel */
  }

  .project-gallery-section {
      margin-top: 20px; /* Ruimte tussen tekst en afbeeldingen */
  }

  .gallery-item img {
      width: 100%; /* Afbeeldingen vullen de breedte van de container */
      height: auto; /* Behoud originele verhoudingen */
      margin-bottom: 20px; /* Ruimte tussen afbeeldingen */
  }

  .back-to-projects {
    display:none;
  }
}

.back-to-projects2 {
  display:none;
}

/* --- FIX: project titles zichtbaar onder thumbnails --- */

/* Als jouw template de titel als mw-title rendert */
.project-item .mw-title{
  display: block !important;
  opacity: 1 !important;
  position: relative !important;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #000;
}

/* Als jouw template (of WP) de titel als entry-title rendert binnen de grid */
.project-item .entry-title{
  display: block !important;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #000;
}

.project-item .mw-title,
.project-item .entry-title{
    text-align: center;
    width: 100%;
    display: block;
    margin-top: 12px;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #111;
}

/* =========================================================
   MAOSS TYPOGRAPHY
   ========================================================= */

/* Body tekst */
body,
p,
li,
span,
a{
    font-family: 'pillat-regular' !important;
}

/* Headings */
h1{
    font-family: 'pillat-bold' !important;
}

h2,
h3,
.project-item .mw-title,
.project-item .entry-title{
    font-family: 'pillat-demibold' !important;
}

/* =========================================================
   MAOSS GALLERY FOCUS
   ========================================================= */

/* Meer ruimte om de hele gallery */
.project-grid-container{
  padding: 70px 90px;
}

/* Meer ruimte tussen items (jouw items hebben nu padding/border logica) */
.project-item{
  padding: 22px;            /* was lager */
  border: 0 !important;     /* weg met harde kaders */
  background: transparent;
}

/* Geef de afbeelding zelf een subtiele scheiding i.p.v. witte border */
.project-item img,
.project-item video{
  display: block;
  border-radius: 6px;       /* 0 als je super strak wil */
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
}

/* Full width grid terug, met lucht */
.project-grid-container{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 10px !important; /* pas aan naar smaak */
}

/* =========================================================
   MAOSS DARK MODE
   ========================================================= */

body{
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}

/* Containers */
.ast-container,
.project-grid-container,
.project-item{
    background-color: transparent !important;
}

/* Header */
.site-header{
    background-color: #0a0a0a !important;
}

/* Menu links */
.ast-builder-menu-1 .menu-item > a{
    color: #ffffff !important;
}

/* Project titles */
.project-item .mw-title,
.project-item .entry-title{
    color: #ffffff !important;
}

/* =========================================================
   MAOSS DARK HEADER FIX
   ========================================================= */

/* Hele header area */
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-builder-grid-row{
    background-color: #0a0a0a !important;
}

/* Logo + tekst */
.ast-site-identity,
.ast-site-identity a{
    color: #ffffff !important;
}

/* Menu */
.ast-builder-menu-1 .menu-item > a{
    color: #ffffff !important;
}

/* =========================================================
   MAOSS FULL BLACK BACKGROUND FIX
   ========================================================= */

/* Hele pagina */
html,
body{
    background-color: #000000 !important;
}

/* Alle hoofd wrappers */
#page,
.site,
.site-content,
.ast-container,
.ast-container-fluid{
    background-color: #000000 !important;
}

.project-grid-container:hover .project-item{
  opacity: 0.45;
  filter: grayscale(15%) saturate(80%);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

.project-grid-container:hover .project-item:hover{
  opacity: 1;
  filter: none;
  transform: translateY(-6px);
}

/* =========================================================
   ASTRA ABOVE FOOTER: kill white bars
   ========================================================= */

.site-above-footer-wrap[data-section="section-above-footer-builder"],
.site-above-footer-wrap[data-section="section-above-footer-builder"] .ast-builder-grid-row,
.site-above-footer-wrap[data-section="section-above-footer-builder"] .ast-builder-grid-row-container{
  background: #000 !important;
}

/* Als die sectie alleen leeg is: maak 'm gewoon weg */
.site-above-footer-wrap[data-section="section-above-footer-builder"]{
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}