/* ==========================================================================
   Devgun Family Law -- Block: BucketsBlock "Practice Area Icons" grid
   Figma: Ajay profile Practice Areas 7146:949 (5-across, deep teal band)
   + Family Law LP 7138:1285 (10 cards, 4-up wrap). Band color comes from
   the shared section-bg--* utility on the block wrapper (design: Dark
   Blue / --color-bg-section-deep); this file styles the internal layout
   and the dark icon tiles only (build spec 5.2 "Practice-area card").

   CONTRAST (F3, REQUIRED): icon accents consume --icon-accent-color,
   which the foundation resolves to Light Blue #ADCBD1 on the dark-blue
   band -- never Canopy there (2.85:1 fails the 3.0 UI-graphics bar).
   Fallback here is also Light Blue so tiles stay compliant on any band.

   Grid: 1-up base / 2-up md / 4-up lg per build spec Section 6; a
   --five modifier (exactly 5 items, the Ajay band) goes 5-across at xl.
   ========================================================================== */

.practice-icons {
  padding-top: var(--space-section-y);
  padding-bottom: var(--space-section-y);
}

.practice-icons__title {
  text-align: center;
  margin-bottom: 0.75rem;
}

/* Band heading must invert on dark bands (base.css heading rules pin
   headings to --color-text-heading, which is a dark green). */
[class*='section-bg--dark-blue'] .practice-icons__title,
[class*='section-bg--forest-green'] .practice-icons__title,
[class*='section-bg--dark-green'] .practice-icons__title,
[class*='section-bg--rich-black'] .practice-icons__title {
  color: var(--color-text-on-dark);
}

.practice-icons__intro {
  max-width: 760px;
  margin: 0 auto var(--space-gap);
  text-align: center;
}

.practice-icons__intro p:last-child {
  margin-bottom: 0;
}

.practice-icons__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-gap);
  align-items: stretch;
}

@media (min-width: 768px) {
  .practice-icons__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .practice-icons__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .practice-icons__grid--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Icon tile: dark card on the band, flat, rounded. The whole card is the
   link when a Link exists, so link-ish base typography (bold/tracked) is
   reset back to body styles for the tile content. */
.practice-icons__card {
  display: block;
  background-color: var(--color-bg-card-dark);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  color: var(--color-text-on-dark);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: var(--ls-body2);
  text-decoration: none;
  transition: background-color 150ms ease;
}

a.practice-icons__card:hover,
a.practice-icons__card:focus-visible {
  background-color: var(--color-blue-dark);
  color: var(--color-text-on-dark);
  text-decoration: none;
  cursor: pointer;
}


/* SVG icons: recolored to the accent via CSS mask so uploaded silhouette
   icons automatically pick up the per-band accent (Light Blue on the
   dark-blue band). --icon-src is set inline by the template. */
.practice-icons__icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  background-color: var(--icon-accent-color, var(--color-blue-light));
  -webkit-mask-image: var(--icon-src);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: left center;
  mask-image: var(--icon-src);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: left center;
}

/* Raster (jpg/png) icons render as-is -- they cannot be recolored, so
   uploads for dark bands should already be authored in a light color. */
.practice-icons__img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.practice-icons__card-title {
  color: var(--color-text-on-dark);
  margin: 0 0 0.5rem;
  transition: color 150ms ease;
}

.practice-icons__card-subtitle {
  margin: 0 0 0.5rem;
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: var(--ls-body2);
  color: var(--color-text-muted-on-dark);
}

.practice-icons__card-body,
.practice-icons__card-body p {
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: var(--ls-body2);
  color: var(--color-text-muted-on-dark);
}

.practice-icons__card-body p {
  margin: 0 0 0.5rem;
}

.practice-icons__card-body p:last-child {
  margin-bottom: 0;
}

.practice-icons__cta {
  margin-top: calc(var(--space-gap) * 1.5);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .practice-icons__card,
  .practice-icons__card-title {
    transition: none;
  }
}

/* Hover rework (Dave 2026-07-03: no underline treatment). Calm lift:
   card warms one palette step (dark green -> forest green), gentle rise
   with a soft shadow. White text 8.06:1 and Light Blue accents 5.39:1
   both hold AA on the hover surface. */
a.practice-icons__card {
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

a.practice-icons__card:hover,
a.practice-icons__card:focus-visible {
  background-color: var(--color-forest-green, var(--color-green-forest));
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

a.practice-icons__card:hover .practice-icons__card-title,
a.practice-icons__card:focus-visible .practice-icons__card-title {
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  a.practice-icons__card,
  a.practice-icons__card:hover,
  a.practice-icons__card:focus-visible {
    transition: none;
    transform: none;
  }
}