/* Cards Showcase CSS - v2.0.0 with CSS variables for colors */
.cards-showcase-wrapper { padding: 36px 0; }
.cards-card-link { display:block; color:inherit; text-decoration:none; }
.cards-card { position: relative; border-radius: 24px; overflow: hidden; display:flex; align-items:flex-end; transition: transform .35s ease, box-shadow .35s ease; aspect-ratio: 3 / 4; min-height: 420px; }
@media (hover: hover) and (pointer: fine) { .cards-card:hover { transform: scale(1.03); } }
.cards-card-bg { position:absolute; inset:0; background-size: cover; background-position: center center; z-index:0; }
.cards-overlay { position:absolute; inset:0; z-index:1; }
.cards-content { position: relative; z-index:2; left:24px; bottom:24px; color:var(--cs-text-color,#fff); max-width:70%; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.cards-icon-svg, .cards-icon-fa { display:block; margin-bottom:8px; color:var(--cs-text-color,#fff); }
.cards-title { font-size:28px; margin:0 0 8px; font-weight:700; color:var(--cs-title-color,#fff); }
.cards-desc { margin:0; font-size:14px; opacity:0.95; color:var(--cs-text-color,#fff); }

.swiper { padding-bottom: 48px; }
.swiper-pagination { bottom: 14px !important; }
.swiper-pagination-bullet { width: 8px !important; height: 8px !important; background-color: var(--cs-bullet-inactive,#efefef) !important; opacity: 1 !important; border-radius: 50%; }
.swiper-pagination-bullet-active { background-color: var(--cs-bullet-active,#b938a8) !important; }

/* responsive adjustments */
@media (max-width: 1024px) {
  .cards-card { min-height: 360px; aspect-ratio: 3 / 4; border-radius:20px; }
  .cards-content { left:18px; bottom:18px; max-width:75%; }
  .cards-title { font-size:24px; }
}
@media (max-width: 600px) {
  .cards-card { min-height: 300px; aspect-ratio: 3 / 4; border-radius:16px; }
  .cards-content { left:14px; bottom:14px; max-width:86%; }
  .cards-title { font-size:20px; }
  .cards-icon-svg, .cards-icon-fa { width:36px; height:auto; }
}