/*
 * Newsletter — sekcia "Prihláste sa na odber noviniek"
 * (template-parts/newsletter.php, .floating-content.image-right).
 *
 * screen.min.css dáva .newsletter-floating-content do 991px position:absolute
 * + translate(-50%, -50%), takže biely box formulára leží cez obrázok a
 * prekrýva ho skoro celý. Tu ho na mobile/tablete vraciame do bežného toku —
 * v DOM je pred <picture>, takže sa prirodzene vykreslí nad obrázkom.
 *
 * Nad 992px zostáva pôvodné plávajúce rozloženie (box vľavo cez obrázok).
 */

@media (max-width: 991.98px) {

  /* ---------- formulár nad obrázkom, nie cez neho ---------- */

  .floating-content .content.newsletter-floating-content {
    position: static;
    transform: none;
    width: 100%;
    /* Bez bočného paddingu text lícuje s okrajmi obrázka pod ním. */
    padding: 0 0 1.5rem;
    margin: 0;
    background: transparent;
  }

  .newsletter-floating-content h5 {
    margin-bottom: 0.625rem;
  }

  /* screen.min.css tu dáva 1.875rem — nad obrázkom je to zbytočne veľa. */
  .newsletter-floating-content p {
    margin-bottom: 1.25rem;
  }

  /* ---------- obrázok ---------- */

  /*
   * Pôvodné 0.8/1 (na výšku) dávalo zmysel, kým bol formulár preň — potreboval
   * výšku, aby sa doň zmestil biely box. Keď je formulár nad ním, takto vysoký
   * obrázok už len tlačí zvyšok stránky dole.
   */
  .floating-content.image-right .newsletter-floating-content ~ picture img {
    aspect-ratio: 1.5 / 1;
  }
}

@media (max-width: 575.98px) {

  /* Na telefóne je pás na šírku príliš nízky, o niečo vyšší pomer sadne lepšie. */
  .floating-content.image-right .newsletter-floating-content ~ picture img {
    aspect-ratio: 1.2 / 1;
  }
}

/* ---------- formulár: e-mail a tlačidlo pod sebou na úzkom mobile ---------- */

/*
 * Klaviyo rendruje riadok formulára inline štýlmi (flex-direction: row),
 * preto !important. Bez toho je to na mobile rozbité: tlačidlo má zo
 * screen.min.css do 768px width: 100% !important, takže z e-mailového
 * inputu ostane pás široký 24px a ešte sa s tlačidlom prekrýva.
 *
 * flex treba prebiť tiež — obal inputu má flex: 1 0 0px, čo v stĺpci
 * znamená nulovú základnú VÝŠKU, input potom vytečie nahor cez popis.
 */
@media (max-width: 575.98px) {

  .newsletter-floating-form-box .klaviyo-form [data-testid="form-row"] {
    flex-direction: column !important;
    gap: 0.75rem;
  }

  .newsletter-floating-form-box .klaviyo-form [data-testid="form-row"] > [data-testid="form-component"] {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}