/* Cleaning page ONLY */

/* HERO */
.hero {
  background: var(--color-surface);
  overflow: hidden;
}

.hero__container {
  margin: 0 auto;
  max-width: var(--content-max-width);
  padding: var(--spacing-4xl) var(--spacing-3xl);
  display: grid;
  grid-template-columns: 2fr 1.2fr; /* closer to beauty hero */
  gap: var(--section-gap);
  align-items: center;
}

/* make text block behave like beauty hero text */
.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: 36rem; /* stops text from filling the whole page */
}

/* image behaves like the beauty explore-card-media */
.hero__media {
  position: relative;
  width: 100%;
  height: min(60vh, 520px);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-level-3);
}

/* zoom effect + proper cover fit */
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform var(--animation-duration-standard)
      var(--animation-curve-primary);
}

/* hover / tap zoom (desktop + mobile tap) */
.hero__media:hover img,
.hero__media:focus-within img {
  transform: scale(1.05);
}

/* ====== SERVICES ====== */
.services {
  background: var(--color-surface);
  padding: var(--section-gap) 0;
}

.services__container {
  margin: 0 auto;
  max-width: var(--content-max-width);
  padding: 0 var(--spacing-lg);
}

.services__grid {
  display: grid;
  gap: var(--spacing-xl);
  grid-template-columns: repeat(3, 1fr);
}

.service-card { /* uses index.css card look */
  min-height: 200px;
}

/* ====== PRICING ====== */
.pricing {
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)) 100%
  );
  padding: var(--section-gap) 0;
}

.pricing__container {
  margin: 0 auto;
  max-width: var(--content-max-width);
  padding: 0 var(--spacing-lg);
}

/* ====== BOOKING ====== */
.booking {
  background: var(--color-surface);
  padding: var(--section-gap) 0;
}

.booking__container {
  margin: 0 auto;
  max-width: var(--content-max-width);
  padding: 0 var(--spacing-lg);
}

/* ====== RESPONSIVE ====== */
@media (max-width: 991px) {
  .hero__container {
    gap: var(--spacing-3xl);
    grid-template-columns: 1fr 1fr;
    padding: var(--spacing-3xl) var(--spacing-lg);
  }

  .services__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .hero__container {
    padding: var(--spacing-2xl) var(--spacing-lg);
    grid-template-columns: 1fr;
  }

  .hero__content {
    order: 1;
  }

  .hero__media {
    order: 2;
    height: 50vh;
    min-height: 300px;
  }
}

/* keep existing reduced-motion behaviour consistent */
@media (prefers-reduced-motion: reduce) {
  .hero__media img {
    transition: none;
  }
}