/* MKA Summerset — mobile-first image + layout polish
   Fix stretched images, overflow, touch-friendly UI for phone visitors */

/* ---- Base media: never stretch ---- */
img,
video {
  max-width: 100%;
  height: auto;
}

img {
  object-fit: cover;
  object-position: center;
  background: #0a0a0a;
}

/* Icons / logos keep natural size */
.lux-nav-mark,
.crest img,
.brand-logo,
img[src*="grok-mark"],
img[src*="favicon"],
img[src*="wechat"] {
  object-fit: contain;
  background: transparent;
}

/* ---- Kill horizontal scroll from 100vw ---- */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* ---- Hero photo / video ---- */
.hero-img {
  aspect-ratio: 16 / 10;
  max-height: min(62vh, 560px);
  background: #0a0a0a;
}

.hero-img img,
.hero-img video {
  width: 100% !important;
  height: 100% !important;
  max-height: none;
  aspect-ratio: unset;
  object-fit: cover !important;
  object-position: center 45%;
  display: block;
}

/* ---- Room thumbs ---- */
.room-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
  object-position: center;
  border-radius: 12px;
  display: block;
  background: #111;
}

/* ---- Gallery ---- */
.gallery a {
  display: block;
  overflow: hidden;
  line-height: 0;
}

.gallery img {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
  object-position: center;
  display: block;
}

.gallery .big img {
  aspect-ratio: 16 / 9;
}

/* ---- Showcase cards (pool / rooms with bg image) ---- */
.showcase:not(.showcase--fullvid) {
  min-height: 0;
  aspect-ratio: 4 / 5;
  max-height: 520px;
}

.showcase:not(.showcase--fullvid) img,
.showcase:not(.showcase--fullvid) video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover !important;
  object-position: center;
}

/* Full-width video blocks: contain without ugly stretch */
.showcase.showcase--fullvid .showcase-media {
  aspect-ratio: 16 / 9;
  max-height: min(56vh, 480px);
  background: #0a0a0f;
}

.showcase.showcase--fullvid video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}

.showcase.showcase--pool .showcase-media {
  aspect-ratio: 3 / 2;
  max-height: min(52vh, 420px);
}

.cinema-showcase video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
  display: block;
}

.studio-vid video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
}

.studio-collage img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

.promo img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  max-height: 180px;
  object-fit: cover;
}

/* ---- Phone layout ---- */
@media (max-width: 768px) {
  html {
    scroll-padding-top: 56px;
  }

  .wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 16px 96px !important;
  }

  /* 100vw full-bleed → safe 100% on mobile */
  .hero-stage {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .hero-stage .hero-frame {
    max-width: 100%;
    border-radius: 16px;
  }

  .showcase-wrap .showcase,
  .cinema-showcase,
  .showcase-wrap .showcase.showcase--fullvid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero {
    padding: 76px 0 20px;
  }

  .hero-img {
    aspect-ratio: 4 / 3;
    max-height: min(48vh, 360px);
  }

  .hero-img img,
  .hero-img video {
    object-position: center 40%;
  }

  .hero-reflection {
    display: none; /* reflection looks broken on small screens */
  }

  .brand {
    font-size: clamp(36px, 11vw, 52px);
  }

  .tagline {
    font-size: clamp(16px, 4.4vw, 20px);
    padding: 0 4px;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 22px;
  }

  .hero-cta a {
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 14px;
  }

  .showcase:not(.showcase--fullvid) {
    aspect-ratio: 3 / 4;
    max-height: 440px;
    min-height: 300px;
    border-radius: 16px;
  }

  .showcase .body {
    padding: 20px 16px 22px;
  }

  .showcase h3 {
    font-size: clamp(24px, 7vw, 32px);
  }

  .showcase p {
    font-size: 14px;
  }

  .showcase.showcase--fullvid .body,
  .cinema-showcase .cinema-body {
    padding: 18px 16px 22px;
  }

  .gallery {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .gallery .big {
    grid-column: auto;
  }

  .gallery img {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }

  .gallery .big img {
    aspect-ratio: 16 / 10;
  }

  .features {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .feat {
    padding: 16px 10px;
  }

  .feat .ft {
    font-size: 13px;
  }

  .feat .fd {
    font-size: 11.5px;
  }

  .price-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .price-card {
    padding: 18px 16px;
  }

  .partners {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .contact {
    padding: 14px;
    gap: 12px;
  }

  .contact .ic {
    width: 44px;
    height: 44px;
  }

  .review-card .quote {
    font-size: 15px;
  }

  /* Sticky WA / Call — fixed bottom-right, full circles visible */
  .sticky-bar {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .sticky,
  .float-wa {
    position: fixed !important;
    left: auto !important;
    right: max(20px, calc(12px + env(safe-area-inset-right, 0px))) !important;
    bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
  }

  .sticky-wechat,
  .sticky-call {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  .sticky-wechat span,
  .sticky-call span {
    display: none;
  }

  section {
    margin-top: 40px;
  }

  .sec-title {
    font-size: clamp(26px, 7vw, 34px);
  }

  .direct {
    padding: 24px 16px;
  }

  .direct h3 {
    font-size: 22px;
  }

  footer {
    margin-top: 48px;
    padding-top: 28px;
  }
}

/* ---- Small phones ---- */
@media (max-width: 420px) {
  .wrap {
    padding: 0 12px 100px !important;
  }

  .hero-img {
    aspect-ratio: 1 / 1;
    max-height: min(42vh, 320px);
  }

  .features {
    gap: 8px;
  }

  .feat .ico {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
  }

  .lux-nav-cta {
    padding: 8px 10px !important;
    font-size: 9px !important;
  }
}

/* ---- Tablet / small laptop: balanced ---- */
@media (min-width: 641px) and (max-width: 900px) {
  .hero-img {
    max-height: min(52vh, 420px);
  }

  .showcase:not(.showcase--fullvid) {
    aspect-ratio: 16 / 10;
    max-height: 420px;
  }
}

/* ---- Desktop: keep quality, no stretch ---- */
@media (min-width: 901px) {
  .hero-img {
    max-height: min(58vh, 520px);
  }

  .showcase:not(.showcase--fullvid) {
    aspect-ratio: 16 / 9;
    max-height: 480px;
    min-height: 360px;
  }

  .showcase:not(.showcase--fullvid) img,
  .showcase:not(.showcase--fullvid) video {
    object-fit: cover !important;
  }
}

/* Prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .showcase img,
  .showcase video,
  .hero-img img,
  .hero-img video {
    transition: none !important;
  }
}


/* ===== Task 4 — PageSpeed / mobile video ===== */
@media (max-width: 899px) {
  /* Hero video stays in DOM for optional tap-to-play but no paint cost if opacity 0 without src load */
  #heroVid {
    /* Keep visible poster underneath via parent picture; hide video surface until user plays */
    opacity: 0 !important;
    pointer-events: none;
  }
  video[data-mka-mobile-poster="1"]:not([controls]) {
    /* non-control loop films: show first frame/poster only */
  }
  video[preload="none"] {
    background-size: cover;
    background-position: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  video {
    display: none !important;
  }
}
img[loading="lazy"] {
  content-visibility: auto;
}