/*
 * JJD Consultants — Flipbox Visual Update
 * Loaded after style.css and hero-selector.css.
 *
 * Non-hover: supplied service image + soft white overlay.
 * Hover: solid corporate blue, no image.
 * Both Learn More links align to the lower-left.
 */

/* Keep the card content above the image overlay. */
.flip-card-front {
  position: absolute;
  align-items: flex-start;
  text-align: left;
  background-position: center;
  background-size: cover;
  border-color: rgba(8, 47, 101, 0.13);
  isolation: isolate;
}

.flip-card-front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.92) 52%,
      rgba(245, 249, 253, 0.84) 100%
    );
}

.flip-card-front::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--gold, #e7a51a);
}

/* Icons stay visually consistent but align with the left-hand content. */
.flip-card-front .service-icon {
  flex: 0 0 auto;
  margin-left: 0;
}

/* Ensure front headings and body copy remain readable. */
.flip-card-front h3,
.flip-card-front p,
.flip-card-front .learn-link {
  position: relative;
  z-index: 1;
}

.flip-card-front h3 {
  text-align: left;
}

.flip-card-front p {
  text-align: left;
}

/* Align the non-hover Learn More link to the lower-left. */
.flip-card-front .learn-link {
  width: 100%;
  margin-top: auto;
  padding-top: 22px;
  text-align: left;
}

/* Hover side: corporate blue only, with no image background. */
.flip-card-back,
.flip-card-back.bg-workplace,
.flip-card-back.bg-marketing,
.flip-card-back.bg-case,
.flip-card-back.bg-lowcode,
.flip-card-back.bg-erp,
.flip-card-back.bg-digital {
  background-image: none;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(145deg, #0b5ba6 0%, #083f7f 46%, #062e64 100%);
  align-items: stretch;
}


/* Show the same service icon on the solid-blue hover face. */
.flip-card-back .service-icon-hover {
  flex: 0 0 auto;
  margin: 0 0 20px;
  border-color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold-light, #f3bc43);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.06);
}

.flip-card-back .service-icon-hover i {
  color: var(--gold-light, #f3bc43);
}

/* Existing dark image shade is no longer required on the blue hover face. */
.flip-card-back .back-shade {
  display: none;
}

.flip-card-back .back-content {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.flip-card-back h3,
.flip-card-back p {
  text-align: left;
}

/* Align the hover Learn More link to the same lower-left position. */
.flip-card-back a {
  margin-top: auto;
  padding-top: 22px;
  text-align: left;
}

/* New service images supplied by the client, in requested grid order. */
.flip-card-front.bg-workplace {
  background-image: url("../assets/images/service-modern-workplace.png");
}

.flip-card-front.bg-marketing {
  background-image: url("../assets/images/service-marketing.png");
}

.flip-card-front.bg-case {
  background-image: url("../assets/images/service-case-management.png");
}

.flip-card-front.bg-lowcode {
  background-image: url("../assets/images/service-low-code.png");
}

.flip-card-front.bg-erp {
  background-image: url("../assets/images/service-erp.png");
}

.flip-card-front.bg-digital {
  background-image: url("../assets/images/service-digital-experience.png");
}

/*
 * Touch-screen support:
 * Cards retain the existing keyboard/tap flip behavior, and the increased
 * contrast keeps the front readable over all supplied images.
 */
@media (max-width: 760px) {
  .flip-card-front::before {
    background: rgba(255, 255, 255, 0.93);
  }

  .flip-card-front,
  .flip-card-back {
    padding: 32px 25px 28px;
  }
}