/* Odbiór 08.09: widoczne przejście z artykułu do małego kalkulatora. */
.article-calculator {
  display: grid;
  justify-items: start;
  gap: 16px;
  margin-block: var(--s-5, 32px);
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius:var(--r-lg);
  background: var(--calculator-surface);
  color: var(--calculator-text);
  text-align: left;
}
.article-calculator p { margin: 0; max-width: 60ch; font-size: 1rem; line-height: 1.55; }
.article-calculator .article-calculator__title {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
.article-calculator .btn {
  max-width: 100%;
  min-height: 48px;
  padding: 14px 24px;
  white-space: normal;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--calculator-button-text);
  background: var(--green);
}
.article-calculator .btn:hover { background: var(--calculator-button-hover); color: var(--calculator-button-text); }
.article-calculator .btn:focus-visible { outline: 3px solid var(--calculator-focus); outline-offset: 4px; }
@media (max-width: 480px) {
  .article-calculator .btn { width: 100%; }
}

/* Przy tekście 200% zostawiamy miejsce na pełne słowa w CTA. */
@media (max-width: 360px) {
  .article-calculator { padding: 12px; }
  .article-calculator .btn { padding: 14px 12px; font-size: 1rem; }
}