/* es188 layout P1 — 2026-10-20
   Scope: hero height, service sidebar scroll, footer wrap/dup NAP, captcha row.
   Do NOT restyle header lockup / brand wordmark / menu / Elfsight.
   Header 1280 crowding (EN legal + 旗下品牌) = 另議 — intentionally skipped.
   Loaded after es188-mobile-seo.css. Cache-bust: ?v=lay1
*/

/* ========== 1. Hero — shorter so offer + CTA enter first screen ========== */
/* Home slider: was 300 / 400 / 480 → 220 / 300 / 360 */
.hero-slider > .relative {
  height: 220px !important;
}
@media (min-width: 640px) {
  .hero-slider > .relative {
    height: 300px !important;
  }
}
@media (min-width: 1024px) {
  .hero-slider > .relative {
    height: 360px !important;
  }
}

/* Service / page heroes (es_page_hero): was 300 / 360 / 400 → 200 / 260 / 300 */
main > section.relative.isolate.overflow-hidden.bg-navy-800:not(.hero-slider) > .relative {
  height: 200px !important;
}
@media (min-width: 640px) {
  main > section.relative.isolate.overflow-hidden.bg-navy-800:not(.hero-slider) > .relative {
    height: 260px !important;
  }
}
@media (min-width: 1024px) {
  main > section.relative.isolate.overflow-hidden.bg-navy-800:not(.hero-slider) > .relative {
    height: 300px !important;
  }
}

/* Tighten post-hero offer band padding (home + service) so CTA enters fold */
main > section.bg-white > .wrap.py-10 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  main > section.bg-white > .wrap.py-10 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
main > section.border-b.border-navy-100.bg-white > .wrap.py-8 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
@media (min-width: 640px) {
  main > section.border-b.border-navy-100.bg-white > .wrap.py-8 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}
@media (min-width: 1024px) {
  main > section.border-b.border-navy-100.bg-white > .wrap.py-8 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}

/* Blue service label: keep content, slightly less visual weight (NOT brand lockup) */
.hero-label {
  opacity: 0.92;
}
@media (max-width: 639px) {
  .hero-label-text {
    font-size: 0.92em;
  }
}

/* ========== 2. Service sidebar — scroll within viewport ========== */
@media (min-width: 1024px) {
  aside.lg\:sticky.lg\:top-24,
  aside.lg\:sticky {
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.25rem;
  }
}

/* ========== 4. Footer wrap / duplicate address ========== */
/* Copyright strip: allow soft wraps; hide duplicate NAP (address already in col-1) */
footer.bg-navy-800 .border-t .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0;
  row-gap: 0.35rem;
  line-height: 1.55;
}
footer.bg-navy-800 .es-ft-nap-dup,
footer.bg-navy-800 .es-ft-nap-sep {
  display: none;
}

/* ========== 5. Captcha row — usable at 390px ========== */
form div:has(> .captcha-box) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
form div:has(> .captcha-box) > .captcha-box {
  flex: 0 0 auto;
}
form div:has(> .captcha-box) > button[data-captcha-refresh] {
  flex: 0 0 auto;
  white-space: nowrap;
}
form div:has(> .captcha-box) > input[name="captcha"] {
  width: auto !important;
  max-width: 11rem;
  min-width: 7.5rem;
  flex: 1 1 8rem;
  margin-top: 0 !important;
}
@media (max-width: 390px) {
  form div:has(> .captcha-box) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "box refresh"
      "input input";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
  }
  form div:has(> .captcha-box) > .captcha-box {
    grid-area: box;
  }
  form div:has(> .captcha-box) > button[data-captcha-refresh] {
    grid-area: refresh;
    justify-self: start;
  }
  form div:has(> .captcha-box) > input[name="captcha"] {
    grid-area: input;
    width: 100% !important;
    max-width: none;
    flex: none;
  }
}