/* =====================================
   MSV NOORDWIJK - RESPONSIVE CSS
   Desktop en mobiele telefoons
   ===================================== */

/* 1. Teksten netjes laten afbreken */
p,
span,
div {
  word-break: normal;
  overflow-wrap: break-word;
}

/* 2. Wedstrijdkaart en afbeelding
   naast elkaar op een computer */
.match-row {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.match-card {
  flex: 2;
  min-width: 0;
}

.match-image {
  flex: 1;
  min-width: 0;
}

.match-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* =====================================
   3. MOBIELE WEERGAVE
   Schermen tot 768 pixels
   ===================================== */

@media screen and (max-width: 768px) {

  /* Wedstrijdkaart en afbeelding
     onder elkaar plaatsen */
  .match-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 100%;
  }

  /* Onderdelen volledige breedte */
  .match-card,
  .match-image {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Afbeeldingen passend maken */
  .match-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* Lange tekst en links afbreken */
  .match-row p,
  .match-row span,
  .match-row div {
    overflow-wrap: anywhere !important;
  }

}
/* =====================================
   MSV NOORDWIJK - MOBIELE KOLOMMEN
   ===================================== */

@media screen and (max-width: 768px) {

  /* Beide kolommen volledige breedte */
  .col-12-mobile {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Inhoud netjes binnen de kolommen */
  .col-12-mobile img {
    max-width: 100%;
    height: auto;
  }

  /* Lange teksten goed afbreken */
  .col-12-mobile p,
  .col-12-mobile span,
  .col-12-mobile div {
    overflow-wrap: anywhere;
  }

}