/* ==========================================================================
   RENTIFY — Responsive Overrides
   Breakpoints follow Bootstrap 5.3 grid: xl 1200, lg 992, md 768, sm 576
   ========================================================================== */

/* ---------- Large Desktop (>1400px) ---------- */
@media (min-width: 1400px) {
  :root {
    --container-padding-x: 2rem;
  }
}

/* ---------- Desktop / Small Desktop (992px - 1199px) ---------- */
@media (max-width: 1199.98px) {
  :root {
    --phone-width: 260px;
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

/* ---------- Tablet (768px - 991px) ---------- */
@media (max-width: 991.98px) {
  :root {
    --navbar-height: 72px;
    --navbar-height-scrolled: 62px;
    --section-spacing-y: 4.5rem;
    --card-padding: 1.5rem;
    --phone-width: 240px;
  }

  .navbar-links {
    position: fixed;
    top: var(--navbar-height-scrolled);
    left: 0;
    right: 0;
    background-color: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-md) var(--container-padding-x);
    border-bottom: var(--border-width) solid var(--color-border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition-base);
  }

  .navbar-links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .navbar-link {
    width: 100%;
    padding-block: var(--space-sm);
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .navbar-link:last-child {
    border-bottom: none;
  }

  .navbar-link.is-active::after {
    display: none;
  }

  .navbar-toggle {
    display: inline-flex;
  }

  .navbar-cta .btn-rentify:not(.navbar-toggle-btn) {
    display: none;
  }

  .cta-band-grid {
    grid-template-columns: 1fr;
  }

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

  .faq-layout-card {
    flex-direction: column;
  }

  .faq-tabs-nav {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    border-right: none;
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .faq-tab-item {
    flex: 1 1 0;
  }

  .faq-panels {
    width: 100%;
  }
}

/* ---------- Mobile (up to 767px) ---------- */
@media (max-width: 767.98px) {
  :root {
    --container-padding-x: 1.25rem;
    --section-spacing-y: 3.5rem;
    --card-padding: 1.5rem;
    --button-height: 50px;
    --phone-width: 220px;
  }

  .section-header {
    margin-bottom: var(--space-xl);
  }

  .container-rentify {
    max-width: 95%;
  }

  .persona-card {
    padding: var(--space-xl) var(--space-lg);
  }

  .stat-inline {
    gap: var(--space-lg);
  }

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

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
  }

  .btn-rentify {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch !important;
  }

  .cta-download-col {
    padding: var(--space-lg);
  }

  .how-it-works-section {
    display: none;
  }

  .cta-band {
    padding: var(--space-xl) 0 0 0 !important;
  }

  .text-display {
    font-size: 2.25rem;
  }

  .hero-img {
    order: -1;
  }

  .navbar-inner {
    max-width: 95%;
  }

  .text-body-lg {
    font-size: 1rem;
  }

  .hero-bg-grid {
    /* padding-top: calc(var(--navbar-height)) !important; */
    padding-top: 8rem !important;
  }

  .accordion-rentify .accordion-button {
    font-size: 1.125rem;
  }

  .step-connected-list {
    display: flex;
    gap: 1.5rem;
    flex-direction: column;
  }

  .vendor-benifit {
    flex-direction: column !important;
  }

  .cta-band {
    background-position: 0;
  }

  .phone-preview.qr-main {
    padding-top: 4rem;
    transform: scale(1.5);
    height: 560px;
  }

  .app-screen-placeholder.qr-main {
    padding: var(--space-3xl) var(--space-lg);
  }

  .document-preview {
    margin-top: 3rem !important;
  }

  .partner-download .cta-band {
    background-position: 0;
  }

  /* ---------- Small Mobile (up to 480px) ---------- */
  @media (max-width: 480px) {
    .footer-grid {
      grid-template-columns: 1fr;
    }

    .back-to-top {
      right: var(--space-md);
      bottom: var(--space-md);
      width: 56px;
      height: 56px;
    }
  }

  /* ---------- No horizontal scroll safeguard ---------- */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ---------- Responsive: Tablet ---------- */

@media (max-width: 1199.98px) {

  .wf-node--customer-1,
  .wf-node--customer-2 {
    width: 26%;
  }

  .wf-node--vendor-1,
  .wf-node--vendor-2 {
    width: 26%;
    left: 74%;
  }

  .wf-node--hub {
    width: 30%;
    left: 35%;
  }

  .workflow-card {
    padding: var(--space-md);
  }

  .workflow-card-hub {
    padding: var(--space-lg);
  }
}

/* ---------- Responsive: Mobile / Tablet vertical journey ---------- */

@media (max-width: 991.98px) {
  .workflow-canvas {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
  }

  .workflow-svg {
    display: none;
  }

  .workflow-node {
    position: static;
    width: 100% !important;
    left: auto;
    top: auto;
    justify-content: flex-start !important;
  }

  .wf-node--vendor-1 .workflow-node-label,
  .wf-node--vendor-2 .workflow-node-label {
    align-self: flex-start;
  }

  .wf-node--customer-1 {
    order: 1;
  }

  .wf-node--customer-2 {
    order: 2;
  }

  .wf-node--hub {
    order: 3;
  }

  .wf-node--vendor-1 {
    order: 4;
  }

  .wf-node--vendor-2 {
    order: 5;
  }

  .wf-chain-1 {
    order: 6;
  }

  .wf-chain-2 {
    order: 7;
  }

  .wf-chain-3 {
    order: 8;
  }

  .wf-chain-4 {
    order: 9;
  }

  .wf-chain-5 {
    order: 10;
  }

  .workflow-node:not(.wf-node--hub)::before {
    content: '';
    display: block;
    width: 2px;
    height: var(--space-lg);
    background-color: var(--workflow-line-color);
    margin: 0 0 var(--space-sm) var(--space-lg);
  }

  .wf-node--customer-1::before {
    display: none;
  }

  .wf-node--hub::before {
    inset: -10%;
  }

  .workflow-card-hub {
    padding: var(--space-xl) var(--space-lg);
  }
}

@media (max-width: 575.98px) {
  .workflow-node:not(.wf-node--hub)::before {
    margin-left: var(--space-sm);
  }

  .faq-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-2xs);
    padding: 0;
  }

  .faq-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .faq-tab-item {
    flex: 0 0 auto;
    width: auto;
    padding: var(--space-2xs) var(--space-md);
    border-radius: var(--radius-pill);
  }

  .faq-tab-item:hover {
    transform: none;
  }

  .faq-tab-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .faq-tab-desc {
    display: none;
  }

  .faq-panels {
    padding: var(--space-sm) 0;
  }

  .faq-layout-card {
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  .faq-tabs-nav {
    background-color: transparent;
    border-bottom: none;
    justify-content: space-between;
  }

  .faq-tab-item.is-active {
    box-shadow: none;
  }

  .faq-tab-item .faq-tab-icon {
    display: none;
  }
}