/*
 * MAS-UI-P01 | Typography & Global Design Foundation
 * Applies ONLY to <body class="mas-home-ui"> in resources/views/mas/home.blade.php.
 * Additive patch: original mas-p02/styles.css and business/booking data stay intact.
 * No @import, remote fonts, third-party dependencies, or runtime scripts.
 */

body.mas-home-ui {
  /* Prefer installed/local families; use predictable Vietnamese-capable fallbacks. */
  --sans: 'Be Vietnam Pro', 'Segoe UI', 'Noto Sans', Tahoma, Arial, sans-serif;
  --serif: 'Lora', 'Noto Serif', Georgia, 'Times New Roman', serif;
  --ui-container-max: 1232px;
  --ui-gutter: 24px;
  --ui-copy: #4f6056;
  --ui-soft-copy: #647269;
  --ui-focus: #bd9145;
  --ui-space-xs: 6px;
  --ui-space-sm: 12px;
  --ui-space-md: 20px;
  --ui-space-lg: 32px;
  --ui-space-xl: 46px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Common layout rules: intentional, scoped and non-destructive. */
.mas-home-ui .container {
  width: min(calc(100% - var(--ui-gutter) - var(--ui-gutter)), var(--ui-container-max));
  margin-inline: auto;
}
.mas-home-ui :is(h1, h2, h3) {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.018em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.mas-home-ui :is(p, li, small) { overflow-wrap: break-word; }
.mas-home-ui p { line-height: 1.6; }
.mas-home-ui .section {
  padding-block: clamp(30px, 3.4vw, 46px);
}
.mas-home-ui :is(.prices-section, .areas-section, .process-section, .faq-section) {
  padding-block: clamp(27px, 3vw, 39px);
}
.mas-home-ui .section-heading {
  margin-bottom: clamp(18px, 2vw, 25px);
}
.mas-home-ui .section-heading h2 {
  font-size: clamp(27px, 2.65vw, 37px);
  line-height: 1.19;
  margin: 5px 0 7px;
}
.mas-home-ui .section-heading p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ui-soft-copy);
  max-width: 720px;
  margin-inline: auto;
}
.mas-home-ui .section-kicker {
  font-size: 11px;
  letter-spacing: 0.13em;
  line-height: 1.5;
}

/* Shared type scale. Detailed visual restructuring belongs to P02–P07. */
.mas-home-ui .brand-name,
.mas-home-ui .brand-name strong { font-family: var(--serif); }
.mas-home-ui .hero h1 {
  font-size: clamp(35px, 3.55vw, 53px);
  line-height: 1.09;
  letter-spacing: -0.026em;
}
.mas-home-ui .eyebrow { font-size: 11px; line-height: 1.5; }
.mas-home-ui .hero-lead {
  font-size: 14px;
  line-height: 1.67;
  color: var(--ui-copy);
}
.mas-home-ui .hero-benefits b,
.mas-home-ui .hero-benefits small { line-height: 1.35; }
.mas-home-ui .booking-heading h2 { line-height: 1.2; }
.mas-home-ui .booking-heading p { font-size: 12px; line-height: 1.55; }
.mas-home-ui .value-grid b { font-size: 12px; line-height: 1.35; }
.mas-home-ui .value-grid small { font-size: 11px; line-height: 1.45; }
.mas-home-ui .service-info h3 { font-size: 20px; line-height: 1.22; }
.mas-home-ui .service-info p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ui-soft-copy);
}
.mas-home-ui .price-card h3 { font-size: 19px; line-height: 1.2; }
.mas-home-ui .duration { font-size: 12px; line-height: 1.4; }
.mas-home-ui .price-card li { font-size: 12px; line-height: 1.55; }
.mas-home-ui .price-card .price-unavailable { font-size: 15px; line-height: 1.4; }
.mas-home-ui .area-card b { font-size: 12px; }
.mas-home-ui .area-card small { font-size: 11px; line-height: 1.4; }
.mas-home-ui .review-author b { font-size: 13px; }
.mas-home-ui .review-card p { font-size: 13px; line-height: 1.6; }
.mas-home-ui .process-item h3 { font-family: var(--sans); font-size: 13px; line-height: 1.4; }
.mas-home-ui .process-item p { font-size: 11px; line-height: 1.5; }
.mas-home-ui .faq-visual p { font-size: 12px; }
.mas-home-ui .faq-list summary { font-size: 13px; line-height: 1.5; }
.mas-home-ui .faq-list details p { font-size: 13px; line-height: 1.65; }
.mas-home-ui .bottom-cta p { font-size: 12px; line-height: 1.55; }
.mas-home-ui .footer-grid a:not(.brand),
.mas-home-ui .footer-grid p { font-size: 12px; line-height: 1.6; }
.mas-home-ui .copyright { font-size: 11px; line-height: 1.5; }
.mas-home-ui .empty-cards { font-size: 14px; line-height: 1.55; }
.mas-home-ui .service-card .status-text { font-size: 12px; line-height: 1.4; }

/* Labels, inputs and buttons: consistent reading / touch targets. */
.mas-home-ui :is(button, input, select, textarea) { font-family: var(--sans); }
.mas-home-ui .btn {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  min-height: 40px;
}
.mas-home-ui .btn-card { font-size: 12px; min-height: 35px; }
.mas-home-ui .field label { font-size: 12px; line-height: 1.4; }
.mas-home-ui .field :is(input, select) {
  font-size: 13px;
  line-height: 1.35;
  min-width: 0;
  min-height: 39px;
}
.mas-home-ui .field-row > .field { min-width: 0; }
.mas-home-ui .booking-status,
.mas-home-ui .booking-form-note { font-size: 12px; line-height: 1.55; }
.mas-home-ui .booking-disclaimer { font-size: 11px; line-height: 1.5; }
.mas-home-ui .booking-card .btn[disabled] { cursor: not-allowed; }
.mas-home-ui :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}

/* Tablets: prevent wide desktop gutters from compressing sections. */
@media (max-width: 1180px) {
  body.mas-home-ui { --ui-container-max: 1120px; --ui-gutter: 16px; }
  .mas-home-ui .hero-lead { font-size: 13px; }
}

@media (max-width: 950px) {
  .mas-home-ui .hero h1 { font-size: clamp(36px, 4.8vw, 46px); }
  .mas-home-ui .section-heading h2 { font-size: clamp(26px, 3.3vw, 34px); }
}

/* Mobile-first legibility. Keep existing 2-column cards and functional layout. */
@media (max-width: 640px) {
  body.mas-home-ui {
    --ui-container-max: 520px;
    --ui-gutter: 14px;
    font-size: 14px;
    line-height: 1.5;
  }
  .mas-home-ui .section { padding-block: 29px 25px; }
  .mas-home-ui :is(.prices-section, .areas-section, .process-section, .faq-section) {
    padding-block: 27px 24px;
  }
  .mas-home-ui .section-heading { margin-bottom: 17px; }
  .mas-home-ui .section-heading h2 { font-size: clamp(24px, 6.3vw, 28px); line-height: 1.18; }
  .mas-home-ui .section-heading p { font-size: 12px; line-height: 1.5; }
  .mas-home-ui .section-kicker { font-size: 10px; letter-spacing: 0.1em; }
  .mas-home-ui .eyebrow { font-size: 10px; line-height: 1.4; }
  .mas-home-ui .hero h1 { font-size: clamp(29px, 7.7vw, 40px); line-height: 1.08; }
  .mas-home-ui .hero-lead { font-size: 12px; line-height: 1.5; }
  .mas-home-ui .hero-benefits b { font-size: 10px; line-height: 1.35; }
  .mas-home-ui .hero-benefits small { font-size: 9px; line-height: 1.35; }
  .mas-home-ui .booking-heading h2 { font-size: 21px; }
  .mas-home-ui .booking-heading p { font-size: 12px; line-height: 1.45; }
  .mas-home-ui .field label { font-size: 12px; }
  .mas-home-ui .field :is(input, select) { font-size: 16px; min-height: 42px; }
  .mas-home-ui .booking-card .btn { font-size: 12px; min-height: 40px; }
  .mas-home-ui .booking-status,
  .mas-home-ui .booking-form-note { font-size: 11px; }
  .mas-home-ui .service-info h3 { font-size: 16px; line-height: 1.24; }
  .mas-home-ui .service-info p { font-size: 11px; line-height: 1.5; }
  .mas-home-ui .btn-card { font-size: 11px; min-height: 32px; }
  .mas-home-ui .price-card h3 { font-size: 16px; }
  .mas-home-ui .duration { font-size: 11px; }
  .mas-home-ui .price-card li { font-size: 11px; line-height: 1.45; }
  .mas-home-ui .price-card .btn { font-size: 11px; line-height: 1.35; white-space: normal; min-height: 37px; }
  .mas-home-ui .price-card .price-unavailable { font-size: 13px; }
  .mas-home-ui .area-card b { font-size: 11px; }
  .mas-home-ui .area-card small { font-size: 10px; }
  .mas-home-ui .review-card p { font-size: 12px; }
  .mas-home-ui .process-item h3 { font-size: 12px; }
  .mas-home-ui .process-item p { font-size: 10px; }
  .mas-home-ui .faq-visual h2 { font-size: 24px; }
  .mas-home-ui .faq-visual p { font-size: 11px; }
  .mas-home-ui .faq-list summary { font-size: 12px; }
  .mas-home-ui .faq-list details p { font-size: 12px; }
  .mas-home-ui .footer-grid a:not(.brand),
  .mas-home-ui .footer-grid p { font-size: 11px; }
  .mas-home-ui .copyright { font-size: 10px; }
  .mas-home-ui .mobile-call b { font-size: 12px; }
  .mas-home-ui .mobile-call small { font-size: 10px; }
  .mas-home-ui .mobile-book { font-size: 12px; }
  .mas-home-ui .preview-ribbon { font-size: 11px; line-height: 1.5; }
}

@media (max-width: 380px) {
  .mas-home-ui .hero h1 { font-size: 29px; }
  .mas-home-ui .hero-lead { font-size: 11.5px; }
  .mas-home-ui .service-info h3,
  .mas-home-ui .price-card h3 { font-size: 15px; }
  .mas-home-ui .service-info p { font-size: 11px; }
  .mas-home-ui .price-card .btn { font-size: 10.5px; padding-inline: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .mas-home-ui *, .mas-home-ui *::before, .mas-home-ui *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}