/* ============================================================
   DIGITAL ONE REVIEWS — responsive.css
   Breakpoints: 1280 / 1024 / 820 / 640 / 420
   ============================================================ */

/* ---------- Large laptop ---------- */
@media (max-width:1280px){
  .testi-arrow--prev{left:.6rem}
  .testi-arrow--next{right:.6rem}
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .video-masonry{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer-main{grid-template-columns:1fr 1fr;gap:2.4rem}
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .hero-visual .hero-card-stack{min-height:340px;max-width:560px}
}

/* Social icons only have room on wide desktops */
@media (max-width:1400px){
  .social-mini{display:none}
}

/* ---------- Collapse nav to drawer once the horizontal bar runs out of room ---------- */
@media (max-width:1240px){
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;inset:var(--header-h) 0 auto 0;z-index:990;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;box-shadow:var(--shadow-lg);
    padding:1rem 6% 1.6rem;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .45s var(--ease),visibility .45s;
  }
  .main-nav.is-open{max-height:80vh;overflow-y:auto;visibility:visible}
  .main-nav a{color:var(--navy-ink) !important;padding:.9rem .4rem;font-size:.92rem;white-space:normal;border-bottom:1px solid var(--gray-100)}
  .main-nav a.is-active::after{display:none}
  .dropdown{
    position:static;min-width:0;box-shadow:none;padding:0 0 0 1rem;
    opacity:1;visibility:visible;transform:none;display:none;
  }
  .has-dropdown.is-open .dropdown{display:block}
  .header-cta .btn{display:none}
}

/* ---------- Tablet / iPad ---------- */
@media (max-width:820px){
  :root{--header-h:70px}

  .contact-split{grid-template-columns:1fr}
  .contact-info-card{position:static}
  .split{grid-template-columns:1fr}
  .featured-post{grid-template-columns:1fr}
  .featured-post .thumb{min-height:240px}
  .stats{gap:1.2rem}
  .cta-band{flex-direction:column;align-items:flex-start}
}

/* ---------- Large phones ---------- */
@media (max-width:640px){
  body{font-size:1rem}
  .grid-2,.grid-3,.grid-4,.portfolio-grid,.steps{grid-template-columns:1fr}
  .video-masonry{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:2rem}
  .footer-main{grid-template-columns:1fr;gap:2rem;padding-block:3.5rem 2.4rem}
  .footer-bottom{flex-direction:column;text-align:center;justify-content:center}
  .hero{min-height:auto}
  .hero--photo .hero-bg{background:
    linear-gradient(180deg,rgba(4,21,48,.86) 0%,rgba(4,21,48,.74) 45%,rgba(4,21,48,.62) 100%),
    url("../images/hero/hero-reviews.jpg") center top/cover no-repeat}
  .hero-actions .btn{width:100%}
  .review-float{position:static;margin-bottom:1rem;max-width:100%;animation:none}
  .hero-visual .hero-card-stack{min-height:0}
  .blog-toolbar{flex-direction:column;align-items:stretch}
  .blog-search{max-width:none}
  .testi-arrow{display:none}
  .back-top{left:1rem;bottom:1rem;width:44px;height:44px}
}

/* ---------- Small phones ---------- */
@media (max-width:420px){
  .card,.step{padding:1.6rem 1.3rem}
  .btn{padding:.85rem 1.5rem;font-size:.9rem}
  .brand img,.brand svg{height:32px}
  .section-head{margin-bottom:2.2rem}
  .form-panel{padding:1.5rem 1.2rem}
}