/* ============================================================
   Home page — Product Category section (fragment/product-category.php)
   Section title + short description, followed by a 5-card category
   grid. Each card's 'img' is left blank in the PHP on purpose —
   paste real photo URLs in later. Until then .pc-placeholder shows
   a labeled box in the card's (already square) image slot.
   Relies on the shared theme variables (--bg, --ink, --pine, etc.)
   declared in index.php's own <style> block, with hardcoded
   fallbacks so this still renders correctly on its own.
   ============================================================ */

.pc-section { padding: 64px 0; }

.pc-heading { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.pc-heading h2 {
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--ink, #22271f);
  margin-bottom: 12px;
}
.pc-heading h2 em {
  font-style: normal;
  color: var(--pine, #17402e);
}
.pc-heading p {
  color: var(--muted, #8a8577);
  font-size: .95rem;
  margin: 0;
}

.pc-card {
  display: block;
  text-decoration: none;
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e7e1d4);
  box-shadow: 0 2px 8px rgba(23, 64, 46, .05);
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
}
.pc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(23, 64, 46, .16);
}

.pc-card-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--pine, #17402e);
}
.pc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.pc-card:hover .pc-card-img img { transform: scale(1.06); }

.pc-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  background: var(--pine-soft, #e8efe9);
  border: 1px dashed var(--line, #e7e1d4);
  color: var(--muted, #8a8577);
  font-size: .82rem;
  font-weight: 600;
}

.pc-card-name {
  padding: 14px 10px;
  text-align: center;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink, #22271f);
  border-top: 1px solid var(--line, #e7e1d4);
}
.pc-card:hover .pc-card-name { color: var(--pine, #17402e); }

@media (max-width: 575.98px) {
  .pc-section { padding: 44px 0; }
}