/*
 * HGI - Services Grid
 * 07-services.css
 *
 * Three-tier service hierarchy:
 *   Tier 1: Aesthetics - full-width horizontal card, expandable sub-services
 *   Tier 2: Weight Loss + Hormone Care - 2-col equal cards
 *   Tier 3: Virtual Care + Shop - 2-col, lighter treatment
 *
 * Sub-services use the same horizontal layout as the parent
 * Aesthetics card, at 70% of the height.
 */


/* ── Section ── */

.services-section {
  background: var(--color-bg-base);
}

.services-section__header {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: 640px;
  margin-inline: auto;
}


/* ── Tier layout wrappers ── */

.services-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.services-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}


/* ─────────────────────────────────────────
   SERVICE CARD - shared base
───────────────────────────────────────── */

.service-card {
  background: var(--color-bg-white);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.service-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--color-border-hover);
}


/* ── Image area - inset at rest, flush on hover ── */

.service-card__image {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: var(--color-bg-alt);
  flex-shrink: 0;
  padding: 8px 8px 0 8px;
  transition: padding 0.5s var(--ease-out);
}

.service-card:hover .service-card__image {
  padding: 0;
}

.service-card__image-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(26, 43, 59, 0.08);
  transition:
    border-radius 0.5s var(--ease-out),
    box-shadow    0.5s var(--ease-out);
}

.service-card:hover .service-card__image-inner {
  border-radius: 0;
  box-shadow: none;
}

.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s var(--ease-out);
  will-change: transform;
}

.service-card:hover .service-card__image img {
  transform: scale(1.04);
}

.service-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent                  0%,
    transparent                 60%,
    rgba(255, 255, 255, 0.05)   63%,
    rgba(255, 255, 255, 0.10)   66%,
    rgba(255, 255, 255, 0.15)   69%,
    rgba(255, 255, 255, 0.20)   72%,
    rgba(255, 255, 255, 0.25)   75%,
    rgba(255, 255, 255, 0.30)   78%,
    rgba(255, 255, 255, 0.35)   80%,
    rgba(255, 255, 255, 0.40)   82%,
    rgba(255, 255, 255, 0.45)   84%,
    rgba(255, 255, 255, 0.50)   86%,
    rgba(255, 255, 255, 0.55)   88%,
    rgba(255, 255, 255, 0.60)   90%,
    rgba(255, 255, 255, 0.70)   92%,
    rgba(255, 255, 255, 0.80)   94%,
    rgba(255, 255, 255, 0.90)   97%,
    var(--color-bg-white)      100%
  );
  pointer-events: none;
}


/* ── Card body ── */

.service-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.service-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  align-self: flex-start;
}

.service-card__badge::before {
  content: '';
  width: 14px;
  height: 2px;
  background: var(--color-action);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.service-card__badge--wellness::before {
  background: var(--color-support);
}

.service-card__badge--virtual::before {
  background: var(--color-blue-mid);
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.service-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
  flex: 1;
}

.service-card__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-action-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  transition: gap var(--duration-base) var(--ease-out);
}

.service-card__link::after {
  content: '\2192';
  transition: transform var(--duration-base) var(--ease-bounce);
}

.service-card:hover .service-card__link {
  gap: var(--space-3);
}

.service-card:hover .service-card__link::after {
  transform: translateX(3px);
}


/* ─────────────────────────────────────────
   TIER 1 - AESTHETICS
   Full-width card with horizontal layout.
   Expandable panel of sub-services below.
───────────────────────────────────────── */

.service-card--primary {
  flex-direction: row;
}

.service-card--primary .service-card__image {
  height: auto;
  width: 45%;
  min-height: 340px;
  padding: 8px 0 8px 8px;
}

.service-card--primary:hover .service-card__image {
  padding: 0;
}

.service-card--primary .service-card__image::after {
  background: linear-gradient(
    to right,
    transparent                  0%,
    transparent                 55%,
    rgba(255, 255, 255, 0.05)   58%,
    rgba(255, 255, 255, 0.10)   61%,
    rgba(255, 255, 255, 0.15)   64%,
    rgba(255, 255, 255, 0.20)   67%,
    rgba(255, 255, 255, 0.25)   70%,
    rgba(255, 255, 255, 0.30)   73%,
    rgba(255, 255, 255, 0.35)   76%,
    rgba(255, 255, 255, 0.40)   79%,
    rgba(255, 255, 255, 0.50)   82%,
    rgba(255, 255, 255, 0.60)   85%,
    rgba(255, 255, 255, 0.70)   88%,
    rgba(255, 255, 255, 0.80)   91%,
    rgba(255, 255, 255, 0.90)   94%,
    var(--color-bg-white)      100%
  );
}

.service-card--primary .service-card__body {
  width: 55%;
  padding: var(--space-8);
  justify-content: center;
}

.service-card--primary .service-card__title {
  font-size: var(--text-xl);
}

.service-card--primary .service-card__desc {
  font-size: var(--text-base);
  max-width: 48ch;
}


/* ── Expand / Collapse triggers ── */

.service-expand__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-action-text);
  background: var(--color-action-light);
  border: 0.5px solid rgba(163, 208, 149, 0.25);
  border-radius: var(--radius-full);
  padding: var(--space-2-5) var(--space-5);
  cursor: pointer;
  margin-top: var(--space-4);
  transition:
    background   var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.service-expand__trigger:hover {
  background: rgba(163, 208, 149, 0.15);
  border-color: var(--color-action);
}

.service-expand__trigger svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-base) var(--ease-bounce);
}

.service-expand__trigger.is-open svg {
  transform: rotate(180deg);
}

.service-expand__collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-action-text);
  background: var(--color-action-light);
  border: 0.5px solid rgba(163, 208, 149, 0.25);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  margin-top: var(--space-2);
  transition:
    background   var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.service-expand__collapse:hover {
  background: rgba(163, 208, 149, 0.15);
  border-color: var(--color-action);
}

.service-expand__collapse svg {
  width: 14px;
  height: 14px;
}


/* ── Expandable sub-services panel ── */

.service-expand__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition:
    max-height 0.7s var(--ease-out),
    opacity    0.4s var(--ease-out),
    margin-top 0.7s var(--ease-out);
}

.service-expand__panel.is-open {
  max-height: 4000px;
  opacity: 1;
  margin-top: var(--space-6);
}


/* ── Staggered entrance for sub-cards ── */

.service-expand__panel .service-card--sub {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   0.35s var(--ease-out),
    transform 0.35s var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.service-expand__panel.is-open .service-card--sub {
  opacity: 1;
  transform: translateY(0);
}

.service-expand__panel.is-open .service-card--sub:nth-child(1) { transition-delay: 0.05s; }
.service-expand__panel.is-open .service-card--sub:nth-child(2) { transition-delay: 0.10s; }
.service-expand__panel.is-open .service-card--sub:nth-child(3) { transition-delay: 0.15s; }
.service-expand__panel.is-open .service-card--sub:nth-child(4) { transition-delay: 0.20s; }
.service-expand__panel.is-open .service-card--sub:nth-child(5) { transition-delay: 0.25s; }
.service-expand__panel.is-open .service-card--sub:nth-child(6) { transition-delay: 0.30s; }
.service-expand__panel.is-open .service-card--sub:nth-child(7) { transition-delay: 0.35s; }


/* ─────────────────────────────────────────
   SUB-SERVICE CARDS (expand panel)
   Horizontal layout matching the parent
   Aesthetics card, at 70% of the height.
   Image on the left, text on the right.
   Right-edge gradient, no bottom gradient.
───────────────────────────────────────── */

.service-card--sub {
  flex-direction: row;
}

.service-card--sub .service-card__image {
  height: 240px;
  width: 40%;
  padding: 8px 0 8px 8px;
}

.service-card--sub:hover .service-card__image {
  padding: 0;
}

.service-card--sub .service-card__image::after {
  background: linear-gradient(
    to right,
    transparent                  0%,
    transparent                 55%,
    rgba(255, 255, 255, 0.05)   58%,
    rgba(255, 255, 255, 0.10)   61%,
    rgba(255, 255, 255, 0.15)   64%,
    rgba(255, 255, 255, 0.20)   67%,
    rgba(255, 255, 255, 0.25)   70%,
    rgba(255, 255, 255, 0.30)   73%,
    rgba(255, 255, 255, 0.35)   76%,
    rgba(255, 255, 255, 0.40)   79%,
    rgba(255, 255, 255, 0.50)   82%,
    rgba(255, 255, 255, 0.60)   85%,
    rgba(255, 255, 255, 0.70)   88%,
    rgba(255, 255, 255, 0.80)   91%,
    rgba(255, 255, 255, 0.90)   94%,
    var(--color-bg-white)      100%
  );
}

.service-card--sub .service-card__image img {
  object-position: center 25%;
}

.service-card--sub .service-card__body {
  width: 60%;
  padding: var(--space-6) var(--space-8);
  justify-content: center;
}

.service-card--sub .service-card__title {
  font-size: var(--text-lg);
}

.service-card--sub .service-card__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}


/* ─────────────────────────────────────────
   TIER 3 - compact cards
   Used for Virtual Care and Shop.
───────────────────────────────────────── */

.service-card--compact {
  padding: var(--space-5) var(--space-6);
  gap: var(--space-4);
}

.service-card--compact .service-card__body {
  padding: 0;
}

.service-card--compact .service-card__title {
  font-size: var(--text-md);
}

/* With icon (Virtual Care, Shop) */
.service-card--compact.service-card--has-icon {
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
}

.service-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0.5px solid var(--color-border);
}

.service-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-action);
}


/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */

@media (max-width: 1024px) {
  .service-card--sub .service-card__image {
    min-height: 200px;
  }
}

@media (max-width: 768px) {
  .services-row {
    grid-template-columns: 1fr;
  }

  /* Primary card stacks vertically on mobile */
  .service-card--primary {
    flex-direction: column;
  }

  .service-card--primary .service-card__image {
    width: 100%;
    height: 220px;
    min-height: unset;
    padding: 8px 8px 0 8px;
  }

  .service-card--primary .service-card__image::after {
    background: linear-gradient(
      to bottom,
      transparent                  0%,
      transparent                 60%,
      rgba(255, 255, 255, 0.05)   63%,
      rgba(255, 255, 255, 0.10)   66%,
      rgba(255, 255, 255, 0.15)   69%,
      rgba(255, 255, 255, 0.20)   72%,
      rgba(255, 255, 255, 0.25)   75%,
      rgba(255, 255, 255, 0.30)   78%,
      rgba(255, 255, 255, 0.35)   80%,
      rgba(255, 255, 255, 0.40)   82%,
      rgba(255, 255, 255, 0.45)   84%,
      rgba(255, 255, 255, 0.50)   86%,
      rgba(255, 255, 255, 0.55)   88%,
      rgba(255, 255, 255, 0.60)   90%,
      rgba(255, 255, 255, 0.70)   92%,
      rgba(255, 255, 255, 0.80)   94%,
      rgba(255, 255, 255, 0.90)   97%,
      var(--color-bg-white)      100%
    );
  }

  .service-card--primary .service-card__body {
    width: 100%;
    padding: var(--space-5) var(--space-6) var(--space-6);
  }

  .service-card--primary .service-card__title {
    font-size: var(--text-lg);
  }

  /* Sub-cards also stack vertically on mobile */
  .service-card--sub {
    flex-direction: column;
  }

  .service-card--sub .service-card__image {
    width: 100%;
    height: 220px;
    min-height: unset;
    padding: 8px 8px 0 8px;
  }

  .service-card--sub .service-card__image::after {
    background: linear-gradient(
      to bottom,
      transparent                  0%,
      transparent                 60%,
      rgba(255, 255, 255, 0.05)   63%,
      rgba(255, 255, 255, 0.10)   66%,
      rgba(255, 255, 255, 0.15)   69%,
      rgba(255, 255, 255, 0.20)   72%,
      rgba(255, 255, 255, 0.25)   75%,
      rgba(255, 255, 255, 0.30)   78%,
      rgba(255, 255, 255, 0.35)   80%,
      rgba(255, 255, 255, 0.40)   82%,
      rgba(255, 255, 255, 0.45)   84%,
      rgba(255, 255, 255, 0.50)   86%,
      rgba(255, 255, 255, 0.55)   88%,
      rgba(255, 255, 255, 0.60)   90%,
      rgba(255, 255, 255, 0.70)   92%,
      rgba(255, 255, 255, 0.80)   94%,
      rgba(255, 255, 255, 0.90)   97%,
      var(--color-bg-white)      100%
    );
  }

  .service-card--sub .service-card__body {
    width: 100%;
    padding: var(--space-5) var(--space-6) var(--space-6);
  }

  .service-card--compact {
    padding: var(--space-5) var(--space-6);
  }

  .services-section__header {
    margin-bottom: var(--space-8);
  }
}