/* ============================================================
   Craft Boys — Areas cards grid (cb-areas-grid).
   Markup: templates/sections/cb-areas-grid.php
   ============================================================ */

.cb-agrid__head { max-width: 720px; margin: 0 auto; text-align: center; }
.cb-agrid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
  margin-top: clamp(30px, 3.6vw, 46px);
}
.cb-agrid__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(20, 20, 20, .08);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cb-agrid__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 54px -32px rgba(20, 20, 20, .55);
  border-color: rgba(20, 20, 20, .14);
}
.cb-agrid__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #E9E4DB;
}
.cb-agrid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.cb-agrid__card:hover .cb-agrid__img { transform: scale(1.05); }
.cb-agrid__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.cb-agrid__title { margin: 0; }
.cb-agrid__title a { color: var(--cb-ink); transition: color .16s ease; }
.cb-agrid__title a:hover { color: var(--cb-yellow-2, #E7A800); }
.cb-agrid__desc {
  margin: 9px 0 16px;
  color: var(--cb-steel, #494847);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  flex: 1;
}
.cb-agrid__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink);
  transition: color .16s ease, gap .16s ease;
}
.cb-agrid__link:hover { color: var(--cb-yellow-2, #E7A800); gap: 11px; }

@media (max-width: 640px) {
  .cb-agrid__grid { grid-template-columns: 1fr; gap: 16px; }
}