/* =========================================================
   RESPONSIVE
   Loaded last so it can override component/page styles.
   Breakpoints checked: 320 / 375 / 425 / 768 / 1024 / 1440+
   ========================================================= */

/* ---------- Global overflow guard ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

/* ---------- ≤1024px : collapse navbar to mobile menu ---------- */
@media (max-width: 1024px) {
  .navbar__toggle { display: flex; }

  .navbar__nav {
    position: fixed;
    inset: 0 0 0 auto;
    top: 0;
    height: 100vh;
    width: min(320px, 85vw);
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 5.5rem var(--space-3) var(--space-3);
    transform: translateX(100%);
    transition: transform var(--duration) var(--ease);
    box-shadow: var(--shadow-lift);
    overflow-y: auto;
  }

  .navbar.is-mobile-open .navbar__nav {
    transform: translateX(0);
  }

  .navbar__list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }

  .navbar__item { width: 100%; }

  .navbar__link {
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid var(--color-line);
  }

  .navbar__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none;
    border: none;
    padding-left: var(--space-2);
    margin-bottom: 0.4rem;
  }

  .navbar__item.is-open .navbar__dropdown { display: block; }

  .navbar__cta {
    margin-top: var(--space-3);
    width: 100%;
    justify-content: center;
  }
}

/* ---------- ≤768px ---------- */
@media (max-width: 768px) {
  .section { padding-block: var(--space-5); }

  .floating-buttons {
    right: var(--space-2);
    bottom: var(--space-2);
  }

  .floating-buttons__btn {
    padding: 0.65rem 0.9rem;
    font-size: 0.78rem;
  }
}

/* ---------- ≤425px ---------- */
@media (max-width: 425px) {
  .container { padding-inline: var(--space-2); }

  .navbar__brand span:last-child {
    font-size: 0.85rem;
  }

  .btn {
    padding: 0.8rem 1.3rem;
    font-size: 0.82rem;
  }
}

/* ---------- ≤375px ---------- */
@media (max-width: 375px) {
  .navbar__nav { width: 100%; }
}

/* ---------- ≤320px ---------- */
@media (max-width: 320px) {
  .navbar__brand-mark { display: none; }
}

/* ---------- ≥1440px : cap content width, add breathing room ---------- */
@media (min-width: 1440px) {
  :root {
    --max-width: 1320px;
  }
}