/* ============================================================================
 * auraria_mobile_p0.css — P0 mobile fixes from 2026-05-01 audit
 * Created: 2026-04-30
 * Scope: Denver Living (website_id=16) — Auraria Lofts page only
 *
 * Fix 1 — Stage 4 OPEN-NOW pill grid: collapse from 6 -> 2/3 cols on small screens
 * Fix 3 — WCAG: gold #C9A96E on cream/white backgrounds bumped to #766030
 *         (small text) or #A8862E (large text)
 * Fix 4 — Tap-target failures: hero "Schedule a tour" link, footer icons
 * Fix 5 — Beacon overlap: 120px bottom padding on every .aur-scene + mosaic
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * FIX 1 — STAGE 4 OPEN-NOW PILLS — responsive grid
 * --------------------------------------------------------------------------- */
.aur-opennow-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.aur-opennow-grid > div {
  white-space: normal !important;
  min-width: 0 !important;
}
.aur-opennow-grid > div span:last-child {
  white-space: normal !important;
}

@media (min-width: 576px) and (max-width: 991px) {
  .aur-opennow-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 992px) {
  .aur-opennow-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
  }
}

/* ---------------------------------------------------------------------------
 * FIX 3 — WCAG GOLD-ON-CREAM CONTRAST
 * Bumps #C9A96E (1.99-2.24:1) on cream/white surfaces to #766030 (full pass).
 * Headlines + <em> spans (large text) bumped to #A8862E (>=4.5:1 on cream).
 * --------------------------------------------------------------------------- */
.o_cc4 .aur-eyebrow,
.o_cc5 .aur-eyebrow,
section[style*="background:#F5F1EA"] [style*="color:#C9A96E"]:not(h1):not(h2):not(h3):not(em):not(.aur-headline-em),
section[style*="background:#F8F8F8"] [style*="color:#C9A96E"]:not(h1):not(h2):not(h3):not(em):not(.aur-headline-em),
section[style*="background:#FFFFFF"] [style*="color:#C9A96E"]:not(h1):not(h2):not(h3):not(em):not(.aur-headline-em),
section[style*="background:#F5F1EA"] [style*="color: #C9A96E"]:not(h1):not(h2):not(h3):not(em):not(.aur-headline-em),
section[style*="background:#F8F8F8"] [style*="color: #C9A96E"]:not(h1):not(h2):not(h3):not(em):not(.aur-headline-em) {
  color: #766030 !important;
}

/* Catch-all: small uppercase eyebrow text (font-size 12-14px, letter-spacing >=4px,
   gold #C9A96E inline) anywhere on the page bumps to passing #766030.
   Limited to <p> to avoid headlines/em. */
p[style*="color:#C9A96E"][style*="font-size:12px"],
p[style*="color:#C9A96E"][style*="font-size:13px"],
p[style*="color:#C9A96E"][style*="font-size:14px"],
p[style*="color: #C9A96E"][style*="font-size:12px"],
p[style*="color: #C9A96E"][style*="font-size:13px"],
p[style*="color: #C9A96E"][style*="font-size:14px"],
div[style*="color:#C9A96E"][style*="font-size:12px"],
div[style*="color:#C9A96E"][style*="font-size:13px"],
span[style*="color:#C9A96E"][style*="font-size:12px"],
span[style*="color:#C9A96E"][style*="font-size:13px"] {
  color: #766030 !important;
}

/* Large gold accents (headlines + <em> highlight spans) on cream — bump to A8862E */
section[style*="background:#F5F1EA"] h1[style*="color:#C9A96E"],
section[style*="background:#F5F1EA"] h2[style*="color:#C9A96E"],
section[style*="background:#F5F1EA"] h3[style*="color:#C9A96E"],
section[style*="background:#F5F1EA"] em[style*="color:#C9A96E"],
section[style*="background:#F8F8F8"] h1[style*="color:#C9A96E"],
section[style*="background:#F8F8F8"] h2[style*="color:#C9A96E"],
section[style*="background:#F8F8F8"] h3[style*="color:#C9A96E"],
section[style*="background:#F8F8F8"] em[style*="color:#C9A96E"],
section[style*="background:#FFFFFF"] h1[style*="color:#C9A96E"],
section[style*="background:#FFFFFF"] h2[style*="color:#C9A96E"],
section[style*="background:#FFFFFF"] h3[style*="color:#C9A96E"],
section[style*="background:#FFFFFF"] em[style*="color:#C9A96E"] {
  color: #A8862E !important;
}

/* ---------------------------------------------------------------------------
 * FIX 4 — TAP-TARGET MIN 44PT
 * --------------------------------------------------------------------------- */
.aur-hero-link,
.aur-hero-link a,
a.aur-hero-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 12px 6px !important;
}

/* Footer contact icons (☎ ✉ @) — bump 36x36 -> 44x44 */
.aur-footer-contact a,
.aur-footer-icon,
footer a[aria-label*="phone"],
footer a[aria-label*="email"],
footer a[aria-label*="contact"],
footer a[href^="tel:"],
footer a[href^="mailto:"] {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
}

/* Footer placeholder links (any short link ~20px tall) — pad up */
footer a {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 0 !important;
}

/* ---------------------------------------------------------------------------
 * FIX 5 — BEACON OVERLAP CLEARANCE
 * Beacon position: fixed bottom 88 left 16, height 48. Companion bar height 56.
 * Reserve 120px bottom on every scene + mosaic + prologue at <992px viewports.
 * --------------------------------------------------------------------------- */
@media (max-width: 991px) {
  body .aur-scene,
  body .aur-scene.pb8,
  body .aur-scene.pb16,
  body .aur-scene.pb24,
  body .aur-scene.pb32,
  body .aur-scene.pb40,
  body .aur-scene.pb48,
  body .aur-scene.pb56,
  body .aur-scene.pb64,
  body .aur-scene.pb80,
  body .aur-scene.pb96,
  body .aur-mosaic,
  body .aur-mosaic-2,
  body .aur-floorplans-2,
  body .aur-amenities-2,
  body .aur-prologue-1,
  body .aur-prologue-2,
  body .aur-prologue-3,
  body .aur-prologue-4,
  body .aur-prologue-5,
  body .aur-prologue-6,
  body .s_aur_scene4_opennow,
  body .aur-walkmap,
  body .aur-week-timeline {
    padding-bottom: 120px !important;
  }
}