/* Responsive layer for ROSEGOLD Residential
 * The screens were built at 1280px desktop; this stylesheet collapses
 * the grids, scales display type, and tightens padding on tablet & phone.
 *
 * Strategy: target the inline-style structures used in screens/* via
 * attribute selectors, so we don't have to edit each screen.
 */

/* --- Document scaffold --- */
html, body { max-width: 100vw; overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; display: block; }

/* --- TABLET: ≤ 960px --- */
@media (max-width: 960px) {
  /* Section padding inside .rg-screen */
  .rg-screen section,
  .rg-screen header,
  .rg-screen nav,
  .rg-screen footer {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Display type scales down */
  .rg-display { letter-spacing: -0.02em; }
  .rg-screen h1.rg-display { font-size: clamp(40px, 7vw, 64px) !important; line-height: 1.02 !important; }
  .rg-screen h2.rg-display { font-size: clamp(28px, 5vw, 44px) !important; }

  /* Most 2-col & 3-col grids → single column on tablet */
  .rg-screen [style*="grid-template-columns: repeat(3, 1fr)"],
  .rg-screen [style*="gridTemplateColumns: 'repeat(3, 1fr)'"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .rg-screen [style*="grid-template-columns: 1fr 1.2fr"],
  .rg-screen [style*="grid-template-columns: 1.4fr 1fr"],
  .rg-screen [style*="grid-template-columns: 1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Footer 4-col → 2-col */
  .rg-screen footer[style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

/* --- PHONE: ≤ 640px --- */
@media (max-width: 640px) {
  .rg-screen section,
  .rg-screen header,
  .rg-screen nav,
  .rg-screen footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .rg-screen section { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Display type */
  .rg-screen h1.rg-display { font-size: clamp(34px, 9vw, 48px) !important; }
  .rg-screen h2.rg-display { font-size: clamp(24px, 6vw, 32px) !important; }

  /* All multi-column grids collapse */
  .rg-screen [style*="grid-template-columns: repeat(3, 1fr)"],
  .rg-screen [style*="grid-template-columns: repeat(2, 1fr)"],
  .rg-screen [style*="gridTemplateColumns: 'repeat(3, 1fr)'"],
  .rg-screen [style*="gridTemplateColumns: 'repeat(2, 1fr)'"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Stat rows (3 max-content cols) wrap */
  .rg-screen [style*="grid-template-columns: repeat(3, max-content)"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
  }

  /* Footer all stacked */
  .rg-screen footer[style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .rg-screen footer [style*="justifyContent: 'space-between'"] {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Tables that are inline grids — make horizontally scrollable wrappers */
  .rg-screen [style*="grid-template-columns: 1fr 1.4fr 1fr 1fr 0.8fr"] {
    grid-template-columns: minmax(120px,1fr) minmax(140px,1.4fr) minmax(80px,1fr) minmax(80px,1fr) minmax(70px,0.8fr) !important;
    font-size: 11px !important;
  }

  /* Founder hero (320px portrait + content) collapses */
  .rg-screen [style*="grid-template-columns: 320px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px !important;
  }
  .rg-screen [style*="grid-template-columns: 320px 1fr"] > div:first-child {
    max-width: 240px !important;
  }
  .rg-screen [style*="grid-template-columns: 320px 1fr"] dl {
    grid-template-columns: 80px 1fr !important;
  }

  /* Property card hover (no hover on touch) */
  .rg-card:hover [data-card-overlay] { transform: none !important; }

  /* Listings — filter bar (1.4fr 1fr 1fr 1fr auto auto) → wrap */
  .rg-screen [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr auto auto"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px 20px !important;
  }

  /* Listings — list row (40px 200px 1.4fr 1fr 1fr 1fr 40px) → card stack */
  .rg-screen [style*="grid-template-columns: 40px 200px 1.4fr 1fr 1fr 1fr 40px"] {
    grid-template-columns: 88px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 8px 16px !important;
    padding: 14px 0 !important;
  }

  /* Property detail — gallery (2fr 1fr) → stacked, shorter */
  .rg-screen [style*="grid-template-columns: 2fr 1fr"][style*="height: 580px"],
  .rg-screen [style*="grid-template-columns: '2fr 1fr'"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .rg-screen [style*="grid-template-columns: 2fr 1fr"][style*="height: 580px"] > div {
    height: 56vw !important; min-height: 240px !important;
  }

  /* Property detail — body (1.6fr 1fr) collapse + force sticky aside off */
  .rg-screen [style*="grid-template-columns: 1.6fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .rg-screen [style*="position: sticky"] { position: static !important; top: auto !important; }
}

/* --- Admin shell: collapse sidebar on small screens --- */
@media (max-width: 860px) {
  .ad-shell { grid-template-columns: 1fr !important; }
  .ad-side {
    position: sticky !important; top: 0; z-index: 5;
    border-right: 0 !important;
    border-bottom: 1px solid var(--hairline);
    padding: 14px 20px !important;
    height: auto !important;
    background: var(--cream-100);
  }
  .ad-side nav {
    display: flex !important; flex-direction: row !important;
    gap: 4px !important; overflow-x: auto !important;
    margin: 0 -20px; padding: 0 20px;
  }
  .ad-side nav a,
  .ad-side nav button {
    white-space: nowrap; flex-shrink: 0;
    padding: 8px 12px !important;
  }
  .ad-side > *:not(nav):not(.ad-side-keep) { display: none !important; }
  .ad-main { padding: 24px 20px !important; }
  .ad-grid-2,
  .ad-grid-3,
  .ad-stat { grid-template-columns: 1fr !important; }

  /* Admin advisor card: stack portrait above fields */
  .ad-card [style*="display: 'flex'"][style*="gap: 18"] {
    flex-direction: column !important;
  }
  .ad-card [style*="width: 110px"][style*="height: 140px"] {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }
}

@media (max-width: 480px) {
  .ad-h1 { font-size: 28px !important; }
}

/* --- Mobile nav helpers --- */
.rg-nav-toggle {
  display: none;
  background: none; border: 0; padding: 8px; margin: 0;
  cursor: pointer; color: inherit;
}
.rg-nav-toggle svg { display: block; }

@media (max-width: 860px) {
  .rg-nav-desktop { display: none !important; }
  .rg-nav-cta-desktop { display: none !important; }
  .rg-nav-toggle { display: inline-flex !important; align-items: center; }
}
@media (min-width: 861px) {
  .rg-nav-toggle { display: none !important; }
  .rg-nav-mobile-drawer { display: none !important; }
}

.rg-nav-mobile-drawer {
  position: fixed; inset: 0; z-index: 100;
  background: var(--cream-100);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  animation: rgFadeIn 0.18s ease;
}
@keyframes rgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rg-nav-mobile-drawer .rg-nav-mobile-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.rg-nav-mobile-drawer .rg-nav-mobile-list { display: flex; flex-direction: column; gap: 0; }
.rg-nav-mobile-drawer .rg-nav-mobile-list button {
  appearance: none; background: none; border: 0;
  font: inherit; font-size: 28px; font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-align: left; padding: 18px 0;
  border-bottom: 1px solid var(--hairline-soft);
  cursor: pointer;
}
.rg-nav-mobile-drawer .rg-nav-mobile-list button.is-active { color: var(--rg-500); }
.rg-nav-mobile-drawer .rg-nav-mobile-foot { margin-top: auto; padding-top: 32px; font-size: 12px; color: var(--ink-600); }
.rg-nav-mobile-drawer .rg-nav-mobile-foot a { color: var(--ink-900); display: block; margin-top: 6px; }