/* =========================
   RESET
   ========================= */

/* Zorgt ervoor dat padding en borders worden meegerekend in de breedte/hoogte */
* {
  box-sizing: border-box;
}

/* =========================
   BASIS
   ========================= */

/* Html en body nemen de volledige hoogte van het scherm in */
html, body {
  height: 100%;

  /* Verwijdert standaard marge van de browser */
  margin: 0;
}

/* Algemene instellingen voor de body */
body {
  /* Flexbox layout */
  display: flex;

  /* Zet alle kinderen onder elkaar */
  flex-direction: column;

  /* Lettertype voor de hele site */
  font-family: 'Montserrat', sans-serif;

  /* Tekstkleur zwart */
  color: #000;

  /* Witte achtergrond */
  background-color: #fff;
}

/* =========================
   NAVBAR
   ========================= */

/* De lijst in de navbar */
.navbar ul {
  /* Verwijdert bolletjes */
  list-style: none;

  /* Donkergrijze achtergrond */
  background-color: rgb(44, 45, 45);

  /* Geen buitenruimte */
  margin: 0;

  /* Geen binnenruimte */
  padding: 0;

  /* Flexbox gebruiken */
  display: flex;

  /* Verticaal centreren */
  align-items: center;

  /* Horizontaal centreren */
  justify-content: center;

  /* Ruimte tussen menu-items */
  gap: 90px;
}

/* Titel in de navbar */
.navbar h1 {
  /* Accentkleur */
  color: rgb(197, 223, 223);

  /* Marge links en rechts */
  margin: 0 40px 0 20px;

  /* Grootte van de titel */
  font-size: 24px;
}

/* Links in de navbar */
.navbar li a {
  /* Volledig klikbaar blok */
  display: block;

  /* Witte tekst */
  color: white;

  /* Binnenruimte rond de link */
  padding: 20px;

  /* Verwijdert onderlijning */
  text-decoration: none;
}

/* Hover-effect op navbar links */
.navbar li a:hover {
  /* Iets donkerdere achtergrond */
  background-color: rgb(46, 46, 51);
}

/* =========================
   MAIN
   ========================= */

/* Main vult alle beschikbare ruimte tussen navbar en footer */
main {
  flex: 1;
}

/* =========================
   EVENTS LAYOUT
   ========================= */

/* Hoofdsectie van de events pagina */
.events-hero {
  /* Ruimte boven/onder en links/rechts */
  padding: 80px 10%;
}

/* Container voor tekst links en afbeelding rechts */
.events-container {
  /* Flexbox layout */
  display: flex;

  /* Ruimte tussen links en rechts */
  justify-content: space-between;

  /* Uitlijnen aan de bovenkant */
  align-items: flex-start;

  /* Afstand tussen kolommen */
  gap: 60px;
}

/* =========================
   LINKER KANT (TEKST)
   ========================= */

.events-text {
  /* Neemt de helft van de ruimte */
  flex: 1;
}

/* Hoofdtitel */
.events-text h1 {
  font-size: 42px;
  margin-bottom: 10px;
}

/* Subtitel onder de titel */
.subtitle {
  font-size: 18px;
  margin-bottom: 40px;
  color: #555;
}

/* Eén event blok */
.event {
  margin-bottom: 35px;
}

/* Event titel */
.event h2 {
  font-size: 22px;
  margin-bottom: 5px;
}

/* Event beschrijving */
.event p {
  margin: 6px 0;
  color: #444;
}

/* Knop bij elk event */
.event button {
  margin-top: 10px;
  padding: 10px 24px;
  background-color: #3f3f3f;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
}

/* Hover-effect op event knop */
.event button:hover {
  background-color: #000;
}

/* Link binnen knop */
.cn a {
  color: white;
  text-decoration: none;
  border-radius: 40px;
}

/* =========================
   RECHTER KANT (AFBEELDING)
   ========================= */

.events-image {
  /* Neemt evenveel ruimte als de tekst */
  flex: 1;

  /* Flexbox om afbeelding te centreren */
  display: flex;
  justify-content: center;

  /* Afbeelding iets lager plaatsen */
  margin-top: 120px;
}

/* Afbeelding styling */
.events-image img {
  /* Volledige breedte van container */
  width: 100%;

  /* Maximale breedte */
  max-width: 780px;

  /* Ronde hoeken */
  border-radius: 25px;

  /* Zorgt dat afbeelding netjes wordt bijgesneden */
  object-fit: cover;
}

/* =========================
   FOOTER
   ========================= */

footer {
  /* Donkere achtergrond */
  background-color: #222;

  /* Witte tekst */
  color: white;

  /* Binnenruimte boven en onder */
  padding: 20px 0;
}

/* Container in footer */
.footer-container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

/* Footer titels */
.footer-item h3 {
  margin-bottom: 10px;
  color: rgb(197, 223, 223);
}

/* Footer tekst */
.footer-item p {
  margin: 6px 0;
  font-size: 14px;
}

/* =========================
   RESPONSIVE – GSM
   ========================= */
/* ===== Responsive voor GSM ===== */
@media only screen and (max-width: 768px) {
    nav ul {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .event {
        flex-direction: column;
    }

    .event-content h2 {
        font-size: 1.1rem;
    }

    .event-content p {
        font-size: 0.9rem;
    }

    .event-content .tickets-btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
}