/* De container die de afbeelding en het grid samenvoegt */
.bauhaus-container {
  position: relative;
  width: 500px; /* Pas aan naar wens */
  height: 500px;
  overflow: hidden;
}

/* De achtergrondafbeelding vult de hele container */
.grid-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Het CSS Grid dat over de afbeelding heen ligt */
.bauhaus-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px; /* De fijne witte lijnen tussen de blokken */
  background-color: #fff; /* Kleur van de tussenlijnen en dichte vlakken */
  z-index: 2;
}

/* De basis-stijl voor elk grid-vakje */
.sector {
  background-color: #fff; /* Standaard dekt wit de afbeelding af */
  transition: background-color 0.3s;
}

/* Maak specifieke vakjes transparant zodat de foto daar zichtbaar is */
.sector.transparent {
  background-color: transparent;
}

/* --- De Bauhaus Vormen (Kwartcirkels met clip-path) --- */

/* Kwartcirkel linksboven: ronding zit rechtsonder */
.sector.top-left {
  clip-path: ellipse(100% 100% at 0% 0%);
}

/* Kwartcirkel rechtsboven: ronding zit linksonder */
.sector.top-right {
  clip-path: ellipse(100% 100% at 100% 0%);
}

/* Halve cirkel links: ronding strekt naar rechts */
.sector.side-left {
  clip-path: ellipse(100% 50% at 0% 50%);
}

/* Kwartcirkel linksonder: ronding zit rechtsboven */
.sector.bottom-left {
  clip-path: ellipse(100% 100% at 0% 100%);
}

/* Kwartcirkel rechtsonder: ronding zit linksboven */
.sector.bottom-right {
  clip-path: ellipse(100% 100% at 100% 100%);
}

/* Effen blauw vlak met blend-mode */
.sector.solid-blue {
  background-color: #1e3a8a;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.about {
  font-size: 1.2rem !important;
}

/* Zorg dat de vakken die foto moeten tonen volledig transparant zijn */
.sector.transparent {
  background-color: transparent;
}

.about-petal-grid {
  --petal-bg: url('/themes/custom/boat4you_theme/images/azure_boat.jpg');
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  aspect-ratio: 4 / 4; /* Zorgt dat de grid-cellen perfecte vierkanten zijn voor ronde cirkels */
  width: 100%;
  position: relative;  /* Cruciaal: dit wordt het ankerpunt voor de foto */
}

.petal-cell {
  width: 100%;
  height: 100%;
}

/* Dit element zorgt ervoor dat de foto overal perfect aansluit én zijn aspect-ratio behoudt */
.petal-cell::before {
  content: "";
  position: absolute; /* Kijkt naar de .about-petal-grid container, niet naar de individuele cel */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--petal-bg);
  background-size: cover;       /* Snijdt de foto netjes bij zonder te vervormen */
  background-position: center;  /* Centreert de boot in het grid */
  pointer-events: none;
  z-index: 1;
}

/* ==========================================
   CLIP PATHS (Exacte vormen uit de afbeelding)
   ========================================== */

/* RIJ 0 (Top) */
.petal-cell[data-row="0"][data-col="0"] { clip-path: inset(0 round 100% 0 0 0); opacity: 0.5; }
.petal-cell[data-row="0"][data-col="1"] { clip-path: inset(0 round 100% 0 0 0); }     
.petal-cell[data-row="0"][data-col="2"] { clip-path: inset(0 round 0 0 100% 0); opacity: 0.5; }       
.petal-cell[data-row="0"][data-col="3"] { clip-path: inset(0 round 0 100% 0 0); opacity: 0.5; }       

/* RIJ 1 (Midden) */
.petal-cell[data-row="1"][data-col="0"] { clip-path: inset(0 round 0 0 0 100%); opacity: 0.5; }       
.petal-cell[data-row="1"][data-col="1"] { clip-path: inset(0 round 0 0 100% 0); }        
.petal-cell[data-row="1"][data-col="2"] { clip-path: inset(0 round 100% 0 0 0); opacity: 0.5; }     
.petal-cell[data-row="1"][data-col="3"] { clip-path: inset(0 round 0 0 100% 0); opacity: 0.5; }       

/* RIJ 2 (Bodem) */
.petal-cell[data-row="2"][data-col="0"] { clip-path: inset(0 round 100% 0 0 0); opacity: 0.5; } 
.petal-cell[data-row="2"][data-col="1"] { clip-path: inset(0 round 0 0 0 100%); }     
.petal-cell[data-row="2"][data-col="2"] { clip-path: inset(0 round 0 100% 0 0); opacity: 0.5; }     
.petal-cell[data-row="2"][data-col="3"] { clip-path: inset(0 round 0 0 100% 0); opacity: 0.2 }       

/* RIJ 2 (Bodem) */
.petal-cell[data-row="3"][data-col="0"] { clip-path: inset(0 round 100% 0 0 0); opacity: 0.5; } 
.petal-cell[data-row="3"][data-col="1"] { clip-path: inset(0 round 0 0 0 100%); }     
.petal-cell[data-row="3"][data-col="2"] { clip-path: inset(0 round 0 0 100% 0); opacity: 0.5; }    
.petal-cell[data-row="3"][data-col="3"] { clip-path: inset(0 round 0 0 0 100%); opacity: 0.5; }