/* =========================================================
   Reisekalender (reisekalender2.php) - Euroflug Touristik
   Option A: single full-width list, brand colors, mobile stacked
   ACSS is NOT loaded inside the iframe -> local brand variables
   ========================================================= */

:root {
  --rk-blue: #143A5A;      /* brand blue (ACSS --base) */
  --rk-orange: #E07B2C;    /* brand orange (ACSS --primary) */
  --rk-text-muted: #5b6b7a;
  --rk-row-alt: #f4f7fa;   /* zebra row background */
  --rk-border: #dfe6ed;
  --rk-radius: 0.375rem;
}

/* ---------- Layout: merge the two system columns into one list ---------- */
#KSGesamt .reisekalender-spalte {
  inline-size: 100%;
  float: none;
  margin: 0;
}

#KSGesamt .reisekalender-spalte table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Remove the gap between the two system columns so they read as one list */
#KSGesamt .reisekalender-spalte + .reisekalender-spalte {
  margin-block-start: 0;
}

/* ---------- Calendar title ---------- */
/* Hidden: the WordPress page already has its own H1, two titles were competing */
#KSGesamt .reisekalender-header {
  display: none;
}

/* ---------- Month header row ---------- */
/* The cell only creates the space between months (no white border any more,
   it was hiding the rounded corners). The visible title is the inner div. */
#KSGesamt tr[class*="reisekalender-monatzeile"] td {
  background: transparent;
  border: 0;
  padding: 0.875rem 0 0;
}

/* No extra space above the very first month */
#KSGesamt .reisekalender-header + .reisekalender-spalte tr:first-child td {
  padding-block-start: 0;
}

/* Month title: blue bar, rounded only on top so it joins its trip list */
#KSGesamt .reisekalender__monat {
  background: var(--rk-blue);
  color: #fff;
  font-size: var(--text--l);
  padding: 0.5rem 0.875rem;
  border-radius: var(--rk-radius); /* single value: the 4-value version did not render in the iframe */
}

/* ---------- Trip rows ---------- */
#KSGesamt .reisekalender-reisezeile1 {
  background: #fff;
}

#KSGesamt .reisekalender-reisezeile2 {
  background: var(--rk-row-alt);
}

#KSGesamt tr[class*="reisekalender-reisezeile"] td {
  padding: 0.625rem 0.875rem;
  border-block-end: 0.0625rem solid var(--rk-border);
  vertical-align: middle;
  font-size: var(--text--m);
  line-height: 1.4;
}

/* Status column: dot + text badge (replaces the PNG icons) */
#KSGesamt .reisekalender-td-status {
  inline-size: 1%;       /* column shrinks to fit its longest status text */
  white-space: nowrap;   /* keep each status on a single line on desktop */
  text-align: start;
}

#KSGesamt .reisekalender__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text--s);
  font-weight: 600;
  line-height: 1.3;
  color: #1f2d3a; /* dark text for readability, the colour lives in the dot */
}

/* Coloured dot */
#KSGesamt .reisekalender__status-punkt {
  flex-shrink: 0;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: 50%;
  background: currentColor;
}

/* One colour per availability state */
#KSGesamt .reisekalender__status--buchbar .reisekalender__status-punkt      { background: #2e7d32; } /* green */
#KSGesamt .reisekalender__status--wenigbuchbar .reisekalender__status-punkt { background: #d98a00; } /* amber */
#KSGesamt .reisekalender__status--anfrage .reisekalender__status-punkt      { background: var(--rk-blue); } /* brand blue */
#KSGesamt .reisekalender__status--nichtbuchbar .reisekalender__status-punkt { background: #8a96a3; } /* grey */

/* Greyed-out text for trips that cannot be booked */
#KSGesamt .reisekalender__status--nichtbuchbar {
  color: var(--rk-text-muted);
}

/* Date + duration */
#KSGesamt .reisekalender-td-datum {
  inline-size: 7rem;
  white-space: nowrap;
  font-weight: 600;
}

/* Trip name takes the remaining space */
#KSGesamt .reisekalender-td-bezeichnung {
  inline-size: auto;
}

/* Price */
#KSGesamt .reisekalender-td-preis {
  inline-size: 7rem;
  text-align: end;
  white-space: nowrap;
}

/* Book button */
#KSGesamt .reisekalender-td-auswahl {
  inline-size: 7rem;
  text-align: end;
}

#KSGesamt .reisekalender-td-auswahl .button-standard {
  background: var(--rk-orange);
  color: #fff;
  border: 0;
  border-radius: var(--rk-radius);
  padding: 0.5rem 1.25rem;
  font-size: var(--text--s);
  cursor: pointer;
  transition: filter 0.2s ease;
}

#KSGesamt .reisekalender-td-auswahl .button-standard:hover {
  filter: brightness(0.9); /* slightly darker orange on hover */
}

/* ---------- Mobile: each trip row becomes a stacked block ---------- */
@media (max-width: 47.99em) {

  #KSGesamt .reisekalender-spalte table,
  #KSGesamt .reisekalender-spalte tbody {
    display: block;
    inline-size: 100%;
  }

  /* Month header: full-width block */
  #KSGesamt tr[class*="reisekalender-monatzeile"] {
    display: block;
  }

  #KSGesamt tr[class*="reisekalender-monatzeile"] td {
    display: block;
  }

  /* Trip row as a small card built with CSS grid */
  #KSGesamt tr[class*="reisekalender-reisezeile"] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "datum  datum preis"
      "name   name  name"
      "status status status"
      "btn    btn   btn";
    gap: 0.5rem;
    padding: 0.75rem;
    margin-block-start: 0.5rem;
    border: 0.0625rem solid var(--rk-border);
    border-radius: var(--rk-radius);
  }

  #KSGesamt tr[class*="reisekalender-reisezeile"] td {
    padding: 0;
    border: 0;
    inline-size: auto;
  }

  #KSGesamt .reisekalender-td-status      { grid-area: status; }
  #KSGesamt .reisekalender-td-datum       { grid-area: datum; }
  #KSGesamt .reisekalender-td-preis       { grid-area: preis; }
  #KSGesamt .reisekalender-td-bezeichnung { grid-area: name; font-size: 0.9375rem; }
  #KSGesamt .reisekalender-td-auswahl     { grid-area: btn; }

  /* Info column is empty today (only  ) -> hidden on mobile to avoid a blank line.
     Re-enable once Kuschick confirms what the system puts here. */
  #KSGesamt .reisekalender-td-info {
    display: none;
  }

  /* Full-width book button on mobile */
  #KSGesamt .reisekalender-td-auswahl .button-standard {
    inline-size: 100%;
  }
}