/* Shared card styles consolidated from multiple section CSS files
   Purpose: centralize common `.card` visuals (shadow, radius, padding, hover).
   Important: do NOT force full-child backgrounds here (that causes square corners
   inside rounded cards). If a child needs a background, scope it specifically.
*/
:root {
  --card-shadow: 0px 8px 56px rgba(197, 98, 98, 0.16);
  --card-radius: 1.5rem;
  --card-border-color: rgba(0,0,0,0.06);
  --card-hover-shadow: 0 8px 20px rgba(197, 98, 98, 0.4);
  --card-transition: box-shadow .2s linear, transform .2s linear;
}

/* Base card visuals */
.card {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border-color);
  transition: var(--card-transition);
  background-clip: padding-box;
  overflow: hidden;
  background-color: var(--secondary-color);
}

/* Keep card internals transparent so rounded corners don't show inner squares.
   Section CSS may intentionally add small accent backgrounds to specific children;
   prefer scoped selectors instead of universal `.card *` rules. */
.card .card-body,
.card > .card-header,
.card > .card-footer {
  background: transparent !important;
  padding: 2rem;
}

@media all and (max-width:768px) {
  .card .card-body {
    padding: 2rem 1rem;
  }
}

.card:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-3px);
}

/* CTA styles (can be overridden per-section) */
.card .card-body a.btn {
  opacity: 0.95;
  border: 1px solid var(--primary-color);
  color: var(--text-color);
  border-radius: .75rem;
  box-shadow: none;
}
.card .card-body a.btn:hover {
  opacity: 0.9;
}