/* ═══════════════════════════════════════════
   VIBRAÉ STUDIO — MOBILE FIXES
   Override na bazie feedbacku z testu na telefonie
   ═══════════════════════════════════════════ */

/* ─── 1) LOCALE SWITCHER (PL / PLN dropdown) — mocniejsza widoczność ─── */
@media (max-width: 880px) {
  .locale-btn {
    background: rgba(212,165,116,0.12);
    border: 1px solid var(--gold);
    color: var(--gold);
  }
  .locale-btn:hover {
    background: rgba(212,165,116,0.22);
  }
  .locale-switcher {
    margin: 0 6px;
    gap: 6px;
  }
}

/* ─── 2) STICKY MOBILE CTA — usuń duplikat "Umów rozmowę", zostają 2 buttony równe ─── */
@media (max-width: 880px) {
  .mobile-cta {
    grid-template-columns: 1fr 1fr;  /* 2 kolumny */
    display: grid;
    gap: 10px;
    padding: 12px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 14px;
  }
  /* primary "Umów rozmowę" — ukryty (jest w topbarze) */
  .mcta-primary {
    display: none;
  }
  /* Zadzwoń + WhatsApp jako równoprawne pełne buttony */
  .mcta-tel,
  .mcta-wa {
    width: 100%;
    height: 52px;
    background: var(--gold);
    color: var(--bg);
    border: 1px solid var(--gold);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 14px;
    gap: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mcta-wa {
    background: #25D366;  /* zielony WhatsApp */
    border-color: #25D366;
    color: #fff;
  }
  /* SVG kolor ikon dopasować */
  .mcta-wa .wa-icon path {
    fill: #fff !important;
  }
}

/* ─── 3) HERO META — fix struktury (Leszno usunięte w HTML) ─── */
.hero-meta div { line-height: 1.5; }

/* ─── 4) FORMULARZ "ZOSTAW KONTAKT" na mobile — FIX TWARDY ─── */
@media (max-width: 880px) {
  /* CTA grid → 1 kolumna (rozwala two-col domyślny układ) */
  .section-cta .cta-grid,
  .section-cta .two-col {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Container z większym oddechem od krawędzi */
  .section-cta .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Sticky → static, żeby form rośnie naturalnie */
  .form-wrap {
    position: static !important;
    top: auto !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .lead-form {
    padding: 24px 20px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  /* Wszystkie field-y full-width + box-sizing */
  .lead-form .field,
  .lead-form .field-radio {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px;
  }
  /* WAŻNE: tylko text/tel/email/textarea — NIE radio/checkbox */
  .lead-form .field input[type="text"],
  .lead-form .field input[type="tel"],
  .lead-form .field input[type="email"],
  .lead-form .field textarea {
    width: 100% !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    padding: 14px 14px !important;
    border-radius: 4px;
  }
  /* Wyłącz iOS „invalid" pomarańczową obwódkę */
  .lead-form input:invalid,
  .lead-form input:required {
    box-shadow: none !important;
    outline: none !important;
  }
  /* Radio-grid 1 kolumna na mobile */
  .lead-form .radio-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100%;
  }
  /* Radio LABEL container — 1 kolumna, ramka, tekst widoczny */
  .lead-form .radio {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    background: var(--bg) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 6px !important;
    color: var(--ink) !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    line-height: 1.3;
  }
  .lead-form .radio:has(input:checked) {
    border-color: var(--gold) !important;
    background: rgba(212,165,116,0.08) !important;
  }
  /* Input radio = małe kółko (NIE full width!) */
  .lead-form .radio input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1.5px solid var(--gold) !important;
    border-radius: 50% !important;
    background: transparent !important;
    position: relative;
  }
  .lead-form .radio input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute !important;
    inset: 3px !important;
    background: var(--gold) !important;
    border-radius: 50% !important;
  }
  /* Tekst opcji — JASNY, WIDOCZNY */
  .lead-form .radio span {
    flex: 1 !important;
    color: var(--ink) !important;
    font-size: 0.95rem !important;
    font-weight: 500;
    display: inline-block !important;
  }
  /* Submit + form-alt — full width, padding ok */
  .lead-form button[type="submit"] {
    width: 100%;
    padding: 16px;
  }
  .lead-form .form-alt {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  .form-wrap-placeholder { /* placeholder */ }
  .lead-form {
    padding: 22px 16px;
    border-radius: 14px;
  }
  .form-head h3 { font-size: 1.4rem; }
  .field {
    width: 100%;
    box-sizing: border-box;
  }
  .field input,
  .field textarea,
  .field select {
    width: 100%;
    font-size: 16px;  /* zapobiega zoomowi iOS przy focus */
    box-sizing: border-box;
  }
  /* Radio grid (Interest + Timeline) — 1 kolumna zamiast 2, lepsze odstępy */
  .radio-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .radio-grid label {
    padding: 14px 16px;
    font-size: 0.92rem;
  }
  .form-head h3 {
    font-size: 1.4rem;
  }
  .form-status {
    font-size: 0.88rem;
  }
  /* Alt-link row (WhatsApp + tel) */
  .form-alt {
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.9rem;
  }
}

/* ─── 5) HERO PRICING CARD na małych ekranach — żeby się nie ucinało ─── */
@media (max-width: 640px) {
  .hero-pricing {
    padding: 22px 18px;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .pricing-value {
    flex-wrap: wrap;
  }
  .pricing-amount {
    font-size: 2.4rem;
  }
  .pricing-ctas {
    gap: 8px;
  }
  .pricing-perks li {
    font-size: 0.84rem;
  }
}

/* ─── 6) GLOBAL — overflow protection na mobile ─── */
@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }
  /* Zwiększ padding section żeby treść nie dotykała krawędzi */
  .section .container {
    padding-left: 18px;
    padding-right: 18px;
  }
  /* Hero CTA buttony — full width na mobile */
  .hero-cta {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
  /* Większe touch targets dla wszystkich primary buttonów */
  .btn-primary,
  .btn-ghost {
    min-height: 48px;
  }
}

/* ─── 7) CENNIK CARDS — mobile column ─── */
@media (max-width: 640px) {
  .cennik-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .price-card {
    padding: 20px;
  }
  .price-name {
    font-size: 1.4rem;
  }
}

/* ─── 8) KALKULATOR — radio modele, mobile ─── */
@media (max-width: 640px) {
  .calc-modes .mode {
    padding: 14px;
  }
  .mode-controls {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .mode-controls .control {
    width: 100%;
  }
  .calc-costs {
    padding: 16px;
  }
}

/* ─── 9) SCENARIUSZE — mobile column ─── */
@media (max-width: 640px) {
  .scenarios-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ─── 10) FAQ — większe touch targets ─── */
@media (max-width: 640px) {
  .faq-item summary {
    padding: 16px 18px;
    font-size: 1rem;
  }
  .faq-body {
    padding: 0 18px 16px;
    font-size: 0.94rem;
  }
}

/* ─── HERO TAGLINE (zamiast nazwy firmy / kontaktu) ─── */
.hero-tagline {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0.92;
}
.hero-tagline strong {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--gold);
  font-size: 1.05em;
}
.hero-tagline span {
  font-style: italic;
  color: var(--ink-mute);
}

@media (max-width: 640px) {
  .hero-tagline {
    font-size: 0.88rem;
  }
}