/* ==========================================================================
   MANXEL — responsive.css
   Breakpoint-specific overrides. Base styles are fluid (clamp/rem) by
   design in style.css; this file handles layout changes that need a
   hard breakpoint rather than a fluid value.
   ========================================================================== */

/* ---- Large desktop polish ---------------------------------------------- */
@media (min-width: 1400px) {
  .container { max-width: 1240px; }
}

/* ---- Tablet / small desktop (≤991px) ----------------------------------- */
@media (max-width: 991px) {
  section { padding: 4.5rem 0; }

  .carousel-control-prev, .carousel-control-next { display: none; }

  /* Editorial services collapses into a stacked accordion with its own thumb */
  .service-editorial { flex-direction: column; }
  .service-visual { display: none; }
  .service-accordion-thumb { display: block; }
  .service-row-detail.is-open-mobile { max-height: 320px; }

  .timeline { padding-left: 2.2rem; }
  .timeline-dot { left: -2.2rem; }
}

/* ---- Mobile (≤767px) ---------------------------------------------------- */
@media (max-width: 767px) {
  section { padding: 4rem 0; }

  .hero .carousel-item { padding-top: 6.5rem; padding-bottom: 2rem; }
  .hero-panel, .hero-panel-alt { padding: 1.8rem; }
  .hero-trust-tags { gap: 0.4rem 1rem; }
  .hero-trust-tags span { font-size: 0.82rem; }

  .page-header { padding: 7.5rem 0 3.5rem; }

  .portfolio-card { min-height: 220px; }
  .portfolio-card.is-featured { min-height: 320px; }

  .service-row h3 { font-size: 1.2rem; }

  .cta-inner h2 { font-size: 1.6rem; }
}

/* ---- Small mobile (≤575px) ----------------------------------------------- */
@media (max-width: 575px) {
  .hero-copy h1 { font-size: 1.9rem; max-width: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-cta, .hero-actions .btn-ghost { justify-content: center; width: 100%; margin-left: 0; }

  .hero-indicators, .hero-arrow { display: none; }

  .about-photo img { aspect-ratio: 16/10; }

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

  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Ensure no horizontal scroll on very narrow viewports ---------------- */
@media (max-width: 380px) {
  .container { padding-left: 1.1rem; padding-right: 1.1rem; }
  .enquiry-form { padding: 1.5rem; }
}