/* ============================================================
   REVLINE — responsive.css
   Mobile-first. Base = mobile. Breakpoints expand upward.
   Nav shows desktop links at 992px+.
   ============================================================ */


/* ============================================================
   MOBILE BASE OVERRIDES ( < 640px )
   ============================================================ */

/* Collapse multi-column grids */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

/* Split → stacked, media first */
.split { grid-template-columns: 1fr; }
.split__media { order: -1; }
.split__badge { right: var(--sp-4); bottom: -16px; }

/* Masonry → single column */
.masonry { columns: 1; }

/* Form rows stack */
.form-row { grid-template-columns: 1fr; }

/* Nav: hide inline links + desktop CTA, show hamburger */
.nav__links { display: none; }
.nav__actions .btn:not(.nav__toggle) { display: none; }
.nav__toggle { display: flex; }

/* Hero content spacing */
.hero__content { padding-block: 7rem 5rem; }

/* Steps labels hide on very small */
.step__label { display: none; }

/* Timeline tighter */
.timeline::before { left: 22px; }
.timeline__step { grid-template-columns: 46px 1fr; gap: var(--sp-4); }
.timeline__marker { width: 46px; height: 46px; }

/* Footer stacks */
.footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
.footer__bottom { flex-direction: column; text-align: center; }

/* CTA / reviews full-bleed feel */
.review-card { flex-basis: 88%; padding: var(--sp-6); }

/* Lightbox nav buttons closer */
.lightbox__prev { left: var(--sp-3); }
.lightbox__next { right: var(--sp-3); }


/* ============================================================
   SMALL ( 640px+ )
   ============================================================ */
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 2; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .step__label { display: block; }
  .hero__content { padding-block: 8rem 6rem; }
}


/* ============================================================
   TABLET ( 768px+ )
   ============================================================ */
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  .footer__bottom { flex-direction: row; text-align: left; }
  .review-card { flex-basis: clamp(320px, 60%, 400px); }
}


/* ============================================================
   DESKTOP NAV + LAYOUT ( 992px+ )
   ============================================================ */
@media (min-width: 992px) {
  .nav__links { display: flex; }
  .nav__actions .btn:not(.nav__toggle) { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__drawer { display: none !important; }

  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .masonry { columns: 3; }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}


/* ============================================================
   LARGE DESKTOP ( 1280px+ )
   ============================================================ */
@media (min-width: 1280px) {
  .masonry { columns: 3; }
}


/* ============================================================
   TOUCH DEVICES — always show gallery/card overlays a bit
   ============================================================ */
@media (hover: none) {
  .gallery-item__overlay { opacity: 1; background: linear-gradient(180deg, transparent 55%, rgba(7,7,7,0.82) 100%); }
  .service-card__media img { transform: none; }
}


/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .nav, .footer, .fab-stack, .cookie, .hero__scroll, .marquee, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
}