/* ============================================================
   Garden Polish
   Layered on top of the Digital Garden theme. Uses the theme's
   own custom properties throughout, so nothing new is invented.
   ============================================================ */

/* ------------------------------------------------------------
   1. COVERS AS OBJECTS

   The theme crops every thumbnail to 16/9. Book covers are
   portrait (768x1229), so their tops and bottoms were being
   sliced off. Contain the image instead and let it sit on the
   parchment like a specimen on a card.
   ------------------------------------------------------------ */

.entry-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(ellipse at 50% 42%, #fffdf8 0%, var(--clr-parchment-dark) 78%);
  border-bottom: var(--border);
  overflow: hidden;
}

/* Absolute positioning here is deliberate. A percentage height on a
   centred flow child resolves against a container whose own height
   comes from aspect-ratio, which is circular — portrait covers
   overflowed and got clipped. Insetting the image sidesteps it. */
.entry-card__thumb img {
  position: absolute;
  inset: 0.7rem;
  width: calc(100% - 1.4rem);
  height: calc(100% - 1.4rem);
  object-fit: contain;
  object-position: center;
  border-radius: 2px;
  filter: drop-shadow(0 1px 2px rgba(90, 70, 40, 0.20))
          drop-shadow(0 6px 12px rgba(90, 70, 40, 0.14));
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Book covers are portrait and were being served a landscape box, so
   they sat small in a sea of cream. polish.js measures each image and
   tags the tall ones. */
.entry-card__thumb.gp-portrait { aspect-ratio: 4 / 5; }

.entry-card--has-thumb.entry-card--wide .entry-card__thumb { aspect-ratio: 12 / 5; }
.entry-card--has-thumb.entry-card--wide .entry-card__thumb.gp-portrait { aspect-ratio: 3 / 2; }

.entry-card:hover .entry-card__thumb img {
  transform: translateY(-3px);
  filter: drop-shadow(0 2px 3px rgba(90, 70, 40, 0.22))
          drop-shadow(0 12px 20px rgba(90, 70, 40, 0.18));
}

/* ------------------------------------------------------------
   2. THE GROWTH BAR

   One stacked bar under the hero counts, showing what the
   garden is actually made of right now. Built from the numbers
   already on the page.
   ------------------------------------------------------------ */

.gp-growth {
  max-width: 640px;
  margin: 1.25rem auto 0;
}

.gp-growth__track {
  display: flex;
  height: 9px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--clr-parchment-dark);
  box-shadow: inset 0 0 0 0.5px rgba(90, 70, 40, 0.12);
}

.gp-growth__seg {
  width: 0;
  transition: width 0.9s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.gp-growth__seg--soil   { background: var(--clr-soil); }
.gp-growth__seg--seed   { background: var(--clr-seed); }
.gp-growth__seg--sprout { background: var(--clr-sprout); }
.gp-growth__seg--bloom  { background: var(--clr-bloom); }

.gp-growth__caption {
  margin-top: 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-ink-faint);
  text-align: center;
}

/* ------------------------------------------------------------
   3. THREADS, WEIGHTED

   Twenty identical pills told you nothing about which threads
   run deep. Size now follows the count.
   ------------------------------------------------------------ */

.tag-cloud__item {
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tag-cloud__item:hover { transform: translateY(-1px); }

.tag-cloud__item[data-weight] .tag-cloud__count { opacity: 0.55; }

/* ------------------------------------------------------------
   4. FILTERING WITHOUT A RELOAD
   ------------------------------------------------------------ */

.entry-card { transition: box-shadow 0.25s, transform 0.2s, opacity 0.25s; }

.entry-card.gp-hidden {
  display: none;
}

.garden-map__section-label {
  transition: color 0.2s;
}

.gp-count {
  margin-left: 0.5rem;
  color: var(--clr-ink-faint);
  letter-spacing: 0.06em;
}

.filter-btn { cursor: pointer; }

/* ------------------------------------------------------------
   5. REVEAL ON SCROLL

   The theme faded all 50 cards in on a 30ms stagger, so the
   last one arrived a second and a half after the first and
   most of them animated far below the fold. Reveal on entry.
   ------------------------------------------------------------ */

.gp-reveal {
  opacity: 0;
  transform: translateY(14px);
}

.gp-reveal.gp-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .gp-reveal, .gp-reveal.gp-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gp-growth__seg { transition: none; }
  .entry-card:hover .entry-card__thumb img { transform: none; }
}

/* ------------------------------------------------------------
   6. SMALL SCREENS
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  .entry-card__thumb { aspect-ratio: 16 / 9; }
  .entry-card--has-thumb.entry-card--wide .entry-card__thumb { aspect-ratio: 16 / 9; }
  .entry-card__thumb.gp-portrait,
  .entry-card--has-thumb.entry-card--wide .entry-card__thumb.gp-portrait { aspect-ratio: 1 / 1; }
  .gp-growth { max-width: none; }
}


/* ------------------------------------------------------------
   7. PLAIN PAGES

   The theme ships page-about.php but no page.php, so every other
   Page fell through to index.php and rendered as an entry card —
   title, empty excerpt, "Planted" date, and no content at all.
   The plugin supplies a template; these are its styles.
   ------------------------------------------------------------ */

.gp-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--gap-2xl) var(--gap-lg);
}

.gp-page--wide { max-width: 1240px; }

.gp-page__title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: var(--gap-md);
}

.gp-page__title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  margin-top: var(--gap-md);
  background: var(--clr-sprout);
}

.gp-page__body { font-size: 1rem; line-height: 1.75; }

.gp-page__body h2,
.gp-page__body h3 { margin: var(--gap-xl) 0 var(--gap-sm); }

.gp-page__body img { border-radius: var(--radius-md); margin: var(--gap-lg) 0; }