/*
  Keep the original page-specific mobile artwork from styles.min.css.
  That artwork is attached to body::before and intentionally continues
  behind the full page; this file contains only non-visual safeguards.
*/
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

main,
.site-footer,
.info-hero,
.info-page-grid,
.legal-page-grid {
  min-width: 0;
}

a[href^="mailto:"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
  The artwork is a sharp, continuous canvas.  Do not put a blur or a
  translucent page-wide wash above it: cards and intentional content panels
  provide their own reading surface without softening the background.
*/

main article,
main aside {
  min-width: 0;
  max-width: 100%;
}

/* The original stylesheet contains a number of frosted-glass components.
   Keep their panels and spacing, but make every surface optically clear so
   the artwork behind the page is never softened at any breakpoint. */
body::before,
body::after,
main,
main::before,
main::after,
main *,
.site-footer,
.site-footer *,
.site-header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The two home choices have different title/copy lengths.  Give their text
   lanes matching minimum heights and let the copy lane absorb the remaining
   card height, so both Explore buttons always share one baseline. */
body.home-theme .choice-grid {
  align-items: stretch !important;
}

body.home-theme .choice-card {
  height: 100%;
  grid-template-rows: auto minmax(3.85rem, auto) 1.35rem minmax(7rem, 1fr) auto !important;
}

/* Detailed massage pages need only one gentle wash over the artwork, not
   separate panels or blur under each section. */
@media (min-width: 761px) {
  body.massage-theme:not(.massage-services-theme)::before,
  body.beauty-theme::before {
    background: rgba(247, 241, 232, 0.28) !important;
    -webkit-backdrop-filter: blur(5px) saturate(42%) contrast(88%) brightness(109%) sepia(10%) !important;
    backdrop-filter: blur(5px) saturate(42%) contrast(88%) brightness(109%) sepia(10%) !important;
  }
}

@media (max-width: 760px) {
  body.massage-theme:not(.massage-services-theme)::before,
  body.beauty-theme::before {
    background:
      linear-gradient(rgba(247, 241, 232, 0.28), rgba(247, 241, 232, 0.28)),
      var(--mobile-bg-image) var(--mobile-bg-position) / var(--mobile-bg-size, 100vw auto) no-repeat,
      #f7f1e8 !important;
    background-blend-mode: normal !important;
    filter: blur(2px) saturate(42%) contrast(88%) brightness(109%) sepia(10%);
    transform: scale(1.02);
  }

  /* Contact has a deliberately wide, illustrated reception scene. Cover the
     viewport with its focused crop on phones so it remains a full-page canvas
     instead of ending as a short image at the top. */
  body.contact-theme {
    --mobile-bg-size: cover;
    --mobile-bg-position: 68% center;
  }

  body.home-theme .choice-card {
    grid-template-rows: auto minmax(2.65rem, auto) 1fr auto !important;
  }

  /* Generic overview pages, including Services & Prices, need a portrait
     mobile composition just like the home page. The treatment pages retain
     their more-specific per-service artwork variables. */
  body:not([class*="-theme"]) {
    --mobile-bg-image: url("/home-mobile-background.webp");
    --mobile-bg-position: center top;
  }

  body.services-theme,
  body:has(.services-overview-hero) {
    --mobile-bg-image: url("/home-mobile-background.webp") !important;
    --mobile-bg-position: center top !important;
  }

  /*
    Match the home-page treatment on every mobile page: use each page's own
    artwork and focal point, rather than the final global rule's hard-coded
    centre crop. The asset keeps its natural ratio and remains one continuous
    background layer behind the page content.
  */
  body::before,
  body.home-theme::before {
    background:
      var(--mobile-bg-image) var(--mobile-bg-position) / var(--mobile-bg-size, 100vw auto) no-repeat,
      #f7f1e8 !important;
    background-blend-mode: normal !important;
  }

  /* The generic Services & Prices page has no themed body class. Give it the
     same portrait canvas as the home page instead of the short landscape art. */
  body:not([class*="-theme"])::before,
  body.services-theme::before,
  body:has(.services-overview-hero)::before {
    background:
      url("/home-mobile-background.webp") center top / 100vw auto no-repeat,
      #f7f1e8 !important;
    background-blend-mode: normal !important;
  }
}

@media (max-width: 359px) {
  main article,
  main aside {
    width: min(100%, calc(100vw - 1rem)) !important;
  }
}