/* docs/DESIGN.md #8.5 — calendrier de formation (TrainingSlotPicker). */
@layer components {
  .calendar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .calendar__month {
    font-weight: 800;
    text-transform: uppercase;
  }

  .calendar__nav-button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 2px solid var(--forest);
    background: var(--cream);
  }

  .calendar__grid {
    display: grid;
    /* minmax(0, 1fr), not a plain 1fr: a grid track's implicit min-width is
       "auto" (its content's min-content size), and .calendar__day's
       min-height + aspect-ratio: 1 together impose a 48px *minimum width*
       floor on each column — 7 of those plus gaps overflow any viewport
       narrower than ~380px. minmax(0, …) removes that floor so columns can
       actually shrink to fit at 360px (docs/DESIGN.md #10/#13 étape 7). */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .calendar__weekday {
    text-align: center;
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
  }

  .calendar__day {
    position: relative;
    aspect-ratio: 1;
    min-height: 48px;
    display: grid;
    place-items: center;
    background: var(--cream-deep);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: inherit;
  }

  .calendar__day--filler {
    visibility: hidden;
  }

  .calendar__day--available {
    background: var(--cream);
    border: 2px solid var(--forest);
    color: var(--forest);
  }

  .calendar__day--selected {
    background: var(--forest);
    color: var(--cream);
  }

  .calendar__day--selected .pictogram {
    position: absolute;
    top: 2px;
    right: 2px;
  }

  .calendar__day--unavailable {
    color: var(--ink-muted);
    overflow: hidden;
  }

  .calendar__day--unavailable .slats {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--ink-muted);
    opacity: .5;
  }

  .calendar__day--unavailable span {
    position: relative;
  }

  .calendar__day--today::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--terracotta-deep);
  }

  .calendar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
  }

  .calendar__legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: .9375rem;
  }

  .calendar__legend-swatch {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .calendar__legend-swatch--today {
    background: var(--cream-deep);
    border-top: 4px solid var(--terracotta-deep);
  }
}