/* ==========================================================================
   Gatepro Corporate Website — responsive.css
   Wave 00 · All breakpoint adaptations (mobile-first)
   Breakpoints: sm 640 · md 768 · lg 1024 · xl 1280
   ========================================================================== */

/* --------------------------------------------------------------------------
   >= 640px (sm) — large phones, small tablets
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* --------------------------------------------------------------------------
   >= 768px (md) — tablets
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero__cta {
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   >= 1024px (lg) — laptops & desktops: desktop navigation takes over
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
  }

  .header-cta {
    display: inline-flex;
    margin-left: auto;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-menu {
    display: none;
  }

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

  .footer-grid {
    grid-template-columns: 1.7fr 0.9fr 0.8fr 1.2fr;
    gap: var(--space-12);
  }
}

/* --------------------------------------------------------------------------
   >= 1280px (xl) — large desktops
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .hero__content {
    padding-bottom: var(--space-24);
  }
}

/* --------------------------------------------------------------------------
   <= 639px (small screens) — fine-tuning only
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .hero__cta .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

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

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

/* ==========================================================================
   Wave 01 · Corporate homepage responsive rules
   ========================================================================== */

/* >= 640px (sm) */
@media (min-width: 640px) {
  .industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

/* >= 768px (md) */
@media (min-width: 768px) {
  .platforms-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Flow diagram becomes a horizontal row with right-pointing chevrons */
  .flow {
    flex-direction: row;
    gap: var(--space-10);
  }

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

  .flow__step:not(:last-child)::after {
    top: 50%;
    right: -1.44rem;
    bottom: auto;
    left: auto;
    margin-top: -0.28rem;
    margin-left: 0;
    transform: rotate(-45deg);
  }
}

/* >= 1024px (lg) */
@media (min-width: 1024px) {
  /* Featured platform: media | content editorial split */
  .platform-featured {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-16);
  }

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

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

  /* Products landing — 50/50 alternating editorial rows */
  .product-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  .product-row:nth-child(odd) .product-row__media {
    order: 2;
  }

  /* Product detail hero — split content | media */
  .product-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-16);
  }

  .principle-strip {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .user-groups {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* Extended workflow (8 steps): stay vertical until there is room for a row */
@media (min-width: 768px) and (max-width: 1023px) {
  .flow--many {
    flex-direction: column;
    gap: var(--space-7);
  }

  .flow--many .flow__step {
    flex-direction: row;
    align-items: center;
  }

  .flow--many .flow__step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -1.16rem;
    left: 50%;
    margin-top: 0;
    margin-left: -0.28rem;
    transform: rotate(45deg);
  }
}

@media (min-width: 1024px) {
  .flow--many .flow__step:not(:last-child)::after {
    right: -0.95rem;
  }
}

/* ==========================================================================
   Wave 02 Part 03 · Safentra product page responsive rules
   ========================================================================== */

/* Extra-long flows (10 steps): numbered 5×2 grid at lg — a single horizontal
   row would squeeze step labels; vertical with chevrons below lg. */
@media (min-width: 1024px) {
  .flow--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
  }

  .flow--grid .flow__step:not(:last-child)::after {
    display: none; /* numeric order (01–10) carries the sequence in grid mode */
  }
}

/* ==========================================================================
   Wave 03 Part 01 · Industries landing responsive rules
   ========================================================================== */

/* Pairs sit side-by-side from tablet up; wide entries always span the row */
@media (min-width: 768px) {
  .ind-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ind-entry--wide {
    grid-column: 1 / -1;
  }
}

/* Wide entries become an editorial media | content split on desktop */
@media (min-width: 1024px) {
  .ind-entry--wide {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-16);
    padding-top: var(--space-10);
  }

  .ind-entry--wide .ind-entry__media {
    margin-bottom: 0;
  }

  /* Mapping rows: industry name | arrow | aligned targets column */
  .map-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-6);
    padding: var(--space-5) 0;
  }
}

/* ==========================================================================
   Wave 03 Part 02 · Industry detail page responsive rules
   ========================================================================== */

@media (min-width: 1024px) {
  /* Two collaboration columns (tenant | vendor) instead of the 3-col default */
  .user-groups--two {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Platform panel — media | content split */
  .platform-panel {
    grid-template-columns: 0.95fr 1.05fr;
  }
}