/* MAS-UI-P05-F02 — Mobile Final Fit & Typography (2026-10-23)
   Scoped to Home. Visual-only; respects P02–P05 Admin colors, column vars, and data.
   No JS, fonts, external resources, booking/SEO or desktop grid changes. */
@media (max-width: 640px) {
  /* Horizontal overflow may be invisible when a .section clips its contents.
     Constrain the actual content tracks, not just the page scrollbar. */
  body.mas-home-ui,
  body.mas-home-ui main,
  body.mas-home-ui .section,
  body.mas-home-ui .site-footer { min-width: 0; max-width: 100%; }
  body.mas-home-ui .section > .container,
  body.mas-home-ui .site-footer > .container,
  body.mas-home-ui .site-header .header-inner,
  body.mas-home-ui .mas-p04-value-strip .container {
    width: min(calc(100% - 28px), 520px);
    max-width: calc(100vw - 28px);
    min-width: 0;
    margin-inline: auto;
  }
  body.mas-home-ui .section-heading,
  body.mas-home-ui .services-grid,
  body.mas-home-ui .prices-grid,
  body.mas-home-ui .process-grid,
  body.mas-home-ui .faq-grid,
  body.mas-home-ui .footer-grid { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
  body.mas-home-ui .section-heading :is(h2,p) {
    max-width: 100%; min-width: 0; white-space: normal;
    overflow-wrap: break-word; word-break: normal;
  }

  /* Header: give the menu + locale their own space, without pushing logo offscreen. */
  body.mas-home-ui .site-header .header-inner { gap: 6px; }
  body.mas-home-ui .site-header .brand { flex: 1 1 0; max-width: none; min-width: 0; }
  body.mas-home-ui .site-header .brand-name {
    min-width: 0; max-width: 100%; overflow-wrap: anywhere;
    font-size: clamp(11.5px, 3.15vw, 13px); line-height: 1.25;
  }
  body.mas-home-ui .site-header .brand-mark { flex: 0 0 auto; }
  body.mas-home-ui .site-header .header-actions { flex: 0 0 auto; min-width: 0; margin-left: auto; }
  body.mas-home-ui .site-header .p02-locale-field,
  body.mas-home-ui .site-header .locale-select,
  body.mas-home-ui .site-header .menu-toggle { flex-shrink: 0; }
  body.mas-home-ui .site-header .main-nav { max-width: 100vw; }
  body.mas-home-ui .preview-ribbon {
    width: 100%; max-width: 100%; white-space: normal;
    font-size: 11px; line-height: 1.5; padding: 7px 12px;
    text-align: center; overflow-wrap: break-word;
  }

  /* Mobile hero & Booking: shrink-to-fit even with long localized select labels. */
  body.mas-home-ui .mas-p03-hero .hero-grid { min-width: 0; max-width: 100%; }
  body.mas-home-ui .mas-p03-hero .hero-copy { min-width: 0; max-width: 100%; }
  body.mas-home-ui .mas-p03-hero h1 { max-width: min(88%, 390px); overflow-wrap: break-word; }
  body.mas-home-ui .mas-p03-hero .hero-lead { max-width: 87%; overflow-wrap: break-word; }
  body.mas-home-ui .mas-p03-hero .booking-card.mas-p04-booking {
    box-sizing: border-box; min-width: 0; max-width: calc(100% - 26px);
  }
  body.mas-home-ui .mas-p03-hero .booking-card :is(form,.field-row,.field,input,select,.booking-status) { min-width: 0; max-width: 100%; }
  body.mas-home-ui .mas-p03-hero .field-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.mas-home-ui .mas-p04-booking .booking-heading h2 { line-height: 1.35; }
  body.mas-home-ui .mas-p04-booking .field label { font-size: 12.5px; line-height: 1.5; }
  body.mas-home-ui .mas-p04-booking .booking-status { font-size: 12px; line-height: 1.6; }

  /* Keep PC=4 / Mobile=2 preset *editable* through existing CSS variables. */
  body.mas-home-ui .mas-p05-services .services-grid,
  body.mas-home-ui .mas-p05-prices .prices-grid {
    display: grid;
    grid-template-columns: repeat(var(--mas-p05-mobile-cols, 2),minmax(0,1fr));
    gap: clamp(8px, 2.4vw, 12px);
    align-items: stretch;
    width: 100%; max-width: 100%; min-width: 0;
  }
  body.mas-home-ui .mas-p05-services .mas-p05-service-card,
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card {
    box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;
  }
  body.mas-home-ui .mas-p05-services .service-info,
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card :is(h3,.duration,.price,.price-unavailable,ul,li,.btn) {
    box-sizing: border-box; min-width: 0; max-width: 100%;
  }
  body.mas-home-ui .mas-p05-services .service-info { padding: 12px 10px 13px; }
  body.mas-home-ui .mas-p05-services .service-info h3 {
    font-size: clamp(15px, 3.85vw, 17px); line-height: 1.38;
    overflow-wrap: break-word; word-break: normal;
  }
  body.mas-home-ui .mas-p05-services .service-info p {
    font-size: 12.5px; line-height: 1.58; min-height: 0;
    overflow-wrap: break-word; word-break: normal;
  }
  body.mas-home-ui .mas-p05-services .service-info .status-text {
    font-size: 12px; line-height: 1.53; min-height: 0; overflow-wrap: break-word;
  }
  body.mas-home-ui .mas-p05-services .service-info .btn-card {
    font-size: 12px; line-height: 1.4; min-height: 40px;
    white-space: normal; overflow-wrap: break-word;
  }
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card { padding: 15px 10px 13px; }
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card h3 {
    font-size: clamp(15px, 3.8vw, 17px); line-height: 1.37;
    overflow-wrap: break-word; word-break: normal;
  }
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card .duration,
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card li { font-size: 12px; line-height: 1.58; }
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card .price-unavailable {
    font-size: 14px; line-height: 1.5; overflow-wrap: break-word;
  }
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card ul { flex: 1 1 auto; padding: 0; }
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card li { gap: 5px; overflow-wrap: break-word; }
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card .btn {
    font-size: 12px; line-height: 1.42; min-height: 42px;
    white-space: normal; overflow-wrap: break-word;
  }

  /* Area cards scroll INSIDE their own viewport, without shifting other sections. */
  body.mas-home-ui .areas-section .areas-scroll {
    box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%;
    margin: 0; padding: 1px 2px 12px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; scroll-padding-inline: 2px;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  body.mas-home-ui .areas-section .area-card { flex-shrink: 0; }
  body.mas-home-ui .areas-section .area-card :is(b,small) { overflow-wrap: break-word; }
  body.mas-home-ui .areas-section .area-card b { font-size: 12px; line-height: 1.42; }
  body.mas-home-ui .areas-section .area-card small { font-size: 11px; line-height: 1.46; }

  /* Secondary blocks: protect Vietnamese diacritics and avoid clipping FAQ. */
  body.mas-home-ui .section-heading h2 { font-size: clamp(23px, 6.2vw, 28px); line-height: 1.3; }
  body.mas-home-ui .section-heading p { font-size: 12.5px; line-height: 1.65; }
  body.mas-home-ui .section-kicker { font-size: 10.5px; letter-spacing: .1em; }
  body.mas-home-ui .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 9px; }
  body.mas-home-ui .process-item,body.mas-home-ui .process-item > div { min-width: 0; }
  body.mas-home-ui .process-item h3 { font-size: 12.5px; line-height: 1.5; overflow-wrap: break-word; }
  body.mas-home-ui .process-item p { font-size: 11.8px; line-height: 1.55; overflow-wrap: break-word; }
  body.mas-home-ui .faq-grid { grid-template-columns: minmax(0,1fr); }
  body.mas-home-ui .faq-visual { grid-template-columns: minmax(0,38%) minmax(0,1fr); max-width: 100%; }
  body.mas-home-ui .faq-visual > div { min-width: 0; }
  body.mas-home-ui .faq-visual h2 { font-size: clamp(21px, 5.8vw, 26px); line-height: 1.32; overflow-wrap: break-word; }
  body.mas-home-ui .faq-visual p { font-size: 12px; line-height: 1.55; }
  body.mas-home-ui .faq-list,body.mas-home-ui .faq-list details { min-width: 0; max-width: 100%; }
  body.mas-home-ui .faq-list summary { font-size: 12.5px; line-height: 1.55; overflow-wrap: break-word; }
  body.mas-home-ui .faq-list details p { font-size: 12px; line-height: 1.6; }
  body.mas-home-ui .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.mas-home-ui .footer-grid > div { min-width: 0; }
  body.mas-home-ui .footer-grid :is(a,p) { overflow-wrap: anywhere; }
  body.mas-home-ui .footer-grid a:not(.brand),body.mas-home-ui .footer-grid p { font-size: 12px; line-height: 1.65; }
  body.mas-home-ui .copyright { font-size: 11px; line-height: 1.55; overflow-wrap: break-word; }
  body.mas-home-ui .mobile-sticky { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  body.mas-home-ui .mobile-sticky > * { min-width: 0; }
}
@media (max-width: 360px) {
  body.mas-home-ui .mas-p03-hero .hero-benefits.mas-p04-benefits {
    grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 7px;
  }
  body.mas-home-ui .mas-p03-hero .hero-benefits.mas-p04-benefits b { font-size: 11px; }
  body.mas-home-ui .mas-p03-hero .hero-benefits.mas-p04-benefits small { font-size: 10px; }
  body.mas-home-ui .mas-p04-booking .field-row { grid-template-columns: minmax(0,1fr); }
  body.mas-home-ui .mas-p05-services .service-info { padding: 11px 8px; }
  body.mas-home-ui .mas-p05-services .service-info h3,
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card h3 { font-size: 14.5px; }
  body.mas-home-ui .mas-p05-services .service-info p,
  body.mas-home-ui .mas-p05-prices .mas-p05-price-card li { font-size: 12px; }
  body.mas-home-ui .faq-visual { grid-template-columns: minmax(0,36%) minmax(0,1fr); gap: 10px; }
}