/* ============================================
   OCHRE HOUSE – RESPONSIVE CSS
   responsive.css  (Mobile-first approach)
   ============================================ */

/* ============================================
   BASE: 320px – 479px (Small phones)
   ============================================ */

/* Hide desktop nav by default */
.nav-desktop { display: none; }
.nav-toggle  { display: flex; }

/* Mobile bottom bar is visible */
.mobile-cta-bar { display: flex; }

/* Adjust container */
.container { padding-inline: 1rem; }

/* Grid: single column on mobile */
.grid-2,
.grid-3,
.services-grid,
.why-grid,
.footer-grid {
  grid-template-columns: 1fr;
}

/* Adjust hero text size */
.hero-title {
  font-size: 2.25rem;
}

/* Portfolio: 2 columns on mobile */
.portfolio-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

/* Portfolio item: slightly shorter on small mobile */
.portfolio-item {
  border-radius: 60px 60px 8px 8px;
}

/* Stats: 2 cols */
.stats-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Team: 2 cols */
.team-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Service cards: 1 col */
.services-grid {
  grid-template-columns: 1fr;
}

/* Gallery: 2 cols */
.gallery-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Why section: 1 col */
.why-grid {
  grid-template-columns: 1fr;
}

/* Materials: 2 cols */
.materials-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* About image badge */
.about-image-badge {
  right: 0.5rem;
  bottom: 1rem;
}

/* Section padding */
.section-pad { padding-block: 3rem; }
.section-pad-sm { padding-block: 2rem; }

/* Footer body copy for mobile */
body {
  /* Extra padding for sticky bottom CTA */
  padding-bottom: 80px;
}

/* ============================================
   480px – 639px (Large phones)
   ============================================ */
@media (min-width: 480px) {
  .container { padding-inline: 1.25rem; }

  /* Service cards: 2 cols for larger phones */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .portfolio-item {
    border-radius: 80px 80px 8px 8px;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Team */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   640px – 767px (Small tablets)
   ============================================ */
@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }

  /* Reduce mobile CTA visibility on tablet */
  .mobile-cta-bar { display: none; }
  body { padding-bottom: 0; }

  .whatsapp-btn {
    bottom: 2rem;
    right: 1.5rem;
  }

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

  /* Service: 3 cols */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Portfolio */
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

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

  /* About split */
  .about-split {
    grid-template-columns: 1fr;
  }

  /* Hero */
  .hero-title {
    font-size: 3rem;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Projects info */
  .project-info-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Materials */
  .materials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Awards */
  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Benefits */
  .service-benefits {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================
   768px – 1023px (Tablets)
   ============================================ */
@media (min-width: 768px) {
  :root {
    --header-h: 80px;
  }

  .container { padding-inline: 2rem; }

  /* Show desktop nav */
  .nav-desktop { display: flex; }
  .nav-toggle  { display: none; }

  /* Section padding */
  .section-pad { padding-block: 5rem; }
  .section-pad-sm { padding-block: 3rem; }

  /* Hero */
  .hero-inner {
    max-width: 680px;
  }

  .hero-title { font-size: 3.5rem; }

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

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

  /* About split: 2 columns */
  .about-split {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  /* Service overview */
  .service-overview {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  /* Footer grid */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 2.5rem;
  }

  /* Footer bottom */
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  /* Team */
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Portfolio: 3 cols */
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

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

  /* Process step */
  .process-step {
    flex: 0 0 200px;
  }

  /* Timeline */
  .timeline {
    padding-left: 2.5rem;
  }

  /* About highlights */
  .about-highlights {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  /* Service benefits */
  .service-benefits {
    grid-template-columns: 1fr 1fr;
  }

  /* Awards */
  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ============================================
   1024px – 1279px (Large tablets / Small desktop)
   ============================================ */
@media (min-width: 1024px) {
  :root {
    --header-h: 88px;
  }

  .container { padding-inline: 2.5rem; }

  .section-pad { padding-block: 6rem; }
  .section-pad-sm { padding-block: 4rem; }

  /* Hero */
  .hero-inner { max-width: 760px; }
  .hero-title { font-size: 4.5rem; }

  /* Services: 3 cols */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Why: 3 cols */
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Portfolio: 4 cols */
  .portfolio-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  /* Gallery: 4 cols */
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Team: 4 cols */
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* About */
  .about-split {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  /* CTA banner */
  .cta-banner {
    padding-block: 8rem;
  }

  /* Process step */
  .process-step {
    flex: 0 0 220px;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 2.5fr 1fr 1fr 1.5fr;
    gap: 3rem;
  }

  /* Map */
  .map-container {
    height: 360px;
  }

  /* Service page overview */
  .service-overview {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  /* Service benefits */
  .service-benefits {
    grid-template-columns: 1fr 1fr;
  }

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

/* ============================================
   1280px+ (Full desktop)
   ============================================ */
@media (min-width: 1280px) {
  :root {
    --header-h: 88px;
  }

  .container {
    padding-inline: 3rem;
    max-width: 1340px;
  }

  .section-pad { padding-block: 7rem; }

  /* Hero */
  .hero-title { font-size: 5.5rem; }
  .hero-inner { max-width: 850px; }

  /* Navigation links */
  .nav-desktop {
    gap: 2.5rem;
  }

  /* Portfolio: 4 cols with larger items */
  .portfolio-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  /* Gallery: 4 cols */
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

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

  /* Team: can fit 5 if needed */
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   TOUCH / HOVER media query
   ============================================ */
@media (hover: none) {
  /* On touch devices, show overlays more visibly */
  .portfolio-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(59,35,20,0.8) 0%, transparent 60%);
  }

  .portfolio-overlay-view {
    display: none;
  }

  .gallery-item-overlay {
    opacity: 0.5;
  }

  .team-avatar-overlay {
    opacity: 0.6;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .site-header,
  .nav-mobile,
  .whatsapp-btn,
  .mobile-cta-bar,
  .scroll-top {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }

  .hero {
    height: auto;
    min-height: unset;
  }
}

/* ============================================
   DARK MODE (optional, follows system)
   ============================================ */
/* @media (prefers-color-scheme: dark) {
   Not implementing – site uses its own warm dark theme
} */

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-anim] {
    opacity: 1;
    transform: none !important;
  }
}

/* ============================================
   SPECIFIC MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 479px) {
  /* Hero */
  .hero { min-height: 100svh; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* About badge adjustments */
  .about-image-badge {
    padding: 0.875rem 1rem;
  }

  .about-image-badge .num { font-size: 1.5rem; }

  /* Remove tab from mobile testimonials */
  .testimonial-card {
    flex: 0 0 85vw;
    padding: 1.5rem;
  }

  /* Process steps smaller */
  .process-step {
    flex: 0 0 190px;
  }

  /* Service card height */
  .service-card-image {
    height: 200px;
  }

  /* FAQ */
  .faq-question {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
  }

  /* Page hero */
  .page-hero {
    height: 50vh;
    min-height: 320px;
  }

  .page-hero-content h1 {
    font-size: 2rem;
  }

  /* Contact form */
  .contact-form-card {
    padding: 1.5rem 1.25rem;
  }

  /* Team grid: tighter on very small screens */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Portfolio overlay text */
  .portfolio-overlay h4 {
    font-size: 0.8125rem;
  }

  /* Stats */
  .stat-num {
    font-size: 2.25rem;
  }

  /* CTA banner */
  .cta-banner {
    padding-block: 4rem;
  }
}

/* ============================================
   390px – 430px (iPhone 14/15 Pro range)
   ============================================ */
@media (min-width: 390px) and (max-width: 430px) {
  .hero-title { font-size: 2.5rem; }

  .service-card-image { height: 220px; }

  .portfolio-grid { gap: 0.75rem; }

  .portfolio-item {
    border-radius: 80px 80px 8px 8px;
  }
}

/* ============================================
   412px (Samsung Galaxy)
   ============================================ */
@media (min-width: 412px) {
  .hero-title { font-size: 2.75rem; }
}