/* ==========================================================================
   ANDIP LIVE — Responsive behaviour
   Breakpoints: 1100 (nav collapse), 980, 820, 640, 420
   ========================================================================== */

/* --------------------------------------------------------------------------
   <= 1100px — collapse navigation into an accessible mobile menu
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav-toggle {
    display: inline-block;
  }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-4) var(--space-5) var(--space-6);
    display: none;
  }

  .primary-nav.is-open {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
  }

  .nav-list a,
  .nav-group > .nav-group-toggle {
    width: 100%;
    padding: 0.7rem 0.75rem;
    font-size: 0.975rem;
    border-radius: var(--radius-sm);
  }

  .nav-group > .nav-group-toggle {
    justify-content: space-between;
  }

  .nav-sub {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 0.85rem;
    margin: 0.15rem 0 0.4rem;
    border-left: 2px solid var(--line);
    border-radius: 0;
  }

  .nav-sub a {
    padding: 0.55rem 0.7rem;
  }
}

/* --------------------------------------------------------------------------
   <= 980px
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    padding-block: clamp(2.5rem, 2rem + 4vw, 3.5rem);
  }

  .hero-copy {
    max-width: none;
  }

  .hero-visual {
    max-width: 660px;
    margin-inline: auto;
    width: 100%;
  }

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

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

  .grid-2-1,
  .grid-1-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step-panel-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-sidebar {
    position: static;
    max-height: none;
  }

  .docs-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem;
  }

  .docs-nav .docs-nav-sub {
    grid-column: 1 / -1;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand p {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   <= 820px
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .usecase-body {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .os-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .docs-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .tab-btn {
    min-width: 0;
    flex: 1 1 45%;
  }
}

/* --------------------------------------------------------------------------
   <= 640px
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --header-h: 62px;
  }

  .container,
  .container-narrow,
  .container-wide {
    padding-inline: var(--space-4);
  }

  .section {
    padding-block: clamp(2.5rem, 2rem + 4vw, 3.5rem);
  }

  .hero h1 {
    letter-spacing: -0.02em;
  }

  .hero-meta {
    gap: var(--space-3);
  }

  .hero-meta div {
    flex: 1 1 45%;
  }

  .stat-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .stepper {
    grid-template-columns: minmax(0, 1fr);
  }

  .step-btn {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }

  .step-btn .step-hint {
    display: none;
  }

  .step-panel-head,
  .step-panel-body {
    padding: var(--space-5) var(--space-4);
  }

  .step-nav {
    flex-direction: column;
  }

  .step-nav .btn {
    width: 100%;
  }

  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-row .btn {
    width: 100%;
  }

  .btn-row--center {
    align-items: stretch;
  }

  .card,
  .compare-panel,
  .usecase-body,
  .diagram,
  .cta-band {
    padding: var(--space-5) var(--space-4);
  }

  .usecase-head {
    padding: var(--space-4);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .diagram-scroll svg {
    min-width: 640px;
  }

  .to-top {
    right: 14px;
    bottom: 14px;
  }

  .tab-list {
    gap: 0.25rem;
  }

  .tab-btn {
    flex: 1 1 100%;
  }

  .profile-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   <= 420px
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .brand-text {
    font-size: 1rem;
  }

  .hero-tagline {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }

  .pill {
    font-size: 0.6875rem;
  }

  .hero-meta div {
    flex: 1 1 100%;
  }

  .diagram-scroll svg {
    min-width: 560px;
  }
}

/* --------------------------------------------------------------------------
   Large screens
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  :root {
    --container: 1240px;
    --container-wide: 1380px;
  }
}

/* --------------------------------------------------------------------------
   Touch / hover capability
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .btn:hover {
    transform: none;
  }

  .step-btn:hover {
    transform: none;
  }
}