/* MAS-UI-P03-F01 | Mobile legibility and width guards | Home only
   Loads after P03. Does not alter images, design colors, booking or SEO. */
@media (max-width: 640px) {
  .mas-home-ui .preview-ribbon {
    display:block; width:100%; max-width:100%; padding:7px 14px;
    white-space:normal; overflow-wrap:break-word;
    font-size:10.5px; line-height:1.45; text-align:center;
  }
  .mas-home-ui .site-header .header-inner,
  .mas-home-ui .site-header .brand,
  .mas-home-ui .site-header .header-actions {min-width:0;}
  .mas-home-ui .site-header .brand-name {overflow-wrap:anywhere;}

  /* The booking 2-column selects must be allowed to shrink within the card. */
  .mas-home-ui .mas-p03-hero .booking-card {box-sizing:border-box; max-width:calc(100% - 26px); min-width:0;}
  .mas-home-ui .mas-p03-hero .booking-card :is(form,.field-row,.field) {min-width:0; max-width:100%;}
  .mas-home-ui .mas-p03-hero .field-row {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .mas-home-ui .mas-p03-hero .field :is(input,select) {display:block;min-width:0;max-width:100%;width:100%;box-sizing:border-box;}
  .mas-home-ui .mas-p03-hero .field label {overflow-wrap:break-word;}
  .mas-home-ui .mas-p03-hero .booking-heading :is(h2,p) {overflow-wrap:break-word;}
  .mas-home-ui .mas-p03-hero .booking-status {overflow-wrap:break-word;}
  .mas-home-ui .mas-p03-hero h1 {overflow-wrap:normal;word-break:normal;}
  .mas-home-ui .mas-p03-hero .hero-benefits {grid-template-columns:repeat(auto-fit,minmax(min(72px,100%),1fr));}
  .mas-home-ui .mas-p03-hero .hero-benefits>div {min-width:0;}

  /* Long Vietnamese titles need to wrap instead of pushing the viewport sideways. */
  .mas-home-ui .section-heading {max-width:100%;padding-inline:3px;min-width:0;}
  .mas-home-ui .section-heading h2 {max-width:100%;font-size:clamp(23px,6.2vw,28px);line-height:1.26;letter-spacing:0;overflow-wrap:break-word;text-wrap:balance;white-space:normal;}
  .mas-home-ui .section-heading p {max-width:100%;font-size:12px;line-height:1.6;overflow-wrap:break-word;}
  .mas-home-ui :is(.services-grid,.prices-grid,.process-grid) {grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%;}
  .mas-home-ui :is(.service-card,.service-info,.price-card,.process-item,.faq-grid,.faq-list,.faq-visual) {min-width:0;max-width:100%;}
  .mas-home-ui .service-info :is(h3,p,.status-text),
  .mas-home-ui .price-card :is(h3,li,.duration,.price-unavailable),
  .mas-home-ui .process-item :is(h3,p) {overflow-wrap:break-word;}
  .mas-home-ui .service-info p {font-size:12px;line-height:1.55;}
  .mas-home-ui .price-card li {font-size:12px;line-height:1.5;}
  .mas-home-ui .price-card .btn {width:100%;max-width:100%;min-width:0;white-space:normal;text-align:center;line-height:1.3;padding-inline:5px;}

  /* Area cards are intentionally swipeable: clip inside their own scroll viewport. */
  .mas-home-ui .areas-scroll {max-width:100%;min-width:0;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
  .mas-home-ui .areas-scroll .area-card {min-width:0;flex-shrink:0;}
  .mas-home-ui .faq-grid {grid-template-columns:minmax(0,1fr);}
  .mas-home-ui .faq-visual {grid-template-columns:minmax(0,39%) minmax(0,1fr);}
  .mas-home-ui .faq-list summary {overflow-wrap:break-word;}
  .mas-home-ui .footer-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .mas-home-ui .footer-grid > div {min-width:0;}
  .mas-home-ui .footer-grid a {overflow-wrap:anywhere;}
  .mas-home-ui .mobile-sticky {width:100%;max-width:100%;box-sizing:border-box;}
  .mas-home-ui .mobile-sticky > * {min-width:0;}
}
@media (max-width:360px) {
  .mas-home-ui .mas-p03-hero .booking-card {width:calc(100% - 20px);max-width:calc(100% - 20px);padding-inline:12px;}
  .mas-home-ui .mas-p03-hero .field-row {gap:7px;}
  .mas-home-ui .section-heading h2 {font-size:23px;}
  .mas-home-ui .service-info {padding-inline:6px;}
  .mas-home-ui .price-card {padding-inline:8px;}
}