/**
 * Aimstyle – Hover Cards widget.
 *
 * Moved from Additional CSS ("box services"); a second, identical copy of the
 * is-active, tablet and mobile rules was dropped. Loaded only where the widget
 * is used.
 */

/* box services */
.swm-deal-hover-section {
    --swm-card-bg: #ededed;
    --swm-text: #04293d;
    --swm-radius: 24px;
    --swm-transition: 0.45s ease;

    width: 100%;
    padding: 20px 0;
  }

  .swm-deal-hover-section * {
    box-sizing: border-box;
  }

  .swm-deal-hover-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
  }

  .swm-deal-hover-card {
     position: relative;
  min-height: 390px;
  border-radius: var(--swm-radius);
  overflow: hidden;
  background: var(--swm-card-bg);
  padding: 34px 28px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  transition:
    transform var(--swm-transition),
    box-shadow var(--swm-transition);
  }

  /* Image always visible; no blank-to-image hover effect */
  .swm-deal-hover-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--card-image);
    background-size: cover;
    background-position: center;
    opacity: 1;
    transform: scale(1);
    transition:
      opacity var(--swm-transition),
      transform 0.7s ease;
    z-index: 0;
  }

  /* Dark overlay always visible for text readability */
  .swm-deal-hover-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        180deg,
        rgba(4, 41, 61, 0.08) 0%,
        rgba(4, 41, 61, 0.45) 55%,
        rgba(4, 41, 61, 0.78) 100%
      );
    opacity: 1;
    transition: opacity var(--swm-transition);
    z-index: 1;
  }

  .swm-deal-hover-content {
    position: relative;
    z-index: 2;
    width: 100%;
    transition: transform var(--swm-transition);
  }

  .swm-deal-hover-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    transition: color var(--swm-transition);
    max-width: 95%;
  }

  /* Hover */
  .swm-deal-hover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.14);
  }

  .swm-deal-hover-card:hover::before {
    opacity: 1;
    transform: scale(1);
  }

  .swm-deal-hover-card:hover::after {
    opacity: 1;
  }

  .swm-deal-hover-card:hover .swm-deal-hover-content {
    transform: translateY(-2px);
  }

  .swm-deal-hover-card:hover .swm-deal-hover-content h3 {
    color: #ffffff;
  }


  .swm-deal-hover-card.is-active::before {
    opacity: 1;
    transform: scale(1);
  }

  .swm-deal-hover-card.is-active::after {
    opacity: 1;
  }

  .swm-deal-hover-card.is-active .swm-deal-hover-content h3 {
    color: #ffffff;
  }

  /* Tablet */
  @media (max-width: 1024px) {
    .swm-deal-hover-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }

    .swm-deal-hover-card {
      min-height: 260px;
      padding: 30px 24px;
    }

    .swm-deal-hover-content h3 {
      font-size: 22px;
    }
  }

  /* Mobile */
  @media (max-width: 767px) {
    .swm-deal-hover-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .swm-deal-hover-card {
      min-height: 230px;
      padding: 26px 22px;
      border-radius: 20px;
    }

    .swm-deal-hover-content h3 {
      font-size: 20px;
      max-width: 100%;
    }
  }

/* From the original HTML widget's inline <style>. */
.swm-deal-hover-card {
    will-change: transform, opacity;
}

/* Cards with a link (new; the original cards had none). */
a.swm-deal-hover-card {
    color: inherit;
    text-decoration: none !important;
}