/* ============================================================
   PAGE KIT — styles shared by index.php, about.php, categories.php
   (hover-lift on revealed cards, category cards, stat strip)
   ============================================================ */

/* Revealed cards keep a fast transform transition so hover lift works after the entrance animation. */
.js .lift[data-reveal].is-visible {
  transition: opacity .7s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  transition-delay: var(--d, 0ms), 0s, 0s, 0s;
}
.js .lift[data-reveal].is-visible:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--primary); }

/* ---------- category cards ---------- */
.cat-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; overflow: hidden; isolation: isolate;
  min-height: 150px; padding: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m);
}
.cat-card::before { /* soft corner glow that grows on hover */
  content: ''; position: absolute; z-index: -1; right: -48px; top: -48px; width: 130px; height: 130px; border-radius: 50%;
  background: rgba(8,152,204,0.10);
  transition: transform .6s var(--ease);
}
.cat-card:hover::before { transform: scale(2.4); }
.cat-card:hover .icon-bubble { background: var(--primary-btn); color: #fff; transform: rotate(-6deg) scale(1.06); }
.cat-card .icon-bubble { margin-bottom: 8px; }
.cat-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.cat-count { font-size: .85rem; color: var(--ink-soft); }
.cat-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px;
  font-weight: 700; font-size: .9rem; color: var(--accent-strong);
  transition: gap .25s var(--ease);
}
.cat-card:hover .cat-link { gap: 12px; }
/* stretched link: whole card clickable */
.cat-card .cat-link::after { content: ''; position: absolute; inset: 0; }

/* large variant (categories page) */
.cat-card-lg { min-height: 0; padding: 24px; gap: 8px; }
.cat-card-lg .icon-bubble { width: 60px; height: 60px; border-radius: 16px; }
.cat-card-lg h3 { font-size: 1.2rem; }
.cat-card-lg p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.cat-material {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  margin-top: 4px; padding: 5px 12px; font-size: .78rem; font-weight: 600;
  color: var(--primary-deep); background: var(--primary-light); border-radius: 999px;
}

/* ---------- stat strip ---------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 12px; text-align: center; background: #fff; transition: background .3s; }
.stat:hover { background: var(--primary-tint); }
.stat .icon { color: var(--primary); margin-bottom: 6px; transition: transform .35s var(--ease); }
.stat:hover .icon { transform: translateY(-4px) scale(1.12); }
.stat-num { font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; line-height: 1.1; color: var(--brand-navy); }
.stat-label { font-size: .85rem; color: var(--ink-soft); font-weight: 500; }

@media (min-width: 640px) {
  .stat { padding: 30px 16px; }
  .stat-num { font-size: 2.3rem; }
}
@media (min-width: 960px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-num.is-text { font-size: 1.35rem; padding: 6px 0 4px; }
@media (min-width: 640px) { .stat-num.is-text { font-size: 1.7rem; } }

/* fewer stats when there is nothing to count (see stat_strip() in includes/page-parts.php) */
.stat-strip.stats-3 .stat:last-child { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .stat-strip.stats-3 { grid-template-columns: repeat(3, 1fr); }
  .stat-strip.stats-3 .stat:last-child { grid-column: auto; }
  .stat-strip.stats-2 { grid-template-columns: repeat(2, 1fr); }
}