/* ===========================
   Month Names Reference Array
   (used by JS for display only)
   =========================== */

/* ===========================
   Calendar Header (month labels)
   =========================== */
.calendar-header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  margin-bottom: 0.25rem;
  position: sticky;
  top: 3rem; /* below site-header */
  z-index: 100;
  background: var(--color-bg);
  padding: 0.25rem 0;
  z-index: 0;
}

.month-label {
  background: var(--color-month-bg);
  color: var(--color-month-text);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.25rem;
  border-radius: var(--radius);
}

/* ===========================
   Calendar Grid
   =========================== */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 2.25rem;
  gap: 2px;
  overflow: visible;
}

/* ===========================
   Plant Bars
   =========================== */
.plant-bar {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  overflow: visible; /* allow popup to escape */
  min-width: 0;
  transition: filter 0.1s;
  text-decoration: none;
  color: inherit;
}

.plant-bar:hover {
  filter: brightness(1.1);
  z-index: 10;
}

.bar__label {
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.bar--sow {
  background: var(--color-sow);
  color: var(--color-sow-text);
}

.bar--harvest {
  background: var(--color-harvest);
  color: var(--color-harvest-text);
}

.bar--prune {
  background: var(--color-prune);
  color: var(--color-prune-text);
}

/* ===========================
   Legend
   =========================== */
.calendar-legend {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.legend-swatch {
  width: 1.2rem;
  height: 0.75rem;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.legend-swatch--sow     { background: var(--color-sow); }
.legend-swatch--harvest { background: var(--color-harvest); }
.legend-swatch--prune   { background: var(--color-prune); }

/* ===========================
   No-results message
   =========================== */
.no-results {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  color: #666;
  font-style: italic;
}

/* ===========================
   Mobile — single column list
   =========================== */
@media (max-width: 767px) {
  .calendar-header {
    display: none;
  }

  .calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .plant-bar {
    grid-column: unset !important;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
  }

  .bar__label {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .plant-bar::after {
    content: attr(data-month-range);
    font-size: 0.65rem;
    opacity: 0.85;
    margin-left: 0.5rem;
    flex-shrink: 0;
  }
}