/* Batch D: blogs, blog-post, showcases, showcase-project. Loaded after style.css. */

.hero { justify-content: center; } /* these heroes centre their content vertically (Figma main=CENTER) */
.h2 { font: 400 24px/normal var(--serif); color: #000; }
.h1--black { color: #000; }

/* ---------- Listing: filter panel + 3-col cards + pager ---------- */
.listing { display: grid; grid-template-columns: 267px minmax(0, 1fr); gap: 24px; align-items: start; }
.listing__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.filter {
  padding: 24.5px; display: flex; flex-direction: column; gap: 24px;
  background: rgba(234, 227, 216, .6); box-shadow: inset 0 0 0 0.5px var(--charcoal); border-radius: 5px;
}
.filter hr { width: 100%; margin: 0; border: 0; border-top: 0.5px solid var(--charcoal); }
.filter__opt, .filter__clear {
  display: flex; align-items: flex-start; gap: 24px;
  font: 400 14px/16px var(--sans); color: var(--charcoal); cursor: pointer;
}
.filter__opt input {
  appearance: none; flex: none; width: 15px; height: 15px; margin: 0;
  border: 0.5px solid var(--charcoal); border-radius: 50%; cursor: pointer;
}
.filter__opt input:checked { background: radial-gradient(var(--bronze) 3.5px, transparent 4px); }
.filter__clear { padding: 0; border: 0; background: none; text-align: left; }
.filter__clear img { flex: none; width: 15px; height: 12px; }

/* Smaller card (267px column): content-height instead of Home's fixed 340px */
.card--sm { height: auto; justify-content: flex-start; gap: 12px; }
.card--sm .card__img { width: 100%; }

.pager { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 24px; }
.pager a, .pager span { font: 500 18px/27px Poppins, var(--sans); color: rgba(27, 27, 27, .5); }
.pager [aria-current], .pager a:hover { color: var(--gold); }

/* ---------- Details pages ---------- */
.article { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.crumbs { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.crumbs li + li { padding-left: 12px; border-left: 0.5px solid var(--charcoal); }
.crumbs a:hover { color: var(--bronze); }
.crumbs [aria-current] { color: var(--caramel); }

.gallery { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 24px; }
.gallery > * { background: var(--taupe); } /* Figma has grey placeholders, no photos yet */
.gallery__wide { grid-column: 1 / -1; grid-row: span 2; }
.gallery__tall { grid-column: span 2; grid-row: span 3; }
.gallery__half { grid-column: span 2; }

@media (max-width: 1024px) {
  .listing { grid-template-columns: 1fr; }
  .listing__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .gallery__tall { grid-row: span 2; }
}

@media (max-width: 640px) {
  .listing__cards { grid-template-columns: minmax(0, 1fr); }
  .card--sm .card__img { height: 180px; }
  .card--sm { padding-top: 204px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery > * { grid-column: auto; grid-row: auto; }
  .gallery__wide { grid-row: span 2; }
}