/* ════════════════════════════════════════════════════════════════
   MOBILE ADAPTATION — СОТНИКОВ × КППИ
   Fluid typography (capped at desktop values, scales down on phones)
   + responsive gutters + touch ergonomics.
   Loaded site-wide. Desktop (≥1024px) rendering is unchanged.
   ════════════════════════════════════════════════════════════════ */

/* ─── Fluid typography ───────────────────────────────────────────
   clamp() max equals the original desktop size, so large screens
   look identical. Small screens scale down instead of overflowing. */
.text-display-hero   { font-size: clamp(2.25rem, 1rem + 6.2vw, 6rem)   !important; line-height: 1.05 !important; }
.text-display-italic { font-size: clamp(2.25rem, 1rem + 6.2vw, 6rem)   !important; line-height: 1.05 !important; }
.text-headline-lg    { font-size: clamp(1.9rem, 1.15rem + 3.6vw, 3.75rem) !important; line-height: 1.12 !important; }
.text-headline-md    { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2rem) !important; line-height: 1.2 !important; }

/* Body copy — slightly tighter on phones for comfortable measure */
@media (max-width: 639px) {
  .text-body-lg { font-size: 16px !important; line-height: 1.55 !important; }
}

/* ─── Responsive horizontal gutters ──────────────────────────────
   Desktop margin token is 80px — far too wide on phones. */
@media (max-width: 639px) {
  .px-margin-desktop { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .px-margin-desktop { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
}

/* ─── Vertical section rhythm ─────────────────────────────────────
   120px section gaps feel cavernous on a phone. */
@media (max-width: 639px) {
  .py-section-gap { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
  .pt-section-gap { padding-top: 3.75rem !important; }
  .pb-section-gap { padding-bottom: 3.75rem !important; }
  .mb-section-gap { margin-bottom: 3rem !important; }
  .gap-section-gap { gap: 2.5rem !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .py-section-gap { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .pt-section-gap { padding-top: 5rem !important; }
  .pb-section-gap { padding-bottom: 5rem !important; }
}

/* ─── Navigation polish on small screens ─────────────────────────
   Keep the logo on one line and leave room for hamburger + CTA. */
@media (max-width: 1023px) {
  nav a.text-headline-md,
  nav a.font-headline-md { font-size: 1.15rem !important; letter-spacing: -0.02em !important; }

  /* Compact the header CTA so the row never crowds */
  nav a[href*="wa.me"],
  nav a[href*="tel:"].bg-architectural-gold {
    padding: 0.6rem 1rem !important;
    font-size: 9px !important;
    gap: 0.35rem !important;
  }
  nav .py-6 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}

/* ─── Touch ergonomics ───────────────────────────────────────────
   Comfortable hit areas; iOS-friendly tap highlight removed. */
@media (max-width: 1023px) {
  a, button { -webkit-tap-highlight-color: rgba(197,160,89,0.18); }
  #mobile-menu-panel a { min-height: 48px; display: flex; align-items: center; }
}

/* ─── Hero height on short / tall phones ─────────────────────────
   Keep the full-viewport hero so bottom-pinned content stays in the
   darkened/faded zone (where the text is legible). Only relax the
   rigid 800px floor so the hero never overflows small screens.
   NB: do NOT set height:auto — it collapses the hero and pushes the
   gold eyebrow/labels onto the bright part of the image. */
@media (max-width: 639px) {
  section.h-screen.min-h-\[800px\] { min-height: 100svh !important; }
}

/* Reinforce hero text legibility on mobile.
   1) A cream veil that spans the whole content column — transparent at
      the top (photo shows through) and near-solid cream where the text
      sits (bottom), so legibility is guaranteed on ANY device height.
   2) Darken the small technical labels (gold eyebrow + muted spec
      captions). Gold-on-cream is inherently low-contrast, so on mobile
      we deepen them to a readable bronze / near-black. The large gold
      display word in the title is left vibrant (the veil carries it). */
@media (max-width: 639px) {
  section.h-screen.min-h-\[800px\] > .relative.z-10::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: linear-gradient(to top,
      rgba(245,243,238,0.60) 0%,
      rgba(245,243,238,0.40) 45%,
      rgba(245,243,238,0.14) 72%,
      rgba(245,243,238,0) 100%);
    z-index: -1;
    pointer-events: none;
  }
  section.h-screen.min-h-\[800px\] .text-label-technical.text-architectural-gold {
    color: #8f6b22 !important;
    text-shadow: none;
  }
  section.h-screen.min-h-\[800px\] .text-label-technical.text-on-surface-variant {
    color: #2b2520 !important;
  }
}

/* ─── Galleries & cards: ensure single column comfort ────────────
   Most grids already collapse; this guards arbitrary aspect ratios. */
@media (max-width: 639px) {
  .aspect-\[4\/5\] { aspect-ratio: 4 / 3 !important; }
}

/* ─── Prevent any accidental horizontal scroll ───────────────────*/
html, body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; height: auto; }