/* =========================================================================
   QuoteForge landing — responsive overrides
   Loaded after styles.css. Desktop-first; breakpoints get progressively
   smaller. Only @media queries belong here.
   ========================================================================= */

/* ===== Hero grid shrinks early so the stage doesn't overflow ===== */
@media (max-width: 1300px) {
  .hero-grid { max-width: 95%; }
}

/* ===== Features bento (qfc) — TABLET: same bento as desktop, just compressed =====
   Keep the desktop 3-col layout + grid-template-areas (inherited from styles.css);
   only shrink it — shorter rows, tighter gap, smaller padding/fonts. Do NOT restack
   into a 2-col mobile layout (that happens later, at <=480px). */
@media (max-width: 900px) {
  .qfc-cards-grid {
    grid-template-rows: 172px 172px 156px;
    gap: 12px;
  }
  .qfc-card { padding: 18px 18px; }
  .qfc-card__title { font-size: 15px; }
  .qfc-card__desc { font-size: 12px; }
  .qfc-card__content { max-width: 74%; }
}

/* ===== Pricing (qfp) — 4 cols → 2 → 1 ===== */
@media (max-width: 980px) {
  .qfp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .qfp-grid { grid-template-columns: 1fr; }
  .qfp-pricing { padding: 48px 18px 64px; }
}

/* ===== Tablet vertical — hero collapses to single column, integrations move to side ===== */
@media (min-width: 561px) and (max-width: 1023px) {
  .hero-grid {
    grid-template-columns: 1fr;
    /* clear the fixed navbar (height = --header-h) + breathing room, so the H1
       sits below it (the kicker pill that used to do this is commented out) */
    padding: calc(var(--header-h) + 28px) 24px 56px;
    gap: 0;
  }
  .copy {
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    column-gap: 22px;
    align-items: start;
  }
  .copy .pill,
  .copy .headline,
  .copy .subhead,
  .copy .ctas { grid-column: 1; }
  .copy .pill { width: fit-content; }

  h1.headline {
    font-size: clamp(54px, 7vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.04em;
    margin-top: 10px;
  }
  .subhead { font-size: 15px; line-height: 1.6; max-width: 540px; }
  .ctas { margin-top: 22px; gap: 12px; }

  .integrations {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 54px;
    flex-direction: column;
    align-items: self-end;
    gap: 10px;
  }
  .integrations .line { display: none; }
  .integrations .logos { flex-direction: column; align-items: self-end; gap: 10px; }
  .integ-chip { width: 100%; justify-content: flex-start; padding: 8px 12px; font-size: 11px; }

  .qfa-root {
    justify-self: center;
    transform: scale(0.85);
    transform-origin: center;
  }
  .qfa-scene { min-height: 600px; }
}

/* ===== Desktop navbar visibility ===== */
@media (min-width: 901px) {
  .bt-nav-desktop { display: flex; }
  .bt-login,
  .bt-signup { display: inline-flex !important; }
  .bt-mobile-toggle { display: none !important; }
}

/* ===== Tablet / mobile landscape — navbar collapses to hamburger ===== */
@media (max-width: 900px) {
  .bt-nav-desktop,
  .bt-login,
  .bt-nav-actions > .theme-toggle,
  .bt-nav-actions > .bt-lang { display: none !important; }

  .bt-nav-container { gap: 12px; }
  .bt-brand-name { font-size: 16px; }
  .bt-brand-mark { width: 38px; height: 38px; border-radius: 11px; }

  .bt-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }
  .bt-signup { display: inline-flex !important; }

  .bt-mobile-toggle {
    width: 40px;
    height: 40px;
    display: inline-grid !important;
    place-items: center;
    border: 1px solid rgba(137, 166, 199, 0.28);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
  }

  .mobile-menu-panel {
    display: block;
    background: rgba(5, 11, 26, 0.90);
    border-top: 1px solid rgba(137, 166, 199, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  [data-theme="light"] .mobile-menu-panel {
    background: rgba(248, 250, 252, 0.94);
    border-top-color: rgba(51, 65, 85, 0.12);
  }

  .bt-decision-title { font-size: clamp(32px, 6vw, 48px); }
  .bt-decision-description { font-size: 16px; }
  .cta-title { font-size: clamp(30px, 6vw, 44px); }
  .cta-description { font-size: 16px; }
}

/* ===== Mobile portrait ===== */
@media (max-width: 640px) {
  :root { --header-h: 60px; }

  .bt-container { padding-left: 18px; padding-right: 18px; }

  .bt-section { padding: 56px 0; }

  .bt-section-title { font-size: 22px; }
  .bt-section-subtitle { font-size: 14.5px; margin-bottom: var(--space-5); }

  .bt-decision-section { padding-block: 56px; }
  .bt-decision-title { font-size: 28px; }
  .bt-decision-points { flex-direction: column; gap: 8px; }
  .bt-decision-points .dot { display: none; }

  .cta-section { padding-block: 56px; }
  .cta-panel { padding: 40px 20px; }
  .cta-title { font-size: 28px; }

  .bt-footer-main {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    text-align: center;
  }
  .bt-footer-brand { max-width: none; }
  .bt-footer-logo { justify-content: center; }
  .bt-footer-bottom { text-align: center; }
}

/* ===== Mobile — hero stage scales down, pill + integrations hidden ===== */
@media (max-width: 560px) {
  .hero { min-height: auto; }
  .hero-grid {
    min-height: auto;
    /* clear the fixed navbar (--header-h is 60px at this width) + breathing room */
    padding: calc(var(--header-h) + 24px) 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
  }
  .copy {
    display: block;
    max-width: 100%;
    position: relative;
    z-index: 3;
    margin-bottom: 55px;
  }
  .copy .pill { display: none; }

  h1.headline {
    margin-top: 0;
    font-size: clamp(42px, 11vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }
  .subhead { margin-top: 18px; max-width: 100%; font-size: 15px; line-height: 1.55; }
  .ctas { margin-top: 24px; gap: 10px; }
  .ctas .btn { flex: 1; min-width: 0; }

  .integrations { display: none; }

  /* MOBILE — phone-first overlap layout. The phone is the large centred anchor and
     the two overlays float OVER its edges (chat over the top-left, status timeline
     over the right) instead of sitting in side gutters. Because the overlays no
     longer need their own horizontal room, the canvas can be narrow (~phone width)
     and the whole scene scales up to a readable ~0.78 with no clipping at 390px. */
  .qfa-root {
    order: 2;
    flex: none;
    width: 100%;
    justify-content: center;   /* centre the scene canvas within the column */
    position: relative;
    overflow: visible;         /* critical — must NOT clip the scaled scene */
    pointer-events: none;
    padding-bottom: 28px;
  }

  /* Compact canvas ≈ phone width (+ a little float margin). Centre = 190px. */
  .qfa-scene {
    flex: none;
    width: 380px;
    min-height: 640px;
    transform: scale(0.73);
    transform-origin: top center;
    margin-bottom: -120px;
  }

  .qfa-chat {
    top: 345px;
    left: -120px;
  }

  .qfa-history {
    left: auto;
    right: -105px;
    width: 170px;
  }
}

/* ===== Features bento (qfc) — 2-col → single column ===== */
@media (max-width: 480px) {
  .qfc-cards-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "pdf"
      "discounts"
      "dashboard"
      "publicLink"
      "alerts"
      "multiuser";
  }
  .qfc-card { min-height: 170px; }
  .qfc-card__content { max-width: 72%; }
}
@media (max-width: 391px) {
  .qfa-scene{
    transform: scale(0.65);
  }

}

/* ===== Navbar + footer container + logo =====
   The desktop 85% / no-horizontal-padding treatment (styles.css) is desktop-only.
   Below 1024px the navbar and footer inner containers go back to their original
   full-width + padding so the current gutters are kept as-is. The logo steps down
   from its 45px desktop size. */

/* Tablet */
@media (max-width: 1024px) {
  .bt-nav-container,
  .bt-footer-container {
    width: 100%;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .qf-logo { height: 40px; }
}

/* Mobile — full-width containers with 1.5rem (var(--container-pad)) gutters */
@media (max-width: 768px) {
  .bt-nav-container,
  .bt-footer-container {
    width: 100%;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .qf-logo { height: 40px; }
}

/* Mobile portrait — narrow the gutters to 18px on small phones.
   Declared last so it wins over the tablet/mobile rules above. */
@media (max-width: 640px) {
  .bt-nav-container,
  .bt-footer-container {
    padding-left: 18px;
    padding-right: 18px;
  }
}