/* responsive.css — RWD overrides for all variants
   Stosujemy media queries do globalnych klas i wzorców używanych
   przez warianty A/B/C. Wewnątrz canvasu artboardy są 1280px szerokie,
   więc RWD działa głównie w trybie fullscreen (?v=a|b|c). */

/* Tablet ~ 1024px */
@media (max-width: 1100px) {
  .container, .container-tight { padding: 0 36px; }
  .section { padding: 80px 0; }
  .section-lg { padding: 96px 0; }
  .h1 { font-size: clamp(36px, 6vw, 60px); }
  .h2 { font-size: clamp(28px, 4vw, 44px); }

  /* Variant A — hero split → stack */
  #variant-a section > .container[style*="grid-template-columns: 1.05fr"],
  #variant-a section > .container[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  /* fix solution 4-col → 2-col */
  #variant-a [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Variant B — solution rows */
  #variant-b article[data-reveal][style*="grid-template-columns: 120px 1fr 1.2fr"] {
    grid-template-columns: 80px 1fr !important;
  }
  #variant-b article[data-reveal][style*="grid-template-columns: 120px 1fr 1.2fr"] > div:nth-child(3) {
    grid-column: 1 / -1 !important;
    padding-left: 80px !important;
  }
  #variant-b [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Variant C — scrollytelling: collapse sticky chart */
  #variant-c [style*="grid-template-columns: 1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  #variant-c [style*="position: sticky"] {
    position: relative !important;
    top: auto !important;
  }
  #variant-c [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* generic 1fr 1fr ctaa areas → stack */
  section[class*="section"] .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* Mobile ~ 720px */
@media (max-width: 720px) {
  .container, .container-tight { padding: 0 22px; }
  .section { padding: 64px 0; }
  .section-lg { padding: 80px 0; }

  /* Nav — collapse links to icon menu */
  nav a[href="#"] { display: none; }
  nav button.btn-ghost { display: none; }
  nav button.btn-accent { padding: 0 14px !important; height: 40px !important; font-size: 13px !important; }

  /* Hero typography */
  .h1 { font-size: clamp(32px, 9vw, 44px) !important; }
  .h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  .lead { font-size: 15.5px !important; }

  /* Variant A hero & dashboard floating card */
  #variant-a [style*="position: absolute"][style*="bottom: -22px"] {
    position: static !important;
    margin-top: 16px !important;
  }
  #variant-a [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Variant B — 4-col problem → 1 col */
  #variant-b [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  #variant-b article[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding-bottom: 32px !important;
  }
  #variant-b article[style*="grid-template-columns: 120px 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
  }
  #variant-b article[style*="grid-template-columns: 120px 1fr 1.2fr"] > div:nth-child(3) {
    padding-left: 0 !important;
  }

  /* Variant C — solution stack 4→1 */
  #variant-c [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Comparison table → stack on mobile (collapse to cards) */
  div[class="card"][style*="padding: 0"] > div[style*="grid-template-columns: 1.2fr 1.4fr 1.4fr"],
  div[style*="grid-template-columns: 1.2fr 1.4fr 1.4fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: 1.2fr 1.4fr 1.4fr"] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--line-2) !important;
  }

  /* FAQ section split → stack */
  section .container[style*="grid-template-columns: 1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* CTA — calculator + form stack */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 24px"] {
    grid-template-columns: 1fr !important;
  }

  /* Calculator inner: 2 cols → 1 */
  .card[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
  }

  /* Form: input grid 2 → 1 */
  form .card, form[class="card"] { padding: 22px !important; }
  form [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

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

  /* Timeline (variant B) → single column */
  div[data-reveal][style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* CTA stat row in hero variant B → wrap */
  section[style*="border-bottom"] > .container[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* hide focus outlines from contenteditable hover in artboards (only on standalone view) */
body[data-mode="standalone"] [contenteditable] { caret-color: transparent; outline: none; pointer-events: none; }