/* =========================================================
   M&Co PET TRAVELLERS — Responsive Stylesheet
   ========================================================= */

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.4rem}
  .strip{grid-template-columns:repeat(2,1fr);row-gap:1.8rem}
  .split{grid-template-columns:1fr;gap:2rem}
  .split img{max-height:420px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .nav-links{gap:1.1rem}
}

/* ---------- Mobile nav breakpoint ---------- */
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{gap:.6rem}
  .site-header .nav{padding:.4rem 0}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:.5rem 22px 1.2rem;
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .nav-links.open{max-height:520px;padding-top:1rem}
  .nav-links a{width:100%;padding:.85rem 0;font-size:1rem;border-bottom:1px solid var(--line)}
  .nav-links a::after{display:none}
  .nav-cta{gap:.5rem}
  .nav-cta .btn span.txt{display:none}
  .nav-cta .btn{padding:.65rem .8rem}
  .nav-cta .btn .icon{width:1.15em;height:1.15em}
  .site-header .nav{position:relative}

  /* keep the logo + wordmark compact so it never crowds the WhatsApp icon / hamburger */
  .brand img{width:62px;height:62px}
  .brand-text b{font-size:1.35rem}
  .brand-text span{font-size:.72rem;letter-spacing:2px}
}

/* ---------- Small mobile ---------- */
@media (max-width:680px){
  body{font-size:16px}
  section{padding:52px 0}
  .container{padding:0 18px}

  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2.2rem}
  .split img{max-height:260px}
  .split{gap:1.6rem}

  /* ---- Hero: full-bleed background, comfortably-sized text ---- */
  .hero{min-height:82vh;min-height:82svh}
  .hero .container{padding-top:40px;padding-bottom:40px}
  .hero p{font-size:1rem;max-width:100%}
  .hero-badges{gap:1.4rem 1.1rem;margin-top:1.8rem}
  .hero-badges b{font-size:1.35rem}
  .hero-badges span{font-size:.68rem}

  /* ---- Section headings scale down a touch, stay legible ---- */
  .section-head{margin:0 auto 2.2rem}
  .eyebrow{font-size:.68rem}

  /* ---- Page hero (inner pages) ---- */
  .page-hero{padding:64px 0 50px}
  .page-hero p{font-size:.98rem}

  /* ---- Cards & service tiles: tighten padding so text has room ---- */
  .service{padding:1.6rem 1.3rem}
  .card-body{padding:1.2rem 1.2rem 1.4rem}
  .step{padding:1.9rem 1.2rem 1.4rem}
  .quote{padding:1.5rem}
  .info-card{padding:1rem 1.1rem;gap:.8rem}
  .info-card .ico{width:40px;height:40px;font-size:1.05rem}
  .form-card{padding:1.5rem 1.3rem}

  /* ---- Card price + button row: never overlap on narrow screens ---- */
  .card .card-foot{gap:.5rem 1rem}
  .card .price{font-size:.92rem}

  /* ---- Filters / search / sort ---- */
  .filters{gap:.5rem}
  .chip{padding:.5rem 1rem;font-size:.82rem}
  .searchbar input{padding:.9rem 1.1rem 0.9rem 2.6rem;font-size:.92rem}
  .searchbar .icon{left:1rem}

  /* ---- Newsletter ---- */
  .newsletter{padding:1.8rem;flex-direction:column;align-items:flex-start}
  .newsletter input{min-width:0;width:100%}
  .newsletter form{width:100%}
  .newsletter form .btn{width:100%;justify-content:center}

  /* ---- Floating WhatsApp button: icon only, doesn't dominate the corner ---- */
  .wa-float span{display:none}
  .wa-float{padding:1rem;border-radius:50%}

  /* ---- CTA band ---- */
  .cta-band{padding:2rem 1.3rem}

  /* ---- Right-size buttons for mobile so they don't dominate the screen ---- */
  .btn{padding:.72rem 1.3rem;font-size:.9rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .plan-modal-actions .btn{padding:.75rem 1.3rem}
  .plan-modal{padding:1.7rem 1.4rem 1.5rem}

  /* ---- Footer: keep columns readable, not cramped ---- */
  .site-footer{padding:2.6rem 0 1.4rem}
  .footer-brand img{width:44px;height:44px}
}

@media (max-width:400px){
  .strip{grid-template-columns:1fr}
  .brand-text span{letter-spacing:1.5px}
  .hero-badges{justify-content:space-between}
}

/* ---------- Strip: switch dividers from vertical to horizontal once it stacks ---------- */
@media (max-width:680px){
  .strip{grid-template-columns:1fr 1fr;row-gap:1.8rem}
  .strip > div{padding:.8rem 1.2rem}
  .strip > div:not(:last-child)::after{display:none}
  .strip > div:not(:nth-child(2n))::after{
    display:block;top:auto;left:6%;right:6%;bottom:-0.9rem;width:auto;height:1px;
    background:linear-gradient(to right,transparent,rgba(201,162,39,.35),transparent);
  }
  .strip .ico{width:40px;height:40px;font-size:1rem}
}
@media (max-width:400px){
  .strip{grid-template-columns:1fr}
  .strip > div:not(:last-child)::after{
    display:block;top:auto;left:12%;right:12%;bottom:-0.9rem;width:auto;height:1px;
  }
}

/* ---------- Advanced UI add-ons: mobile adjustments ---------- */
@media (max-width:680px){
  .back-to-top{right:16px;bottom:86px;width:42px;height:42px;font-size:1rem}
  .dest-controls{flex-direction:column;align-items:stretch}
  .dest-controls select{width:100%}
  .faq-q{font-size:.95rem;padding:1.05rem 1.1rem}
  .faq-a p{padding:0 1.1rem 1.1rem;font-size:.92rem}
}

/* ---- Mobile only: keep the man & dog in view on the home hero ---- */
@media (max-width:680px){
  .hero::before{background-position:0 0,0 0,80% center}
}