/* ====================================================
   SIMSAN ENTERPRISES — RESPONSIVE STYLES
   Breakpoints: 1440 / 1280 / 1199 / 1023 / 767 / 575 / 424 / 374
   ==================================================== */

/* Prevent any element from causing horizontal scroll */
html {
  overflow-x: hidden;
  max-width: 100%;
}

/* ─── 3XL: Wide desktop (≤ 1440px) ─────────────────── */
@media (max-width: 1440px) {
  :root { --container-px: 28px; }
  .hero-panel { max-width: 600px; }
}

/* ─── 2XL: Standard desktop (≤ 1280px) ─────────────── */
@media (max-width: 1279.98px) {
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 36px; }
  .mega-menu { width: min(760px, calc(100vw - 40px)); }
  .newsletter-panel, .cta-banner { padding: 48px 56px; }
}

/* ─── XL: Hide desktop nav, show hamburger (≤ 1199px) ── */
@media (max-width: 1199.98px) {
  .desktop-nav { display: none !important; }
  .menu-toggle  { display: flex !important; }

  :root { --container-px: 22px; }
  .section-title { font-size: clamp(20px, 3.5vw, 32px); }

  .hero-panel { padding: 36px 40px; max-width: 680px; }
  .hero-arrow { display: none; }

  .stats-grid        { grid-template-columns: repeat(2, 1fr); }
  .stat-card         { padding: 32px 24px; }
  .about-preview     { gap: 44px; }
  .service-grid      { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .why-grid          { grid-template-columns: repeat(2, 1fr); }
  .category-grid     { grid-template-columns: repeat(3, 1fr); }
  .machine-spotlight { gap: 36px; }
  .content-grid-2    { gap: 36px; }
  .timeline          { grid-template-columns: repeat(3, 1fr); }
  .footer-grid       { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .admin-stats-grid  { grid-template-columns: repeat(2, 1fr); }

  /* Top bar — hide address on smaller desktops */
  .tb-address { display: none; }
  .tb-sep:first-of-type { display: none; }
}

/* ─── LG: Tablet (≤ 1023px) ─────────────────────────── */
@media (max-width: 1023.98px) {
  :root { --container-px: 18px; }
  .section-pad { padding: 72px 0; }

  /* Top bar: hide email on tablet */
  .tb-email-link, .tb-sep-md { display: none; }

  /* Hero */
  .hero-slider  { height: 640px; min-height: 500px; }
  .hero-panel   { max-width: 600px; padding: 32px 36px; }
  .hero-panel h1 { font-size: clamp(24px, 4.5vw, 44px); }
  .hero-scroll-hint { display: none; }

  /* Grids */
  .about-preview           { grid-template-columns: 1fr; gap: 36px; }
  .about-preview .image-frame { min-height: 300px; }
  .image-frame-decorated::before,
  .image-frame-decorated::after { display: none; }
  .machine-spotlight       { grid-template-columns: 1fr; gap: 32px; }
  .machine-spotlight > *:first-child { order: 2; }
  .machine-spotlight > *:last-child  { order: 1; }
  .content-grid-2          { grid-template-columns: 1fr; gap: 32px; }
  .content-grid-2-wide     { grid-template-columns: 1fr; }
  .category-grid           { grid-template-columns: repeat(3, 1fr); }
  .timeline                { grid-template-columns: repeat(2, 1fr); }
  .testimonial-card        { min-width: calc(50% - 12px); }

  /* Newsletter / CTA */
  .newsletter-panel,
  .cta-banner { grid-template-columns: 1fr; gap: 24px; padding: 40px 36px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-top  { padding: 60px 0 44px; }

  /* Quote modal — stack to 1 col on tablet */
  .quote-form-grid { grid-template-columns: 1fr; gap: 8px; }

  /* Reviews grid — 2 columns on tablet */
  .reviews-grid        { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .rating-summary-grid { grid-template-columns: 1fr; gap: 32px; }
  .rating-big-box      { padding: 36px 32px; }

  /* Video showcase */
  .video-showcase-card { aspect-ratio: 16 / 9; }
}

/* ─── MD: Tablet portrait / large phone (≤ 767px) ───── */
@media (max-width: 767.98px) {
  body { font-size: 16px; }
  :root { --container-px: 16px; }
  .section-pad { padding: 60px 0; }

  /* Top bar — hide everything except badge on mobile */
  .top-bar { height: 36px; }
  .top-bar-left { display: none; }
  .top-bar-right { gap: 10px; font-size: 12px; }
  .tb-sep { display: none; }
  .tb-email-link { display: none; }
  /* Recalculate spacer */
  .header-spacer { height: calc(36px + 64px); }
  .header-spacer.topbar-gone { height: 64px; }

  /* Header height on mobile */
  .site-header { height: 64px; top: 36px; }
  .brand-logo  { height: 52px; margin-top: 0; }
  .mega-menu   { display: none !important; }

  /* Typography */
  .section-title { font-size: clamp(20px, 5.5vw, 30px); }
  .section-lead  { font-size: 15px; }

  /* Hero — tall on mobile, content centered */
  .hero-slider  { height: 100svh; min-height: 540px; }
  .hero-content { align-items: center; padding-bottom: 0; padding-top: 0; }
  .hero-panel {
    max-width: 100%;
    padding: 24px 22px;
    border-radius: var(--radius-lg);
  }
  .hero-panel h1    { font-size: clamp(22px, 6.5vw, 36px); margin-bottom: 12px; }
  .hero-panel .hero-sub { font-size: 14px; margin-bottom: 20px; -webkit-line-clamp: 3; }
  .hero-actions     { gap: 10px; }
  .hero-actions .btn { min-height: 46px; padding: 10px 20px; font-size: 14px; }
  .hero-nav         { bottom: 18px; }
  .hero-arrow       { display: none; }

  /* Trust Strip */
  .marquee-item { padding: 14px 18px; font-size: 13px; }

  /* Stats */
  .stats-band { padding: 48px 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card  { padding: 24px 18px; }
  .stat-number { font-size: 40px; }

  /* Grids */
  .highlight-grid { grid-template-columns: 1fr; }
  .service-grid   { grid-template-columns: 1fr; }
  .why-grid       { grid-template-columns: 1fr; }
  .category-grid  { grid-template-columns: repeat(2, 1fr); }
  .industry-scroll { grid-auto-columns: minmax(180px, 75vw); }

  /* Timeline */
  .timeline { grid-template-columns: 1fr; gap: 10px; }
  .timeline::before { display: none; }
  .timeline-step { display: flex; gap: 14px; text-align: left; padding: 18px; }
  .timeline-num  { flex-shrink: 0; margin: 0; width: 42px; height: 42px; font-size: 15px; }

  /* Reviews slider */
  .reviews-header     { flex-direction: column; align-items: flex-start; gap: 16px; }
  .reviews-rating-pill { align-self: flex-start; }
  .review-card-inner  { padding: 32px 28px 28px; }
  .review-text        { font-size: 16px; }
  .review-verified    { display: none; }
  .review-card-inner::after { font-size: 140px; right: 20px; }

  /* Newsletter / CTA */
  .newsletter-panel, .cta-banner { padding: 32px 22px; border-radius: var(--radius-lg); }
  .newsletter-form  { flex-direction: column; }
  .newsletter-form input { width: 100%; }
  .cta-actions      { flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  /* Enquiry Panel */
  .enquiry-panel { padding: 24px 20px; position: static; }

  /* Page Hero — inner pages */
  .page-hero    { padding-top: 40px; padding-bottom: 52px; }
  .page-hero h1 { font-size: clamp(24px, 6.5vw, 38px); }

  /* Footer */
  .footer-grid  { grid-template-columns: 1fr; gap: 32px; }
  .footer-top   { padding: 52px 0 36px; }
  .footer-tagline { max-width: 100%; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom-nav   { flex-wrap: wrap; gap: 12px; }

  /* Admin */
  .admin-header  { flex-direction: column; gap: 12px; padding: 16px; }
  .admin-nav     { flex-wrap: wrap; justify-content: center; }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-main    { padding: 16px; }

  /* Gallery */
  .gallery-masonry { columns: 2; }
  .gallery-tabs    { gap: 8px; }
  .gallery-tabs button { padding: 7px 14px; font-size: 13px; }

  /* Map */
  .map-embed { height: 260px; }

  /* Quote modal */
  .quote-modal-overlay { padding: 12px; }

  /* Inline-style grid overrides — prevent horizontal overflow on mobile */
  .vmv-grid           { grid-template-columns: 1fr !important; }
  .contact-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .next-steps-grid    { grid-template-columns: 1fr !important; }
  .quote-modal-header  { padding: 14px 18px 12px; }
  .quote-modal-body    { padding: 14px 18px 16px; }
  .quote-form-grid     { grid-template-columns: 1fr; gap: 8px; }
  .quote-submit-row    { margin-top: 10px; }

  /* Reviews grid — 2 columns on tablet */
  .reviews-grid        { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .rating-summary-grid { grid-template-columns: 1fr; gap: 28px; }
  .rating-big-box      { padding: 32px 28px; }
  .rating-bar-label    { min-width: 130px; }
}

/* ─── SM: Large phones (≤ 575px) ────────────────────── */
@media (max-width: 575.98px) {
  :root { --container-px: 14px; }

  .hero-panel    { padding: 20px 18px; }
  .hero-panel h1 { font-size: clamp(20px, 7vw, 32px); }
  .hero-eyebrow  { font-size: 11px; padding: 4px 12px; }
  .hero-actions .btn { font-size: 13px; padding: 9px 16px; min-height: 42px; }

  .stats-grid    { grid-template-columns: repeat(2, 1fr); gap: 1px; }
  .stat-number   { font-size: 36px; }
  .stat-label    { font-size: 12px; }
  .stat-card     { padding: 22px 14px; }

  .service-card  { padding: 22px 18px; }
  .service-card-icon { width: 50px; height: 50px; font-size: 20px; }

  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-img  { height: 110px; }

  .timeline-num  { width: 38px; height: 38px; font-size: 14px; }

  .why-card { padding: 22px 18px; }

  .accordion-button { font-size: 14px; padding: 16px 18px; }
  .accordion-body   { padding: 0 18px 16px; }

  .cta-banner, .newsletter-panel { padding: 26px 18px; }

  .footer-col-title { font-size: 14px; }
  .footer-brand-link img { height: 44px; }

  .page-hero    { padding-top: 32px; padding-bottom: 44px; }
  .breadcrumb   { font-size: 12px; }

  .gallery-masonry { columns: 1; }

  .admin-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .admin-stat strong { font-size: 22px; }

  /* Reviews */
  .review-card-inner  { padding: 24px 20px 20px; }
  .review-text        { font-size: 15px; line-height: 1.7; }
  .review-deco-quote  { font-size: 30px; margin-bottom: 14px; }
  .review-avatar-lg   { width: 44px; height: 44px; font-size: 17px; }
  .review-author-name { font-size: 14px; }
  .review-card-inner::after { display: none; }

  /* Reviews grid — 1 column on small phones */
  .reviews-grid { grid-template-columns: 1fr; gap: 14px; }
  .rating-bar-item    { flex-wrap: wrap; gap: 8px; }
  .rating-bar-label   { min-width: unset; width: 100%; }
  .rating-big-score   { font-size: 64px; }

  /* Quote modal */
  .quote-modal-overlay { padding: 10px 8px; }
  .quote-modal         { border-radius: 16px; }
  .quote-modal-header  { padding: 12px 14px 10px; border-radius: 16px 16px 0 0; }
  .quote-modal-title   { font-size: 15px; }
  .quote-modal-body    { padding: 12px 14px 14px; }
  .quote-form-grid     { gap: 7px; }
  .quote-submit-row    { margin-top: 8px; }
}

/* ─── XS: Small phones (≤ 424px) ────────────────────── */
@media (max-width: 424.98px) {
  :root { --container-px: 12px; }
  body { font-size: 15px; }

  .hero-panel h1    { font-size: clamp(20px, 7.5vw, 28px); }
  .hero-panel .hero-sub { font-size: 13px; }
  .hero-actions     { flex-direction: column; gap: 8px; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .stats-grid    { grid-template-columns: 1fr 1fr; }
  .stat-number   { font-size: 32px; }

  .category-grid      { grid-template-columns: 1fr 1fr; gap: 8px; }
  .contact-cards-grid { grid-template-columns: 1fr !important; }

  .section-title { font-size: clamp(18px, 7vw, 26px); }

  .highlight      { font-size: 13px; padding: 10px 11px; }
  .highlight-icon { width: 34px; height: 34px; font-size: 15px; }

  .btn-lg { padding: 12px 22px; font-size: 14px; min-height: 48px; }

  /* Top bar hide on tiny phones */
  .top-bar { display: none; }
  .header-spacer { height: 64px !important; }
  .site-header   { top: 0 !important; }
}

/* ─── Minimum: Very small phones (≤ 374px) ──────────── */
@media (max-width: 374.98px) {
  .hero-panel    { padding: 18px 14px; }
  .hero-panel h1 { font-size: 20px; }
  .section-pad   { padding: 48px 0; }
  .stats-grid    { grid-template-columns: 1fr; }
  .stat-card     { padding: 18px 14px; text-align: left; }
  .stat-number   { justify-content: flex-start; font-size: 34px; }
}

/* ─── Print Styles ───────────────────────────────────── */
@media print {
  .top-bar, .site-header, .whatsapp-float, .hero-slider,
  .header-spacer, #scrollTopBtn { display: none !important; }
  body { font-size: 12pt; color: #000; padding-top: 0 !important; }
  .page-hero { padding: 32px 0 16px; background: none; color: #000; }
  .page-hero h1 { color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ─── Reduced Motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-slider .hero-media img { transform: none !important; }
  .marquee-track { animation: none !important; }
}