/* =========================================================
   LA PAIX MOBILE DIRECTION STABILITY — v0.2.177
   ---------------------------------------------------------
   Field comparison on iOS isolated the reverse-scroll hitch to the older
   service pages that carry several viewport-height media blocks throughout
   one document. The newer pages that stay smooth are mostly content-driven.

   iOS 26 / Chrome iOS changes the visual viewport when browser chrome is
   restored after scroll direction reverses. Even stable viewport units can
   still participate in style/compositor invalidation on those frames.

   For smartphones only, the affected pages therefore use WIDTH-driven or
   content-driven vertical geometry. Width does not change when the browser
   toolbar expands/collapses. Copy, photo crop, section order and desktop/tablet
   layout remain untouched.
========================================================= */

@media (max-width: 900px) {
  /* TOP: the film HERO is already locked to a pixel height by main.js and is
     intentionally left alone. Remove the remaining viewport-height dependency
     from the long destination cards below it. */
  body.home .entrance-card {
    min-height: clamp(580px, 160vw, 680px) !important;
  }

  /* PERSONAL — replace 58/66/68/72svh surfaces with width/content geometry. */
  .personal-page .personal-hero__media {
    min-height: 0 !important;
    height: clamp(450px, 126vw, 540px) !important;
  }
  .personal-page .personal-philosophy__image,
  .personal-page .personal-labo__image {
    min-height: 0 !important;
    height: clamp(500px, 142vw, 610px) !important;
  }
  .personal-page .personal-labo__intro {
    min-height: 0 !important;
  }
  .personal-page .personal-message {
    min-height: 560px !important;
  }

  /* BUSINESS — same legacy full-height media pattern as PERSONAL. */
  .lapaix-page-business .business-hero,
  .lapaix-page-business .business-approach,
  .lapaix-page-business .business-team {
    min-height: 0 !important;
  }
  .lapaix-page-business .business-hero__media {
    min-height: 0 !important;
    height: clamp(450px, 126vw, 540px) !important;
  }
  .lapaix-page-business .business-approach__image {
    min-height: 0 !important;
    height: clamp(500px, 142vw, 610px) !important;
  }
  .lapaix-page-business .business-team__image {
    min-height: 0 !important;
    height: auto !important;
  }
  .lapaix-page-business .business-service__image:not(.business-service__image--contain) {
    min-height: 0 !important;
    height: clamp(470px, 132vw, 570px) !important;
  }
  .lapaix-page-business .business-message {
    min-height: 560px !important;
  }
}

@media (max-width: 820px) {
  /* SINGLE SESSIONS — media height follows width instead of browser UI height. */
  .single-menu-page .single-menu-hero {
    min-height: 0 !important;
  }
  .single-menu-page .single-menu-hero__media {
    min-height: 0 !important;
    height: clamp(455px, 130vw, 550px) !important;
  }
  .single-menu-page .single-service__image {
    min-height: 0 !important;
    height: clamp(440px, 124vw, 540px) !important;
  }

  /* BRAND ME LABO — the old page has the highest concentration of svh media.
     Keep its editorial proportions but make every mobile vertical surface
     independent from address-bar expansion/collapse. */
  .labo-page .labo-hero {
    min-height: 0 !important;
  }
  .labo-page .labo-hero__image {
    min-height: 0 !important;
    height: clamp(455px, 130vw, 550px) !important;
  }
  .labo-page .labo-promise {
    min-height: 0 !important;
  }
  .labo-page .labo-promise__image {
    min-height: 300px !important;
    height: clamp(330px, 94vw, 420px) !important;
  }
  .labo-page .labo-online,
  .labo-page .labo-photo,
  .labo-page .labo-book {
    min-height: 0 !important;
  }
  .labo-page .labo-online__image {
    min-height: 0 !important;
    height: clamp(410px, 118vw, 510px) !important;
  }
  .labo-page .labo-photo__image {
    min-height: 0 !important;
    height: auto !important;
  }
  .labo-page .labo-results__item--punch {
    min-height: clamp(520px, 150vw, 640px) !important;
  }
  .labo-page .labo-book__visual {
    min-height: 0 !important;
  }
  .labo-page .labo-schedule__image {
    min-height: 0 !important;
    height: clamp(440px, 124vw, 540px) !important;
    max-height: none !important;
  }
}

/* Very small phones keep the same crop logic without reintroducing a height
   relative to browser chrome. */
@media (max-width: 560px) {
  .single-menu-page .single-service__image {
    height: clamp(420px, 122vw, 500px) !important;
  }
  .labo-page .labo-promise__image {
    height: clamp(320px, 92vw, 390px) !important;
  }
  .labo-page .labo-online__image {
    height: clamp(390px, 116vw, 480px) !important;
  }
}


/* v0.2.184 — wrapper spans must inherit the original legend typography on all viewports. */
.contact-page .lp-contact-form__field legend .contact-question__line {
  margin-left: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* =========================================================
   v0.2.184 — iPhone phrase-safe text + FINAL PORTRAIT contrast
   ---------------------------------------------------------
   This file is the last mobile stylesheet in the dependency chain, so these
   rules intentionally win over older generic wrapping/color systems.
========================================================= */
@supports (word-break: auto-phrase) {
  @media (max-width: 900px) {
    .labo-page,
    .contact-page {
      word-break: auto-phrase !important;
      overflow-wrap: normal !important;
    }
  }
}

@media (max-width: 900px) {
  /* JS inserts these spans once at boot on LABO / CONTACT. Breaks are allowed
     only between phrase spans, never inside the protected phrase itself. */
  .labo-page .ja-phrase,
  .contact-page .ja-phrase,
  .labo-page .labo-schedule__phrase,
  .contact-page .contact-question__line {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .labo-page wbr,
  .contact-page wbr {
    display: inline;
  }

  /* Authored question lines are semantic mobile blocks; they remain inline on
     desktop because this rule only exists in the smartphone layer. */
  .contact-page .lp-contact-form__field legend .contact-question__line {
    display: block;
    max-width: 100%;
    margin-left: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
  }
  .contact-page .lp-contact-form__field legend .contact-question__required {
    margin-left: 8px !important;
    color: #725f4d !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: .08em !important;
  }

  /* Schedule values stay editable. The theme only protects each side of the
     existing ｜ separator as a phrase unit. */
  .labo-page .labo-schedule__separator {
    white-space: nowrap;
  }

  /* FINAL PORTRAIT sits on a deep background. The authoritative mobile reading
     system previously forced its body copy to --color-soft-ink (dark), reducing
     contrast. Restore the intended light editorial palette. */
  .labo-page .labo-photo__copy,
  .labo-page .labo-photo__copy > div,
  .labo-page .labo-photo__copy > div p {
    color: rgba(255,255,255,.84) !important;
  }
  .labo-page .labo-photo__copy .section-title {
    color: #fff !important;
  }
  .labo-page .labo-photo__copy .section-label {
    color: #d4baa0 !important;
  }
}