/*
 * Card components: hero feature card, hero side card, and the standard
 * post card (used across homepage rails, archive grids, related posts,
 * and search results). Extracted verbatim from the original style.css.
 * .post-grid (the card grid wrapper) is kept here rather than in
 * layout/, since it's meaningless without the cards it arranges.
 *
 * @package TFGadgets
 */

.hero-feature{
  position:relative;
  display:block;
  border:1px solid var(--line);
  background:var(--bg-card);
  overflow:hidden;
}
.hero-feature .thumb-wrap{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); }
.hero-feature img{ width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slower) var(--ease-standard); }
.hero-feature:hover img{ transform:scale(1.03); }
.hero-feature .card-body{ padding:26px 28px 30px; }
.hero-feature h1, .hero-feature h2{
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.08;
  margin:12px 0 14px;
}
.hero-feature .dek{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  color:var(--text-muted);
  line-height:1.6;
}
.hero-side .side-card{
  display:flex; gap:16px; border:1px solid var(--line); background:var(--bg-card); padding:16px;
}
.hero-side .side-card .thumb-wrap{ width:110px; flex:none; aspect-ratio:1/1; overflow:hidden; background:var(--bg-alt); }
.hero-side .side-card img{ width:100%; height:100%; object-fit:cover; }
.hero-side h3{ font-size:17px; line-height:1.25; margin:6px 0 8px; }

.post-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
}
.post-card{
  border-left:2px solid var(--cat-color, var(--accent));
  padding-left:16px;
  display:flex; flex-direction:column;
}
.post-card .thumb-wrap{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-alt); margin-bottom:14px; }
.post-card img{ width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-standard); }
.post-card:hover img{ transform:scale(1.04); }
.post-card .cat-tag{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--cat-color, var(--accent)); margin-bottom:8px;
}
.post-card h3{ font-size:18px; line-height:1.3; margin-bottom:8px; }
.post-card h3 a:hover{ color:var(--accent-soft); }
.post-card .excerpt{ color:var(--text-muted); font-size:14.5px; line-height:1.55; margin-bottom:10px; }
.post-card .meta{ margin-top:auto; }

/* Archive featured-article card (Sprint 4's archive.css, extracted verbatim). */
/* Featured article */
.archive-featured{
	display:block; position:relative;
	border:1px solid var(--line); background:var(--bg-card);
	margin-bottom:40px; overflow:hidden;
}
.archive-featured .thumb-wrap{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-alt); }
.archive-featured img{ width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slower) var(--ease-standard); }
.archive-featured:hover img{ transform:scale(1.03); }
.archive-featured .card-body{ padding:24px 26px 28px; }
.archive-featured h2{ font-size:clamp(24px,3vw,34px); line-height:1.12; margin:10px 0 12px; }
.archive-featured .dek{ font-family:var(--font-body); font-size:16px; color:var(--text-muted); line-height:1.6; }

@media (max-width: 680px){
	.archive-featured .card-body{ padding:18px 20px 22px; }
}