/* ============================================
   Sri Ram Ram Govardhan Jewellers
   Responsive Stylesheet
   Breakpoints:
     xs  — 0–479px   (small phone)
     sm  — 480–639px (phone)
     md  — 640–899px (large phone / small tablet)
     lg  — 900–1023px (tablet / small laptop)
     xl  — 1024–1279px (laptop)
     2xl — 1280px+  (desktop)
   ============================================ */

/* ============================================
   DESKTOP — 2xl (1280px+)  — DEFAULT in style.css
   No overrides needed here.
   ============================================ */

/* ============================================
   LARGE LAPTOP — xl  (max-width: 1279px)
   ============================================ */
@media (max-width: 1279px) {
  :root { --container: 1100px; --section-py: 88px; }

  .hero-title    { font-size: clamp(3rem, 6vw, 5.5rem); }
  .section-title { font-size: clamp(1.9rem, 3.5vw, 3rem); }

  .footer-main   { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 36px; }

  .collections-grid { grid-template-columns: repeat(3, 1fr); }

  .hero-stats { right: 16px; }
}

/* ============================================
   LAPTOP — xl  (max-width: 1023px)
   ============================================ */
@media (max-width: 1023px) {
  :root { --section-py: 72px; --gutter: 20px; }

  /* Nav */
  .nav-links { gap: 24px; }
  .nav-link  { font-size: 9px; letter-spacing: 1.5px; }
  .nav-cta   { padding: 9px 18px; font-size: 9px; }

  /* Hero */
  .hero-stats { display: none; }
  .hero-content { padding: 110px 0 60px; }

  /* Grids */
  .heritage-grid    { grid-template-columns: 1fr; gap: 56px; }
  .heritage-visual  { max-width: 480px; }

  .why-grid         { grid-template-columns: repeat(2, 1fr); }

  .about-grid       { grid-template-columns: 1fr; gap: 48px; }
  .about-visual     { max-width: 420px; }

  .craft-grid       { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .contact-grid     { grid-template-columns: 1fr; gap: 56px; }
  .contact-form-wrap{ padding: 40px 32px; }

  .testimonials-grid { grid-template-columns: 1fr 1fr; }

  .insta-grid        { grid-template-columns: repeat(4, 1fr); }

  .footer-main       { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Collections page */
  .coll-section-grid         { grid-template-columns: 1fr !important; gap: 48px; }
  .coll-section-info         { position: static; }
  .coll-items-grid           { grid-template-columns: repeat(3, 1fr); }

  /* Gallery */
  .masonry-grid { columns: 3; column-gap: 10px; }
}

/* ============================================
   TABLET — lg  (max-width: 899px)
   ============================================ */
@media (max-width: 899px) {
  :root { --section-py: 64px; --gutter: 18px; }

  /* Hide desktop nav, show hamburger */
  .nav-links, .nav-cta { display: none; }
  .hamburger            { display: flex; }

  /* Hero */
  .hero-title    { font-size: clamp(2.6rem, 7vw, 4.5rem); }
  .hero-subtitle { font-size: 0.95rem; }
  .hero-content  { padding: 100px 0 56px; }

  /* Marquee */
  .marquee-item span { font-size: 9px; letter-spacing: 2px; }

  /* Collections home grid */
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
  .collection-card  { aspect-ratio: 2/3; }

  /* Why us */
  .why-grid  { grid-template-columns: repeat(2, 1fr); gap: 1px; }
  .why-card  { padding: 40px 24px; }
  .why-num   { font-size: 2.4rem; }

  /* Bestsellers */
  .bestsellers-track { gap: 16px; padding-left: var(--gutter); padding-right: var(--gutter); }
  .seller-card       { min-width: 240px; }

  /* Testimonials — stack */
  .testimonials-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Instagram */
  .insta-grid { grid-template-columns: repeat(3, 1fr); }

  /* Heritage */
  .heritage-grid    { grid-template-columns: 1fr; gap: 48px; }
  .heritage-visual  { max-width: 400px; margin: 0 auto; }
  .heritage-img-badge { bottom: -12px; right: -12px; width: 90px; height: 90px; }

  /* About */
  .about-grid   { grid-template-columns: 1fr; }
  .about-visual { max-width: 380px; }

  /* Stats banner — 2 columns */
  .stats-banner-grid,
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  /* Craft grid */
  .craft-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Collections page */
  .collections-page-grid { grid-template-columns: repeat(2, 1fr); }
  .coll-items-grid        { grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact-strip-grid { grid-template-columns: 1fr; }
  .contact-strip-item { border-right: none; border-bottom: 1px solid rgba(197,151,58,0.1); }
  .contact-strip-item:last-child { border-bottom: none; }
  .hours-grid         { grid-template-columns: 1fr; }

  /* Footer */
  .footer-main         { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom       { flex-direction: column; text-align: center; gap: 12px; }
  .footer-bottom-links { justify-content: center; }

  /* Gallery */
  .masonry-grid { columns: 2; column-gap: 8px; }
}

/* ============================================
   LARGE PHONE — md  (max-width: 639px)
   ============================================ */
@media (max-width: 639px) {
  :root { --section-py: 56px; --gutter: 16px; }

  /* Typography scale */
  .hero-title    { font-size: clamp(2.2rem, 9vw, 3.5rem); line-height: 1.08; }
  .section-title { font-size: clamp(1.7rem, 5.5vw, 2.5rem); }
  .page-hero-title { font-size: clamp(2rem, 7vw, 3.5rem); }

  /* Hero */
  .hero-content  { padding: 90px 0 48px; }
  .hero-actions  { gap: 12px; }
  .hero-actions .btn { padding: 12px 24px; font-size: 10px; }
  .hero-eyebrow-text { font-size: 9px; letter-spacing: 2px; }
  .hero-subtitle { font-size: 0.88rem; }

  /* Marquee */
  .marquee-item  { padding: 0 16px; gap: 12px; }

  /* Collections home grid — single column */
  .collections-grid     { grid-template-columns: 1fr; }
  .collection-card      { aspect-ratio: 3/2; }

  /* Why us — single column */
  .why-grid { grid-template-columns: 1fr; }
  .why-card { padding: 32px 20px; }

  /* Heritage */
  .heritage-img-badge { width: 80px; height: 80px; bottom: -10px; right: -10px; }
  .heritage-img-badge-num { font-size: 1.5rem; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonial-card  { padding: 28px 20px; }

  /* Instagram */
  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }

  /* CTA */
  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Bestsellers */
  .seller-card { min-width: 220px; }

  /* About visual — single column */
  .about-visual { grid-template-columns: 1fr; max-width: 100%; }
  .about-img:nth-child(2) { margin-top: 0; }

  /* Trust grid */
  .trust-grid { grid-template-columns: 1fr; }

  /* Craft grid */
  .craft-grid { grid-template-columns: 1fr; }
  .craft-card { padding: 32px 20px; }

  /* Collections page */
  .collections-page-grid { grid-template-columns: 1fr; }
  .coll-items-grid        { grid-template-columns: 1fr 1fr; gap: 10px; }
  .coll-item-body         { padding: 12px; }
  .coll-item-name         { font-size: 0.9rem; }

  /* Gallery filter wrap */
  .gallery-filter { gap: 6px; }
  .filter-btn     { padding: 8px 14px; font-size: 9px; letter-spacing: 1.5px; }

  /* Gallery masonry — 2 columns */
  .masonry-grid { columns: 2; column-gap: 6px; }
  .masonry-item { margin-bottom: 6px; }

  /* Contact form */
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form-wrap { padding: 24px 16px; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr; }
  .footer-main > div { border-bottom: 1px solid rgba(197,151,58,0.08); padding-bottom: 28px; }
  .footer-main > div:last-child { border-bottom: none; }

  /* Page hero */
  .page-hero { padding: 130px 0 56px; }
  .page-hero-breadcrumb { gap: 6px; }
  .breadcrumb-item { font-size: 9px; }

  /* Heritage section inline override */
  .heritage { padding: 56px 0; }
  .heritage-features { gap: 18px; }
  .heritage-feature-icon { width: 34px; height: 34px; min-width: 34px; }
  .heritage-feature-title { font-size: 1rem; }

  /* Section label */
  .section-label { letter-spacing: 3px; }

  /* WhatsApp float */
  .whatsapp-float { width: 48px; height: 48px; bottom: 20px; right: 20px; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* ============================================
   SMALL PHONE — xs  (max-width: 479px)
   ============================================ */
@media (max-width: 479px) {
  :root { --section-py: 48px; --gutter: 14px; }

  /* Logo */
  .nav-logo-top    { font-size: 13px; letter-spacing: 2px; }
  .nav-logo-bottom { font-size: 8px; }

  /* Hero */
  .hero-title    { font-size: clamp(1.9rem, 9.5vw, 3rem); }
  .hero-content  { padding: 80px 0 40px; }
  .hero-subtitle { display: none; }
  .hero-eyebrow  { margin-bottom: 20px; }

  /* Collection cards */
  .collection-card      { aspect-ratio: 4/3; }
  .collection-card-name { font-size: 1.3rem; }

  /* Why us numbers */
  .why-num { font-size: 2rem; }

  /* Seller cards */
  .seller-card { min-width: 200px; }

  /* Testimonial */
  .testimonial-text  { font-size: 0.95rem; }

  /* Instagram — 2 col on tiny phones */
  .insta-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }

  /* Collections page items */
  .coll-items-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .coll-body { padding: 10px; }

  /* Gallery — 2 col */
  .masonry-grid { columns: 2; column-gap: 5px; }

  /* Footer */
  .footer-brand-name { font-size: 13px; }
  .footer-col-title  { font-size: 9px; }
  .footer-link       { font-size: 0.78rem; }
  .footer-contact-text { font-size: 0.78rem; }
  .footer-copy       { font-size: 10px; text-align: center; }

  /* Lightbox nav on tiny screens */
  .lightbox-prev { left: -28px; width: 36px; height: 36px; }
  .lightbox-next { right: -28px; width: 36px; height: 36px; }

  /* Contact strip */
  .contact-strip { padding: 40px 0; }
  .contact-strip-icon { font-size: 22px; }
  .contact-strip-value { font-size: 0.95rem; }

  /* FAQ */
  details { padding: 18px 16px; }
  details summary { font-size: 0.95rem; }
}

/* ============================================
   LANDSCAPE PHONE  (max-height: 500px, mobile)
   ============================================ */
@media (max-height: 500px) and (max-width: 900px) {
  .hero { min-height: auto; }
  .hero-content { padding: 80px 0 40px; }
  .hero-title   { font-size: 2.4rem; }
  .hero-scroll  { display: none; }
  .mobile-menu  { padding: 80px 24px 24px; gap: 24px; justify-content: flex-start; overflow-y: auto; }
  .mobile-nav-link { font-size: 16px; }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .header, .whatsapp-float, .mobile-menu,
  .hero-canvas, .marquee-wrap, .cta,
  .footer-social, .hero-scroll { display: none !important; }

  body  { background: #fff; color: #000; font-size: 12pt; }
  a     { color: #000; text-decoration: underline; }

  .hero { min-height: auto; padding: 40pt 0 20pt; background: #000; }
  .hero-title, .hero-subtitle { color: #fff; }

  .section-pad { padding: 24pt 0; }
  .container   { max-width: 100%; }

  .collections-grid,
  .why-grid,
  .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================
   HIGH-DPI / RETINA SCREENS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-bg-pattern { opacity: 0.03; }
}

/* ============================================
   HOVER CAPABILITY  (touch devices)
   ============================================ */
@media (hover: none) {
  /* On touch, show collection card content without hover */
  .collection-card-content { transform: translateY(0); }
  .collection-card-desc    { opacity: 1; transform: translateY(0); }
  .collection-card-link    { opacity: 1; }
  .seller-img-btn          { opacity: 1; transform: translateY(0); }
  .coll-item-enquire       { opacity: 1; transform: translateY(0); }

  /* Disable hover-only animations */
  .btn-gold::before        { display: none; }
  .hover-gold-line::after  { display: none; }
}

/* ============================================
   FORCED COLORS (Windows High Contrast)
   ============================================ */
@media (forced-colors: active) {
  .btn-gold   { forced-color-adjust: none; }
  .gold-line  { forced-color-adjust: none; }
  .nav-logo-line { forced-color-adjust: none; }
}