/* ============================================================
   FLIB Landing — Global Responsive Overrides
   These !important rules override inline styles rendered by
   the DCLogic template engine (style="" attributes).
   Breakpoints: 900px (tablet), 600px (mobile)
   ============================================================ */

/* ── Prevent horizontal overflow on all pages ── */
html { max-width: 100vw; overflow-x: hidden; }
body { max-width: 100vw; overflow-x: hidden; }

/* =====================================================
   TABLET  ≤ 900px
   ===================================================== */
@media (max-width: 900px) {

  /* ── NAV ── */
  nav {
    padding: 14px 20px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: rgba(251,246,238,0.96) !important;
    backdrop-filter: blur(8px) !important;
  }

  /* Hide text nav links; keep logo, buttons, join CTA */
  nav div > a:not([style*="gradient"]) {
    display: none !important;
  }

  /* Compact nav buttons */
  nav button[style*="border-radius:999px"] {
    padding: 7px 12px !important;
    font-size: 13px !important;
  }

  /* Nav right-side flex container — tighten gap */
  nav > div[style*="margin-left:auto"] {
    gap: 10px !important;
  }

  /* ── HERO HEADER ── */
  header {
    flex-direction: column !important;
    padding: 36px 20px 36px !important;
    gap: 28px !important;
    text-align: center !important;
  }

  /* H1 in hero — large display heading */
  [style*="font-size:64px"] {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }

  /* Prising page h1 */
  [style*="font-size:54px"] {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }

  /* Hero subtext */
  [style*="font-size:21px"] {
    font-size: 17px !important;
  }

  [style*="font-size:20px"][style*="color:#7C7263"] {
    font-size: 16px !important;
  }

  /* Section h2 headings */
  [style*="font-size:48px"] {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  [style*="font-size:44px"] {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  /* Card / sub-section h3 */
  [style*="font-size:30px"] {
    font-size: 22px !important;
  }

  /* Waitlist email+button row → stack */
  div[id="venteliste"] {
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  div[id="venteliste"] input,
  div[id="venteliste"] button {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  /* ── FIXED-WIDTH FLEX ITEMS (phone mockups, globe, host panel) ── */
  [style*="flex:0 0 300px"],
  [style*="flex:0 0 380px"],
  [style*="flex:0 0 400px"],
  [style*="flex:0 0 420px"],
  [style*="flex:0 0 460px"] {
    flex: none !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    height: auto !important;
  }

  /* Hero pulse ring — cap its height so it doesn't consume too much vertical space */
  header [style*="flex:0 0 300px"],
  header [style*="position:relative;height:300px"] {
    height: 220px !important;
    max-width: 280px !important;
    flex: none !important;
  }

  /* ── FLEX CONTENT ROWS → COLUMN ── */
  /* Large gap flex rows (content side-by-side layouts) */
  [style*="display:flex"][style*="gap:60px"],
  [style*="display:flex"][style*="gap:54px"],
  [style*="display:flex"][style*="gap:52px"],
  [style*="display:flex"][style*="gap:50px"],
  [style*="display:flex"][style*="gap:48px"] {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  /* Section-level content rows */
  section > div[style*="display:flex"][style*="align-items:center"] {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  /* ── GRID LAYOUTS → SINGLE COLUMN ── */
  /* 3-column grids */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 2-column grids */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── SECTIONS ── */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Large padded sections */
  [style*="padding:90px 64px"] {
    padding: 44px 20px !important;
  }

  [style*="padding:60px 64px"] {
    padding: 40px 20px !important;
  }

  [style*="padding:20px 64px"] {
    padding: 16px 20px !important;
  }

  /* ── CTA BLOCK ── */
  [style*="padding:70px 64px"] {
    padding: 40px 22px !important;
  }

  /* CTA join button */
  [style*="font-size:18px"][style*="padding:18px 44px"] {
    padding: 14px 30px !important;
    font-size: 16px !important;
  }

  /* ── TICKER BAR ── */
  div[style*="background:#33302B"][style*="padding:18px 0"] > div {
    padding: 0 20px !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  /* ── FOOTER ── */
  footer {
    padding: 40px 20px 30px !important;
  }

  /* Footer grid: 5 cols → 2 cols */
  footer > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }

  /* Footer first col (brand) — remove max-width constraint */
  footer > div > div[style*="max-width:300px"] {
    max-width: 100% !important;
  }
}


/* =====================================================
   MOBILE  ≤ 600px
   ===================================================== */
@media (max-width: 600px) {

  /* ── NAV ── */
  nav {
    padding: 11px 16px !important;
  }

  /* Hide language selector on very small screens */
  nav button[style*="border:1px solid #E4D9C6"] {
    display: none !important;
  }

  /* Even more compact login button */
  nav button[style*="border:2px solid #33302B"] {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* ── HERO ── */
  header {
    padding: 28px 16px 28px !important;
    gap: 22px !important;
  }

  [style*="font-size:64px"] {
    font-size: 28px !important;
    line-height: 1.18 !important;
  }

  [style*="font-size:54px"] {
    font-size: 26px !important;
  }

  [style*="font-size:48px"] {
    font-size: 24px !important;
  }

  [style*="font-size:44px"] {
    font-size: 22px !important;
  }

  [style*="font-size:21px"] {
    font-size: 16px !important;
  }

  /* Hero pulse ring — smaller on phone */
  header [style*="flex:0 0 300px"],
  header [style*="position:relative;height:300px"] {
    height: 180px !important;
    max-width: 220px !important;
  }

  /* ── SECTIONS ── */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  [style*="padding:90px 64px"] {
    padding: 32px 16px !important;
  }

  [style*="padding:60px 64px"] {
    padding: 28px 16px !important;
  }

  /* ── CARD PADDING ── */
  [style*="padding:40px 40px"] {
    padding: 22px 18px !important;
  }

  [style*="padding:44px 40px"] {
    padding: 26px 18px !important;
  }

  [style*="padding:44px 46px"] {
    padding: 26px 18px !important;
  }

  [style*="padding:26px 28px"] {
    padding: 18px 16px !important;
  }

  [style*="padding:22px 28px"] {
    padding: 16px 14px !important;
  }

  /* ── CTA BLOCK ── */
  [style*="padding:70px 64px"] {
    padding: 30px 16px !important;
  }

  /* ── FOOTER ── */
  footer {
    padding: 28px 16px 24px !important;
  }

  /* Footer grid: 2 cols → 1 col on phones */
  footer > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}