/* ==========================================================================
   ZM Dental Studio — Home page specific sections
   ========================================================================== */

/* ---- Hero (full-bleed photo on the right, flush to the viewport edge) ---- */
.hero {
  padding-top: calc(var(--space-9) + 3.75rem);
  background: var(--bg-soft);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-7);
}

.hero__text {
  padding-left: var(--container-inset);
  padding-right: var(--space-6);
  padding-block: var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__text h1 {
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.55rem);
  white-space: normal;
}

.hero__lead {
  margin-top: var(--space-3);
  font-size: 1.02rem;
  max-width: 44ch;
}

/* Desktop shows the full lead; mobile swaps in the short one so the
   key promise ("без болю") is never cut off by clamping. */
.hero__lead-short {
  display: none;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero__media {
  position: relative;
  min-height: 360px;
  border-radius: 28px 0 0 28px;
  overflow: hidden;
}

/* Absolutely positioned so a tall/portrait source photo can't inflate
   .hero__media's height via grid stretch — same fix as .page-hero__media. */
.hero__media-ph {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.hero__media:hover .hero__media-ph {
  transform: scale(1.035);
}

/* Mobile hero: text overlays the full-bleed photo (matches the reference
   mobile mockup) instead of stacking as two separate blocks. Kept compact
   so the whole block (incl. both buttons) sits inside the photo height. */
@media (max-width: 900px) {
  .hero {
    padding-top: calc(var(--space-8) + 3.25rem);
  }
  .hero__grid {
    position: relative;
    display: block;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    height: 400px;
    min-height: 0;
    border-radius: 0;
    z-index: 0;
  }
  /* Dark gradient only over the LOWER portion of the photo, where the
     text sits — the top stays clear so the cabinet is still recognisable
     (matches the reference: text never fully blankets the photo). */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(22, 32, 43, 0) 0%, rgba(22, 32, 43, 0) 40%, rgba(22, 32, 43, 0.78) 65%, rgba(22, 32, 43, 0.96) 100%);
    pointer-events: none;
  }
  .hero__text {
    position: relative;
    z-index: 1;
    padding: 150px var(--container-pad) var(--space-5);
  }
  .hero__text .eyebrow {
    display: none;
  }
  /* Text now sits over the dark gradient (added above), so it needs to
     be light instead of the default dark --ink used on desktop's plain
     light background. */
  .hero__text h1 {
    color: var(--white);
  }
  .hero__lead {
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
  }
  .hero__actions .btn--outline {
    --btn-fg: var(--white);
    border-color: rgba(255, 255, 255, 0.45);
  }

  .hero__lead-full {
    display: none;
  }

  .hero__lead-short {
    display: inline;
  }
  .hero__actions {
    flex-wrap: nowrap;
    gap: 0.6rem;
    margin-top: var(--space-4);
  }
  .hero__actions .btn {
    padding: 0.8rem 1.2rem;
    font-size: 0.84rem;
  }
  .hero__actions .btn svg {
    width: 13px;
    height: 13px;
  }
}

/* Mobile section order: "Про клініку" right after the hero, then the
   advantages strip, matching the reference mobile flow (desktop keeps
   the original order — this only re-sequences the flex paint order). */
@media (max-width: 900px) {
  .page-shell {
    display: flex;
    flex-direction: column;
  }
  .hero { order: 1; }
  .home-about { order: 2; }
  .home-features { order: 3; }
  .home-services { order: 4; }
  .home-doctors { order: 5; }
  #reviews { order: 6; }
  .cta-banner { order: 7; }
}

/* ---- Features section head ---- */
.features-head {
  margin-bottom: var(--space-6);
}

.features-head h2 {
  margin-top: var(--space-3);
}

/* Features on mobile: compact 2×2 grid — icon + heading only, the
   descriptions are hidden to keep the home page short (they repeat
   on the "Про клініку" page anyway). */
@media (max-width: 720px) {
  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .feature-card {
    padding: var(--space-5) var(--space-4);
  }

  .feature-card .icon-tile {
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-3);
  }

  .feature-card .icon-tile img {
    width: 22px;
    height: 22px;
  }

  .feature-card h3 {
    font-size: 0.95rem;
  }

  .feature-card p {
    display: none;
  }
}

/* ---- About teaser ---- */
.about-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.about-teaser__text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-teaser__text h2 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.about-teaser__text p {
  margin-bottom: var(--space-6);
  font-size: 1.02rem;
}

.about-teaser__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.about-teaser__photo1,
.about-teaser__photo2,
.about-teaser__photo3 {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.about-teaser__photo1 > img,
.about-teaser__photo2 > img,
.about-teaser__photo3 > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.about-teaser__photo1:hover > img,
.about-teaser__photo2:hover > img,
.about-teaser__photo3:hover > img {
  transform: scale(1.06);
}

.about-teaser__photo1 {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}

.about-teaser__photo2,
.about-teaser__photo3 {
  aspect-ratio: 1 / 1;
}

/* Mobile: button top-left, a short (4:3) photo under it, and a tall
   photo on the right that spans the combined height of the button +
   short photo — matches the reference mockup exactly (its measured
   172x201.31 photo2 = button height + gap + photo1's 129px height).
   Achieved by promoting the button and both photos to be direct grid
   items of .about-teaser via display:contents on their wrappers, then
   placing them with named areas — desktop keeps the two-wrapper
   grouping untouched. */
@media (max-width: 900px) {
  .about-teaser {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text text"
      "cta photo2"
      "photo1 photo2";
    align-items: start;
    gap: var(--space-4);
  }

  .about-teaser__text-col,
  .about-teaser__media {
    display: contents;
  }

  .about-teaser__text {
    grid-area: text;
  }

  .about-teaser__cta {
    grid-area: cta;
    align-self: start;
    justify-self: start;
  }

  .about-teaser__photo1 {
    grid-area: photo1;
    aspect-ratio: 4 / 3;
  }

  .about-teaser__photo2 {
    grid-area: photo2;
    aspect-ratio: auto;
    height: 100%;
  }

  /* Mobile keeps the original 2-photo bento composition — the 3rd photo
     is a desktop-only addition (it fills what was empty grid space on
     wide screens; the mobile layout was already deliberately 2-photo). */
  .about-teaser__photo3 {
    display: none;
  }
}

/* ---- Services marquee (mobile auto-loop) ---- */
@media (max-width: 720px) {
  /* snap would fight the continuous drift — manual swipes stay free */
  .home-services .scroll-row {
    scroll-snap-type: none;
    padding-block: 14px;
  }

  .home-services .scroll-row .card {
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
  }

  .home-services .scroll-row .card.is-zoomed {
    transform: scale(1.045);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 2;
  }

  /* while one card is zoomed the rest step back a little */
  .home-services .scroll-row.has-zoom .card:not(.is-zoomed) {
    opacity: 0.6;
    transform: scale(0.985);
  }
}

/* duplicated cards exist only for the mobile loop */
@media (min-width: 721px) {
  .svc-clone {
    display: none !important;
  }
}

/* Carousel + review-form components moved to components.css (shared
   with the doctor profile pages, which also embed a review carousel). */

/* CTA banner: now uses the shared dark variant from components.css
   (same as every other page, e.g. services.html) — no page-specific
   override needed here anymore. */