/*
Theme Name: Fondacija Marijana
Theme URI: https://fondacijamarijana.org
Description: Child tema Strata teme, napravljena za Fondaciju "Marijana", beogradsku memorijalnu fondaciju.
Author: Bojan Marković
Author URI: https://marbosoft.com
Template: strata
Requires at least: 6.6
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fondacija-marijana
*/

/* =========================================================
   HOMEPAGE HERO — soft flat tint
   Added 2026-09-10, revised same day. First version was a top-to-bottom
   gradient (brand-subtle diluted to 18% fading into white) — Bojan then
   asked for a flat color instead, no fade. Kept the same dilution
   technique (still `custom.heroTint.soft`, 18%, theme.json — stays inside
   the real brand palette rather than a flat full-strength `brand-subtle`,
   which read as too heavy against the design-reference mockups) but
   applied uniformly across the section instead of transitioning to
   `background`. Same color-mix() technique as the parent theme's own
   `.st-hero::before` hero-wash overlay, kept here in the child theme (not
   global.css) since this exact treatment was asked for on this client's
   homepage specifically, not as reusable Strata infrastructure. A
   className, not a block "style.color.*" JSON attribute — keeps the
   color-mix() formula out of pattern markup, per STRATA.md ("theme.json-
   first, never color-mix() in a block JSON attribute").
   ========================================================= */

.st-hero-tint-soft {
  background: color-mix(in srgb, var(--wp--preset--color--brand-subtle) var(--wp--custom--hero-tint--soft), var(--wp--preset--color--background));
}

/* =========================================================
   DONATE CTA — topla terakota gradijent pozadina
   Added 2026-09-10. Bojan pokazao design-reference mockup
   (partnerstvo.png) i tražio da homepage donate CTA ("Vaša podrška
   menja živote") ima sličnu toplu pozadinu umesto flat crne
   (background-contrast, kopirano iz parent `cta-centered` pattern-a).
   Izmerio piksele mockup-a direktno — gradijent je u toploj terakota
   porodici, blizu naših `brand`/`brand-hover` tokena (za razliku od
   ranijeg hero mockup-a čija boja NIJE bila deo našeg kolorita), pa
   je bezbedno ostati u sistemu boja umesto izmišljati novu. Dijagonalni
   linear-gradient brand → zatamnjeni brand-hover, isti color-mix()
   mehanizam kao .st-hero-tint-soft iznad — CSS klasa, ne block JSON
   atribut, po STRATA.md pravilu.
   ========================================================= */

.st-cta-gradient-brand {
  background: linear-gradient(
    135deg,
    var(--wp--preset--color--brand) 0%,
    var(--wp--preset--color--brand-hover) 55%,
    color-mix(in srgb, var(--wp--preset--color--brand-hover) 65%, black) 100%
  );
}

/* =========================================================
   DONATE CTA — kružni ikona-medaljon iznad eyebrow naslova
   Added 2026-09-10. Isti mockup (partnerstvo.png) ima kružnu
   ikonicu (rukovanje/srce) iznad malog uppercase naslova
   "PARTNERSTVO ZA BUDUĆNOST". Nema postojeće parent Strata komponente
   za ovo (`.st-service-icon` je zaobljeni KVADRAT za kartice, ne krug),
   pa je ovo nova, mala klasa — isti tokeni (icon-size, border-radius,
   tint) kao `.st-service-icon`/`.st-speaker-card__social`, samo
   `border-radius:full` za krug i belo/providno na tamnoj gradijent
   pozadini (ista boja kao `.st-speaker-card__social a`).
   ========================================================= */

.st-cta-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wp--custom--icon-size--lg);
  height: var(--wp--custom--icon-size--lg);
  margin-inline: auto;
  border-radius: var(--wp--custom--border-radius--full);
  background-color: color-mix(in srgb, var(--wp--preset--color--white) var(--wp--custom--tint--icon-chip-rest), transparent);
  color: var(--wp--preset--color--white);
}

/* =========================================================
   HOMEPAGE HERO — dve parole, diskretan crossfade
   Added 2026-09-10. Bojan tražio da ispod CTA dugmadi na homepage
   hero-u stoje dve parole koje se smenjuju na par sekundi. Čist CSS
   (bez JS) — grid-stacking trik (svi elementi u istoj grid ćeliji,
   "grid-area:1/1") umesto position:absolute, jer grid track visina
   automatski prati NAJVIŠI element u steku (druga parola je duža i
   može preći u 2 reda na užim ekranima) — position:absolute bi
   zahtevao ručno pogođenu min-height i pravio "skok" u layout-u.
   ========================================================= */

.st-hero-taglines {
  display: grid;
}

.st-hero-taglines .st-hero-tagline {
  grid-area: 1 / 1;
  margin: 0;
  font-style: italic;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--foreground-muted);
  opacity: 0;
  animation: st-hero-tagline-fade 9s ease-in-out infinite;
}

.st-hero-taglines .st-hero-tagline:nth-child(2) {
  animation-delay: 4.5s;
}

@keyframes st-hero-tagline-fade {
  0%, 3% { opacity: 0; }
  10%, 40% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .st-hero-taglines .st-hero-tagline {
    animation: none;
    opacity: 1;
  }
  .st-hero-taglines .st-hero-tagline:nth-child(2) {
    display: none;
  }
}

/* =========================================================
   HEADER — dvoredni site title lockup ("MARIJANA" / "fondacija")
   Zamenjen wp:site-title (dinamički blok, ispisuje ceo naziv sajta u
   jednom redu) običnim wp:html-om — potreban je poseban tekst/veličina
   po redu ("MARIJANA" veliko, "fondacija" malo ispod), što site-title
   blok ne podržava. `line-height:1` i bez margina na oba reda drži
   ukupnu visinu lockup-a ispod visine logotipa (52px), tako da se
   visina header-a i dalje diktira logotipom, ne ovim tekstom — Bojanov
   eksplicitan zahtev da se header ne poveća.
   ========================================================= */

.st-site-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}

.st-site-title__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--foreground);
}

.st-site-title__org {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  color: var(--wp--preset--color--foreground-muted);
  margin-top: 2px;
}

/* =========================================================
   FOOTER NAV — podmeni stavke: čitljiv hover + uvlačenje
   Added 2026-09-11. Otkad footer koristi `submenuVisibility:"always"`
   (uvek otvoren podmeni "O Fondaciji", vidi STATUS.md), te stavke su
   tehnički child-ovi `.wp-block-navigation__submenu-container` — isti
   element koji parent Strata koristi za HEADER-ov plutajući desktop
   dropdown (global.css, `@media (min-width:769px)`). Parent tamo namerno
   stilizuje hover kao punu pozadinu (`background-color:surface`, svetla
   nijansa — ima smisla na svetlom popover-u koji "visi" ispod header-a)
   i namerno GASI podvlačenje (`::after{display:none}`) za tu istu децu,
   jer background-hover zamenjuje podvlačenje kao vizuelni signal tamo.
   Kad se ISTI mehanizam pojavi u TAMNOM footer-u, svetla pozadina preko
   već svetlog teksta čini stavku nečitljivom. Bojanov zahtev: footer
   podmeni stavke treba da se ponašaju kao SVE OSTALE navigacione stavke
   (samo animirano podvlačenje, bez pozadine) — rešeno preskakanjem
   parent-ovog background-hover-a i vraćanjem podvlačenja NAZAD, samo u
   `.st-footer` kontekstu (header dropdown ostaje nepromenjen).
   ========================================================= */

@media (min-width: 769px) {
  .st-footer .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background-color: transparent;
  }

  .st-footer .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
    display: block;
  }
}

/* "Tab" uvlačenje podmeni stavki u odnosu na glavne stavke footer-a —
   parent-ov `.open-always` mehanizam (core WP CSS) već dodaje mali
   `padding-left` izveden iz `--wp--style--block-gap` (ovde "xs", ~8px —
   jedva primetno), pa se uvećava na jasnije "md" (24px) uvlačenje samo
   u footeru, da se vizuelno vidi da su te 4 stavke podređene "O
   Fondaciji" stavci, ne ravnopravne sa Donacije/Galerija/Kontakt. */
.st-footer .wp-block-navigation__submenu-container {
  padding-left: var(--wp--preset--spacing--md) !important;
}

/* =========================================================
   DONACIJE — interaktivna uplatnica (3 koraka + IPS QR kod)
   Added 2026-09-11. Bojan tražio alat koji vodi posetioca kroz 3 koraka
   (iznos → podaci uplatioca → generisana uplatnica) i na kraju prikaže
   NBS IPS QR kod za skeniranje u bankarskoj aplikaciji. Logika u
   `assets/js/donation-wizard.js` (self-hosted, enqueue-ovan u
   functions.php), QR renderovanje preko self-hosted `qrcodejs`
   biblioteke (davidshimjs/qrcodejs, MIT, preuzeta direktno sa cdnjs-a
   umesto CDN-a na produkciji — isti princip kao self-hosted fontovi).
   Step-indikator je NOVA horizontalna komponenta (ne reuse postojeće
   `.st-timeline__item` klase iz parent teme — ta je vertikalna, misljena
   za hronologiju sa border-left linijom; ovde treba horizontalan
   "korak 1 → 2 → 3" prikaz), ali koristi ISTE design tokene (boje,
   border-radius, spacing) radi vizuelne doslednosti sa ostatkom sajta.
   ========================================================= */

.st-donation-wizard {
  /* Dugmad za donaciju sa svih stranica vode ovde preko #st-donation-wizard
     u URL-u; scroll-margin-top oslobađa prostor za sticky header (~77px)
     tako da sekcija ne bude sakrivena ispod njega ni pri native
     anchor-skoku (pre nego što JS iz donation-wizard.js stigne da
     pretvori skok u smooth scroll — vidi taj fajl). */
  scroll-margin-top: 96px;
  max-width: 640px;
  margin-inline: auto;
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--lg);
  background-color: var(--wp--preset--color--background);
  padding: var(--wp--preset--spacing--xl);
}

.st-donation-steps {
  display: flex;
  justify-content: center;
  margin-bottom: var(--wp--preset--spacing--xl);
}

.st-donation-step {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}

.st-donation-step:not(:last-child)::after {
  content: '';
  width: var(--wp--preset--spacing--2-xl);
  height: 2px;
  background-color: var(--wp--preset--color--divider);
  margin-inline: var(--wp--preset--spacing--xs);
}

.st-donation-step__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--wp--custom--border-radius--full);
  background-color: var(--wp--preset--color--surface);
  border: 2px solid var(--wp--preset--color--divider);
  color: var(--wp--preset--color--foreground-muted);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  transition: background-color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}

.st-donation-step__label {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--foreground-muted);
  display: none;
}

@media (min-width: 600px) {
  .st-donation-step__label {
    display: inline;
  }
}

.st-donation-step.is-active .st-donation-step__dot,
.st-donation-step.is-done .st-donation-step__dot {
  background-color: var(--wp--preset--color--brand);
  border-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
}

.st-donation-step.is-active .st-donation-step__label {
  color: var(--wp--preset--color--foreground);
}

.st-donation-panel {
  display: none;
}

.st-donation-panel.is-active {
  display: block;
}

.st-donation-panel h3 {
  margin-top: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
}

.st-donation-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--sm);
  margin-bottom: var(--wp--preset--spacing--lg);
}

@media (max-width: 480px) {
  .st-donation-amounts {
    grid-template-columns: repeat(2, 1fr);
  }
}

.st-donation-amount-btn {
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--md);
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--foreground);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--md);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--wp--custom--transition--fast);
}

.st-donation-amount-btn:hover {
  border-color: var(--wp--preset--color--brand);
}

.st-donation-amount-btn.is-selected {
  background-color: var(--wp--preset--color--brand);
  border-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
}

.st-donation-custom {
  margin-bottom: var(--wp--preset--spacing--lg);
}

.st-donation-custom label,
.st-donation-fields label {
  display: block;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  margin-bottom: var(--wp--preset--spacing--xs);
}

.st-donation-custom input,
.st-donation-fields input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--md);
  font-size: var(--wp--preset--font-size--md);
  font-family: inherit;
  margin-top: var(--wp--preset--spacing--2-xs);
}

.st-donation-fields {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--lg);
}

.st-donation-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
}

.st-donation-next,
.st-donation-back,
#st-donation-print {
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xl);
  border-radius: var(--wp--custom--border-radius--md);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
  font-family: inherit;
  cursor: pointer;
  border: none;
}

.st-donation-next,
#st-donation-print {
  background-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  margin-left: auto;
}

.st-donation-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.st-donation-back {
  background-color: transparent;
  border: 1px solid var(--wp--preset--color--divider);
  color: var(--wp--preset--color--foreground);
}

.st-payment-slip {
  border: 2px dashed var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--md);
  padding: var(--wp--preset--spacing--lg);
  margin-bottom: var(--wp--preset--spacing--lg);
}

.st-payment-slip__row {
  display: flex;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--md);
  padding: var(--wp--preset--spacing--xs) 0;
  border-bottom: 1px solid var(--wp--preset--color--divider);
  font-size: var(--wp--preset--font-size--sm);
}

.st-payment-slip__row:last-child {
  border-bottom: none;
}

.st-payment-slip__label {
  color: var(--wp--preset--color--foreground-muted);
}

.st-payment-slip__value {
  font-weight: 600;
  text-align: right;
}

.st-payment-slip__qr {
  text-align: center;
  margin-top: var(--wp--preset--spacing--lg);
  padding-top: var(--wp--preset--spacing--lg);
  border-top: 1px solid var(--wp--preset--color--divider);
}

.st-payment-slip__qr img {
  margin-inline: auto;
}

.st-payment-slip__qr-caption {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--foreground-muted);
  margin-top: var(--wp--preset--spacing--xs);
  max-width: 320px;
  margin-inline: auto;
}

/* =========================================================
   KONTAKT FORMA (Contact Form 7)
   Plugin ne nosi SVOJ CSS za polja — bez ovoga se prikazuju kao goli
   browser-default input/textarea/dugme, upadljivo generički usred inače
   doteranog sajta (Bojanova primedba). Namerno kopira ISTI vizuelni
   jezik kao `.st-donation-fields` na Donacije stranici (isti spacing/
   border/radius tokeni) da forme na sajtu izgledaju kao deo iste
   porodice komponenti, ne kao dva različita sistema. Selektori ciljaju
   CF7-ove sopstvene klase (`.wpcf7-form`, `.wpcf7-form-control`, itd.)
   jer plugin generiše HTML iz svog obrasca (post 71) — ne editujemo
   njegov markup direktno.

   Kartica koja obavija formu je `layout:{"type":"flex","orientation":
   "vertical"}` — WP-ov vertikalni flex layout NE stretch-uje decu na
   punu širinu (`align-items:flex-start`, isti mehanizam koji je ranije
   pravio problem sa CTA dugmićima na mobilnom, vidi STATUS.md stavka
   47). Bez ovoga `.wpcf7` (spoljni div koji plugin renderuje oko cele
   forme) se skupi na širinu svog najšireg deteta umesto da ispuni
   karticu — upravo ono što je Bojan primetio ("kocka šira nego
   elementi"). */
/* Liste ("Ciljevi fondacije", Organizacija — Upravni odbor/Izvršni
   direktor) — Bojan tražio srce umesto podrazumevane tačke (disc).
   `::marker` ima namerno OGRANIČEN skup CSS svojstava koja prihvata
   (nema position/padding za precizno poravnanje), pa je pouzdanije
   ugasiti podrazumevanu tačku (`list-style:none`) i nacrtati srce kao
   `::before` na svakoj stavci — daje punu kontrolu nad pozicijom i
   veličinom, i identično se renderuje u svim browserima. */
.st-list-heart {
  list-style: none;
  padding-left: 0;
}

.st-list-heart li {
  position: relative;
  padding-left: 1.4em;
}

.st-list-heart li::before {
  content: "♥";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--wp--preset--color--brand);
  font-size: 0.85em;
}

.wpcf7 {
  width: 100%;
}

.wpcf7-form p {
  margin: 0 0 var(--wp--preset--spacing--md) 0;
}

.wpcf7-form label {
  display: block;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  margin-bottom: var(--wp--preset--spacing--2-xs);
}

.wpcf7-form .wpcf7-form-control.wpcf7-text,
.wpcf7-form .wpcf7-form-control.wpcf7-email,
.wpcf7-form .wpcf7-form-control.wpcf7-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--md);
  font-size: var(--wp--preset--font-size--md);
  font-family: inherit;
  color: var(--wp--preset--color--foreground);
  background-color: var(--wp--preset--color--background);
  transition: border-color var(--wp--custom--transition--fast);
}

.wpcf7-form .wpcf7-form-control.wpcf7-textarea {
  /* `height`, ne `min-height` — CF7 renderuje textareu sa HTML
     `rows="10"` atributom, koji sam po sebi daje intrinzičnu visinu
     veću od bilo kog `min-height` manjeg od nje (min-height samo
     garantuje DONJU granicu, ne skraćuje veću intrinzičnu visinu).
     Eksplicitan `height` je jedini način da se stvarno skrati bez
     menjanja `rows` atributa u samom CF7 obrascu. */
  height: 48px;
  resize: vertical;
}

.wpcf7-form .wpcf7-form-control:focus {
  outline: none;
  border-color: var(--wp--preset--color--brand);
}

.wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--wp--preset--color--error);
}

.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  color: var(--wp--preset--color--error);
  font-size: var(--wp--preset--font-size--xs);
  margin-top: var(--wp--preset--spacing--2-xs);
}

.st-contact-form__submit-row {
  margin-bottom: 0 !important;
}

.wpcf7-form input.wpcf7-submit {
  background-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  border: none;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xl);
  border-radius: var(--wp--custom--border-radius--md);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--wp--custom--transition--fast);
}

.wpcf7-form input.wpcf7-submit:hover {
  background-color: var(--wp--preset--color--brand-hover);
}

.wpcf7-form input.wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wpcf7-spinner {
  margin-left: var(--wp--preset--spacing--sm);
}

/* CF7's OWN stylesheet (includes/css/styles.css) targets these same
   states as `.wpcf7 form.invalid .wpcf7-response-output` etc. — that
   extra `form` element selector gives it HIGHER specificity than a
   plain `.wpcf7-form.invalid ...`, so it wins regardless of our load
   order. Matching the `form` element here (not just `.wpcf7-form`) is
   required, not stylistic, to actually override CF7's built-in
   blue/green/red/yellow border colors. */
form.wpcf7-form .wpcf7-response-output {
  margin: var(--wp--preset--spacing--md) 0 0 0;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--md);
  font-size: var(--wp--preset--font-size--sm);
}

form.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--wp--preset--color--success);
  color: var(--wp--preset--color--success-text);
  background-color: color-mix(in srgb, var(--wp--preset--color--success) 10%, transparent);
}

form.wpcf7-form.failed .wpcf7-response-output,
form.wpcf7-form.aborted .wpcf7-response-output,
form.wpcf7-form.invalid .wpcf7-response-output,
form.wpcf7-form.unaccepted .wpcf7-response-output {
  border-color: var(--wp--preset--color--error);
  color: var(--wp--preset--color--error);
  background-color: color-mix(in srgb, var(--wp--preset--color--error) 8%, transparent);
}

/* Štampa — izoluje samo uplatnicu, sakriva header/footer/wizard kontrole */
@media print {
  body * {
    visibility: hidden;
  }

  .st-payment-slip,
  .st-payment-slip * {
    visibility: visible;
  }

  .st-payment-slip {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
  }
}

/* Homepage CTA dugmad ("Podržite nas"/"Saznaj više", "O Marijani",
   "Galerija slika") su na desktopu namerno levo poravnata, ispod
   levo poravnatog naslova/teksta. Na mobilnom su to kratka, uska
   dugmad koja bez ovoga "vise" uz levu ivicu ekrana — centriranje
   samo ovde ih vizuelno izjednačava sa ostalim CTA sekcijama na
   sajtu (koje su već centrirane preko WP-ovog justifyContent).

   width:100% je neophodan uz justify-content — u "Umetnost" zigzag
   sekcijama je roditelj .wp-block-buttons-a flex kolona (is-layout-flex)
   bez align-items:stretch, pa se sâm .wp-block-buttons kontejner bez
   ovoga skupi na širinu dugmeta (fit-content) i justify-content onda
   nema slobodan prostor da centrira — mora prvo da se razvuče na punu
   širinu reda pa tek onda centrira sadržaj unutar njega. */
@media (max-width: 781px) {
  .st-mobile-center-buttons {
    width: 100%;
    justify-content: center;
  }
}

/* Hero slika Marijane — na desktopu je uska bočna kolona (32% širine)
   pa portretni odnos stranica 2:3 izgleda skladno. Kad se kolone na
   mobilnom slože jedna ispod druge, ta ista kolona postaje 100% širine
   ekrana, a fiksni 2:3 odnos tu istu sliku pretvara u jako visok pravougaonik
   (širina ekrana × 1.5 visine). clamp() je umesto fiksnog px, tako da se
   slika i dalje responsive skalira između telefona i tableta, samo u
   znatno užem opsegu nego puna širina ekrana. Skopirano striktno na
   `.st-hero-tint-soft` (hero na početnoj) da ne dira iste `.st-parallax-frame`
   slike na stranici O Marijani, koje su 3:2 (landscape) i tamo nemaju
   ovaj problem. */
@media (max-width: 781px) {
  .st-hero-tint-soft .st-parallax-frame {
    max-width: clamp(190px, 50vw, 300px);
    margin-inline: auto;
  }
}