/* /var/www/relyn/static_src/css/services.css */

/* SERVICES SECTION */

.services-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 24px 80px;
  color: #FFFFFF;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.services-shell {
  position: relative;
  width: 100%;
  max-width: 1919px;
  min-height: 1485px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 75px;

  /* Blur placement for this section */
  --blur-top: 55%;
  --blur-h: 537px;
}

.services-header {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #FFFFFF;
  max-width: 820px;
}

.services-subtitle {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.services-title {
  margin: 20px 0 0;
  font-size: 48px;
  font-weight: 600;
}

.services-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 192px;
}

.services-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  column-gap: 100px;
}

/* -----------------------------
   Motion Tokens
   ----------------------------- */
.service-card {
  --svc-dur: 2.2s; /* very slow */
  --svc-ease: cubic-bezier(0.16, 1, 0.3, 1); /* silky */
  --svc-drop: 78px; /* box goes DOWN */
  --svc-open-h: 460px; /* expanded height to show details */
  --svc-lift: 96px; /* image goes UP (half-out look) */
  --svc-gap-before-title: 52px;   /* NON-hover: increase gap before title */
  --svc-gap-after-title: 0px;     /* NON-hover: space after title */
}

/* Outer wrapper stays fixed (prevents hover flicker when inner moves) */
.service-card {
  position: relative;
  width: 370px !important;
  height: 400px !important;
  display: block;
  overflow: visible;
}

/* The glass box that moves down + expands */
.service-card-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(99, 62, 178, 0.80),
    rgba(99, 62, 178, 0.20)
  );
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  overflow: visible;

  padding: 23px 27px 74px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  transform: translateY(0);
  will-change: transform, height;
  transition:
    transform var(--svc-dur) var(--svc-ease),
    height var(--svc-dur) var(--svc-ease),
    background var(--svc-dur) var(--svc-ease),
    border-color var(--svc-dur) var(--svc-ease),
    box-shadow var(--svc-dur) var(--svc-ease);
}

/* Keep hovered card above siblings */
.service-card:hover,
.service-card.is-active {
  z-index: 7;
}

/* Image wrapper (moves UP on hover) */
.service-card-image-wrap {
  position: relative;
  width: 315.73px;
  height: 277px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.70);

  transform: translateY(0) scale(1.04);
  transform-origin: center center;
  will-change: transform;
  z-index: 3;

  transition:
    transform var(--svc-dur) var(--svc-ease),
    box-shadow var(--svc-dur) var(--svc-ease);
}

/* IMPORTANT: remove the “blank strip” by using cover */
.service-card-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* no placeholder gap */
  object-position: center;    /* stable framing */
  background: transparent;    /* no extra fill */
}

.service-card-content {
  width: 100%;
  margin-top: var(--svc-gap-before-title);
  display: flex;
  flex-direction: column;
  align-items: center;

  transform: translateY(0);
  will-change: transform;
  transition:
    transform var(--svc-dur) var(--svc-ease),
    margin-top var(--svc-dur) var(--svc-ease);
}

.service-card-title {
  margin: 0 0 var(--svc-gap-after-title) 0;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: #FFFFFF;
  transition: margin var(--svc-dur) var(--svc-ease);
}

/* Description hidden initially */
.service-card-description {
  margin: 0;
  margin-top: 0;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  line-height: 1.6;
  color: #FFFFFF;

  opacity: 0;
  max-height: 0;
  overflow: hidden;

  transform: translateY(10px);
  will-change: opacity, transform, max-height;

  transition:
    opacity var(--svc-dur) var(--svc-ease),
    transform var(--svc-dur) var(--svc-ease),
    max-height var(--svc-dur) var(--svc-ease),
    margin-top var(--svc-dur) var(--svc-ease);
}

/* Button */
.service-card-button {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(12px);

  width: 145px;
  height: 40px;
  border-radius: 999px;

  background-color: #633EB2;
  background-image: linear-gradient(135deg, #633EB2, #633EB2);
  border: 1px solid #A697E0;

  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.9);

  opacity: 0;
  pointer-events: none;

  will-change: opacity, transform;
  transition:
    opacity var(--svc-dur) var(--svc-ease),
    transform var(--svc-dur) var(--svc-ease),
    box-shadow 0.35s ease-out,
    filter 0.35s ease-out;
}

.service-card-button:hover {
  transform: translateX(-50%) translateY(6px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.95);
  filter: brightness(1.04);
}

/* ---------------------------------
   HOVER / ACTIVE STATES
   --------------------------------- */

/* Box goes DOWN + expands */
.service-card:hover .service-card-inner,
.service-card.is-active .service-card-inner {
  transform: translateY(var(--svc-drop));
  height: var(--svc-open-h);

  background: linear-gradient(
    135deg,
    rgba(118, 80, 199, 0.94),
    rgba(99, 62, 178, 0.32)
  );
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    0 30px 110px rgba(0, 0, 0, 0.98),
    0 0 0 1px rgba(255, 255, 255, 0.10);
  --svc-gap-before-title: 26px;  /* HOVER: decrease gap before title */
  --svc-gap-after-title: 14px;   /* HOVER: increase gap after title */
}

/* Image goes UP (half inside / half outside) */
.service-card:hover .service-card-image-wrap,
.service-card.is-active .service-card-image-wrap {
  transform: translateY(calc(-1 * var(--svc-lift))) scale(1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95);
  z-index: 6;
}

/* Content follows slightly upward (keeps spacing nice after lift) */
.service-card:hover .service-card-content,
.service-card.is-active .service-card-content {
  transform: translateY(calc(-1 * (var(--svc-lift) * 0.45)));
}

/* Reveal description */
.service-card:hover .service-card-description,
.service-card.is-active .service-card-description {
  opacity: 0.98;
  margin-top: 12px;
  max-height: 240px;
  transform: translateY(0);
}

/* Reveal button */
.service-card:hover .service-card-button,
.service-card.is-active .service-card-button {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dim siblings */
.services-row:hover .service-card:not(:hover):not(.is-active) {
  filter: brightness(0.95) saturate(0.96);
  transition: filter 0.6s ease-out;
}

/* -----------------------
   RESPONSIVE SAFETY
   ----------------------- */
@media (max-width: 1200px) {
  .services-grid { row-gap: 80px; }
  .services-row { flex-wrap: wrap; row-gap: 40px; }
}

/* ✅ MOBILE + TABLET PORTRAIT: no hover interaction; show "after-hover" state by default */
@media (max-width: 768px) {
  /* ✅ NEW: force real spacing AFTER the entire Services section
     (because card inner overflows outside the section height in mobile) */
  .services-section {
    padding-bottom: 210px; /* ✅ creates visible gap before choose.html starts */
  }

  /* reduce section heading sizes */
  .services-subtitle {
    font-size: 16px;
    letter-spacing: 0.14em;
  }

  .services-title {
    font-size: 30px;
  }

  /* layout: single column + BIGGER gaps so lifted images never collide */
  .services-grid {
    margin-top: 90px;
    row-gap: 230px; /* ✅ more gap between rows/blocks */
  }

  .services-row {
    flex-direction: column;
    align-items: center;
    row-gap: 230px; /* ✅ more gap between cards */
    column-gap: 0;
  }

  /* smaller cards (mobile), but keep the same visual style */
  .service-card {
    width: 300px !important;
    height: 340px !important;
  }

  /* remove hover/tap behavior; keep premium “open” state always */
  .service-card:hover .service-card-inner {
    transform: translateY(0);
    height: 100%;
    background: linear-gradient(
      135deg,
      rgba(118, 80, 199, 0.94),
      rgba(99, 62, 178, 0.32)
    );
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow:
      0 30px 110px rgba(0, 0, 0, 0.98),
      0 0 0 1px rgba(255, 255, 255, 0.10);
  }

  /* default state = hover state (open) */
  .service-card .service-card-inner {
    transform: translateY(64px); /* slightly less than desktop drop to fit */
    height: 410px;              /* open height but smaller for mobile */
    padding: 18px 18px 68px;
    --svc-gap-before-title: 18px;
    --svc-gap-after-title: 10px;
  }

  /* image stays lifted by default */
  .service-card .service-card-image-wrap {
    width: 248px;
    height: 210px;
    transform: translateY(-76px) scale(1);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95);
    z-index: 6;
  }

  /* content follows up (like hover) */
  .service-card .service-card-content {
    transform: translateY(-34px);
  }

  /* smaller fonts inside cards */
  .service-card-title {
    font-size: 20px;
  }

  .service-card-description {
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.98;
    margin-top: 10px;
    max-height: 260px;
    transform: translateY(0);
    overflow: visible;
  }

  /* button visible by default */
  .service-card-button {
    width: 132px;
    height: 38px;
    font-size: 13px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* disable sibling dim on mobile */
  .services-row:hover .service-card:not(:hover):not(.is-active) {
    filter: none;
  }
}

@media (max-width: 480px) {
  /* ✅ keep spacing AFTER services section in smaller mobile too */
  .services-section {
    padding-bottom: 190px; /* ✅ ensures gap before choose.html */
  }

  .services-subtitle {
    font-size: 15px;
    letter-spacing: 0.12em;
  }

  .services-title {
    font-size: 26px;
  }

  .services-grid {
    margin-top: 80px;
    row-gap: 230px;
  }

  .services-row {
    row-gap: 230px;
  }

  .service-card {
    width: 280px !important;
    height: 328px !important;
  }

  .service-card .service-card-inner {
    transform: translateY(60px);
    height: 392px;
    padding: 16px 16px 66px;
  }

  .service-card .service-card-image-wrap {
    width: 235px;
    height: 200px;
    transform: translateY(-72px) scale(1);
    border-radius: 10px;
  }

  .service-card-title {
    font-size: 19px;
  }

  .service-card-description {
    font-size: 13px;
  }

  .service-card-button {
    width: 128px;
    height: 36px;
    font-size: 12px;
  }
}