/* ===========================================
   index-premium.css - Homepage polish layer
   CSS Guard: scoped overrides, no base file edits
   =========================================== */

/* Scroll fade-in */
.home-page .fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.home-page .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Homepage treatment cards: premium layer (scoped, non-destructive) */
.home-page .nh-premium-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-teal) 28%, var(--color-gray-200));
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-white) 90%, var(--color-teal-light)),
    var(--color-white)
  );
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--color-navy) 14%, transparent),
    0 2px 8px color-mix(in srgb, var(--color-teal) 16%, transparent);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.home-page .nh-premium-card::before {
  content: "";
  position: absolute;
  inset: -60% 35% auto -20%;
  height: 220px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-teal-light) 50%, transparent) 0%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 1;
}

.home-page .nh-premium-card img {
  transform: scale(1.01);
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: saturate(1.06) contrast(1.03);
}

.home-page .nh-premium-card .treatment-card-overlay {
  z-index: 2;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-navy) 4%, transparent) 12%,
    color-mix(in srgb, var(--color-navy) 76%, transparent) 100%
  );
}

.home-page .nh-premium-card .treatment-card-tag {
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
}

.home-page .nh-premium-card .treatment-card-link {
  text-shadow: 0 1px 2px color-mix(in srgb, var(--color-navy) 45%, transparent);
}

.home-page .nh-premium-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--color-teal) 60%, var(--color-gray-200));
  box-shadow:
    0 24px 46px color-mix(in srgb, var(--color-navy) 22%, transparent),
    0 6px 20px color-mix(in srgb, var(--color-teal) 28%, transparent);
}

.home-page .nh-premium-card:hover img {
  transform: scale(1.08);
  filter: saturate(1.12) contrast(1.06);
}

/* Hero premium layer: controlled luxury tone, low brightness */
.home-page .nh-hero-premium {
  isolation: isolate;
  background:
    radial-gradient(1200px 560px at 12% 12%, color-mix(in srgb, var(--color-teal) 24%, transparent), transparent 64%),
    radial-gradient(980px 480px at 88% 22%, color-mix(in srgb, var(--color-teal-light) 16%, transparent), transparent 68%),
    linear-gradient(
      140deg,
      color-mix(in srgb, var(--color-navy) 88%, black) 0%,
      color-mix(in srgb, var(--color-navy) 72%, var(--color-teal-dark)) 55%,
      color-mix(in srgb, var(--color-navy) 84%, black) 100%
    );
}

.home-page .nh-hero-premium .hero-bg {
  opacity: 0.26;
  filter: saturate(0.88) contrast(1.04) brightness(0.86);
}

.home-page .nh-hero-premium .hero-highlight {
  background: color-mix(in srgb, var(--color-teal-dark) 32%, transparent);
  border-color: color-mix(in srgb, var(--color-teal-light) 26%, transparent);
  color: color-mix(in srgb, var(--color-teal-light) 92%, var(--color-white));
}

.home-page .nh-hero-premium .hero-form-card {
  background: color-mix(in srgb, var(--color-navy) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-white) 16%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 14%, transparent),
    0 28px 56px color-mix(in srgb, var(--color-navy) 52%, transparent),
    0 10px 26px color-mix(in srgb, var(--color-teal-dark) 24%, transparent);
}

.home-page .nh-hero-premium .hero-form-card .form-control {
  background: color-mix(in srgb, var(--color-white) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 20%, transparent);
}

.home-page .nh-hero-premium .hero-form-card .form-control:focus {
  background: color-mix(in srgb, var(--color-white) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-teal-light) 54%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 30%, transparent);
}

.home-page .nh-hero-premium .hero-actions .btn {
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.home-page .nh-hero-premium .hero-actions .btn-primary {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-teal-dark) 96%, black) 0%,
    color-mix(in srgb, var(--color-teal) 88%, var(--color-navy)) 56%,
    color-mix(in srgb, var(--color-teal-light) 70%, var(--color-teal-dark)) 100%
  );
  border-color: color-mix(in srgb, var(--color-teal-light) 25%, transparent);
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--color-teal-dark) 46%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 22%, transparent);
}

.home-page .nh-hero-premium .hero-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--color-teal-dark) 54%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 24%, transparent);
}

.home-page .nh-hero-premium .hero-actions .btn-white {
  background: linear-gradient(135deg, #25D366 0%, #1FB857 52%, #128C7E 100%);
  color: var(--color-white);
  border-color: color-mix(in srgb, #25D366 45%, transparent);
  box-shadow:
    0 10px 24px color-mix(in srgb, #128C7E 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 22%, transparent);
}

.home-page .nh-hero-premium .hero-actions .btn-white:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #2AE06D 0%, #20C25C 52%, #149786 100%);
  border-color: color-mix(in srgb, #25D366 60%, transparent);
}

.home-page .nh-hero-premium .hero-form-card .form-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.home-page .nh-hero-premium .hero-form-card .form-submit::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    color-mix(in srgb, var(--color-white) 42%, transparent) 48%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
  z-index: 1;
}

.home-page .nh-hero-premium .hero-form-card .form-submit:hover::after {
  left: 155%;
}

.home-page .nh-hero-premium .hero-form-card .form-submit:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--color-teal-dark) 52%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-teal-light) 30%, transparent);
}

@media (max-width: 768px) {
  .home-page .nh-hero-premium .hero-bg {
    opacity: 0.2;
    filter: saturate(0.82) contrast(1.02) brightness(0.72);
  }
  .home-page .nh-hero-premium .hero-form-card {
    background: #f4f8fa;
    border: 1px solid #d7e2ea;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
  }
  .home-page .nh-hero-premium .hero-form-card .form-control {
    background: #ffffff;
    border-color: #d8e1e8;
    color: #0f172a;
  }
  .home-page .nh-hero-premium .hero-form-card .form-control:focus {
    background: #ffffff;
    border-color: #0e8b7f;
    box-shadow: 0 0 0 3px rgba(14,139,127,0.14);
  }
}

/* ── Mobile: doctor-feature height & spacing (scoped, additive) ── */
@media (max-width: 768px) {
  .home-page .doctor-feature-inner  { gap: var(--space-8); }
  .home-page .doctor-feature-img img { height: 260px; }
  .home-page .doctor-stats           { gap: var(--space-4); }
}
@media (max-width: 480px) {
  .home-page .doctor-feature-img img { height: 210px; }
  .home-page .doctor-stats           { flex-wrap: wrap; }
  .home-page .doctor-stat            { flex: 1 1 28%; min-width: 72px; }
}

/* ── Mobile: GPU pressure relief (hover effects already off via treatments-grid.css) ── */
@media (max-width: 768px) {
  .home-page .nh-premium-card        { will-change: auto; }
  .home-page .nh-premium-card::before { display: none; }
}

/* ── picture element: inherit full card dimensions ── */
.home-page .treatment-card picture {
  display: block;
  width: 100%;
  height: 100%;
}