/* =============================================
   RESPONSIVE.CSS — Mobile-first overrides
   Breakpoints:
   1024px  — Tablet (iPad)
   768px   — Large mobile (iPhone 14 Pro 390px wide, Samsung etc)
   480px   — Small mobile (iPhone SE 375px)
   DO NOT touch laptop/desktop styles here.
============================================= */

/* ── GLOBAL OVERFLOW FIX (iOS Safari) ─────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── MOBILE-ONLY CTA BAR ───────────────────────
   Fixed bottom bar on mobile with Estimation +
   Book Consultation buttons. Hidden on desktop.
──────────────────────────────────────────────── */
.mobile-cta-bar {
  display: none;
}

/* ── UTILITY CLASSES ───────────────────────────── */
.mobile-only {
  display: none;
}

/* ══════════════════════════════════════════════════
   TABLET — 1024px and below
══════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Hero: single column */
  .hero-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Studio: stack */
  .studio-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* About: stack */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding-right: 0 !important;
  }

  /* Featured projects: 2 cols */
  .projects-grid,
  #featured-projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══════════════════════════════════════════════════
   MOBILE — 768px and below
   (iPhone 14 Pro = 390px, most Androids 360-414px)
══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── GLOBAL ── */
  .desktop-only { display: none !important; }
  
  body {
    padding-bottom: 70px;
  }

  .mobile-only {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    margin-top: 2rem;
  }

  /* ── MOBILE CTA BAR — show on mobile ── */
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8000;
    padding: 12px 16px;
    gap: 10px;
    background: rgba(13,13,13,0.97);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
  }

  /* Reposition fixed buttons to appear above mobile CTA bar */
  .whatsapp-btn {
    bottom: calc(60px + 1rem) !important;
  }

  .scroll-top-btn {
    bottom: calc(60px + 5.8rem) !important;
  }

  .mobile-cta-bar a,
  .mobile-cta-bar button {
    flex: 1;
    text-align: center;
    padding: 0.9rem 0.5rem;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: inherit;
  }

  .mobile-cta-bar .mcta-primary {
    background: var(--color-accent);
    color: #1a1400;
  }

  .mobile-cta-bar .mcta-secondary {
    background: transparent;
    color: var(--color-text);
    border: 1px solid rgba(255,255,255,0.15);
  }

  /* Add bottom padding to body so content isn't hidden behind the bar */
  body {
    padding-bottom: 80px;
  }

  /* ── NAVBAR ── */
  .navbar {
    height: 64px;
    justify-content: space-between;
  }

  .nav-links { display: none !important; }

  /* Hide navbar Estimation button — mobile bar replaces it */
  .navbar .btn-primary,
  .header .btn-primary { display: none !important; }

  .menu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
  }

  /* ── HERO ── */
  .hero {
    min-height: auto;
    padding: 2rem 0 5rem;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-content { order: 2; }
  .hero-visual  { order: 1; }

  .hero-title {
    font-size: clamp(2.4rem, 11vw, 4rem);
    max-width: 100%;
    line-height: 1.05;
  }

  .hero-label { font-size: 0.65rem; }

  .hero-description {
    max-width: 100%;
    font-size: 0.95rem;
  }

  /* Hero actions: show on mobile (override .btn-primary hide) */
  .hero-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Allow hero buttons to show even though navbar btn-primary is hidden */
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    display: flex !important;
    width: 100%;
    justify-content: center;
  }

  .hero-image {
    height: auto;
    aspect-ratio: 4/3;
  }

  /* Hero image wrapper: no fixed aspect-ratio forcing tall height */
  .hero-image-wrapper {
    aspect-ratio: 4/3;
  }

  /* Hero badge: smaller, centred */
  .hero-badge {
    width: 120px;
    height: 120px;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
  }

  .badge-number { font-size: 2.5rem; }
  .badge-text   { font-size: 0.6rem; }

  /* ── FEATURED PROJECTS ── */
  .projects-grid,
  #featured-projects-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .project-image-wrapper {
    height: auto !important;
    aspect-ratio: 16/10;
  }

  /* ── EDITORIAL ── */
  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .editorial-image-wrapper {
    height: 280px;
    max-width: 100%;
  }

  .editorial-content {
    padding-right: 0;   /* remove desktop 4rem right padding */
    max-width: 100%;
  }

  .editorial-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  /* ── BEFORE/AFTER ── */
  .before-after { min-height: auto; }

  .ba-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .comparison-slider {
    height: auto;
    aspect-ratio: 4/3;
    min-height: unset;
    max-height: 60vh;
  }

  .slider-button { width: 44px; height: 44px; }

  /* ── STUDIO ── */
  .studio-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .studio-slider-wrap {
    height: 280px;
    min-height: 280px;
  }

  /* ── ABOUT ── */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  #about .container {
    padding-right: 0 !important;
  }

  /* Founder portrait: landscape ratio on mobile */
  .founder-image-wrapper {
    aspect-ratio: 4/3 !important;
    max-width: 100% !important;
  }

  /* Stats bar: full width */
  #about .about-grid > div:first-child > div:last-child {
    max-width: 100% !important;
  }

  /* ── YOUTUBE ── */
  .youtube-card {
    flex: 0 0 82vw !important;  /* almost full screen width per card */
  }

  .youtube-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .youtube-section-title { font-size: clamp(1.4rem, 6vw, 2rem); }

  .youtube-slider-wrap { padding: 0 8px; }

  /* ── TESTIMONIALS ── */
  /* Already handled in sections.css with flex: 0 0 88vw */

  /* ── CONTACT ── */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .contact-form-wrapper {
    padding: 1.5rem;
    margin-left: 0;
  }

  .contact-title {
    font-size: clamp(2rem, 9vw, 3rem);
    max-width: 100%;
  }

  .contact-details {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* ── SOCIAL SIDEBAR ── */
  .social-sidebar { display: none; }

  /* ── SECTION HEADINGS ── */
  .section-heading { margin-bottom: 2.5rem; }
  .section-title   { font-size: clamp(2rem, 9vw, 3.5rem); }

  /* ── MOBILE MENU ── */
  .mobile-menu {
    display: flex;
    flex-direction: column;
  }

  .mobile-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  }

  /* ── ESTIMATE MODAL ── */
  .estimate-box {
    padding: 24px 20px;
    border-radius: 20px;
    max-height: 92vh;
    overflow-y: auto;
  }

  .estimate-form input,
  .estimate-form select,
  .estimate-form textarea {
    padding: 14px 16px;
    font-size: 0.9rem;
  }

  /* ── PROJECTS LISTING PAGE ── */
  .projects-listing-grid {
    grid-template-columns: 1fr !important;
    width: 92% !important;
    gap: 20px !important;
  }

  /* ── PROJECT GALLERY PAGE ── */
  .project-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 160px !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .project-gallery-grid .gallery-tile:nth-child(1),
  .project-gallery-grid .gallery-tile:nth-child(6) {
    grid-column: span 2;
    grid-row: span 1;
    height: 200px;
  }

  /* Gallery section: full width, no side padding clipping */
  .project-gallery-section {
    width: 100% !important;
    padding: 0 12px !important;
  }

  /* ── FAQ ── */
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  #faq .section-heading {
    position: static !important;
  }
}

/* ══════════════════════════════════════════════════
   SMALL MOBILE — 480px and below
   (iPhone SE = 375px)
══════════════════════════════════════════════════ */
@media (max-width: 480px) {

  body { 
    padding-top: 64px;
    padding-bottom: 65px;
  }

  .container { width: 94%; }

  /* ── NAVBAR ── */
  .navbar { height: 60px; }
  .logo-text { font-size: 1.3rem; }
  .logo img  { height: 32px; }

  /* ── HERO ── */
  .hero-title { font-size: clamp(2rem, 12vw, 3rem); }
  .hero-description { font-size: 0.88rem; }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    padding: 0.85rem 1rem;
    font-size: 0.72rem;
  }

  .hero-badge {
    width: 100px;
    height: 100px;
  }
  .badge-number { font-size: 2rem; }

  /* ── YOUTUBE ── */
  .youtube-card { flex: 0 0 88vw !important; }

  /* ── MOBILE CTA BAR ── */
  .mobile-cta-bar {
    padding: 10px 12px;
    gap: 8px;
  }

  .mobile-cta-bar a,
  .mobile-cta-bar button {
    padding: 0.8rem 0.4rem;
    font-size: 0.72rem;
  }

  /* Adjust fixed buttons for smaller mobile screens */
  .whatsapp-btn {
    width: 54px;
    height: 54px;
    right: 1rem;
    bottom: calc(55px + 1rem) !important;
  }

  .scroll-top-btn {
    width: 52px;
    height: 52px;
    right: 1rem;
    bottom: calc(55px + 5.4rem) !important;
  }

  /* ── SECTION TYPOGRAPHY ── */
  .section-title { font-size: clamp(1.8rem, 10vw, 2.8rem); }

  /* ── MOBILE MENU ── */
  .mobile-links a {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  /* ── COMPARISON SLIDER ── */
  .comparison-slider {
    aspect-ratio: 1/1;
    max-height: 55vw;
  }

  /* ── PROJECT GALLERY ── */
  .project-gallery-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 200px !important;
  }

  .project-gallery-grid .gallery-tile:nth-child(1),
  .project-gallery-grid .gallery-tile:nth-child(6) {
    grid-column: span 1;
    height: 200px;
  }

  /* ── ABOUT FOUNDER ── */
  .founder-image-wrapper {
    aspect-ratio: 3/2 !important;
  }
}