/* ==========================================================================
   Living 360 — mobile typography & lead-gen UX patch
   Loaded after refresh.css from includes/header.php.
   Desktop (> 820px) is untouched except the blog-grid and descender fixes,
   which are bugs at every width.
   ========================================================================== */

/* ---------- 1. Bugs that apply at every width ---------- */

/* Blog: the article grid column was wider than the screen (≈337px column on a
   320px content area), so the right edge of every paragraph was cut off. */
.article-layout > * { min-width: 0; }
@media (max-width: 820px) { .article-layout { grid-template-columns: minmax(0, 1fr); } }
.prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose img, .prose iframe, .prose video { max-width: 100%; height: auto; }

/* Split-line headline reveal uses overflow:hidden with line-height < 1, which
   chops descenders (g, y, p) — e.g. "Everv room", "bv room". Give them room. */
.is-split .sl { padding-bottom: .2em; margin-bottom: -.2em; }

/* ---------- 2. Mobile type scale (≤ 820px) ---------- */
@media (max-width: 820px) {
  :root {
    --fs-mega: 2.5rem;              /* was 48px  */
    --fs-xl:   2.125rem;            /* was 40px — H1s */
    --fs-l:    1.75rem;             /* was 34px — section H2s */
    --fs-m:    1.375rem;            /* was 26px */
    --fs-s:    1.125rem;
    --fs-body: 1rem;                /* 16px body */
    --fs-lede: 1.0625rem;           /* 17px intro text */
  }

  /* Headlines: readable, fewer lines, no clipped descenders */
  h1, h2, .t-mega, .t-xl, .t-l, .t-m,
  .hero-cine__title, .page-hero__title, .footer-cta__title, .expand__text {
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .hero-cine__title       { font-size: clamp(2.125rem, 9.4vw, 2.5rem); }   /* home hero: 50px → 34–38px */
  .page-hero__title,
  .article-head h1        { font-size: clamp(1.875rem, 8.4vw, 2.125rem); }  /* service/area/blog H1: 40px → 30–34px */
  .footer-cta__title,
  .expand__text           { font-size: 1.875rem; }                          /* 40px → 30px */
  .statement__text        { font-size: 1.3125rem; line-height: 1.38; }      /* 22–28px → 21px */
  .quote-big blockquote,
  .quiz-result h3         { font-size: 1.5rem; line-height: 1.3; }
  .rooms__name,
  .motion-layout .rooms__name { font-size: 1.375rem; }
  .motion-layout .rooms__head h2 { font-size: 1.75rem; }
  .work-card__over h3     { font-size: 1.25rem; line-height: 1.25; }
  .process__card h3       { font-size: 1.1875rem; }
  .index__title           { font-size: 1.25rem; }
  .svc-cta-band__title    { font-size: 1.375rem; line-height: 1.25; }
  .tour-pop__title        { font-size: 1.5rem; line-height: 1.15; }

  /* Oversized decorative numbers / marquees */
  .mega-row__inner        { font-size: 2rem; }                              /* 48px → 32px */
  .stat__num,
  .process__num,
  .estimate-range         { font-size: 2.25rem; line-height: 1.05; }        /* 45–48px → 36px */
  .big-number             { font-size: 4.5rem; }                            /* 128px → 72px */
  .footer-word            { font-size: 3.25rem; line-height: .95; }         /* 72px → 52px */
  .site-menu__list a      { font-size: 1.875rem; line-height: 1.15; }      /* menu: 38px → 30px */
  .search-field input     { font-size: 1.375rem; }                          /* 32px → 22px */

  /* Article body: comfortable reading, clear hierarchy */
  .prose        { font-size: 1.0625rem; line-height: 1.7; }
  .prose p, .prose li { font-size: inherit; line-height: inherit; }
  .prose h2     { font-size: 1.5rem;  line-height: 1.2; margin-top: 2.2em; }
  .prose h3     { font-size: 1.25rem; line-height: 1.25; }
  .lede         { font-size: 1.0625rem; line-height: 1.55; }

  /* ---------- 3. Text that was too small (< 12.5px) ---------- */
  .eyebrow, .chapter-mark__label, .site-menu__side h3,
  .statement__side-title, .svc-topics__label, .tour-pop__eyebrow {
    font-size: .8125rem;              /* 11.5px → 13px */
    letter-spacing: .1em;
    line-height: 1.3;
  }
  .breadcrumbs, .form-note, .tour-pop__note,
  .work-card__meta, .process__time, .rooms__price, .pill {
    font-size: .8125rem;              /* 12.5px → 13px */
  }
  .action-bar__item { font-size: .75rem; }                 /* 11.2px → 12px */
  .svc-proof li     { font-size: .9375rem; line-height: 1.35; }

  /* ---------- 4. Tap targets (Google min. 44–48px) ---------- */
  .arrow-link, .site-menu__search {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .site-footer li a, .footer-bottom a {
    display: inline-block; padding-block: .45rem;
  }
  .menu-btn, .tour-pop__close { min-height: 44px; min-width: 44px; }
  .btn { min-height: 48px; }

  /* ---------- 5. Layout fixes ---------- */
  /* Footer legal row had no side gutter (text touched the screen edge) */
  .footer-bottom { padding-inline: 20px; row-gap: .25rem; flex-wrap: wrap; }
  /* Horizontal "Recent work" rail snapped its intro flush to x=0 */
  .works__track { scroll-padding-inline: 20px; }

  /* Cookie banner covered ~136px of a 780px screen; keep it compact */
  .cookie-banner { font-size: .8125rem; line-height: 1.45; padding: .85rem 1rem; }
  .cookie-banner button { min-height: 40px; }

  /* Hero proof list: tighter so the quote form comes up sooner */
  .svc-proof { gap: .5rem; }
}

/* Very small Android phones (360px and below) */
@media (max-width: 380px) {
  :root { --fs-xl: 1.875rem; --fs-l: 1.625rem; }
  .hero-cine__title { font-size: 2rem; }
  .page-hero__title, .article-head h1 { font-size: 1.75rem; }
}

/* Respect users who turn animations off (also faster on low-end phones) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}