/* ==========================================================================
   AQUAVOLTX — responsive layer (mobile-first; min-width queries)
   Breakpoints follow Bootstrap 5: sm 576, md 768, lg 992, xl 1200, xxl 1400
   ========================================================================== */

/* Very small phones (320–359) */
@media (max-width: 359.98px) {
  .container { padding-inline: 16px; }
  .brand-word { font-size: 1rem; letter-spacing: 0.04em; }
  .brand-mark { width: 32px; height: 32px; }
  .lang-switch { padding-inline: 0.55em; }
  .lang-switch .icon { display: none; }
  .hero-actions .btn { width: 100%; }
  .btn-lg { padding-inline: 1.1em; }
  #formSubmit { width: 100%; min-width: 0; }
}

@media (max-width: 575.98px) {
  .hero-actions .btn { flex: 1 1 100%; }
  .cta-band-actions .btn { flex: 1 1 100%; }
  #formSubmit { width: 100%; }
  .well-section { max-width: 420px; }
  .hero-float { display: none; }
  .form-shell { padding: var(--space-md) var(--space-sm); border-radius: var(--radius-lg); }
  .faq-q { padding: var(--space-sm) var(--space-md); font-size: var(--fs-sm); }
  .faq-a { padding: 0 var(--space-md) var(--space-sm); font-size: var(--fs-sm); }
  .testi-card { padding: var(--space-md); }
  .to-top { width: 44px; height: 44px; }
}

@media (min-width: 576px) {
  .figures { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .figure-item { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .form-shell { padding: var(--space-lg); }
}

@media (min-width: 768px) {
  .container { padding-inline: 32px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .cta-band-box { grid-template-columns: 1fr auto; padding: var(--space-xl); }
  .header-cta { display: inline-flex; }
  .testi-track { grid-auto-columns: calc((100% - var(--space-md)) / 2); }
}

/* Desktop navigation */
@media (min-width: 992px) {
  :root { --header-h: 76px; }
  .menu-toggle { display: none; }
  .primary-nav {
    position: static; inset: auto; padding: 0; background: none; color: inherit;
    flex-direction: row; overflow: visible;
    visibility: visible; opacity: 1; transform: none; transition: none;
  }
  .primary-nav .nav-list { flex-direction: row; }
  .primary-nav .nav-list li { opacity: 1; transform: none; }
  .primary-nav .nav-link { font-size: var(--fs-sm); font-weight: 500; padding: 0.5rem 0.7rem; border: 0; }
  .primary-nav .nav-ic, .primary-nav::before { display: none; }
  .primary-nav { height: auto; }
  .primary-nav .nav-link::after { inset-inline: 0.7rem; width: auto; inset-block-end: 0.1rem; }
  .nav-drawer-actions { display: none; }
  .header-actions { margin-inline-start: var(--space-sm); }
  .site-header.is-scrolled .header-bar { min-height: 66px; }

  .hero { padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl); min-height: min(100vh, 920px); min-height: min(100svh, 920px); display: flex; align-items: center; }
  .hero > .container { width: 100%; }

  .service-group { display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: var(--space-xl); }
  .service-group-head { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-md)); align-self: start; }
  .service-group + .service-group { margin-block-start: var(--space-lg); }
  .service-visual { height: 164px; }

  .contact-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-md)); }
  .testi-track { grid-auto-columns: calc((100% - 2 * var(--space-md)) / 3); }
}

/* Header gets crowded between 992 and 1199: keep the CTA in the page, not the bar */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-cta { display: none; }
  .lang-switch-label { display: none; }
}

@media (min-width: 1200px) {
  .service-group[data-group="integrated"] .service-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { gap: var(--space-md); }

}

@media (min-width: 1200px) {
  .container { max-width: 1200px; }
}

/* Process journey: shaft in the centre, cards alternate on both sides */
@media (min-width: 992px) {
  .journey { --node: 64px; }
  .journey-shaft { inset-inline-start: calc(50% - 9px); }
  .journey-list { gap: 0; }
  .journey-step { grid-template-columns: 1fr var(--node) 1fr; gap: var(--space-lg); }
  .journey-step + .journey-step { margin-block-start: -64px; }
  .journey-node { grid-column: 2; grid-row: 1; }
  .journey-step:nth-child(odd) .journey-card { grid-column: 1; grid-row: 1; transform: translateX(calc(-36px * var(--dir))) scale(0.98); }
  .journey-step:nth-child(even) .journey-card { grid-column: 3; grid-row: 1; transform: translateX(calc(36px * var(--dir))) scale(0.98); }
  .journey-step.is-active .journey-card { transform: none; }
  .journey-step:nth-child(odd) .journey-card::before { inset-inline-end: auto; inset-inline-start: 100%; width: var(--space-lg); }
  .journey-step:nth-child(even) .journey-card::before { width: var(--space-lg); }
  .journey-card { max-width: 30rem; }
  .journey-step:nth-child(odd) .journey-card { justify-self: end; }
}

@media (min-width: 1400px) {
  .container { max-width: 1280px; }
}

@media (min-width: 1920px) {
  :root { --fs-base: 1.125rem; }
  .container { max-width: 1360px; }
}

/* Short landscape phones: keep the hero from swallowing the screen */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .primary-nav .nav-link { padding-block: 0.5rem; font-size: 1.1rem; }
}

@media print {
  .site-header, .wa, .cta-band, .hero-figure, .menu-toggle, .marquee, .to-top, .testi-controls, .testi-dots, .mobile-bar { display: none !important; }
  .hero { background: none; color: #000; padding-top: 0; }
  .testi-track { display: block; }
  body { font-size: 11pt; }
}

/* Phones: quick-action bar replaces the floating WhatsApp button */
@media (max-width: 767.98px) {
  .mobile-bar { display: grid; }
  body { padding-block-end: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .wa-fab { display: none; }
  .wa { inset-block-end: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .js .wa { animation: none; }
  .to-top { inset-block-end: calc(100px + env(safe-area-inset-bottom, 0px)); inset-inline-start: auto; inset-inline-end: 14px; }
}

/* Galleries, lightbox and inner pages */
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap: var(--space-md); }
  .lb-stage { padding: 76px 88px 8px; }
  .legal-contact { grid-template-columns: 1fr auto; align-items: center; }
  .post-card.is-featured { display: grid; grid-template-columns: 1.15fr 1fr; }
  .post-card.is-featured .post-visual { aspect-ratio: auto; min-height: 100%; }
  .post-card.is-featured .post-card-body { justify-content: center; padding: var(--space-xl); gap: var(--space-sm); }
}
@media (min-width: 992px) {
  .vs-row, .gshow { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.85fr); gap: var(--space-md); align-items: stretch; }
  .vs-row { grid-template-areas: "screen list" "bar ."; }
  .vs-col { grid-area: screen; min-width: 0; }
  .vs-row > .vs-bar { grid-area: bar; }
  .vs-side, .gs-side { height: 0; min-height: 100%; max-height: none; overflow: hidden; }
  .vs-list, .gs-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
  .legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-2xl); }
  .legal-toc { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-md)); }
  .post-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-2xl); }
  .post-body { padding: var(--space-xl) var(--space-2xl); }
  .post-side { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-md)); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; scrollbar-width: thin; }
}
@media (min-width: 1200px) {
  .gallery-grid { grid-auto-rows: 230px; }
}
/* Phones: arrows move to the bottom corners, clear of the photo */
@media (max-width: 767.98px) {
  .lb-prev, .lb-next { inset-block-start: auto; inset-block-end: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 575.98px) {
  .vs-meta { padding: var(--space-md); }
  .vs-desc { display: none; }
  .vs-play { width: 70px; height: 70px; }
  .vs-play .icon { width: 30px; height: 30px; }
  .vs-corner { display: none; }
  .vs-screen { border-radius: var(--radius-lg); }
  .vs-item { grid-template-columns: 104px 1fr; }
  .partner { min-width: 170px; height: 70px; padding: 0 1rem; }
  .footer-pay { justify-content: flex-start; }
}
@media print {
  .social-dock, .partners, .footer-pay,
  .lightbox, .gallery-filters, .videos, .social-list, .footer-follow, .legal-toc, .legal-contact, .post-side { display: none !important; }
  .page-hero { background: none; color: #000; padding-block: 0 1rem; }
}