/**
 * Card Component
 *
 * Reusable card system for services, testimonials,
 * blog posts, feature items and more.
 *
 * @package Anna_Baylis
 * @since   1.0.0
 */

/* ── Base card ────────────────────────────────────────────────────────────── */
.anna-card {
  position:         relative;
  background:       var(--color-white);
  border-radius:    var(--card-radius);
  padding:          var(--card-padding);
  box-shadow:       var(--card-shadow);
  border:           1px solid var(--color-border-soft);
  transition:       box-shadow  var(--card-transition),
                    transform   var(--card-transition),
                    border-color var(--card-transition);
  overflow:         hidden;
}

.anna-card:hover {
  box-shadow:   var(--card-shadow-hover);
  transform:    translateY(-6px);
  border-color: rgba(0, 112, 99, 0.18);
}

/* ── Card image ───────────────────────────────────────────────────────────── */
.anna-card__media {
  margin:          calc(-1 * var(--card-padding));
  margin-bottom:   var(--space-6);
  overflow:        hidden;
  border-radius:   var(--card-radius) var(--card-radius) 0 0;
  aspect-ratio:    16 / 10;
}

.anna-card__media img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  object-position: center;
  transition:  transform 0.7s var(--ease-smooth);
}

.anna-card:hover .anna-card__media img {
  transform: scale(1.04);
}

/* ── Card icon ────────────────────────────────────────────────────────────── */
.anna-card__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  border-radius:   var(--radius-md);
  background:      rgba(0, 112, 99, 0.08);
  color:           var(--color-primary);
  margin-bottom:   var(--space-6);
  transition:      background var(--transition-base),
                   transform  var(--transition-spring);
}

.anna-card:hover .anna-card__icon {
  background:  var(--color-primary);
  color:       var(--color-white);
  transform:   scale(1.08) rotate(-3deg);
}

.anna-card__icon svg {
  width:  28px;
  height: 28px;
}

/* ── Card header ──────────────────────────────────────────────────────────── */
.anna-card__header {
  margin-bottom: var(--space-4);
}

.anna-card__eyebrow {
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color:          var(--color-primary);
  margin-bottom:  var(--space-2);
  display:        block;
}

.anna-card__title {
  font-family:    var(--font-heading);
  font-size:      var(--text-xl);
  font-weight:    var(--font-weight-semibold);
  line-height:    var(--leading-snug);
  color:          var(--color-heading);
  margin:         0;
  transition:     color var(--transition-fast);
}

.anna-card:hover .anna-card__title {
  color: var(--color-primary);
}

/* ── Card body ────────────────────────────────────────────────────────────── */
.anna-card__body {
  font-size:   var(--text-base);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-muted);
  flex:        1;
}

/* ── Card footer ──────────────────────────────────────────────────────────── */
.anna-card__footer {
  margin-top:  var(--space-6);
  padding-top: var(--space-6);
  border-top:  1px solid var(--color-border-soft);
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
}

/* ── Card features list ───────────────────────────────────────────────────── */
.anna-card__features {
  list-style:    none;
  margin:        var(--space-5) 0;
  padding:       0;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2-5);
}

.anna-card__features li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-2-5);
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: var(--leading-normal);
}

.anna-card__features li::before {
  content:     '✓';
  color:       var(--color-primary);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  margin-top:  0.05em;
}

/* ── Service card variant ─────────────────────────────────────────────────── */
.anna-card--service {
  display:        flex;
  flex-direction: column;
}

.anna-card--service .anna-card__body {
  flex: 1;
}

.anna-card--service .anna-card__footer {
  margin-top: auto;
}

/* Accent border on hover */
.anna-card--service::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  height:           3px;
  background:       linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.4s var(--ease-smooth);
  border-radius:    0 0 var(--card-radius) var(--card-radius);
}

.anna-card--service:hover::after { transform: scaleX(1); }

/* ── Feature card (soft bg) ───────────────────────────────────────────────── */
.anna-card--feature {
  background:  var(--color-bg-soft);
  border-color: transparent;
  box-shadow:   none;
}

.anna-card--feature:hover {
  background:  var(--color-white);
  box-shadow:  var(--shadow-md);
}

/* ── Stat card ────────────────────────────────────────────────────────────── */
.anna-card--stat {
  padding:          var(--space-6) var(--space-8);
  text-align:       center;
  background:       rgba(255, 255, 255, 0.85);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:           1px solid rgba(255, 255, 255, 0.9);
}

.anna-card--stat .anna-card__value {
  font-family:    var(--font-heading);
  font-size:      var(--text-4xl);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-primary);
  line-height:    1;
  display:        block;
  margin-bottom:  var(--space-2);
  letter-spacing: var(--tracking-tight);
}

.anna-card--stat .anna-card__label {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
}

/* ── Blog post card ───────────────────────────────────────────────────────── */
.anna-card--post {
  display:        flex;
  flex-direction: column;
}

.anna-card--post .anna-card__meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  font-size:   var(--text-xs);
  color:       var(--color-text-light);
  margin-bottom: var(--space-3);
}

/* ── Horizontal card ──────────────────────────────────────────────────────── */
.anna-card--horizontal {
  flex-direction: row;
  gap:            var(--space-6);
  align-items:    flex-start;
}

.anna-card--horizontal .anna-card__media {
  width:          200px;
  flex-shrink:    0;
  margin:         0;
  border-radius:  var(--radius-md);
  aspect-ratio:   1;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .anna-card { padding: var(--space-6); }
  .anna-card--horizontal { flex-direction: column; }
  .anna-card--horizontal .anna-card__media { width: 100%; aspect-ratio: 16 / 9; }
}