/* =========================================================================
   Rahul Bishnoi · Portfolio · Responsive layer
   Breakpoints:
     ≤480   small mobile
     ≤768   mobile / phablet
     ≤1024  tablet
     ≤1280  small laptop
     ≤1600  standard laptop / desktop (default — inline styles already target)
     ≥1920  large monitor
     ≥2560  4K / 32"+
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Center the page and cap width on huge monitors so reading column never explodes */
.rb-page {
  max-width: 1680px;
  margin: 0 auto;
}

/* Smooth anchor jumps */
html { scroll-behavior: smooth; }

/* Images and SVGs never overflow their parent */
img, svg { max-width: 100%; }

/* ============ Large monitors (≥1920px, 4K, 32" displays) ============ */
@media (min-width: 1920px) {
  .rb-page { max-width: 1760px; }
  .rb-hero-h1 { font-size: 108px !important; }
  .rb-hero-lead { font-size: 21px !important; }
}
@media (min-width: 2560px) {
  .rb-page { max-width: 1920px; }
}

/* ============ Standard laptop (1280–1600) — defaults already work ============ */

/* ============ Small laptop / large tablet landscape (≤1280) ============ */
@media (max-width: 1280px) {
  .rb-nav { padding: 18px 40px !important; }
  .rb-hero { padding: 72px 40px 64px !important; }
  .rb-hero-h1 { font-size: 76px !important; }
  .rb-services,
  .rb-math,
  .rb-signals,
  .rb-proof,
  .rb-about,
  .rb-resources,
  .rb-scorecard,
  .rb-contact { padding-left: 40px !important; padding-right: 40px !important; }
}

/* ============ Tablet landscape / small laptop (≤1024) ============ */
@media (max-width: 1024px) {
  .rb-hero-h1 { font-size: 60px !important; line-height: 1.02 !important; }
  .rb-hero-lead { font-size: 17px !important; }
  .rb-hero-intro { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Services: stack the headline retainer card */
  .rb-services > div:nth-child(2) { grid-template-columns: 1fr !important; gap: 32px !important; padding: 36px 32px !important; }
  .rb-services > div:nth-child(2) > div:nth-child(2) { border-left: none !important; border-top: 1px solid rgba(255,255,255,0.14) !important; padding-left: 0 !important; padding-top: 28px !important; }
  /* Three entry-point cards: 2-up on tablet */
  .rb-services > div:nth-child(3) { grid-template-columns: 1fr 1fr !important; }

  /* About card: stack */
  .rb-about > div { grid-template-columns: 1fr !important; gap: 36px !important; padding: 48px 36px !important; }

  /* Resources: 2-up */
  .rb-resources > div:nth-child(2) { grid-template-columns: 1fr 1fr !important; }

  /* Contact: stack */
  .rb-contact > div:first-child { grid-template-columns: 1fr !important; padding: 48px 36px !important; }

  /* Proof — keep diagram visible by allowing horizontal scroll on its SVG wrapper */
  .rb-proof-diagram-wrap svg { min-width: 1000px; }

  /* Hero D animation frame: collapse to 2 columns on tablet */
  .hero-d-body { grid-template-columns: 1fr 1fr !important; }
  .hero-d-foot { grid-template-columns: 1fr !important; }

  /* Timeline (30/60/90): 2 then 1 */
  .rb-proof > div:nth-child(2) > div:last-child > div:nth-child(2) { grid-template-columns: 1fr 1fr !important; }

  /* Math tiles + brandcard + signals stack on tablet */
  .rb-math-tiles { grid-template-columns: 1fr !important; gap: 14px !important; }
  .rb-math h2 { font-size: 40px !important; }
  .rb-proof-brandcard { grid-template-columns: 1fr !important; }
  .rb-signals-row { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ============ Tablet portrait / large mobile (≤768) ============ */
@media (max-width: 768px) {
  /* Nav: hide desktop links + tagline, show hamburger */
  .rb-nav { padding: 14px 20px !important; }
  .rb-nav-tagline { display: none !important; }
  .rb-nav-links { display: none !important; }
  .rb-nav-toggle { display: block !important; }

  .rb-hero { padding: 48px 20px 56px !important; }
  .rb-hero-h1 { font-size: 42px !important; letter-spacing: -0.025em !important; }
  .rb-hero-h1 br { display: none; }
  .rb-hero-sub { font-size: 22px !important; margin-top: 14px !important; }
  .rb-hero-tagline { font-size: 11.5px !important; }
  .rb-hero-lead { font-size: 16px !important; }
  .rb-hero-ctas a { width: 100%; text-align: center; }

  .rb-services,
  .rb-math,
  .rb-signals,
  .rb-proof,
  .rb-about,
  .rb-resources,
  .rb-scorecard,
  .rb-contact { padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 64px !important; }

  /* H2 across all sections: shrink */
  .rb-math h2,
  .rb-services h2,
  .rb-proof h2,
  .rb-about h2,
  .rb-resources h2,
  .rb-scorecard h2,
  .rb-contact h2 { font-size: 30px !important; line-height: 1.1 !important; }
  .rb-math-tiles h3 { font-size: 22px !important; }

  /* Services: header row stacks */
  .rb-services > div:first-child { flex-direction: column !important; gap: 12px !important; }
  /* Headline retainer card: condensed padding */
  .rb-services > div:nth-child(2) { padding: 28px 22px !important; border-radius: 14px !important; }
  .rb-services > div:nth-child(2) h3 { font-size: 28px !important; }
  /* Entry-point cards: single column */
  .rb-services > div:nth-child(3) { grid-template-columns: 1fr !important; }

  /* Proof card: padding shrink */
  .rb-proof > div:first-child { padding: 28px 22px !important; border-radius: 14px !important; }
  .rb-proof > div:first-child > div:first-child { flex-direction: column !important; align-items: flex-start !important; }
  .rb-proof > div:first-child > div:first-child > div:last-child { text-align: left !important; }
  /* Stat strip: 2-up */
  .rb-proof > div:first-child > div:nth-child(3) { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  /* Timeline cards: single column */
  .rb-proof > div:nth-child(2) > div:last-child > div:nth-child(2) { grid-template-columns: 1fr !important; }
  /* Testimonial: stack */
  .rb-proof > div:nth-child(2) > div:last-child > div:last-child { grid-template-columns: 1fr !important; padding: 28px 22px !important; }
  .rb-proof > div:nth-child(2) > div:last-child > div:last-child > div:last-child { border-left: none !important; border-top: 1px solid rgba(0,0,0,0.08); padding-left: 0 !important; padding-top: 18px !important; }

  /* About card: condensed */
  .rb-about > div { padding: 36px 22px !important; border-radius: 14px !important; }
  .rb-about h2 { font-size: 32px !important; }

  /* Resources: single column */
  .rb-resources > div:nth-child(2) { grid-template-columns: 1fr !important; }

  /* Contact card: condensed */
  .rb-contact > div:first-child { padding: 36px 22px !important; border-radius: 14px !important; }
  .rb-contact h2 { font-size: 36px !important; }
  .rb-contact > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
}

/* ============ Mobile ≤768 — Hero D adjustments ============ */
@media (max-width: 768px) {
  .hero-d-frame { padding: 16px !important; }
  .hero-d-header { font-size: 14px !important; }
  .hero-d-body { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .hero-d-foot { grid-template-columns: 1fr !important; }
}

/* ============ Small mobile (≤480) ============ */
@media (max-width: 480px) {
  .rb-hero-h1 { font-size: 34px !important; }
  .rb-hero { padding-top: 36px !important; }
  .rb-services h2, .rb-proof h2, .rb-about h2, .rb-resources h2, .rb-scorecard h2 { font-size: 26px !important; }
  .rb-contact h2 { font-size: 30px !important; }

  /* Hero animation: cap height so it doesn't dominate the screen */
  .rb-hero-anim-wrap { margin-top: 36px !important; }

  /* Hero D animation: single column on small mobile so panels are readable */
  .hero-d-body { grid-template-columns: 1fr !important; }
  .hero-d-frame { padding: 14px !important; border-radius: 12px !important; }
  .hero-d-rail { display: none !important; } /* rail too cramped on phone */
}

/* ============ Mobile ≤768 — Hero D adjustments ============ */
@media (max-width: 768px) {
  .hero-d-frame { padding: 16px !important; }
  .hero-d-header { font-size: 14px !important; }
  .hero-d-body { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .hero-d-foot { grid-template-columns: 1fr !important; }
}
/* ============ Landscape phone — short viewport ============ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .rb-hero { padding-top: 32px !important; padding-bottom: 32px !important; }
  .rb-hero-h1 { font-size: 36px !important; }
}

/* ============ Print / PDF ============ */
@media print {
  .rb-nav, .rb-nav-mobile { display: none !important; }
  .rb-page { max-width: 100% !important; }
  section { break-inside: avoid; }
}