/* ============================================================================
   medical-notice.css — ostrzeżenie o wyrobie medycznym

   Parametry wynikają z rozporządzenia Ministra Zdrowia z 21 kwietnia 2023 r.
   w sprawie reklamy wyrobów medycznych, a nie z preferencji wizualnych.
   Przed zmianą czegokolwiek w tym pliku przeczytaj komentarze — kilka
   pozornie kosmetycznych właściwości jest tu z powodu prawnego.
   ============================================================================ */

.md-notice {
  /* „W dolnej części reklamy” — belka zamyka treść strony, tuż nad stopką. */
  display: flex;
  align-items: center;
  justify-content: center;

  /* „Na płaszczyźnie stanowiącej nie mniej niż 10% powierzchni”.
     Dla strony WWW przyjmujemy 10% wysokości okna (10vh) jako odpowiednik
     powierzchni ekranu — takie podejście rekomenduje POLMED w dobrych
     praktykach reklamy wyrobów medycznych w internecie. min-height, nie
     height: tekst nigdy nie może zostać przycięty. */
  min-height: 10vh;

  box-sizing: border-box;
  width: 100%;
  margin: 32px 0 0;
  padding: 16px 20px;

  /* „Tekst wyróżniający się od tła” — maksymalny kontrast, plus wyraźna
     rama oddzielająca ostrzeżenie od pozostałych treści strony. */
  background: #fff;
  border: 2px solid #111;
  border-radius: 4px;
}

.md-notice__text {
  margin: 0;
  width: 100%;
  text-align: center;

  color: #000;
  font-weight: 700;
  font-size: 15px;

  /* „Umieszczony poziomo” + „odstęp między wierszami nie większy niż
     wysokość liter”. line-height 1.35 trzyma odstęp poniżej wysokości
     wielkiej litery. Nie zwiększaj tej wartości. */
  line-height: 1.35;
  letter-spacing: .005em;

  /* Ostrzeżenie ma być NIERUCHOME — żadnych animacji, przejść,
     parallaxu ani efektów pojawiania się przy scrollu. Blokada na wypadek,
     gdyby globalny .reveal albo podobny hook trafił kiedyś na ten element. */
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Wariant kompaktowy — pod pojedynczą sekcją albo kartą, gdzie pełna belka
   rozbijałaby układ. Nadal czytelny, nieruchomy i oddzielony od treści. */
.md-notice--inline {
  min-height: 0;
  margin: 18px 0 0;
  padding: 10px 14px;
  border-width: 1px;
}
.md-notice--inline .md-notice__text {
  font-size: 13px;
  font-weight: 600;
}

/* Na wąskich ekranach tekst łamie się na dwie linie i belka rośnie —
   min-height zostaje, żeby proporcja względem ekranu się nie pogorszyła. */
@media (max-width: 560px) {
  .md-notice {
    padding: 14px 16px;
    margin-top: 24px;
  }
  .md-notice__text { font-size: 14px; }
}

/* Druk: ostrzeżenie musi zostać na wydruku strony. */
@media print {
  .md-notice {
    border: 2px solid #000;
    background: #fff;
    page-break-inside: avoid;
  }
  .md-notice__text { color: #000; }
}