/* ==================================================
   RESPONSIVE REFINEMENTS
   Purpose:
   Most of the site is intrinsically responsive — the
   grids auto-fit and the type scale is fluid, so very
   few breakpoints are needed. This file holds the
   deliberate adjustments that those mechanisms cannot
   express, ordered from the largest viewport down.

   Breakpoints in use:
     1440px+  large desktop
     1200px   desktop
      992px   small desktop / large tablet
      768px   tablet
      576px   large phone
      380px   small phone
================================================== */

/* ==================================================
   1440px AND ABOVE — LARGE DESKTOP
   Let the widest sections breathe without letting the
   reading measure grow uncomfortable.
================================================== */

@media (min-width: 1440px) {
  :root {
    --container-gutter: 3rem;
  }

  .hero-slide__title { max-width: 15ch; }

  /* Four across instead of three once there is genuinely room. */
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
}

/* ==================================================
   1200px AND BELOW — DESKTOP
================================================== */

@media (max-width: 1200px) {
  .mega-menu {
    max-width: calc(100vw - 2.5rem);
  }

  /* Mega-menu column counts are owned entirely by css/header.css, which sets
     them per menu. A blanket override here previously fought that and silently
     won, so the count no longer matched what the menu asked for. */
}

/* ==================================================
   992px AND BELOW — SMALL DESKTOP / LARGE TABLET
================================================== */

@media (max-width: 992px) {
  /* The hero drops its side panel, so the copy gets the full width. */
  .hero-slide__content { max-width: none; }
  .hero-slide__text { max-width: 62ch; }

  /* Sticky sidebars stop sticking once they sit above the content. */
  .page-layout__aside,
  .faq-layout__nav {
    position: static;
  }

  .case-study-header { grid-template-columns: 1fr; }
}

/* ==================================================
   768px AND BELOW — TABLET
================================================== */

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --header-height-compact: 58px;
  }

  /* Section headings centre-align only where the layout is single column
     and the copy is short enough for it to read as intentional. */
  .section-heading-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-band__inner { gap: var(--s-6); }
  .cta-band__actions .btn { flex: 1 1 auto; }

  /* Tables and other intrinsically wide content scroll inside their own
     container so the page body never scrolls sideways. */
  .stack-table-wrap { margin-inline: 0; }

  .hero-controls {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--s-4);
  }

  .hero-pagination { justify-content: center; }

  .pager { gap: var(--s-6); }
  .pager__link { flex: 1 1 100%; }
}

/* ==================================================
   576px AND BELOW — LARGE PHONE
================================================== */

@media (max-width: 576px) {
  /* Full-width actions read better than two cramped pills. */
  .hero-slide__actions .btn,
  .page-hero__actions .btn,
  .form-actions .btn {
    flex: 1 1 100%;
  }

  .form-actions { gap: var(--s-3); }
  .form-actions__note { max-width: none; }

  /* Slightly tighter cards so content is not squeezed by padding. */
  .card,
  .infographic,
  .contact-form-card {
    padding: var(--s-5);
  }

  .faq-item__question { padding: var(--s-4) var(--s-5); font-size: var(--fs-body); }
  .faq-item__answer-body { padding: 0 var(--s-5) var(--s-5); }

  .service-card--numbered .service-card__index { font-size: 1.75rem; top: var(--s-4); right: var(--s-5); }

  .site-footer__legal { flex-direction: column; align-items: flex-start; }

  /* Two-column footer collapses to one so link targets stay comfortable. */
  .site-footer__main { grid-template-columns: 1fr; }
}

/* ==================================================
   380px AND BELOW — SMALL PHONE
================================================== */

@media (max-width: 380px) {
  :root {
    --container-gutter: 1rem;
  }

  .brand-lockup__tagline { display: none; }
  .brand-lockup__mark { width: 32px; height: 34px; }
  .brand-lockup__name { font-size: 0.95rem; }

  .announcement-bar__message { font-size: 0.75rem; }

  .whatsapp-float {
    width: 52px;
    height: 52px;
  }

  .whatsapp-float__icon { width: 28px; height: 28px; }

  .infographic--timeline .infographic__step {
    grid-template-columns: 36px 1fr;
    gap: var(--s-3);
  }

  .infographic--timeline .infographic__marker { width: 36px; height: 36px; }
  .infographic--timeline .infographic__step::before { left: 17px; top: 30px; }
}

/* ==================================================
   POINTER & HOVER CAPABILITY
   Hover affordances are pointless on touch and can leave
   sticky states behind, so they are scoped to devices
   that genuinely hover.
================================================== */

@media (hover: none) {
  .card--interactive:hover,
  .technology-card:hover,
  .industry-card:hover,
  .location-card:hover,
  .portfolio-card:hover,
  .hover-lift:hover {
    transform: none;
    box-shadow: none;
  }

  .btn:hover { transform: none; }

  /* Larger tap targets where a hover state used to carry the affordance. */
  .mega-menu__link,
  .aside-links__link,
  .footer-column__link {
    padding-block: var(--s-3);
  }
}

/* ==================================================
   PRINT
   A clean, ink-efficient rendering for quotes and
   proposals printed from a service page.
================================================== */

@media print {
  .announcement-bar,
  .site-header,
  .mobile-nav,
  .nav-backdrop,
  .mobile-call-bar,
  .whatsapp-float,
  .search-overlay,
  .hero-controls,
  .cta-band,
  .site-footer__main,
  .footer-areas,
  .footer-social {
    display: none !important;
  }

  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
  }

  .section,
  .page-hero {
    padding-block: 1.2rem;
    background: none !important;
    color: #000000 !important;
  }

  .page-hero__title,
  .section-heading__title,
  h1, h2, h3 { color: #000000 !important; }

  .card,
  .infographic,
  .infographic__node {
    border: 1px solid #CCCCCC;
    box-shadow: none;
    break-inside: avoid;
  }

  /* Every answer prints, whatever its open state was on screen. */
  .faq-item__answer {
    max-height: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
  }
}