/* ==========================================================================
   REAL DECOR — Responsive overrides
   Mobile-first base lives in main.css/components.css; this file holds
   breakpoint-specific structural changes (column counts, stacking, nav).
   ========================================================================== */

/* ----- ≤1279px : tighten desktop nav gaps ----- */
@media (max-width: 1279px){
  .nav-main{ gap: 16px; }
}

/* ----- ≤1100px : gallery 5 → 3, features 4 → 2 ----- */
@media (max-width: 1100px){
  .gallery-grid--5{ grid-template-columns: repeat(3, 1fr); }
  .features-row{ grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .cards-grid--4{ grid-template-columns: repeat(2, 1fr); }
  .side-cta{ right: 12px; }
}

/* ----- ≤1023px : switch to mobile navigation ----- */
@media (max-width: 1023px){
  .nav-main{ display: none; }
  .site-header__phone{ display: none; }
  .site-header__actions .btn{ display: none; }
  .nav-toggle{ display: flex; }
  .site-header.is-hidden{ transform: none; }
  .site-header__inner{ padding-inline: var(--gutter); }

  .footer-top{ grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .footer-brand-col{ grid-column: 1 / -1; }

  .meta-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 24px; }

  .gallery-grid--4{ grid-template-columns: repeat(2, 1fr); }
  .split-facts{ grid-template-columns: 1fr; }
  .page-hero{ height: 54vh; min-height: 400px; }
  .page-hero--tall, .page-hero--home{ height: 78vh; min-height: 480px; }
}

/* ----- ≤900px : category / service grids to 2 columns ----- */
@media (max-width: 900px){
  .categories-grid{ grid-template-columns: repeat(2, 1fr); }
  .categories-grid > .card-category:first-child{
    grid-column: 1 / -1;
    height: 360px;
  }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .cards-grid--3{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid--3{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid--5{ grid-template-columns: repeat(2, 1fr); }
  .brand-row__desc{ display: none; }
  .to-top{ right: 16px; bottom: 92px; }
}

/* ----- ≤767px : full stack ----- */
@media (max-width: 767px){
  :root{ --header-h: 76px; --header-h-scrolled: 64px; }

  .section-head{ flex-direction: column; align-items: flex-start; }
  .section-head__aside{ max-width: none; }

  .grid-12{ display: block; }
  .grid-12 > *{ margin-bottom: var(--grid-gap); }
  .grid-12 > *:last-child{ margin-bottom: 0; }

  .categories-grid{ grid-template-columns: 1fr; }
  .categories-grid > .card-category:first-child,
  .categories-grid > .card-category:nth-child(2){ height: 320px; }
  .services-grid{ grid-template-columns: 1fr; }
  .cards-grid--2,
  .cards-grid--3,
  .cards-grid--4{ grid-template-columns: 1fr; }
  .features-row{ grid-template-columns: 1fr; }
  .gallery-grid--2,
  .gallery-grid--3,
  .gallery-grid--4,
  .gallery-grid--5{ grid-template-columns: 1fr; }
  .aspect--21-9{ aspect-ratio: 16 / 9; }

  .projects-grid > *{ grid-column: 1 / -1 !important; grid-row: auto !important; }
  .projects-grid{
    display: flex; flex-direction: column; gap: var(--grid-gap);
    grid-auto-rows: auto;
  }
  .projects-grid .card-project{ min-height: 280px; }

  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 12px; }

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

  .process-item{ grid-template-columns: 56px 1fr; }

  .mobile-cta{ display: grid; }
  body{ padding-bottom: 0; }
  .has-mobile-cta{ padding-bottom: 60px; }

  .stat-grid{ grid-template-columns: repeat(2, 1fr) !important; row-gap: 32px; }

  .lightbox__prev, .lightbox__next{ width: 38px; height: 38px; }
  .lightbox__close{ top: 14px; right: 14px; width: 38px; height: 38px; }

  /* Keep only to-top on small screens — contacts live in the bottom bar */
  .side-cta{
    top: auto; bottom: 76px; transform: none;
    right: 12px;
  }
  .side-cta__cluster,
  .side-cta__btn--callback{ display: none; }
  .side-cta__btn::after{ display: none; }

  .page-hero{ height: auto; min-height: 360px; padding-top: 28vh; }
  .page-hero--home{ min-height: 100svh; padding-top: 40vh; }
}

/* ----- ≤480px ----- */
@media (max-width: 480px){
  .footer-top{ grid-template-columns: 1fr; }
  .meta-grid{ grid-template-columns: 1fr; }
  .stat-grid{ grid-template-columns: 1fr !important; }
  .btn{ padding: 15px 24px; }
  .review-nav{ gap: 8px; }
  .gallery-grid--2{ grid-template-columns: 1fr; }
}

/* ----- Large screens : loosen container a touch ----- */
@media (min-width: 1600px){
  :root{ --container: 1480px; }
}