/* Card Grid Layout */
.card-hover-grid {
  display: grid;
  gap: var(--card-gap, 26px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card-hover-grid.has-fixed-columns {
  grid-template-columns: repeat(var(--ch-columns, 3), minmax(0, 1fr));
}

/* Card Container */
.card-hover-grid .card-wrapper,
.card-hover-grid .translation-card {
  position: relative;
  width: 100%;
  min-height: 450px;
  border-radius: var(--card-radius, 26px);
  overflow: hidden;
  box-shadow: var(--card-shadow, 0 18px 40px rgba(15, 23, 42, 0.16));
  background: #fff;
  cursor: pointer;
}

.card-hover-grid .card-wrapper:focus-within,
.card-hover-grid .card-wrapper:focus,
.card-hover-grid .translation-card:focus-within,
.card-hover-grid .translation-card:focus {
  outline: none;
}

/* Card Inner Container */
.card-hover-grid .card-container,
.card-hover-grid .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Flip Effect Specific - 3D Container */
.card-hover-grid.effect-flip .card-container,
.card-hover-grid.effect-flip .card-inner {
  transform-style: preserve-3d;
  transition: transform var(--card-transition, 0.35s)
    var(--card-easing, ease-in-out);
}

/* Card Faces - Base Styles */
.card-hover-grid .card-face {
  position: absolute;
  inset: 0;
  padding: 24px 26px;
  border-radius: var(--card-radius, 26px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  backface-visibility: hidden;
}

/* Front Face */
.card-hover-grid .card-front {
  display: flex;
  align-items: flex-end;
  padding: var(--card-front-padding-top, 26px)
    var(--card-front-padding-right, 26px) var(--card-front-padding-bottom, 40px)
    var(--card-front-padding-left, 26px);
  background: var(--card-front-bg, #f5f5f7);
  background-image: var(--card-front-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--card-text-color-front, #111827);
  z-index: 2;
  transition: transform var(--card-transition, 0.35s)
      var(--card-easing, ease-in-out),
    opacity var(--card-transition, 0.35s) var(--card-easing, ease-in-out);
}

.card-hover-grid .card-front-content,
.card-hover-grid .card-front .text-block {
  max-width: 100%;
  z-index: 1;
  text-shadow: var(--card-text-shadow, 0 2px 4px rgba(0, 0, 0, 0.3));
}

.card-hover-grid .card-heading,
.card-hover-grid .card-front .title {
  font-family: var(--card-heading-font, "Playfair Display", serif);
  font-size: var(--card-heading-size, 24px);
  font-weight: var(--card-heading-weight, 600);
  line-height: var(--card-heading-line-height, 1.3);
  letter-spacing: var(--card-heading-letter-spacing, 0);
  text-transform: uppercase;
  margin: 0;
}

.card-hover-grid .card-subheading,
.card-hover-grid .card-front .subtitle {
  font-family: var(--card-body-font, "Inter", sans-serif);
  font-size: var(--card-subheading-size, 14px);
  font-weight: var(--card-subheading-weight, 400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 10px;
}

/* Plus Icon */
.card-hover-grid .plus-icon,
.card-hover-grid .card-front .plus {
  position: absolute;
  top: 18px;
  right: 22px;
  width: var(--plus-icon-width, 26px);
  height: var(--plus-icon-height, 26px);
  border-radius: 999px;
  border: 2px solid var(--plus-icon-border-color, currentColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--plus-icon-font-size, 16px);
  color: var(--plus-icon-text-color, currentColor);
  background-image: var(--plus-icon-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Card Images */
.card-hover-grid .card-image,
.card-hover-grid .card-front .image {
  display: none; /* Hide circular image on front card */
}

.card-hover-grid .card-back-image,
.card-hover-grid .card-back .image {
  flex: 0 0 var(--card-back-image-width, 40%);
  height: 100%;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--card-back-image);
  align-self: stretch;
}

/* Image Overlay */
.card-hover-grid .card-image::after,
.card-hover-grid .card-front .image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--card-image-overlay-color, transparent);
  opacity: var(--card-image-overlay-opacity, 0);
  pointer-events: none;
}

/* Back Face */
.card-hover-grid .card-back {
  background: #fff;
  color: var(--card-text-color-back, #111827);
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  z-index: 1;
  transition: transform var(--card-transition, 0.35s)
      var(--card-easing, ease-in-out),
    opacity var(--card-transition, 0.35s) var(--card-easing, ease-in-out);
}

.card-hover-grid .card-back-text,
.card-hover-grid .card-back .content {
  font-family: var(--card-body-font, "Inter", sans-serif);
  font-size: var(--card-body-size, 15px);
  font-weight: var(--card-body-weight, 400);
  line-height: var(--card-body-line-height, 1.6);
  letter-spacing: var(--card-body-letter-spacing, 0);
  background: var(--card-back-text-bg, #fff);
  padding: var(--card-back-padding-top, 24px)
    var(--card-back-padding-right, 26px) var(--card-back-padding-bottom, 24px)
    var(--card-back-padding-left, 26px);
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: inherit;
}

.card-hover-grid .card-back-text p + p,
.card-hover-grid .card-back .content p + p {
  margin-top: 12px;
}

/* Back Card Heading */
.card-hover-grid .card-back .back-heading {
  font-family: var(
    --card-back-heading-font,
    var(--card-heading-font, "Playfair Display", serif)
  );
  font-size: var(--card-back-heading-size, var(--card-heading-size, 24px));
  font-weight: var(--card-back-heading-weight, var(--card-heading-weight, 600));
  line-height: var(
    --card-back-heading-line-height,
    var(--card-heading-line-height, 1.3)
  );
  letter-spacing: var(
    --card-back-heading-letter-spacing,
    var(--card-heading-letter-spacing, 0)
  );
  text-transform: uppercase;
  margin: 0 0 20px 0;
  text-shadow: none;
}

/* Back Card Subheading */
.card-hover-grid .card-back .back-subheading {
  font-family: var(--card-back-subheading-font, var(--card-body-font, "Inter", sans-serif));
  font-size: var(--card-back-subheading-size, var(--card-subheading-size, 14px));
  font-weight: var(--card-back-subheading-weight, var(--card-subheading-weight, 400));
  line-height: var(--card-back-subheading-line-height, 1.4);
  letter-spacing: var(--card-back-subheading-letter-spacing, 0.08em);
  text-transform: uppercase;
  margin: 0 0 10px 0;
  text-shadow: none;
}

/* ============================================
   ANIMATION EFFECTS
   ============================================ */

/* SLIDE EFFECT (Default) */
.card-hover-grid .card-back {
  transform: translateY(100%);
}

.card-hover-grid .card-wrapper:hover .card-back,
.card-hover-grid .card-wrapper.is-hovered .card-back,
.card-hover-grid .card-wrapper:focus-within .card-back,
.card-hover-grid .translation-card:hover .card-back,
.card-hover-grid .translation-card.is-hovered .card-back,
.card-hover-grid .translation-card:focus-within .card-back {
  transform: translateY(0);
}

.card-hover-grid .card-wrapper:hover .card-front,
.card-hover-grid .card-wrapper.is-hovered .card-front,
.card-hover-grid .card-wrapper:focus-within .card-front,
.card-hover-grid .translation-card:hover .card-front,
.card-hover-grid .translation-card.is-hovered .card-front,
.card-hover-grid .translation-card:focus-within .card-front {
  transform: translateY(-100%);
}

/* FLIP EFFECT */
.card-hover-grid.effect-flip .card-back {
  transform: rotateY(180deg);
}

.card-hover-grid.effect-flip .card-wrapper:hover .card-container,
.card-hover-grid.effect-flip .card-wrapper.is-hovered .card-container,
.card-hover-grid.effect-flip .card-wrapper:focus-within .card-container,
.card-hover-grid.effect-flip .translation-card:hover .card-inner,
.card-hover-grid.effect-flip .translation-card.is-hovered .card-inner,
.card-hover-grid.effect-flip .translation-card:focus-within .card-inner {
  transform: rotateY(180deg);
}

.card-hover-grid.effect-flip .card-wrapper:hover .card-front,
.card-hover-grid.effect-flip .card-wrapper.is-hovered .card-front,
.card-hover-grid.effect-flip .card-wrapper:focus-within .card-front,
.card-hover-grid.effect-flip .translation-card:hover .card-front,
.card-hover-grid.effect-flip .translation-card.is-hovered .card-front,
.card-hover-grid.effect-flip .translation-card:focus-within .card-front,
.card-hover-grid.effect-flip .card-wrapper:hover .card-back,
.card-hover-grid.effect-flip .card-wrapper.is-hovered .card-back,
.card-hover-grid.effect-flip .card-wrapper:focus-within .card-back,
.card-hover-grid.effect-flip .translation-card:hover .card-back,
.card-hover-grid.effect-flip .translation-card.is-hovered .card-back,
.card-hover-grid.effect-flip .translation-card:focus-within .card-back {
  transform: none;
}

/* FADE EFFECT */
.card-hover-grid.effect-fade .card-back {
  opacity: 0;
  transform: none;
}

.card-hover-grid.effect-fade .card-wrapper:hover .card-back,
.card-hover-grid.effect-fade .card-wrapper.is-hovered .card-back,
.card-hover-grid.effect-fade .card-wrapper:focus-within .card-back,
.card-hover-grid.effect-fade .translation-card:hover .card-back,
.card-hover-grid.effect-fade .translation-card.is-hovered .card-back,
.card-hover-grid.effect-fade .translation-card:focus-within .card-back {
  opacity: 1;
  z-index: 3;
}

.card-hover-grid.effect-fade .card-wrapper:hover .card-front,
.card-hover-grid.effect-fade .card-wrapper.is-hovered .card-front,
.card-hover-grid.effect-fade .card-wrapper:focus-within .card-front,
.card-hover-grid.effect-fade .translation-card:hover .card-front,
.card-hover-grid.effect-fade .translation-card.is-hovered .card-front,
.card-hover-grid.effect-fade .translation-card:focus-within .card-front {
  opacity: 0;
  transform: none;
}

/* ZOOM EFFECT */
.card-hover-grid.effect-zoom .card-back {
  opacity: 0;
  transform: scale(0.8);
}

.card-hover-grid.effect-zoom .card-wrapper:hover .card-back,
.card-hover-grid.effect-zoom .card-wrapper.is-hovered .card-back,
.card-hover-grid.effect-zoom .card-wrapper:focus-within .card-back,
.card-hover-grid.effect-zoom .translation-card:hover .card-back,
.card-hover-grid.effect-zoom .translation-card.is-hovered .card-back,
.card-hover-grid.effect-zoom .translation-card:focus-within .card-back {
  opacity: 1;
  transform: scale(1);
  z-index: 3;
}

.card-hover-grid.effect-zoom .card-wrapper:hover .card-front,
.card-hover-grid.effect-zoom .card-wrapper.is-hovered .card-front,
.card-hover-grid.effect-zoom .card-wrapper:focus-within .card-front,
.card-hover-grid.effect-zoom .translation-card:hover .card-front,
.card-hover-grid.effect-zoom .translation-card.is-hovered .card-front,
.card-hover-grid.effect-zoom .translation-card:focus-within .card-front {
  opacity: 0;
  transform: scale(1.2);
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 640px) {
  /* Force single column on mobile */
  .card-hover-grid,
  .card-hover-grid.has-fixed-columns {
    grid-template-columns: 1fr !important;
  }

  .card-hover-grid .card-wrapper,
  .card-hover-grid .translation-card {
    min-height: 240px;
  }

  /* Keep back card hidden on mobile by default */
  .card-hover-grid .card-back {
    position: relative;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out,
      margin-top 0.3s ease-out;
  }

  /* Show back card when is-hovered class is present */
  .card-hover-grid .card-wrapper.is-hovered .card-back,
  .card-hover-grid .translation-card.is-hovered .card-back {
    max-height: 1000px;
    opacity: 1;
    margin-top: 20px;
  }

  /* Disable flip transforms on mobile */
  .card-hover-grid.effect-flip .card-container,
  .card-hover-grid.effect-flip .card-inner {
    transform: none !important;
  }

  .card-hover-grid .card-back-image,
  .card-hover-grid .card-back .image {
    flex: 0 0 200px;
    height: 200px;
    width: 100%;
  }

  .card-hover-grid .card-back-text,
  .card-hover-grid .card-back .content {
    padding: var(--card-mobile-padding-top, 20px)
      var(--card-mobile-padding-right, 20px)
      var(--card-mobile-padding-bottom, 20px)
      var(--card-mobile-padding-left, 20px);
  }

  /* Mobile padding for front card */
  .card-hover-grid .card-front-inner {
    padding: var(--card-mobile-padding-top, var(--card-front-padding-top, 26px))
      var(--card-mobile-padding-right, var(--card-front-padding-right, 26px))
      var(--card-mobile-padding-bottom, var(--card-front-padding-bottom, 40px))
      var(--card-mobile-padding-left, var(--card-front-padding-left, 26px));
  }

}

/* ============================================
   MOBILE STACKED - SEPARATE SECTION
   ============================================ */

/* Mobile grid - hidden by default on desktop */
.card-hover-mobile-grid {
  display: none;
}

/* Desktop/Tablet (>= 768px): Show original cards, hide mobile grid */
@media (min-width: 768px) {
  .card-hover-grid.mobile-stacked-enabled {
    display: grid;
  }
  .card-hover-mobile-grid {
    display: none !important;
  }
}

/* Mobile (< 768px): Hide original cards, show mobile grid */
@media (max-width: 767px) {
  .card-hover-grid.mobile-stacked-enabled {
    display: none !important;
  }
  .card-hover-mobile-grid {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap, 26px);
  }

  /* Mobile Card Styling */
  .mobile-card {
    background: var(--card-front-bg, #f5f5f7);
    border-radius: var(--card-radius, 26px);
    overflow: hidden;
    box-shadow: var(--card-shadow, 0 18px 40px rgba(15, 23, 42, 0.16));
  }

  .mobile-card-image {
    width: 100%;
    height: 0;
    padding-bottom: 30%; /* 30% aspect ratio for image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: var(--mobile-card-image-gap, 0);
  }

  .mobile-card-content {
    padding: var(--card-mobile-padding-top, 20px)
      var(--card-mobile-padding-right, 20px)
      var(--card-mobile-padding-bottom, 20px)
      var(--card-mobile-padding-left, 20px);
  }

  .card-hover-mobile-grid .mobile-card-heading {
    font-family: var(--card-heading-font, "Playfair Display", serif);
    font-size: var(--card-heading-size, 24px);
    font-weight: var(--card-heading-weight, 600);
    line-height: var(--card-heading-line-height, 1.3);
    text-transform: uppercase;
    margin: 0 0 var(--mobile-card-heading-gap, 10px) 0;
    color: var(--card-text-color-front, #111827);
  }

  .card-hover-mobile-grid .mobile-card-subheading {
    font-family: var(--mobile-subheading-font, var(--card-back-subheading-font, var(--card-body-font, "Inter", sans-serif)));
    font-size: var(--card-back-subheading-size, var(--card-subheading-size, 14px));
    font-weight: var(--card-back-subheading-weight, var(--card-subheading-weight, 400));
    line-height: var(--card-back-subheading-line-height, 1.4);
    letter-spacing: var(--card-back-subheading-letter-spacing, 0.08em);
    text-transform: var(--mobile-subheading-text-transform, uppercase);
    margin: 0 0 var(--mobile-card-subheading-gap, 15px) 0;
    color: var(--card-text-color-front, #111827);
  }

  .card-hover-mobile-grid .mobile-card-body {
    font-family: var(--card-body-font, "Inter", sans-serif);
    font-size: var(--card-body-size, 15px);
    font-weight: var(--card-body-weight, 400);
    line-height: var(--card-body-line-height, 1.6);
    color: var(--card-text-color-front, #111827);
  }

  .card-hover-mobile-grid .mobile-card-body p {
    margin: 0 0 12px 0;
    line-height: inherit;
  }

  .card-hover-mobile-grid .mobile-card-body p:last-child {
    margin-bottom: 0;
  }
}