/* ==========================================================================
   Calendar — Monatsansicht mit Zeitraum-Auswahl.

   Eigenes Stylesheet, weil der Kalender an zwei Stellen gebraucht wird:
   in der erhaltenen Buchungs-Sektion (js/booking/logic/index.js) und als
   Schritt 2 im Anfragebereich der Landingpage. Beide laden diese Datei,
   keine von beiden lädt die Regeln der jeweils anderen.
   ========================================================================== */

.cal {
  width: 100%;
  padding: clamp(1.4rem, 2.4vw, 2.6rem);
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: clamp(1.25rem, 2.2vw, 1.9rem);
}

.cal__month-label {
  display: block;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  letter-spacing: -0.015em;
}

.cal__nav {
  display: flex;
  gap: 0.5rem;
}

.cal__nav-btn {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-ink);
  font-size: 0.95rem;
  transition: background-color var(--dur-hover) var(--ease-out-soft),
    border-color var(--dur-hover) var(--ease-out-soft),
    color var(--dur-hover) var(--ease-out-soft),
    opacity var(--dur-hover) var(--ease-out-soft),
    transform var(--dur-hover) var(--ease-out-soft);
}

.cal__nav-btn:hover:not(:disabled) {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
  transform: scale(1.05);
}

.cal__nav-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

/* --------------------------------------------------------------- Weekdays -- */

.cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding-block-end: 0.85rem;
  border-block-end: 1px solid var(--c-line);
  color: var(--c-ink-muted);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

/* ------------------------------------------------------------------ Grid -- */

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-block-start: 0.5rem;
}

.cal__grid.is-in-right {
  animation: cal-in-right var(--dur-base) var(--ease-out);
}

.cal__grid.is-in-left {
  animation: cal-in-left var(--dur-base) var(--ease-out);
}

@keyframes cal-in-right {
  from {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
  }
}

@keyframes cal-in-left {
  from {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
  }
}

.cal__cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(2.6rem, 4.4vw, 3.5rem);
}

/* The connecting bar. Gaps are zero so consecutive cells form one ribbon. */
.cal__cell::before {
  content: '';
  position: absolute;
  inset-block: 0.3rem;
  inset-inline: 0;
  background: var(--c-accent-soft);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  transition-delay: var(--sweep, 0ms);
}

.cal__grid.has-range .cal__cell.is-inside::before,
.cal__grid.has-range .cal__cell.is-end::before {
  opacity: 1;
}

/* Ribbon leaves the start day at its centre and enters the end day the same way. */
.cal__grid.has-range .cal__cell.is-start::before {
  opacity: 1;
  inset-inline-start: 50%;
  border-start-start-radius: var(--r-pill);
  border-end-start-radius: var(--r-pill);
}

.cal__grid.has-range .cal__cell.is-end::before {
  inset-inline-end: 50%;
  border-start-end-radius: var(--r-pill);
  border-end-end-radius: var(--r-pill);
}

/* Hover preview sits a shade lighter than a committed range. */
.cal__cell.is-preview::before {
  background: var(--c-accent-softer);
}

/* ------------------------------------------------------------------- Day -- */

.cal__day {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(2.2rem, 3.1vw, 2.7rem);
  height: clamp(2.2rem, 3.1vw, 2.7rem);
  border-radius: 50%;
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-hover) var(--ease-out-soft),
    color var(--dur-hover) var(--ease-out-soft),
    box-shadow var(--dur-hover) var(--ease-out-soft),
    transform var(--dur-hover) var(--ease-out-soft);
}

.cal__day:hover:not(:disabled) {
  background: var(--c-accent-soft);
  transform: scale(1.06);
}

.cal__day:disabled {
  color: var(--c-ink-muted);
  opacity: 0.55;
  cursor: default;
}

.cal__cell.is-inside .cal__day {
  color: var(--c-accent-deep);
}

.cal__cell.is-start .cal__day,
.cal__cell.is-end .cal__day {
  background: var(--c-accent);
  color: var(--c-accent-on);
  box-shadow: var(--shadow-accent);
  transform: scale(1.04);
}

.cal__cell.is-preview.is-end .cal__day {
  background: var(--c-accent);
  box-shadow: none;
  opacity: 0.72;
}

/* Today: a quiet ring that a selection can paint over. */
.cal__cell.is-today .cal__day {
  box-shadow: inset 0 0 0 1px rgba(201, 35, 81, 0.4);
  font-weight: 500;
}

.cal__cell.is-today.is-start .cal__day,
.cal__cell.is-today.is-end .cal__day {
  box-shadow: var(--shadow-accent);
}

/* Booked days keep their number but are struck through. */
.cal__cell.is-booked .cal__day span {
  position: relative;
}

.cal__cell.is-booked .cal__day span::after {
  content: '';
  position: absolute;
  inset-inline: -3px;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transform: rotate(-16deg);
}

/* ---------------------------------------------------------------- Legend -- */

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin-block-start: clamp(1.25rem, 2.2vw, 1.9rem);
  padding-block-start: clamp(1rem, 1.8vw, 1.5rem);
  border-block-start: 1px solid var(--c-line);
  color: var(--c-ink-muted);
  font-size: var(--fs-meta);
}

.cal__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.cal__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.cal__swatch--free {
  border: 1px solid var(--c-line-strong);
}

.cal__swatch--busy {
  background: var(--c-sand);
}

.cal__swatch--sel {
  background: var(--c-accent);
}

.cal__legend-note {
  margin-inline-start: auto;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}