/* ================================================================
   Hello-Archi(R) — Architecture Studio
   journal.css
   Journal list page only. Reuses the home page's .journal +
   .article-card components and the shared .hero / .cta / footer
   (all of which live in base.css). Only the page-specific touches
   live here.
   Split from the original styles.css. Loaded on the journal page
   (after base.css).
   ================================================================ */

/* Full-viewport hero, grayscale interior — mirrors .studio-hero sizing */
.journal-hero { min-height: 100vh; }
.journal-hero .hero__bg { filter: grayscale(100%); }

/* As a top-level <main> the section sits flush under the hero; trim the
   top padding a touch so the grid starts closer to the headline. */
.journal--page { padding-block: clamp(70px, 11vw, 150px) clamp(90px, 14vw, 190px); }

/* Lead headline — larger, left-aligned, sits directly above the rule. */
.journal__headline--lead {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* Lead headline + hairline rule — shared by the Journal and Work pages
   (both wrap the title in .journal__head above their chip filter bar). */
.journal--page .journal__head,
.work .journal__head {
  margin-bottom: 0;
  padding-bottom: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid rgba(245, 245, 245, 0.16);   /* the hairline under the title */
}

/* Chip-style filter bar — a reusable modifier on the shared .filters
   component. Renders each .filter as a rounded pill (instead of the
   underline style) and drops the bar's bottom border. Used by both the
   Journal page (.journal__filters) and the Works page. */
.filters--chips {
  border-bottom: none;
  padding-bottom: 0;
  gap: clamp(8px, 1vw, 12px);
}
.filters--chips .filter {
  padding: 8px 16px;
  border: 1px solid rgba(245, 245, 245, 0.16);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.filters--chips .filter::after { display: none; }   /* chips don't use the underline */
.filters--chips .filter:hover { color: var(--white); border-color: rgba(245, 245, 245, 0.4); }
.filters--chips .filter.is-active {
  color: var(--white);
  font-weight: 400;
  background: rgba(245, 245, 245, 0.08);
  border-color: rgba(245, 245, 245, 0.5);
}

/* Spacing for a chip bar that sits under the headline rule (Journal page,
   and the Work page where the filter bar follows .journal__head). */
.journal__filters,
.work .journal__head + .filters--chips {
  margin-block: clamp(26px, 3.5vw, 44px) clamp(34px, 5vw, 60px);
}

/* Three per row on large screens; .article-card media is squarer here
   (the home page used a tall 3:4 portrait). */
.journal--page .journal__grid { grid-template-columns: repeat(3, 1fr); }
.journal--page .article-card__media {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background-color: #1c1c1c;     /* light placeholder tone behind the image */
}

/* Title sits closer to the original reference weight/size. */
.journal--page .article-card__title { font-weight: 500; }

/* Meta line: read-time on the left, category pushed to the far right. */
.article-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;            /* ~12px metadata */
  letter-spacing: 0.06em;
}
.article-card__time { color: var(--grey-light); }
.article-card__cat  { color: var(--grey); white-space: nowrap; }

/* Cards fade UP from below and scale up slightly as they enter view.
   The shared IntersectionObserver toggles .is-in on each .reveal; here
   we extend the journal grid's reveal with a scale so it reads as the
   prompt's "fade up + slightly scale up". */
.journal__grid .reveal { transform: translateY(40px) scale(0.96); }
.journal__grid .reveal.is-in { transform: none; }

/* On hover the media goes grayscale → colour (inherited from
   .article-card__media:hover) and the body text lifts a few pixels. */
.article-card__body { transition: transform 0.5s var(--ease); }
.article-card:hover .article-card__body { transform: translateY(-6px); }

/* Empty-state message (no articles yet, or a category filter matched none).
   Mirrors the Works page's .work__empty treatment. */
.journal__empty {
  margin-top: 2rem;
  color: var(--grey-light);
  font-size: 1rem;
}

/* Responsive reflow for the journal page grid: 3 → 2 → 1.
   Page-scoped so it overrides the .journal--page 3-col rule above. */
@media (max-width: 1080px) {
  .journal--page .journal__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .journal--page .journal__grid { grid-template-columns: 1fr; }
  .journal--page .article-card__media { aspect-ratio: 4 / 3; }   /* less tall when full width */
  /* Wrap chips onto multiple lines (no horizontal scroll) and shrink them
     a touch so more fit per row on narrow screens. */
  .filters--chips {
    flex-wrap: wrap;
    gap: 8px;
  }
  .filters--chips .filter {
    padding: 6px 12px;
    font-size: 0.72rem;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journal__grid .reveal { transform: none; }
}