/* Journal listing. Chips reuse
   .chip's shape/border/white-at-rest/hover-or-current-color behavior
   from shop.css as-is — only the per-category --chip-color is new. */

/* +1% over the plain gutter so the chips don't sit flush with the card
   grid below (same convention as shop.css's .chips) */
.journal__chips {
  padding: 0.375rem calc(var(--gutter) + 1%);
}

/* Fixed pastel swatch set editors pick from in the Panel (Site → Journal
   Categories) — order matches journal.yml's category color `options`
   (mirrored in shop.yml/gatherings.yml);
   journal_category_color_class() in helpers.php maps a category's stored
   hex to the matching class here (colors can't be inlined per-category:
   CSP's style-src 'self' silently drops inline styles). */
.chip--pastel-1 { --chip-color: #d1aa92; }
.chip--pastel-2 { --chip-color: #e0ffae; }
.chip--pastel-3 { --chip-color: #d4eeff; }
.chip--pastel-4 { --chip-color: #b3b7f6; }
.chip--pastel-5 { --chip-color: #fde5f7; }
.chip--pastel-6 { --chip-color: #fff27d; }
.chip--pastel-7 { --chip-color: #e5e0da; }
.chip--pastel-8 { --chip-color: #ffc9c9; }
.chip--pastel-9 { --chip-color: #c9f2dd; }
.chip--pastel-10 { --chip-color: #ffe0c2; }

/* ---- article cards ---- */

/* A plain 2-col grid, not a flex list of wrapper divs: which card is
   "featured" changes at runtime (journal-filter.js recomputes it
   against only the visible cards after a filter), and grid-column
   lets a card's size just follow a class toggle - no DOM restructuring
   needed, and hidden cards are automatically skipped by grid
   auto-placement, so the rhythm re-flows on its own. */
.articles {
  list-style: none;
  margin: 0; /* .page (parent) already has its own top padding — an extra margin here just stacked on top of it */
  padding: 0; /* .page (parent) already applies the gutter */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.4375rem; /* 23px, matches .products in shop.css */
  row-gap: 0; /* groups separate via card margin instead */
}

.article-card--featured {
  grid-column: 1 / -1;
}

/* plain block flow: each card's text starts where its own photo ends —
   photos keep their full height, so a pair's excerpts/Read buttons are
   deliberately NOT equalized across the row */
.article-card {
  position: relative;
  margin-bottom: 2.5rem; /* the group gap between stacked cards */
  text-align: center;
}

/* author styles beat the UA [hidden] display:none regardless of
   specificity, so the hide must be explicit */
.article-card[hidden] {
  display: none;
}

.article-card__img {
  display: block;
  width: 100%;
  height: auto; /* the photo's own height, uncropped */
}

.article-card__img--empty {
  aspect-ratio: 1 / 1; /* the placeholder has no ratio of its own */
  background: #ececec;
}

.article-card__title {
  margin-top: 0.75rem;
  font-weight: var(--weight-regular);
  text-align: left;
}

.article-card__title a {
  text-decoration: none;
}

/* expand the title link's hitbox over the whole card */
.article-card__title a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.article-card__excerpt {
  margin-top: 0.5rem;
  font-weight: var(--weight-light);
  text-align: left;
  /* Caps the excerpt at a fixed number of lines so an unusually long one
     can't stretch its grid row; truncates with an ellipsis (full text
     stays one tap away via Read more). Line count set per size below. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.article-card__more {
  position: relative; /* above the title's card-wide hitbox */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem; /* Read's own air, independent of how long the title/excerpt run */
  padding: 0.25em 1em;
  border: var(--border-thin);
  border-radius: var(--radius-l);
  font-weight: var(--weight-regular);
  line-height: 1;
  text-decoration: none;
}

.article-card__more:focus-visible {
  background: #fdff90; /* the Journal pill's yellow */
}

@media (hover: hover) {
  .article-card__more:hover {
    background: #fdff90;
  }
}

.article-card--featured .article-card__title {
  font-size: var(--text-menu); /* 36px */
}

.article-card--featured .article-card__excerpt {
  font-size: var(--text-title); /* 24px */
  line-clamp: 4;
  -webkit-line-clamp: 4;
}

/* phones: the featured excerpt at home's tighter leading */
@media (max-width: 45.9375rem) {
  .article-card--featured .article-card__excerpt {
    line-height: 1.3;
  }
}

/* matches .product__basket — the main product page's Add to basket */
.article-card--featured .article-card__more {
  font-size: var(--text-body); /* 20px */
}

/* tablet band: padding is em-based, so the box grows with the type */
@media (min-width: 46rem) and (max-width: 71.9375rem) {
  .article-card--featured .article-card__more {
    font-size: 1.375rem; /* the 20px above + 10% */
  }
}

.article-card:not(.article-card--featured) .article-card__title {
  font-size: var(--text-body); /* 20px */
}

.article-card:not(.article-card--featured) .article-card__excerpt {
  font-size: var(--text-small); /* 14px */
}

/* matches .product-card__basket — the smaller shop-card Add to basket */
.article-card:not(.article-card--featured) .article-card__more {
  font-size: var(--text-ui); /* 16px */
}

/* ============================================================
   Desktop: three equal columns, every card
   the same width — no full-width featured card. Images sit at the
   top of their card at their own height, so each card's text
   follows its own photo and the next row clears the tallest card
   in the one above (plain grid row sizing).
   ============================================================ */

@media (min-width: 72rem) {
  .page.journal {
    padding-top: var(--space-3); /* air under the chips row — matches gatherings */
  }

  .articles {
    grid-template-columns: repeat(3, 1fr);
    align-items: start; /* cards keep their own height instead of stretching */
    column-gap: var(--space-4);
    row-gap: var(--space-4);
  }

  .article-card {
    margin-bottom: 0;
    text-align: left;
  }

  .article-card--featured {
    grid-column: auto; /* every card is one column wide here */
  }

  /* the featured/paired rhythm is a mobile device — here every card is
     the same width, so every card reads at the same size */
  /* both selectors spelled out: the mobile rules use :not(--featured),
     which outranks a bare .article-card__title however late it comes */
  .article-card--featured .article-card__title,
  .article-card:not(.article-card--featured) .article-card__title {
    font-size: var(--text-title); /* 24px */
  }

  .article-card--featured .article-card__excerpt,
  .article-card:not(.article-card--featured) .article-card__excerpt {
    font-size: var(--text-ui); /* 16px */
    font-weight: var(--weight-regular);
  }

  .article-card--featured .article-card__more {
    font-size: var(--text-ui);
  }

  .article-card__more {
    margin-top: 0.5rem;
  }

  /* Panel per entry (article.yml → Read button): the same anchor becomes
     a circle floating over the photo's lower left, matching the home
     scatter's Read bubbles. */
  .article-card--floating-read {
    position: relative;
  }

  .article-card--floating-read .article-card__more {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 2; /* above the title link's card-wide hitbox */
    will-change: transform; /* one persistent layer across the drift's legs, no re-raster at each bounce */
    /* an axis-aligned translation gets snapped to whole device pixels (text
       crispness), which at 15–20px/s reads as a 20–30Hz step; the hair of
       rotation forces genuine sub-pixel positioning */
    rotate: 0.01deg;
    display: grid;
    place-items: center;
    width: 3.88125rem; /* 62px — the home scatter's 54px bubble, 15% up */
    height: 3.88125rem;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-pill);
    background: var(--color-paper);
  }

  /* restated at this specificity — the white fill above outranks the
     plain .article-card__more hover rule */
  .article-card--floating-read .article-card__more:focus-visible {
    background: #fdff90;
  }

  @media (hover: hover) {
    .article-card--floating-read .article-card__more:hover {
      background: #fdff90;
    }
  }
}