/* =============================================================================
   El Palmar — tide-cards.css
   [tide_cards]
   Los colores interactivos (botón CTA, badge) usan las variables del tema WP
   (--wp--preset--color--primary) con fallbacks para temas que no las definan.
   ============================================================================= */

.ep-cards-grid {
  --ep-card-cta-bg:     var(--wp--preset--color--primary,        var(--wp--preset--color--contrast,     #111827));
  --ep-card-cta-hover:  var(--wp--preset--color--primary-dark,   var(--wp--preset--color--contrast-2,   #374151));
  --ep-card-badge-bg:   var(--wp--preset--color--secondary,      var(--wp--preset--color--tertiary,     #f97316));
  --ep-card-badge-text: var(--wp--preset--color--base,           #ffffff);
  --ep-card-title:      var(--wp--preset--color--contrast,       #0f1f2e);
  --ep-card-text:       var(--wp--preset--color--contrast-2,     #4b5563);
  --ep-card-border:     rgba(0, 0, 0, .09);
  --ep-card-radius:     14px;

  display:               grid;
  gap:                   18px;
  margin-top:            28px;
  grid-template-columns: repeat(var(--ep-cols, 4), 1fr);
}

.ep-cards-grid--cols-1 { --ep-cols: 1; }
.ep-cards-grid--cols-2 { --ep-cols: 2; }
.ep-cards-grid--cols-3 { --ep-cols: 3; }
.ep-cards-grid--cols-4 { --ep-cols: 4; }

/* ── Tarjeta ───────────────────────────────────────────────────────────────── */

.ep-card {
  display:        flex;
  flex-direction: column;
  background:     #fff;
  border-radius:  var(--ep-card-radius);
  overflow:       hidden;
  border:         1px solid var(--ep-card-border);
  box-shadow:     0 1px 4px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
  transition:     transform .2s ease, box-shadow .2s ease;
}

.ep-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.1);
}

/* ── Imagen ────────────────────────────────────────────────────────────────── */

.ep-card-media {
  position:     relative;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  background:   #f0f4f8;
  flex-shrink:  0;
}

.ep-card-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .4s ease;
}

.ep-card:hover .ep-card-img {
  transform: scale(1.05);
}

/* Placeholder sin imagen */
.ep-card-img-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      linear-gradient(135deg, #e8f0f5 0%, #d0e2ec 100%);
  font-size:       36px;
  color:           #a0b4bf;
  letter-spacing:  -.02em;
  font-weight:     300;
}

/* ── Badge sobre la imagen ─────────────────────────────────────────────────── */

.ep-card-badge {
  position:       absolute;
  top:            10px;
  left:           10px;
  background:     var(--ep-card-badge-bg);
  color:          var(--ep-card-badge-text);
  font-size:      .625rem;   /* 10px */
  font-weight:    800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        3px 10px;
  border-radius:  999px;
  line-height:    1.5;
}

/* ── Cuerpo ────────────────────────────────────────────────────────────────── */

.ep-card-body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        18px 18px 16px;
  gap:            8px;
}

.ep-card-title {
  font-size:      1rem;
  font-weight:    700;
  color:          var(--ep-card-title);
  margin:         0;
  line-height:    1.3;
  letter-spacing: -.01em;
}

.ep-card-desc {
  font-size:   .875rem;
  color:       var(--ep-card-text);
  margin:      0;
  line-height: 1.65;
  flex:        1;
}

.ep-card-btn {
  display:         inline-block;
  align-self:      flex-start;
  margin-top:      8px;
  background:      var(--ep-card-cta-bg);
  color:           var(--ep-card-badge-text);   /* blanco o base del tema */
  font-family:     inherit;
  font-size:       .8125rem;
  font-weight:     700;
  text-decoration: none;
  padding:         9px 20px;
  border-radius:   999px;
  letter-spacing:  .02em;
  transition:      background .18s, transform .15s, opacity .15s;
}

.ep-card-btn:hover,
.ep-card-btn:focus {
  background: var(--ep-card-cta-hover);
  transform:  scale(1.03);
  opacity:    .92;
  outline:    none;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .ep-cards-grid--cols-4,
  .ep-cards-grid--cols-3 { --ep-cols: 2; }
}

@media (max-width: 560px) {
  .ep-cards-grid { --ep-cols: 1 !important; gap: 14px; }
  .ep-card-media { aspect-ratio: 4 / 3; }
}