/* ════════════════════════════════════════════════════════════════════════════════
   RESPONSIVE WIDE-SCREEN AUDIT — Task #813374 (Apr 10, 2026)
   Fixes for breakpoints 1024px, 1280px, 1440px, 1920px.
   Loaded via combined.min.css (async, all viewports).
   Ensures proper layout at tablet landscape through ultra-wide desktops.
   ════════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   1. 1024px — TABLET LANDSCAPE / SMALL DESKTOP
   Gap between 900px (md) and 1200px (lg) breakpoints.
   Many elements snap to desktop layout at 900px but content area
   is too narrow. Add intermediate adjustments.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1024px) {
  /* Container: slightly tighter max-width to avoid awkward margins */
  .ds-container {
    max-width: 960px;
  }
  /* Grid gap: reduce from 32px to 24px — columns are narrower at 1024px */
  .ds-grid {
    gap: 24px;
  }
  /* Pricing grid: 2 columns at 1024px (4 cards are too cramped at ~220px each) */
  .sp-pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  /* One-time purchase grid: 2 columns at 1024px */
  .onetime-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Business grid: 2 columns if 3 is too tight */
  .biz-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Settlement listing grids: ensure cards don't get too narrow */
  .ctw-grid,
  .npr-grid,
  .exp-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  }
  /* About page stats grid: 3 columns fits well at 1024px */
  .ab-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  /* How It Works: 2 columns for readable step cards */
  .rs-hiw-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Auth page: reduce right panel width */
  .sp-auth-page.ct-mode {
    grid-template-columns: 1fr 380px !important;
  }
  /* Homepage category grid: 3 columns instead of 4 */
  .rs-cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* UGC video grid: 2 columns on tablet landscape */
  .ugc-video-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Homepage hero: slightly reduced padding */
  .rs-hero,
  .rs-hero-redesigned {
    padding-top: clamp(4rem, 6vw, 5rem);
    padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  }
  /* Guide cards: 2 columns on small desktop */
  .rs-guides-grid,
  .guides-grid,
  .guide-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  /* Footer: 4 columns */
  .footer-nav,
  .sp-footer-nav,
  .footer-col-wrap {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ══════════════════════════════════════════════════════════════════
   2. 1280px — STANDARD DESKTOP
   At 1280px, the 1200px max-width container has only 40px margin
   each side. Content should breathe but not look cramped.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1280px) {
  /* Container padding: ensure minimum 32px on each side */
  .ds-container,
  .sp-container {
    padding-left: max(var(--container-px, 2rem), 2rem);
    padding-right: max(var(--container-px, 2rem), 2rem);
  }
  /* Pricing: 4 columns at full desktop, center the grid */
  .sp-pricing-grid {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Homepage hero: ensure proper vertical rhythm */
  .rs-hero,
  .rs-hero-redesigned {
    padding-top: clamp(5rem, 7vw, 6rem);
    padding-bottom: clamp(3rem, 5vw, 4rem);
  }
  /* Settlement listing: 2 columns for comfortable card width */
  .ctw-grid,
  .npr-grid,
  .exp-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ══════════════════════════════════════════════════════════════════
   3. 1440px — WIDE DESKTOP
   Common 1440px displays (MacBook Pro 15", most 27" monitors).
   Content at 1200px max-width looks properly centered with
   120px margins. Optimize spacing and layout density.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1281px) and (max-width: 1440px) {
  /* Increase max-width slightly for wider screens */
  .ds-container {
    max-width: 1240px;
  }
  /* Hero sections: more generous vertical padding */
  .sp-hero,
  .rs-hero,
  .rs-hero-redesigned {
    padding-top: clamp(5rem, 8vw, 7rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
  }
  /* Section vertical spacing: more breathing room on wide screens */
  .ds-section {
    padding-block: clamp(3.5rem, 5vw, 5rem);
  }
  .ds-section--lg {
    padding-block: clamp(4rem, 6vw, 7rem);
  }
  /* Settlement listing: 3 columns for wide screens */
  .ctw-grid,
  .npr-grid,
  .exp-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    gap: 1.5rem;
  }
  /* Guide cards: 3 columns */
  .rs-guides-grid,
  .guides-grid,
  .guide-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  /* About stats: 4 columns fits well at 1440px */
  .ab-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* How It Works: 3 columns for wider layout */
  .rs-hiw-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
/* ══════════════════════════════════════════════════════════════════
   4. 1920px — ULTRA-WIDE / 4K
   At 1920px with 1280px max-width, there's 320px margin each side.
   Content should feel centered and deliberate, not lost in
   whitespace. Slightly expand max-width and add visual containment.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {
  /* Expand container for ultra-wide — from 1280px to 1360px */
  :root {
    --max-width: 1360px;
  }
  /* Container padding: generous on ultra-wide */
  .ds-container,
  .sp-container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  /* Hero sections: properly scaled for large viewports */
  .sp-hero,
  .rs-hero,
  .rs-hero-redesigned {
    padding-top: clamp(6rem, 8vw, 9rem);
    padding-bottom: clamp(4rem, 6vw, 7rem);
  }
  /* Section padding: generous vertical spacing */
  .ds-section {
    padding-block: clamp(4rem, 5vw, 6rem);
  }
  .ds-section--lg {
    padding-block: clamp(5rem, 6vw, 8rem);
  }
  /* Settlement listing: 3 columns with wider cards */
  .ctw-grid,
  .npr-grid,
  .exp-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    gap: 2rem;
  }
  /* Homepage category grid: 4 columns on ultra-wide */
  .rs-cat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  /* How It Works: 3 columns with comfortable spacing */
  .rs-hiw-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  /* Pricing: 4 columns centered */
  .sp-pricing-grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    gap: 1.5rem;
  }
  /* About stats: 4 columns with generous gap */
  .ab-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  /* Guide cards: 3 or 4 columns */
  .rs-guides-grid,
  .guides-grid,
  .guide-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Footer: 5 columns on ultra-wide, centered */
  .footer-nav,
  .sp-footer-nav,
  .footer-col-wrap {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  /* UGC video grid: 3 columns on ultra-wide */
  .ugc-video-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Typography: slightly larger on ultra-wide for readability */
  body {
    font-size: 1.15rem; /* 18.4px */
  }
  /* Prose width on ultra-wide: allow slightly wider for comfortable reading */
  p {
    max-width: 750px;
  }
}
/* ══════════════════════════════════════════════════════════════════
   5. 1920px SPECIFIC — explicit checks for full HD displays
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  /* Full HD: expand max-width to 1400px */
  :root {
    --max-width: 1400px;
  }
  /* Ensure all main containers respect the wider max-width */
  .ds-container {
    max-width: var(--max-width);
  }
  .sp-container {
    max-width: 1100px; /* secondary pages stay tighter for readability */
  }
  /* Settlement listing grids: wider with more breathing room */
  .ctw-grid,
  .npr-grid,
  .exp-grid {
    max-width: 1360px;
  }
}
/* ══════════════════════════════════════════════════════════════════
   6. GLOBAL — smooth transitions between breakpoints
   Ensure no jarring layout shifts when resizing browser.
   ══════════════════════════════════════════════════════════════════ */
/* Smooth grid transitions */
.sp-pricing-grid,
.onetime-grid,
.biz-grid,
.ctw-grid,
.npr-grid,
.exp-grid,
.rs-cat-grid,
.rs-hiw-steps,
.ab-stats-grid,
.rs-guides-grid,
.guides-grid,
.guide-cards-grid,
.footer-nav,
.sp-footer-nav,
.ugc-video-grid {
  transition: grid-template-columns 0.2s ease;
}
/* Containers: smooth max-width transitions on resize */
.ds-container,
.sp-container {
  transition: max-width 0.2s ease, padding 0.2s ease;
}
/* ══════════════════════════════════════════════════════════════════
   7. AUTH PAGES — responsive grid at all breakpoints
   ══════════════════════════════════════════════════════════════════ */
/* Auth page two-column layout: tablet landscape adjustment */
@media (min-width: 861px) and (max-width: 1024px) {
  .sp-auth-page.ct-mode {
    grid-template-columns: 1fr 380px !important;
    gap: 0;
  }
}
/* Auth page: wider marketing panel on large screens */
@media (min-width: 1441px) {
  .sp-auth-page.ct-mode {
    grid-template-columns: 1fr 500px !important;
  }
  .sp-auth-card {
    max-width: 460px;
  }
}
/* ══════════════════════════════════════════════════════════════════
   8. SETTLEMENT DETAIL — wide-screen layout optimization
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {
  /* Detail page: wider content area on large screens */
  .detail-inner,
  .sd-container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Related settlements: 3-column grid on wide screens */
  .related-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem;
  }
}
@media (min-width: 901px) and (max-width: 1024px) {
  /* Detail page: constrained for readability */
  .detail-inner,
  .sd-container {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ══════════════════════════════════════════════════════════════════
   9. ADMIN PAGES — responsive at all sizes (in case accessed on
   mobile/tablet, even though primarily desktop)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .admin-grid,
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .admin-grid,
  .admin-stats-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ══════════════════════════════════════════════════════════════════
   10. GLOBAL MAX-WIDTH CONTAINMENT
   Prevent any element from ever exceeding the viewport width.
   Applied at all breakpoints as a final safety net.
   ══════════════════════════════════════════════════════════════════ */
/* No element should ever cause horizontal scroll */
html {
  overflow-x: hidden;
}
/* Safety: images always constrained */
img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}
/* Tables: horizontal scroll wrapper */
table {
  max-width: 100%;
}
/* Pre/code blocks: scroll horizontally within container */
pre, code {
  max-width: 100%;
  overflow-x: auto;
}