/* hover-effects.css - Shared hover effects for cards and navigation */
/* =============================================================== */

/* Base hover card class */
.hover-card {
  position: relative;
  transition: 
    transform 120ms ease,
    box-shadow 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

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

/* Color classes for hover effects */
.hover-card[data-hover-color="1"]:hover {
  box-shadow: 
    0 12px 32px rgba(46, 204, 113, 0.22),
    0 5px 15px rgba(46, 204, 113, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.hover-card[data-hover-color="2"]:hover {
  box-shadow: 
    0 12px 32px rgba(241, 196, 15, 0.22),
    0 5px 15px rgba(241, 196, 15, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.hover-card[data-hover-color="3"]:hover {
  box-shadow: 
    0 12px 32px rgba(52, 152, 219, 0.22),
    0 5px 15px rgba(52, 152, 219, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.hover-card[data-hover-color="4"]:hover {
  box-shadow: 
    0 12px 32px rgba(155, 89, 182, 0.22),
    0 5px 15px rgba(155, 89, 182, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Active state */
.hover-card:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hover-card:hover {
    transform: translateY(-2px);
  }
  
  .hover-card:active {
    transform: translateY(0) scale(0.99) !important;
  }
}

/* Table row hover effects */
.echo_table tbody tr {
  transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.echo_table tbody tr:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.03) !important;
}

.echo_table tbody tr[data-hover-color="1"]:hover {
  box-shadow: 
    0 8px 22px rgba(46, 204, 113, 0.18),
    0 3px 10px rgba(46, 204, 113, 0.10) !important;
}

.echo_table tbody tr[data-hover-color="2"]:hover {
  box-shadow: 
    0 8px 22px rgba(241, 196, 15, 0.18),
    0 3px 10px rgba(241, 196, 15, 0.10) !important;
}

.echo_table tbody tr[data-hover-color="3"]:hover {
  box-shadow: 
    0 8px 22px rgba(52, 152, 219, 0.18),
    0 3px 10px rgba(52, 152, 219, 0.10) !important;
}

.echo_table tbody tr[data-hover-color="4"]:hover {
  box-shadow: 
    0 8px 22px rgba(155, 89, 182, 0.18),
    0 3px 10px rgba(155, 89, 182, 0.10) !important;
}

/* =========================================================
   FULLY ROUNDED CORNERS for poetry page images
   ========================================================= */

/* Card container - fully rounded */
.poetry_page .card {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Card media area - fully rounded (not just top corners) */
.poetry_page .card_media {
  border-radius: 14px !important; /* CHANGED from 14px 14px 0 0 */
  overflow: hidden !important;
}

/* Card images - fully rounded */
.poetry_page .card_media img,
.poetry_page .card_media video {
  border-radius: 14px !important; /* CHANGED from 14px 14px 0 0 */
  transition: transform 300ms ease !important;
}

/* Subtle zoom effect on card hover */
.poetry_page .card:hover .card_media img,
.poetry_page .card:hover .card_media video {
  transform: scale(1.03) !important;
}

/* Hero section - fully rounded */
.poetry_page .p_hero_media {
  border-radius: 18px !important;
  overflow: hidden !important;
}

.poetry_page .p_hero_media img,
.poetry_page .p_hero_media video {
  border-radius: 18px !important;
}

/* Hero overlay should match rounded corners */
.poetry_page .p_hero_overlay {
  border-radius: 18px !important;
}

/* Aphorism cards - fully rounded */
.poetry_page .aph {
  border-radius: 12px !important;
}

/* Top picks cards - fully rounded */
.poetry_page .pick {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Card badge positioning adjustment */
.poetry_page .card_badge {
  border-radius: 10px !important;
  left: 12px !important;
  bottom: 12px !important;
  z-index: 2 !important;
}

/* Fix for broken image icon - hide it when image fails to load */
.poetry_page .card_media img:not([src]),
.poetry_page .card_media img[src=""],
.poetry_page .card_media img[src*="undefined"],
.poetry_page .card_media img[src*="null"] {
  display: none !important;
}

/* Alternative: Show placeholder instead of broken icon */
.poetry_page .card_media {
  position: relative;
  background: #f0f0f0; /* Light gray background for empty images */
  display: flex;
  align-items: center;
  justify-content: center;
}

.poetry_page .card_media::before {
  content: "🖼️"; /* Placeholder icon */
  font-size: 24px;
  opacity: 0.3;
  position: absolute;
  display: none; /* Hidden by default */
}

/* Show placeholder only if image is broken/missing */
.poetry_page .card_media img:not([src]) + .card_media::before,
.poetry_page .card_media img[src=""] + .card_media::before,
.poetry_page .card_media:has(img[onerror])::before {
  display: flex !important;
}

/* Mobile adjustments */
@media (max-width: 980px) {
  .poetry_page .card,
  .poetry_page .card_media,
  .poetry_page .card_media img,
  .poetry_page .card_media video {
    border-radius: 12px !important; /* Smaller on tablet */
  }
  
  .poetry_page .card.card_no_media,
  .poetry_page .aph,
  .poetry_page .pick {
    border-radius: 12px !important;
  }
  
  .poetry_page .p_hero_media,
  .poetry_page .p_hero_media img,
  .poetry_page .p_hero_media video {
    border-radius: 16px !important;
  }
}

@media (max-width: 768px) {
  .poetry_page .card,
  .poetry_page .card_media,
  .poetry_page .card_media img,
  .poetry_page .card_media video {
    border-radius: 10px !important; /* Smaller on mobile */
  }
  
  .poetry_page .card.card_no_media,
  .poetry_page .aph,
  .poetry_page .pick {
    border-radius: 10px !important;
  }
  
  .poetry_page .p_hero_media,
  .poetry_page .p_hero_media img,
  .poetry_page .p_hero_media video {
    border-radius: 14px !important;
  }
  
  .poetry_page .card_badge {
    left: 8px !important;
    bottom: 8px !important;
    font-size: 11px !important;
    padding: 4px 6px !important;
  }
}

/* Ensure hover effects work with rounded corners */
.poetry_page .hover-card:hover {
  transform: translateY(-3px) !important;
}

.poetry_page .hover-card:active {
  transform: translateY(0) scale(0.98) !important;
}

/* In your hover-effects.css, add this: */
.poetry_page .card_media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide broken images completely */
.poetry_page .card_media img:not([src]),
.poetry_page .card_media img[src=""],
.poetry_page .card_media img:not([src]):not([src=""]) {
  display: none !important;
}

/* When image is hidden, also hide the badge */
.poetry_page .card_media:has(img:not([src])) .card_badge,
.poetry_page .card_media:has(img[src=""]) .card_badge,
.poetry_page .card_media:has(img[onerror]) .card_badge {
  display: none !important;
}

/* Fallback background when image is missing */
.poetry_page .card_media:has(img:not([src])),
.poetry_page .card_media:has(img[src=""]),
.poetry_page .card_media:has(img[onerror]) {
  background: linear-gradient(135deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Simple placeholder icon */
.poetry_page .card_media:has(img:not([src]))::after,
.poetry_page .card_media:has(img[src=""])::after,
.poetry_page .card_media:has(img[onerror])::after {
  content: "🖼️";
  font-size: 24px;
  opacity: 0.2;
}