/* garden.css — the shared garden page (#85). Colours from src/theme/tokens.ts
   (Pastel, light): the page is paper, like the app's polaroids. */

:root {
  --screen: #FCF8F3;
  --text: #2C2A27;
  --text-soft: #6E685F;
  --text-mute: #8C857C;
  --accent-deep: #4FA862;
  --line: rgba(44, 42, 39, 0.18);
  --sage: #CFE5CD;   --sage-ink: #3C7A4E;
  --butter: #F6E091; --butter-ink: #9A7B1E;
  --blush: #ECCBC3;  --blush-ink: #A86B5E;
  --sky: #BFE2DF;    --sky-ink: #3E8C88;
  --lilac: #DCD3EC;  --lilac-ink: #7264A0;
}

* { box-sizing: border-box; }

/* `hidden` must win over the display rules below (.head, .wall, .gone, .seg). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--screen);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: max(48px, env(safe-area-inset-top)) 24px 64px;
}

.head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: var(--accent-deep);
}
.title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.1; }
.subtitle { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-soft); min-height: 1.2em; }

/* Nº · A–Z: the app's Segmented (compact): tinted track, white chosen option. */
.seg {
  display: inline-flex; align-self: flex-start; gap: 3px; padding: 4px; margin-top: 12px;
  border-radius: 16px; background: rgba(44, 42, 39, 0.08);
}
.seg button {
  min-width: 64px; height: 36px; padding: 0 14px;
  border: 0; border-radius: 12px; background: transparent;
  font: 600 13.5px 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--text-soft);
  cursor: pointer;
}
.seg button[aria-checked="true"] {
  background: #fff; color: var(--text); font-weight: 800;
  box-shadow: 0 2px 6px rgba(60, 50, 40, 0.10);
}
.seg button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

.wall {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px; row-gap: 22px;
}

.print {
  background: #fff;
  border-radius: 6px;
  padding: 8px 8px 0;
  box-shadow: 0 3px 8px rgba(60, 50, 40, 0.13);
}
.print:nth-child(4n+1) { transform: rotate(-2deg); }
.print:nth-child(4n+2) { transform: rotate(1.5deg); }
.print:nth-child(4n+3) { transform: rotate(-1deg); }
.print:nth-child(4n+4) { transform: rotate(2deg); }

.photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 3px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
}
.photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 0.25s ease;
}
.photo img.loaded { opacity: 1; }
.photo svg { width: 34px; height: 34px; opacity: 0.7; }

.caption {
  height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0;
}
.name {
  font-family: 'Shantell Sans', cursive; font-weight: 500;
  font-size: 16px; line-height: 20px; color: var(--text);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.number { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; color: var(--text-mute); }

.sage   { background-color: var(--sage);   color: var(--sage-ink); }
.butter { background-color: var(--butter); color: var(--butter-ink); }
.blush  { background-color: var(--blush);  color: var(--blush-ink); }
.sky    { background-color: var(--sky);    color: var(--sky-ink); }
.lilac  { background-color: var(--lilac);  color: var(--lilac-ink); }

.skeleton .photo { background: #EFE8DE; }
.skeleton .caption::after { content: ''; width: 60%; height: 12px; border-radius: 6px; background: #EFE8DE; }

/* The link was stopped (or never existed). */
.gone {
  min-height: 70vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 8px;
}
.gone h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.gone p { margin: 8px 0 0; max-width: 320px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text-soft); }
.gone-print {
  width: 132px; background: #fff; border-radius: 6px; padding: 8px 8px 40px;
  transform: rotate(-3deg); box-shadow: 0 3px 8px rgba(60, 50, 40, 0.13); margin-bottom: 28px;
}
.gone-print span { display: block; aspect-ratio: 1; border-radius: 3px; border: 1.5px dashed var(--line); }

@media (min-width: 700px) {
  .page { padding-left: 48px; padding-right: 48px; }
  .head { align-items: center; text-align: center; margin-bottom: 40px; }
  .seg { align-self: center; }
  .title { font-size: 44px; }
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; row-gap: 30px; }
}
@media (min-width: 1000px) {
  .wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .photo img { transition: none; }
}