/* Blog posts, case studies and their listings (Phase 3; app/pages/article.php, app/pages/articles.php). */

/* ===== Article hero: dark band; the cover image overlaps its lower edge ===== */
.article-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-950); color: var(--white); }
.article-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.22;
  background: var(--world-dots, none) 70% 40% / max(100%, 1100px) auto no-repeat;
}
.article-hero::after {
  content: ""; position: absolute; top: -40%; right: -12%; z-index: -1; width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, rgb(221 51 29 / 0.22), transparent 65%);
}
.article-hero__inner {
  display: grid; gap: 1.25rem; justify-items: start; max-width: 50rem; /* lines up with the article column */
  padding-block: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem)) clamp(7rem, 12vw, 9rem);
}
.article-hero__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag--light { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }
.tag--light:hover { background: var(--red-600); box-shadow: none; }
.article-hero__title { color: var(--white); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); line-height: var(--lh-heading); overflow-wrap: break-word; }
.article-hero__date { display: inline-flex; align-items: center; gap: var(--space-2); color: rgb(255 255 255 / 0.75); font-size: var(--fs-small); }
.article-hero__date .icon { width: 1rem; height: 1rem; color: var(--red-500); }

/* ===== Article body ===== */
.article { padding-top: 0; }
.article__container { max-width: 50rem; }
.article__cover { position: relative; z-index: 1; /* above the hero band it overlaps */ margin: calc(-1 * clamp(5.5rem, 9vw, 7rem)) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--gray-100); }
.article__cover img { display: block; width: 100%; height: auto; }
.article__body { gap: var(--space-5); color: var(--color-text); font-size: 1.125rem; line-height: 1.75; }
.article__body > h2 { margin-top: var(--space-6); font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); line-height: var(--lh-heading); }
.article__body > h3 { margin-top: var(--space-4); font-size: var(--fs-h3); line-height: var(--lh-heading); }
.article__body > h4 { margin-top: var(--space-3); font-size: 1.125rem; }
.article__body > :first-child { margin-top: 0; }
.article__body ul, .article__body ol { display: grid; gap: var(--space-2); padding-left: 1.4rem; }
.article__body li::marker { color: var(--red-600); }
.article__body strong { color: var(--ink-950); }
.article__body hr { height: 1px; margin: var(--space-3) 0; border: 0; background: var(--color-border); }
.article__body blockquote {
  margin: 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--red-600);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--color-bg-alt); color: var(--ink-950); font-size: var(--fs-lead);
}
.article__body blockquote > * + * { margin-top: var(--space-2); }
/* Tables keep their columns and scroll sideways on narrow screens. */
.article__body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.article__body th, .article__body td { padding: 0.625rem 0.875rem; border: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.article__body thead th, .article__body tr:first-child th { background: var(--ink-950); color: var(--white); }
.article__body tbody tr:nth-child(even) td { background: var(--color-bg-alt); }
.article__figure { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.article__figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.article__figure figcaption { color: var(--color-text-muted); font-size: var(--fs-small); text-align: center; }

/* ===== Listings: filters, a lead card, then a grid ===== */
.article-list { padding-top: clamp(2.5rem, 5vw, 4rem); }
.article-list__filters { margin-bottom: clamp(2rem, 4vw, 3rem); }
.article-list__filters ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.article-list__filters .tag { min-height: 2.25rem; padding-inline: 0.875rem; background: var(--color-bg-alt); color: var(--ink-950); box-shadow: inset 0 0 0 1px var(--color-border); }
.article-list__filters .tag:hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--red-600); }
.article-list__filters .tag[aria-current] { background: var(--red-600); color: var(--white); box-shadow: none; }

.article-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.article-grid > li { display: grid; }
.article-card {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.article-card:has(.article-card__link:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.article-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gray-100); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; } /* covers carry their title banner at the top */
.article-card__body { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); }
.article-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.article-card__tags .tag { position: relative; z-index: 2; } /* above the card-wide link */
.article-card__title { font-size: 1.25rem; line-height: 1.25; }
.article-card__link { color: var(--ink-950); text-decoration: none; }
.article-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole card is the link */
.article-card:hover .article-card__link { color: var(--red-700); }
.article-card__excerpt { color: var(--color-text-muted); font-size: var(--fs-small); }
.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); }
.article-card__date { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-xs); }
.article-card__date .icon { width: 0.9rem; height: 0.9rem; color: var(--red-600); }
.article-card__more { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--red-700); font-size: var(--fs-small); font-weight: 600; }
.article-card__more .icon { width: 1rem; height: 1rem; }

/* The newest post leads, image beside its text. */
.article-grid > li:has(.article-card--lead) { grid-column: 1 / -1; }
.article-card--lead { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: none; }
.article-card--lead .article-card__media { aspect-ratio: auto; min-height: 100%; }
.article-card--lead .article-card__body { align-content: center; gap: var(--space-4); padding: clamp(1.5rem, 3vw, 2.75rem); }
.article-card--lead .article-card__title { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); }
.article-card--lead .article-card__excerpt { font-size: var(--fs-body); }

@media (max-width: 1023px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-card--lead { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .article-card--lead .article-card__media { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 639px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article__body { font-size: var(--fs-body); }
}