/* =======================
   KÖRSCHEMA – sid-specifik stil
   ======================= */

.month-block{ margin: 1.8rem 0 2.4rem; }
.month-title{
  margin:0 0 .8rem; font-size:1.4rem; letter-spacing:.02em;
  border-bottom:2px solid rgba(0,0,0,.08); padding-bottom:.3rem;
}

.events{ display:flex; flex-direction:column; gap:.9rem; }

/* ----- Radkort ----- */
.event-row{
  display:grid;
  grid-template-columns: 120px 1fr;    /* datum | innehåll på desktop */
  gap:1rem;
  align-items: start;                   /* datumrutan stretchar inte */
  padding:.7rem .8rem .8rem;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* ----- Datumrutan ----- */
.event-date{ display:flex; align-self:start; align-items:center; }
.event-date-inner{
  display:flex; align-items:center; justify-content:center;
  white-space: nowrap;                 /* ingen radbrytning */
  min-width: 110px;                    /* plats för "23 oktober" */
  padding:.55rem .6rem;
  background:#8b0000; color:#fff;
  font-weight:700; font-size:.95rem;
  border-radius:10px; line-height:1.2;
}

/* ----- Innehåll ----- */
.event-body{ min-width:0; }
.event-title{ margin:.1rem 0 .35rem; font-size:1.1rem; }
.event-info{ margin:.15rem 0 0; line-height:1.6; }

/* Lista om info är array */
.event-info-list{
  margin:.15rem 0 0 1.1rem;
  padding:0;
  line-height:1.6;
}
.event-info-list li{ margin:.1rem 0; }

/* =======================
   Mobiljustering (< 640px)
   - Titel under datumet
   ======================= */
@media (max-width:640px){
  .event-row{
    grid-template-columns: 1fr;      /* EN kolumn på mobil */
    gap:.6rem .8rem;
  }
  .event-date{
    justify-self:start;              /* datum överst */
  }
  .event-body{
    grid-column: 1 / -1;             /* innehållet tar egen rad under datum */
    margin-top:.1rem;
  }
  .event-date-inner{
    min-width:auto;                   /* låt datumet bestämma bredd */
    padding:.5rem .6rem;
  }
  .event-title{
    margin:.2rem 0 .45rem;
    font-size:1.05rem;
  }
}

/* =======================
   Dark mode
   ======================= */
@media (prefers-color-scheme: dark){
  .month-title{ border-color: rgba(255,255,255,.12); color:#e5e7eb; }
  .event-row{
    background: rgba(16,18,24,.9);
    border-color: rgba(255,255,255,.06);
    box-shadow:none;
  }
  .event-title{ color:#e5e7eb; }
  .event-info, .event-info-list{ color:#cbd5e1; }
}

/* =======================
   Sånglänkar – indrag
   ======================= */
.event-info-list li.song-link{
  list-style:none;              /* ta bort standardkula */
  margin-left:1.5rem;           /* indrag jämfört med huvudpunkterna */
  position:relative;
  padding-left:.6rem;           /* luft mellan streck och text */
}


.event-info-list li.song-link a{
  color:#4b0082;                /* mörklila ton som passar Frimusicus */
  text-decoration:none;
  font-weight:600;
}
.event-info-list li.song-link a:hover{
  text-decoration:underline;
}

/* (valfritt) lite mindre sånglänk-text på riktigt små skärmar */
@media (max-width:400px){
  .event-info-list li.song-link a{ font-size:0.97rem; }
}
