/* ============================================================
   Qblockx — Responsive CSS
   DeFiChain Design System
   Breakpoints: mobile <810px | tablet 810–1199px | desktop ≥1200px
   ============================================================ */

/* ── Tablet (810px – 1199px) ────────────────────────────────── */
@media (min-width: 810px) and (max-width: 1199px) {

  .container {
    padding-inline: var(--space-8);
  }

  /* Nav — hide inline links + CTA, show only logo + hamburger */
  .nav-links-desktop { display: none; }
  .nav-cta-btn { display: none; }

  /* Hamburger right-aligned on tablet */
  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  /* Hero — tablet: constrained bottom padding for stats card */
  .hero-split {
    padding: calc(var(--nav-height) + 60px) var(--space-8) 180px;
    gap: var(--space-6);
  }
  .hero-split > .hero-stats-card {
    right: 0;
    left: auto;
    bottom: 32px;
    width: 320px;
  }

  /* Plan grid — 2 columns */
  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Asset cards — 2 columns */
  .asset-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* How steps — 2 columns */
  .how-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Feature grid — 2 columns */
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Feature card — stack on tablet */
  .feature-outer {
    flex-direction: column;
  }
  .feature-image-side {
    width: 100%;
    height: 200px;
  }

  /* Why Qblockx — stack on tablet */
  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Auth card — keep split but narrower */
  .auth-card,
  .auth-split {
    max-width: 100%;
  }
  .auth-panel {
    width: 45%;
    padding: 40px 32px;
  }
  .auth-form-panel {
    padding: 40px 32px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  /* Contact layout — stack */
  .contact-section {
    grid-template-columns: 1fr;
  }

  /* Section dark — slightly smaller margin */
  .section-dark {
    margin-left: 12px;
    margin-right: 12px;
  }

}

/* ── Mobile (< 810px) ───────────────────────────────────────── */
@media (max-width: 809px) {

  /* ── Typography ──────────────────────────────────────────── */
  :root {
    --section-pad: 54px;
    --section-pad-sm: 40px;
  }

  .section-title {
    font-size: 26px;
    line-height: 32.5px;
    letter-spacing: -0.8px;
  }

  .section-title--sm {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.64px;
  }

  body {
    font-size: 14px;
    line-height: 22px;
  }

  /* ── Container ───────────────────────────────────────────── */
  .container {
    padding-inline: var(--space-4);
  }

  /* ── Dark panel inset ────────────────────────────────────── */
  .section-dark {
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 20px;
  }

  /* ── Navigation ──────────────────────────────────────────── */
  .nav-links-desktop { display: none; }
  .nav-cta-btn { display: none; }

  /* Hamburger right-aligned on mobile */
  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  /* ── Hero ────────────────────────────────────────────────── */
  /* Split hero: single column, centered content on mobile */
  .hero-split {
    flex-direction: column;
    padding: calc(var(--nav-height) + 40px) var(--space-5) var(--space-10);
    gap: var(--space-6);
    min-height: 100svh;
    text-align: center;
    max-width: 100%;
  }

  .hero-left {
    max-width: 100%;
  }

  .hero-subtext {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-proof {
    justify-content: center;
  }

  /* Sub-page centered hero */
  .hero-content {
    padding: 100px var(--space-4) var(--space-10);
  }

  .hero-h1 {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -1px;
  }

  /* Homepage big hero — scale down on mobile */
  .hero-h1--xl {
    font-size: 38px;
    line-height: 46px;
    letter-spacing: -1.5px;
  }

  .hero-home {
    padding-top: calc(var(--nav-height) + 48px);
    padding-bottom: 48px;
  }

  /* Stats card: return to flow on mobile (not absolute) */
  .hero-split > .hero-stats-card {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: var(--space-6);
    bottom: auto;
    right: auto;
  }

  /* Hero stats home variant — full width on mobile */
  .hero-stats-home {
    max-width: 100% !important;
    flex-direction: row !important;
  }

  .hero-stats-card {
    flex-direction: column;
  }

  .hero-stat + .hero-stat {
    border-left: none;
    border-top: 1px solid var(--color-border-mid);
    padding-top: var(--space-3);
  }

  /* ── Badge ───────────────────────────────────────────────── */
  .badge-outer {
    margin-bottom: var(--space-6);
  }

  /* ── Plan tabs ───────────────────────────────────────────── */
  .plan-tabs {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* ── Plan grid — 1 column ────────────────────────────────── */
  .plan-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* ── Asset cards — 1 column ──────────────────────────────── */
  .asset-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* ── How steps — 1 column ────────────────────────────────── */
  .how-steps {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .how-steps::before { display: none; }

  /* ── Feature cards — 1 column ───────────────────────────── */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .feature-outer {
    flex-direction: column;
  }
  .feature-image-side {
    width: 100%;
    height: 180px;
    flex-shrink: unset;
  }

  /* ── Review cards ────────────────────────────────────────── */
  .review-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* ── Footer ──────────────────────────────────────────────── */
  .footer-wrap {
    padding: var(--space-4) 8px var(--space-6);
  }

  .footer-panel {
    padding: var(--space-10) var(--space-5) var(--space-8);
    border-radius: 20px;
  }

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

  .footer-newsletter {
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer-newsletter-input,
  .footer-newsletter-btn {
    width: 100%;
    border-radius: var(--radius-pill);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  /* ── Auth pages ──────────────────────────────────────────── */
  .auth-page {
    padding: var(--space-4);
    align-items: flex-start;
    background: var(--color-bg);
  }

  .auth-card,
  .auth-split {
    flex-direction: column;
    max-width: 100%;
    border-radius: var(--radius-card);
  }

  .auth-panel {
    width: 100%;
    padding: var(--space-8) var(--space-6) var(--space-6);
  }

  .auth-panel-body {
    display: none;
  }

  .auth-panel-logo {
    margin-bottom: 0;
  }

  .auth-form-panel {
    padding: var(--space-8) var(--space-6);
  }

  /* Legal hero — compact on mobile */
  .legal-hero {
    padding: calc(var(--nav-height) + 40px) var(--space-5) 48px;
  }
  .legal-hero-inner .section-title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1px;
  }

  /* ── Contact section ─────────────────────────────────────── */
  .contact-section {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* ── Legal content ───────────────────────────────────────── */
  .legal-doc p,
  .legal-doc li,
  .legal-page-body p,
  .legal-page-body li {
    font-size: 14px;
    line-height: 22px;
  }

  /* ── FAQ ─────────────────────────────────────────────────── */
  .faq-item summary {
    padding: var(--space-4) var(--space-5);
  }

  /* ── CTA actions ─────────────────────────────────────────── */
  .cta-actions {
    flex-direction: column;
    gap: var(--space-3);
  }

  .cta-actions .btn-primary,
  .cta-actions .btn-outline,
  .cta-actions .btn-outline-white {
    width: 100%;
    justify-content: center;
  }

  /* ── Disclosure ──────────────────────────────────────────── */
  .disclosure-text {
    font-size: 12px;
  }

  /* ── Mobile drawer ───────────────────────────────────────── */
  .mobile-drawer-inner {
    max-height: 90vh;
    overflow-y: auto;
  }

  /* ── HIW screens — hide on mobile ───────────────────────── */
  .hiw-screens { display: none; }
  .hiw-panel-top {
    padding: var(--space-8) var(--space-5) var(--space-10);
  }
  .hiw-tabs { gap: var(--space-2); }
  .hiw-tab { font-size: 12px; padding: 8px 16px 10px; }

  /* ── Why Qblockx ─────────────────────────────────────────── */
  .why-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .why-benefits { grid-template-columns: 1fr 1fr; }

  /* ── Review cards — 1 column ─────────────────────────────── */
  .review-cards { grid-template-columns: 1fr; }

  /* ── Nav login link — hide on mobile ─────────────────────── */
  .nav-login-link { display: none; }

}

/* ── Desktop override (≥1200px) ─────────────────────────────── */
@media (min-width: 1200px) {
  .container {
    padding-inline: var(--space-6);
  }

  /* Desktop nav: show links, hide hamburger */
  .nav-links-desktop { display: flex; }
  .nav-hamburger { display: none; }

  .hero-stats-card {
    display: flex;
  }

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

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

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

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

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

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

  .faq-layout {
    grid-template-columns: 1fr 1.8fr;
  }
}

/* ── Tablet responsive overrides for new sections ────────────── */
@media (min-width: 810px) and (max-width: 1199px) {
  .security-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .faq-header {
    position: static;
  }
}

/* ── Mobile responsive overrides for new sections ────────────── */
@media (max-width: 809px) {
  .security-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .faq-header {
    position: static;
  }

  /* ── Bento grids → single column on mobile ── */
  .why-bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .why-bento-main {
    grid-column: 1;
    grid-row: auto;
  }

  .hiw-bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hiw-bento-step--wide { grid-column: 1; }
  .hiw-bento-visual {
    grid-column: 1;
    grid-row: auto;
    min-height: 140px;
  }

  .plans-feat-bento {
    grid-template-columns: 1fr;
  }
  .pfb-cell--wide { grid-column: 1; }

  .commo-why-bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .cwb-cell--tall {
    grid-column: 1;
    grid-row: auto;
    min-height: 180px;
  }
  .cwb-cell--wide { grid-column: 1; }

  .re-benefits-bento {
    grid-template-columns: 1fr;
  }
  .rbb-cell--wide { grid-column: 1; }
}

/* ── Tablet responsive for bento grids ─────────────────────── */
@media (min-width: 810px) and (max-width: 1199px) {
  .why-bento {
    grid-template-columns: 1fr 1fr;
  }
  .why-bento-main {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .hiw-bento {
    grid-template-columns: 1fr 1fr;
  }
  .hiw-bento-step--wide { grid-column: span 2; }
  .hiw-bento-visual {
    grid-column: 1 / 3;
    grid-row: auto;
    min-height: 160px;
  }

  .plans-feat-bento {
    grid-template-columns: 1fr 1fr;
  }
  .pfb-cell--wide { grid-column: span 2; }

  .commo-why-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .cwb-cell--tall {
    grid-column: 1;
    grid-row: auto;
  }
  .cwb-cell--wide { grid-column: span 2; }

  .re-benefits-bento {
    grid-template-columns: 1fr 1fr;
  }
}