/* ==========================================================================
   Guides — the blog index, category archives and the article page.

   Loaded on home.php, archive.php and single posts. The article body itself
   is styled by page.css (.page-content), which already handles headings,
   lists, links and tables; this sheet adds only what the listing and the
   article furniture need on top of it.
   ========================================================================== */

/* --- Listing grid --------------------------------------------------------
   minmax(0,1fr) rather than 1fr: a grid track's min-width is auto, so a
   long unbroken string in a title pushes the column wider than its share
   and the whole grid overflows horizontally. This is the same blowout that
   hit the product grid and the Lab tiles.
   -------------------------------------------------------------------------- */
.post-grid{
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-6);
}
.post-grid--index{ margin-top: var(--sp-6); }

@media (max-width: 900px){
	.post-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}
@media (max-width: 600px){
	.post-grid{ grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

/* --- Card ---------------------------------------------------------------- */
.post-card{
	display:flex;
	flex-direction:column;
	min-width:0;                      /* lets the card shrink inside its track */
	border-top:2px solid var(--c-text);
	padding-top: var(--sp-4);
}
.post-card__media{
	display:block;
	margin-bottom: var(--sp-4);
	overflow:hidden;
}
.post-card__media img{
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	object-fit:cover;
	display:block;
	transition: transform .4s ease;
}
.post-card:hover .post-card__media img{ transform: scale(1.03); }

.post-card__body{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }

.post-card__cat{
	color: var(--tt-red);
	text-decoration:none;
	margin-bottom: var(--sp-2);
	align-self:flex-start;
}
.post-card__cat:hover{ text-decoration:underline; text-underline-offset:3px; }

.post-card__title{
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	line-height: var(--lh-tight);
	text-transform:uppercase;
	margin-bottom: var(--sp-3);
	/* Long guide titles wrap rather than forcing the track wider. */
	overflow-wrap:anywhere;
}
.post-card__title a{ color:inherit; text-decoration:none; }
.post-card__title a:hover{ color: var(--tt-red); }

.post-card__excerpt{
	color: var(--c-text-muted);
	line-height: var(--lh-relaxed);
	margin-bottom: var(--sp-4);
}

/* Pushed to the bottom so the date sits on one line across a row of cards
   whose titles and excerpts are different lengths. */
.post-card__meta{
	color: var(--c-text-muted);
	margin-top:auto;
}

/* --- Category chips on the index ----------------------------------------- */
.post-filters{
	display:flex;
	flex-wrap:wrap;
	gap: var(--sp-2);
	padding-bottom: var(--sp-5);
	border-bottom:1px solid var(--c-border);
}
.post-filters__chip{
	display:inline-block;
	padding: var(--sp-2) var(--sp-4);
	border:1px solid var(--c-border);
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	text-decoration:none;
	color: var(--c-text);
	white-space:nowrap;
}
.post-filters__chip:hover,
.post-filters__chip:focus-visible{
	background: var(--c-bg-inverse);
	color: var(--c-text-inverse);
	border-color: var(--c-bg-inverse);
}
.post-filters__chip.is-active{
	background: var(--c-bg-inverse);
	color: var(--c-text-inverse);
	border-color: var(--c-bg-inverse);
}

/* --- Article furniture ---------------------------------------------------- */
.post-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap: var(--sp-2);
	color: var(--c-text-muted);
	margin-top: var(--sp-4);
}

/* The guides are comparison pieces: most of them carry four to seven tables
   and some are wide. Without this a table forces the article column past its
   72ch cap and the whole page scrolls sideways on a phone. */
.page-content--post .wp-block-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.page-content--post .wp-block-table table{ min-width:480px; }
.page-content--post table{ margin-block: var(--sp-5); }

/* First column of a comparison table is the row label and reads as a header. */
.page-content--post tbody td:first-child{ font-weight:600; }

.post-related{
	border-top:1px solid var(--c-border);
	margin-top: var(--sp-8);
	padding-top: var(--sp-7);
	padding-bottom: var(--sp-9);
}
.post-related .section-head{ margin-bottom: var(--sp-6); }

.post-empty{ padding-block: var(--sp-7) var(--sp-9); color: var(--c-text-muted); }

/* --- Pagination ----------------------------------------------------------- */
.pagination{
	display:flex;
	flex-wrap:wrap;
	gap: var(--sp-2);
	justify-content:center;
	padding-block: var(--sp-7) var(--sp-9);
}
.pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:44px;
	min-height:44px;
	padding-inline: var(--sp-3);
	border:1px solid var(--c-border);
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	text-decoration:none;
	color: var(--c-text);
}
.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible{
	background: var(--c-bg-inverse);
	color: var(--c-text-inverse);
	border-color: var(--c-bg-inverse);
}
.pagination .page-numbers.current{
	background: var(--c-bg-inverse);
	color: var(--c-text-inverse);
	border-color: var(--c-bg-inverse);
}
.pagination .page-numbers.dots{ border-color:transparent; }
.pagination .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* --- Footer guides column -------------------------------------------------
   The footer link columns are a plain stack of <a> elements (see footer.php),
   so the guide links inherit that styling; only the wrap behaviour differs,
   because guide titles are sentences rather than one or two words.
   -------------------------------------------------------------------------- */
.footer-col--guides a{ max-width:34ch; }