/* Garden dashboard (plants#index) pc- blocks. */

/* auto-fill/minmax has no Bootstrap grid equivalent; auto-rows carries the
   design's 220px min tile height for cards and the add tile alike */
.pc-garden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: minmax(220px, auto);
  gap: var(--lore-space-4);
}

.pc-garden-add {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--lore-border-strong);
  border-radius: var(--lore-radius-lg);
  color: var(--lore-ink-faint);
  text-decoration: none;
  font-size: var(--lore-text-small);
  font-weight: var(--lore-weight-medium);
  transition: color var(--lore-dur-ui) var(--lore-ease),
              border-color var(--lore-dur-ui) var(--lore-ease);
}

.pc-garden-add:hover,
.pc-garden-add:focus-visible {
  color: var(--lore-ink-soft);
  border-color: var(--lore-ink-faint);
}

.pc-garden__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lore-space-3);
}

.pc-garden__title {
  font-size: var(--lore-text-heading);  /* token size; Bootstrap's h* scale is fluid */
  margin: 0 0 1.25rem;
}

.pc-garden__stories-link {
  font-size: var(--lore-text-small);
  color: var(--lore-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.pc-garden__stories-link:hover,
.pc-garden__stories-link:focus-visible {
  color: var(--lore-ink);
  text-decoration: underline;
}

/* Empty state: a stage-0 aura — a beginning, never an apology */
.pc-garden-empty {
  max-width: 22rem;
  margin: clamp(2rem, 14dvh, 7rem) auto 0;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.375rem;
}

.pc-garden-empty__aura {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 1rem;
  background: radial-gradient(
    circle at 50% 38%,
    color-mix(in oklab, var(--lore-stage-0) 55%, var(--lore-surface-raised)),
    var(--lore-stage-0) 72%
  );
}

.pc-garden-empty__title {
  font-size: var(--lore-text-title);
  margin: 0;
}