/* Extra responsive laag voor evenementenkalender
   Laad NA je bestaande style.css (dus via calendar-responsive.css). */

:root{
  --cal-cell-min: 92px;
}

.calendar-page{
  padding: clamp(12px, 3vw, 24px);
}

.month{
  margin: 0 auto;
  max-width: 1100px;
}

.calendar-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

/* Zorg dat de tabel nog steeds mooi blijft op desktop */
.calendar-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendar-table th,
.calendar-table td{
  vertical-align: top;
}

/* Events compacter en leesbaarder */
.event{
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  line-height: 1.25;
}

.event-title{
  font-weight: 700;
}

.event-time{
  opacity: .85;
  font-size: .9em;
  margin-top: 4px;
}

.event-desc{
  margin-top: 6px;
}

/* Mobile: maak het bruikbaar zonder microscoop */
@media (max-width: 720px){
  .subpage-header{
    padding: 14px 14px 6px;
  }

  .subpage-header h1{
    font-size: 1.4rem;
    margin: 8px 0 4px;
  }

  .month h2{
    font-size: 1.2rem;
    margin: 18px 0 6px;
  }

  .month-subtitle{
    font-size: .95rem;
    margin-bottom: 10px;
  }

  /* Maand-grid wordt horizontaal scrollbaar i.p.v. geplet */
  .calendar-table{
    min-width: 760px; /* 7 dagen * voldoende celbreedte */
  }

  .calendar-table th,
  .calendar-table td{
    padding: 10px;
  }

  .date-number{
    font-size: .95rem;
  }

  .event{
    padding: 9px;
  }

  .event-title{
    font-size: .95rem;
  }

  .event-time{
    font-size: .82rem;
  }

  /* Beschrijving inkorten zodat alles niet 3 schermen hoog wordt */
  .event-desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* Heel kleine schermen: nog compacter + meer scroll-hint */
@media (max-width: 420px){
  .calendar-table{
    min-width: 820px;
  }

  .calendar-table-wrap{
    box-shadow: inset -18px 0 18px -18px rgba(0,0,0,.25);
  }
}