/* Poprawki responsywności i czytelności (audyt 2026-10-26).
   Ładowany jako ostatni arkusz na każdej stronie. */

/* ---- Hero: makieta czatu ----
   Wiadomości pojawiają się od dołu jak w prawdziwym komunikatorze.
   Ukryte jeszcze dymki nie zajmują miejsca, więc nie ma pustej ramki,
   a stała wysokość okna usuwa skakanie układu w trakcie animacji. */
.device__variant { min-height: 0; }
.device__chat {
  height: 440px;
  min-height: 0;
  justify-content: flex-end;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
}
.device__chat .bubble:not(.is-in):not(.bubble--typing) { display: none; }
.device__chat .bubble.is-in:not(.bubble--typing) { animation: bubble-in 0.4s var(--ease-out) both; }
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 960px) {
  .hero__visual { min-height: 0; }
}
@media (max-width: 600px) {
  .device { padding: 16px; }
  .device__chat { height: 400px; }
}

/* ---- Pigułka w hero: na wąskim ekranie łamie się w dwie linie,
   kropka zostaje przy tekście zamiast w osobnym wierszu ---- */
.mono-eyebrow { flex-wrap: nowrap; }
@media (max-width: 480px) {
  .hero .mono-eyebrow { align-items: flex-start; border-radius: 12px; line-height: 1.5; }
  .hero .mono-eyebrow::before { margin-top: 6px; flex-shrink: 0; }
}

/* ---- Minimalna wielkość tekstu na telefonie i tablecie: 12px ---- */
@media (max-width: 768px) {
  .mono-eyebrow,
  .bento-card__num, .bento-card__tag,
  .case-card__num, .case-card__report-label, .case-card__report-value,
  .case-card__report-row span:first-child, .case-card__formula small,
  .about__cred-label, .contact-method__label, .form__label,
  .footer__col-label, .footer__bottom, .footer__brand-sub, .nav__brand-sub,
  .mock-chat__status, .device__topbar-left, .device__topbar-right,
  .case-hero__badge, .case-diagnosis__label, .case-outcome__label, .case-stat__label,
  .case-problem-thread__time, .case-problem-thread__gap span,
  .case-problem-sms__tag, .case-problem-sms__meta, .case-problem-sms__reply-meta,
  .case-problem-funnel__badge, .case-problem-funnel__pct,
  .calc__tag, .calc__result-label,
  .solution-connector__label, .solution-connector__time,
  .source-note, .case-split__text p.source-note, .case-card .source-note {
    font-size: 12px;
  }
}

/* ---- Cele dotyku min. ~44px na telefonie ---- */
@media (max-width: 768px) {
  .footer__col a { padding: 11px 0; }
  .case-back { padding: 12px 0; }
}

/* przypisy źródeł mają rozmiar w atrybucie style, stąd !important */
@media (max-width: 768px) {
  .source-note { font-size: 12px !important; }
}

/* paski statystyk w case: długie słowa nie rozpychają kolumn na telefonie */
.case-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-stat__label { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 420px) {
  .case-stats { gap: 10px; }
}