/* ==========================================================================
   1. STRUCTUUR EN TWEE-KOLOMS LAY-OUT (SYNCHROON UITKLAPPEN)
   ========================================================================== */

   /* De hoofdcontainer fungeert als de algehele widget */
   .kino-container {
     width: 100%;
     margin-top: 0;
     margin-bottom: 5px; /* AANGEPAST: Zorgt voor exact 5px ruimte tussen de gesloten film-items */
     display: block;
   }

   /* De klikbare triggerbalk: zet de eerste rij beelden en de titel naast elkaar */
   .kino-trigger {
     display: flex !important;
     width: 100%;
     align-items: flex-end;
     cursor: pointer;
     list-style: none;
     margin-bottom: 0; /* AANGEPAST: Marge hier weggehaald om verschuiving te voorkomen */
   }

   /* De content-container die eronder verschijnt na het openklikken */
   .kino-content {
     display: flex;
     width: 100%;
     align-items: flex-start;
     margin-top: 5px; /* AANGEPAST: Geeft exact 5px ruimte tussen Rij 1 en Rij 2 bij het uitklappen */
   }


/* Verwijdert browser-specifieke details-pijltjes */
.kino-trigger::marker,
.kino-trigger::-webkit-details-marker {
  display: none !important;
}
/* Linkerkolommen (Rij 1 & 2) stoppen exact op 50% van de pagina */
.kolom-links {
  width: 75%;
  padding-right: 0.7%; /* Subtiele bufferruimte tussen de beelden en de tekst */
  box-sizing: border-box;
}

/* Rechterkolom voor de titel (begint vanaf de 50%-lijn) */
.kolom-rechts-titel {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Rechterkolom voor de beschrijvingstekst (lijnt uit onder de titel) */
.kolom-rechts-info {
  width: 25%;
}

/* De grids die de 4 beelden strak naast elkaar dwingen */
.beeld-rij, .beeld-rij-extra {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.beeld-rij-extra2 {
  margin-top: 5px;
}

/* Zorgt dat alle afbeeldingen netjes schalen binnen de 50% breedte */
.kolom-links img {
  width: 100%;
  height: auto;
  display: block;
}

.beeld-rij,
.beeld-rij-extra,
.beeld-rij-extra2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.middelste-rij {
  position: relative;
}

.beeld-rij-extra2 {
  margin-top: 5px;
}

.titel-midden {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  white-space: nowrap;
  pointer-events: none;
}

.titel-midden .f101 {
  background-color: white;
}



/* ==========================================================================
   2. CORE ELEMENTEN & MINIMALISTISCHE STYLING
   ========================================================================== */

.main {
  padding-left: 1%;
  padding-top: 0.5%;
  font-size: 2em;
  font-family: 'HelveticaNeue', sans-serif;
  background-color: white;
  display: block;
  overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.main::-webkit-scrollbar {
  display: none;
}

.spatie {
  font-size: 0em;
  font-family: 'HelveticaNeue', sans-serif;
  margin-left: -0.3pt;
}

input {
  width: 52%;
  height: 1em;
  border: none;
  font-size: 1em;
}

video::cue {
  color: white !important;
  font-size: 1.1em !important;
  background: transparent !important;
  /* Harde zwarte rand voor ondertitels */
  text-shadow:
    -1.3px -1.3px 0 black,
     1.3px -1.3px 0 black,
    -1.3px  1.3px 0 black,
     1.3px  1.3px 0 black,
    -1.3px  0px 0 black,
     1.3px  0px 0 black,
     0px -1.3px 0 black,
     0px  1.3px 0 black;
}

.submit {
  background-color: white;
  border: none;
  color: black;
  font-family: 'HelveticaNeue', sans-serif;
  font-size: 1em;
  height: 1.2em;
  padding-left: 0.3pt;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.button {
  background-color: white;
  border: none;
  color: black;
  font-family: 'HelveticaNeue', sans-serif;
  font-size: 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.submit2 {
  background-color: white;
  border: none;
  color: black;
  font-family: 'HelveticaNeue', sans-serif;
  font-size: 1em;
  padding-left: 0.3pt;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.login {
  background-color: white;
  border: black;
  color: black;
  font-family: 'HelveticaNeue', sans-serif;
  font-size: 1em;
  padding-left: 0.3pt;
  text-align: left;
  text-decoration: none;
  display: inline-block;
}

.email {
  background-color: white;
  border: none;
  color: black;
  font-family: 'HelveticaNeue', sans-serif;
  font-size: 1em;
  padding-left: 0.3pt;
  text-align: left;
  text-decoration: none;
  display: inline-block;
}

.small {
  font-size: 0.45em;
  font-family: 'HelveticaNeue', sans-serif;
  width: 50%;
  margin-left: -0.3pt;
}

/* AANGEPAST: De beschrijvingstekst gebruikt de volledige breedte en lijnt nu strak links uit onder de titel */
.kolom-rechts-info .small3 {
  width: 100%;
  margin-left: -0.3pt;
  text-align: left;
}

/* Algemene fallback voor overige elementen (zoals onder de hoofdtitel 'bly is no kino') */
.small3 {
  font-size: 0.45em;
  font-family: 'HelveticaNeue', sans-serif;
  width: 25%;
  margin-left: -0.3pt;
  text-align: justify;
  text-justify: inter-word;
}

.small2 {
  font-size: 0.45em;
  font-family: 'HelveticaNeue', sans-serif;
  width: 50%;
  margin-left: -0.3pt;
  text-align: justify;
  text-justify: inter-word;
}

.sevendetail[open]>summary {
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(0, 0, 0, 0.3);
}

ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
  cursor: pointer;
}

details > summary {
  list-style: none;
  display: inline-block;
  cursor: pointer;
}

details > summary::marker,
details > summary::-webkit-details-marker {
  display: none;
}

.part:link, .part:visited, .part:active, .part:hover {
  color: black;
  font-style: italic;
  text-decoration: none;
  background-color: white;
  display: inline-block;
  padding: 0;
  margin: 0;
}

.part:hover {
  text-decoration: underline;
}

.button:link, .button:visited, .button:hover, .button:active {
  color: black;
  text-decoration: underline;
  background-color: white;
  display: inline-block;
}

.submit:link, .submit:visited, .submit:hover, .submit:active {
  color: black;
  text-decoration: underline;
  background-color: white;
  display: inline-block;
}

/* Standaard minimalistische hover-onderstreping voor de filmtitels */
.kino-trigger:hover .f101 {
  text-decoration: underline;
}


/* Titel rechts uitlijnen met het midden van de middelste beeldrij */
.kino-trigger {
  position: relative;
}