/* =========================================================================
   Gospa od Suza — WordPress sloj (dopuna base.css)
   Stranice, objave, arhiva, pretraga, kontakt, administratorska traka.
   Koristi iste dizajn-tokene (:root) definirane u base.css.
   ========================================================================= */

/* ---- Brend tipografija (self-hosted, Knjiga grafičkih standarda) ----
   Henriette = sekundarna (naslovi/logotip, zamjena za Cormorant Garamond).
   Neue Haas Grotesk = primarna (tekst/UI, zamjena za Inter). font-weight
   brojevi ispod su samo deskriptori za podudaranje s postojećim CSS-om
   (400/500/600) — ne odgovaraju nužno stvarnom nazivu reza fonta. */
@font-face{font-family:'Henriette';src:url('../fonts/henriette/henriette-regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Henriette';src:url('../fonts/henriette/henriette-italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Henriette';src:url('../fonts/henriette/henriette-medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Henriette';src:url('../fonts/henriette/henriette-bold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('../fonts/neue-haas-grotesk/nhg-text-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('../fonts/neue-haas-grotesk/nhg-text-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('../fonts/neue-haas-grotesk/nhg-text-bold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}

/* ---- Administratorska traka: sticky header ispod nje ---- */
.admin-bar header { top: 32px; }
@media (max-width: 782px) { .admin-bar header { top: 46px; } }

/* ---- Mega izbornik bez istaknutog bloka: jedan stupac ---- */
@media (min-width: 881px) {
  .gos-mega__inner--nofeature { grid-template-columns: 1fr; }
}

/* ---- Naslovnica — Dobrodošlica: korisnička slika (zamjena zadane ilustracije) ---- */
.welcome-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================================
   UNUTARNJE STRANICE — zaglavlje (page-hero)
   ========================================================================= */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, var(--marian), var(--night) 84%);
  color: var(--stone); padding: 66px 0 50px;
}
/* Featured Image stranice (ako je postavljena) — isti gradijent postaje poluprozirni
   overlay preko fotografije, radi čitljivosti teksta; bez Featured Image ostaje
   gore, potpuno nepromijenjeno. Vidi gos_page_hero_open() u inc/template-tags.php. */
.page-hero.page-hero--photo {
  background-image: linear-gradient(158deg, rgba(64,68,114,.82), rgba(64,68,114,.9) 84%), var(--page-hero-img);
  background-size: cover;
  background-position: center;
}
.page-hero::after {
  content: ''; position: absolute; right: -6%; top: -40%;
  width: 46%; height: 150%;
  background: radial-gradient(closest-side, rgba(178,151,88,.22), transparent 70%);
  pointer-events: none;
}
.page-hero .teardrop-wm {
  position: absolute; right: 4%; top: 8%; width: 240px; opacity: .16; pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .eyebrow {
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 14px;
}
.page-hero h1 {
  font-family: 'Henriette', serif; font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem); color: #fff; line-height: 1.08; max-width: 20ch;
}
.page-hero .page-lead {
  margin-top: 16px; max-width: 62ch; font-size: 1.06rem; color: rgba(247,243,236,.85);
}
.crumbs { font-size: .78rem; color: rgba(247,243,236,.66); margin-bottom: 14px; }
.crumbs a { color: var(--gold-soft); transition: opacity .2s; }
.crumbs a:hover { opacity: .8; }
.crumbs .sep { margin: 0 8px; opacity: .5; }

/* =========================================================================
   SADRŽAJ STRANICE / OBJAVE (proza)
   ========================================================================= */
.page-body { padding: clamp(48px, 6vw, 80px) 0; }
.entry-content { max-width: 760px; margin: 0 auto; font-size: 1.06rem; color: var(--ink); }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 {
  font-family: 'Henriette', serif; font-weight: 500; color: var(--marian);
  font-size: 1.9rem; line-height: 1.15; margin: 1.7em 0 .5em;
}
.entry-content h3 {
  font-family: 'Henriette', serif; font-weight: 600; color: var(--night-2);
  font-size: 1.4rem; margin: 1.5em 0 .4em;
}
.entry-content p { margin: 0 0 1.15em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.25em 1.35em; }
.entry-content li { margin-bottom: .45em; }
.entry-content a { color: var(--marian); border-bottom: 1px solid var(--gold); transition: color .2s; }
.entry-content a:hover { color: var(--gold-ink); }
.entry-content strong { color: var(--ink); font-weight: 600; }
.entry-content blockquote {
  border-left: 3px solid var(--gold); background: var(--stone);
  padding: 18px 24px; margin: 1.5em 0; border-radius: 0 var(--r-md) var(--r-md) 0;
}
.entry-content blockquote p {
  font-family: 'Henriette', serif; font-style: italic;
  font-size: 1.3rem; color: var(--ink); margin: 0;
}
.entry-content img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.entry-content hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.entry-content figure { margin: 1.5em 0; }
.entry-content figcaption { font-size: .82rem; color: var(--muted); margin-top: 6px; text-align: center; }
.alignleft { float: left; margin: .3em 1.5em 1em 0; max-width: 50%; }
.alignright { float: right; margin: .3em 0 1em 1.5em; max-width: 50%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .wp-block-image { margin: 1.5em 0; }

/* Landing-rubrike: popis podstranica kao "kartice" */
.section-links {
  max-width: 760px; margin: 2em auto 0; list-style: none; padding: 0;
  display: grid; gap: 12px;
}
.section-links li { margin: 0; }
.section-links a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); transition: background .18s, border-color .18s, transform .18s;
}
.section-links a:hover { background: var(--stone); border-color: var(--gold); transform: translateX(3px); }
.section-links .sl-title { font-family: 'Henriette', serif; font-size: 1.3rem; color: var(--marian); }
.section-links .sl-desc { font-size: .88rem; color: var(--muted); margin-left: auto; text-align: right; }

/* =========================================================================
   NOVOSTI — filter kategorija (iznad grida)
   ========================================================================= */
.news-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.news-filter .nf-pill {
  font-size: .82rem; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--marian); transition: all .2s; white-space: nowrap;
}
.news-filter .nf-pill:hover { background: var(--stone); border-color: var(--gold); }
.news-filter .nf-pill.is-active { background: var(--marian); color: #fff; border-color: var(--marian); }

/* =========================================================================
   NOVOSTI — arhiva / kategorija / pretraga (kartice)
   ========================================================================= */
.archive-wrap { padding: clamp(48px, 6vw, 80px) 0; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post-card {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card .pc-thumb {
  display: block; aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #d9cfba, #c3b69b);
}
.post-card .pc-thumb.t2 { background: linear-gradient(135deg, #cdbfa0, #a9966f); }
.post-card .pc-thumb.t3 { background: linear-gradient(135deg, #bcc6da, #8c9ec2); }
.post-card .pc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-card .pc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card .tag {
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 600; margin-bottom: 8px;
}
.post-card h2, .post-card h3 {
  font-family: 'Henriette', serif; font-weight: 600; font-size: 1.4rem;
  line-height: 1.2; color: var(--ink); margin: 0 0 10px;
}
.post-card h2 a, .post-card h3 a { transition: color .2s; }
.post-card:hover h2 a, .post-card:hover h3 a { color: var(--marian); }
.post-card p { font-size: .92rem; color: var(--muted); flex: 1; margin: 0; }
.post-card .date { margin-top: 14px; font-size: .76rem; color: var(--muted); }

/* Pretraga: naslov */
.archive-head { margin-bottom: 40px; }
.archive-head .eyebrow {
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 8px;
}
.archive-head h1 { font-size: var(--fs-h2); color: var(--marian); }
.archive-head p { color: var(--muted); margin-top: 8px; }

/* =========================================================================
   POJEDINAČNA OBJAVA
   ========================================================================= */
.single-post .entry-content { margin-top: 4px; }
.post-tax { margin-top: 12px; font-size: .82rem; color: rgba(247,243,236,.8); }
.entry-footer {
  max-width: 760px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted);
}
.entry-footer a { color: var(--marian); }
.post-nav {
  max-width: 760px; margin: 28px auto 0; display: flex; justify-content: space-between; gap: 18px;
}
.post-nav a { color: var(--marian); font-weight: 600; font-size: .9rem; }
.post-nav .pn-label { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.back-to-news { max-width: 760px; margin: 0 auto 24px; }
.back-to-news a { font-size: .84rem; color: var(--marian); font-weight: 600; }

/* =========================================================================
   ŽUPNI LISTIĆI — PDF kartica i modalni pregled
   ========================================================================= */
.listic-pdf-card {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto 32px; padding: 22px 26px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.listic-pdf-card .lp-icon {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  background: var(--stone); display: flex; align-items: center; justify-content: center;
}
.listic-pdf-card .lp-icon svg { width: 24px; height: 24px; stroke: var(--marian); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.listic-pdf-card .lp-info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.listic-pdf-card .lp-eyebrow { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }
.listic-pdf-card .lp-name { font-family: 'Henriette', serif; font-size: 1.15rem; color: var(--ink); word-break: break-word; }
.listic-pdf-card .lp-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.listic-pdf-card .btn { padding: 11px 20px; font-size: .82rem; }
.listic-pdf-card .btn-outline { background: transparent; border: 1px solid var(--marian); color: var(--marian); }
.listic-pdf-card .btn-outline:hover { background: var(--marian); color: #fff; }

.pdf-modal {
  position: fixed; inset: 0; z-index: 120; padding: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,22,42,.6); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s;
}
.pdf-modal.open { opacity: 1; visibility: visible; }
.pdf-modal__backdrop { position: absolute; inset: 0; }
.pdf-modal__panel {
  position: relative; width: 100%; max-width: 900px; height: 88vh;
  background: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  overflow: hidden; transform: translateY(-16px); opacity: 0;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s;
}
.pdf-modal.open .pdf-modal__panel { transform: translateY(0); opacity: 1; }
.pdf-modal__panel iframe { width: 100%; height: 100%; border: 0; display: block; }
.pdf-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: border-color .2s;
}
.pdf-modal__close:hover { border-color: var(--gold); }

/* =========================================================================
   MODAL "IZRADIO INVICTUM" (footer) — tamna "featured" kartica, isti
   vizualni jezik kao .gos-mega__feature/.devetnica (gradient var(--marian)→
   var(--night), zlatni radial-glow akcent, zlatna gornja linija) umjesto
   običnog paper panela — premium dojam dosljedan ostatku teme.
   ========================================================================= */
/* Podebljano + kontinuirani, vrlo suptilan "shine" preko teksta (bijela
   svjetlost s lijeva na desno, u petlji) — background-clip:text tehnika,
   bez utjecaja na layout/performanse (samo background-position se animira).
   Hover: animacija se zaustavi, boja prijeđe u istu zlatnu kao ostale
   stavke footera (var(--gold-soft), vidi footer ul a:hover). */
.finfo-credit {
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  /* UZROK nestajanja teksta: background-repeat:no-repeat + background-position
     koji ide izvan sigurnog [0%,100%] raspona (za background-size:260%) zna
     u nekom trenutku animacije potpuno odgurati gradijent izvan elementa —
     bez repeat-a tu onda nema ničega (tekst je proziran, oslanja se
     isključivo na background-clip), pa "nestane". Rješenje: background-repeat
     ostaje na zadanom "repeat" (gradijent se beskonačno ponavlja pa uvijek
     nešto prekriva tekst), a i sami rubni tonovi gradijenta nisu prozirni
     (min. rgba(255,255,255,.55)) — tekst je uvijek vidljiv, mijenja se samo
     sjaj koji prolazi preko njega. */
  background-image: linear-gradient(100deg, rgba(255,255,255,.55) 35%, #fff 50%, rgba(255,255,255,.55) 65%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: gosCreditShine 6s linear infinite;
  transition: color .25s, -webkit-text-fill-color .25s;
}
.finfo-credit:hover {
  animation-play-state: paused;
  background-image: none;
  color: var(--gold-soft); -webkit-text-fill-color: var(--gold-soft);
}
@keyframes gosCreditShine {
  0% { background-position: 160% 0; }
  100% { background-position: -160% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .finfo-credit { animation: none; }
}
.info-modal {
  position: fixed; inset: 0; z-index: 120; padding: 28px;
  display: flex; align-items: center; justify-content: center;
  /* Zatamnjeno više nego .pdf-modal (bila .6) — panel je iste plave obitelji
     kao footer iza njega, pa mu treba tamnija pozadina za jasno odvajanje
     (posebno kad je modal otvoren pri dnu stranice, preko footera). */
  background: rgba(8,11,22,.8); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s;
}
.info-modal.open { opacity: 1; visibility: visible; }
.info-modal__backdrop { position: absolute; inset: 0; }
.info-modal__panel {
  position: relative; width: 100%; max-width: 520px; max-height: 85vh; overflow: hidden auto;
  /* rgb(42,44,74) = ~65% #404472 + 35% crna (color-mix) — otkad je --night
     objedinjen s --marian (ista boja), var(--marian)→var(--night) ovdje bi
     bio ravan ton bez gradijenta; ova mješavina i dalje ostaje unutar
     definirane palete, samo tamnija nijansa iste plave. */
  background: linear-gradient(158deg, var(--marian), rgb(42,44,74) 85%); color: #fff;
  border-radius: var(--r-lg);
  /* Neutralna (ne plava) sjena — var(--shadow-lg) je plavo-tonirana pa se
     gubi na plavom footeru iza. Dublja crna sjena + suptilan svijetli
     "ring" oko ruba jasno odvajaju panel od pozadine iza njega. */
  box-shadow: 0 32px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(247,243,236,.1);
  padding: 44px 38px 38px;
  transform: translateY(-16px) scale(.96); opacity: 0;
  transition: transform .34s cubic-bezier(.2,.7,.2,1), opacity .3s;
}
.info-modal.open .info-modal__panel { transform: translateY(0) scale(1); opacity: 1; }
/* zlatna gornja linija — isti motiv kao .hero-divider */
.info-modal__panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft) 60%, transparent);
}
/* difuzni zlatni sjaj u gornjem desnom kutu — isti motiv kao .gos-mega__feature::after */
.info-modal__panel::after {
  content: ''; position: absolute; right: -25%; top: -25%; width: 75%; height: 75%;
  background: radial-gradient(closest-side, rgba(178,151,88,.30), transparent 70%);
  pointer-events: none;
}
.info-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(247,243,236,.3);
  background: none; cursor: pointer; transition: border-color .2s;
}
.info-modal__close:hover { border-color: var(--gold-soft); }
.info-modal__close span { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; background: var(--stone); border-radius: 2px; }
.info-modal__close span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.info-modal__close span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }
.info-modal__panel .eyebrow { position: relative; z-index: 1; display: block; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 10px; }
.info-modal__panel h3 { position: relative; z-index: 1; font-family: 'Henriette', serif; font-weight: 500; color: #fff; font-size: 1.9rem; margin-bottom: 16px; }
.info-modal__panel p { position: relative; z-index: 1; color: rgba(247,243,236,.82); font-size: .98rem; line-height: 1.7; }
.info-modal__panel p + p { margin-top: 12px; }
.info-modal__stats {
  position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 26px;
  padding-top: 22px; border-top: 1px solid rgba(247,243,236,.16);
}
.info-modal__stat { flex: 1; text-align: center; }
.info-modal__stat strong { display: block; font-family: 'Henriette', serif; font-weight: 500; font-size: 1.55rem; color: var(--gold-soft); line-height: 1; }
.info-modal__stat span { display: block; margin-top: 7px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,243,236,.6); }
.info-modal__cta {
  position: relative; z-index: 1; margin-top: 26px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-soft); color: #fff; padding: 13px 24px; border-radius: 2px;
  font-size: .85rem; font-weight: 600; letter-spacing: .01em; transition: background .2s, transform .2s;
}
.info-modal__cta:hover { background: var(--gold); transform: translateX(2px); }
@media (max-width: 880px) {
  .info-modal { padding: 16px; }
  .info-modal__panel { padding: 38px 26px 30px; }
  .info-modal__stats { gap: 4px; }
}

/* =========================================================================
   PAGINACIJA
   ========================================================================= */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 52px; }
.pagination .page-numbers {
  padding: 10px 15px; border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--marian); font-size: .9rem; font-weight: 500; transition: all .2s;
}
.pagination a.page-numbers:hover { border-color: var(--gold); background: var(--stone); }
.pagination .current { background: var(--marian); color: #fff; border-color: var(--marian); }

/* =========================================================================
   KONTAKT
   ========================================================================= */
/* align-items: stretch (Gridov default) — namjerno BEZ "start" override-a koji je
   ovdje prije bio postavljen — kako bi .contact-card i .contact-map prirodno
   dobili jednaku visinu (visinu višeg od njih dvoje), bez fiksnih px vrijednosti.
   Na mobitelu (1 kolona, niže) svaka stavka je u SVOM redu pa se ovo ne primjenjuje
   — mapa ondje zadržava vlastiti min-height kao razuman pod. */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: stretch; max-width: 1000px; margin: 0 auto; }
/* min-width:0 na obje stavke: bez ovoga, Google Maps iframe (koji nosi hardkodiran
   HTML width="600" atribut iz Google-ovog embed koda) tjera CSS Grid da uzme tu
   vrijednost kao minimalnu širinu stavke (zadano grid ponašanje je min-width:auto),
   pa se cijela kolona "napuše" na 600px i prelije izvan .wrap-a — klasičan grid
   "blowout". min-width:0 dopušta gridu da stavku ispravno suzi na dodijeljeni prostor. */
.contact-card, .contact-map { min-width: 0; }
.contact-card {
  background: #fbf9f6; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 30px 30px 26px; box-shadow: var(--shadow-sm);
}
.contact-card h2 { font-family: 'Henriette', serif; color: var(--marian); font-size: 1.7rem; margin-bottom: 18px; font-weight: 500; }
.contact-row { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.contact-row:last-of-type { border-bottom: none; }
.contact-row .ic { flex: 0 0 auto; width: 22px; height: 22px; color: var(--gold); }
.contact-row .ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-row > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-row .cr-t { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* overflow-wrap: dugi nizovi bez razmaka (npr. e-mail adresa) inače se ne prelamaju
   i izlaze izvan .contact-card na uskim ekranima. */
.contact-row .cr-d { display: block; font-size: 1rem; color: var(--ink); overflow-wrap: break-word; }
.contact-row .cr-d a { color: var(--marian); }
.contact-socials { display: flex; gap: 12px; margin-top: 18px; }
.contact-socials a { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--marian); transition: all .2s; }
.contact-socials a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.contact-socials svg { width: 18px; fill: currentColor; }
/* min-height ovdje (ne na iframe/map-ph) je pod za mobitel, gdje kartica i mapa
   nisu u istom grid retku pa se ne stežu jedna na drugu. Na desktopu/tabletu
   (2 kolone) grid stretch (gore) izjednači .contact-map s visinom .contact-card,
   a iframe/map-ph ispod ispune tu visinu preko height:100%. */
.contact-map { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); min-height: 380px; }
.contact-map iframe, .contact-map .map-ph { display: block; width: 100%; height: 100%; border: 0; }
.contact-map .map-ph {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px;
  background: linear-gradient(160deg, #e7e0d2, #d7ccb8); color: var(--gold-ink); font-size: .9rem;
}
.contact-body { max-width: 1000px; margin: 44px auto 0; }
.contact-body .entry-content { margin: 0; }

/* =========================================================================
   404 / prazno
   ========================================================================= */
.notice-block { text-align: center; padding: clamp(60px, 10vw, 120px) 0; }
.notice-block .eyebrow { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 12px; }
.notice-block h1 { font-family: 'Henriette', serif; color: var(--marian); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 14px; }
.notice-block p { color: var(--muted); max-width: 46ch; margin: 0 auto 24px; }

/* Footer izbornik iz wp_nav_menu */
footer .footer-menu { list-style: none; margin: 0; padding: 0; }
footer .footer-menu li { font-size: .9rem; line-height: 1.9; }

/* Footer kontakt — telefon i e-mail (tel:/mailto: linkovi) */
footer .fbrand p a { transition: color .2s; }
footer .fbrand p a:hover,
footer .fbrand p a:focus-visible { color: var(--gold-soft); }

/* Footer — poziv na darivanje („Obnovimo svetište" + IBAN). Vlastita ćelija u
   drugom redu .fgrid-a (razmak daje row-gap), zato bez vlastitih margina. */
footer .fdonate { display: flex; flex-direction: column; gap: 2px; }
footer .fdonate__t {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Henriette', serif; font-size: 1.05rem; color: var(--gold-soft);
}
footer .fdonate__t svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* IBAN je dug niz bez razmaka — na uskim ekranima mora se smjeti prelomiti. */
footer .fdonate__iban { font-size: .9rem; color: #fff; overflow-wrap: break-word; }
footer .fdonate__iban span { letter-spacing: .03em; }

/* -------------------------------------------------------------------------
   Podnožje — dva poravnata vodoravna reda (samo dok su vidljiva 3 stupca)
     1. red: „Svetište Gospe od Suza" | „Rubrike"        | „Svetište"
     2. red: „Obnovimo svetište"      | društvene mreže   | napomena o arhivi
   ---------------------------------------------------------------------- */
@media (min-width: 881px) {
  /* Naslovi stupaca počinju na istoj GORNJOJ liniji, ali .t1 (1.5rem) i h4
     (.74rem) su različite veličine pa im tekst vizualno "pluta" na različitim
     visinama. Baseline poravnanje spusti manje naslove na istu crtu kao veliki. */
  footer .fgrid { align-items: baseline; row-gap: 30px; }

  /* Drugi red: fiksan stupac + red, pa ćelija bez sadržaja (npr. nema stare
     stranice) ne pomiče preostale dvije. */
  footer .fgrid > .fdonate      { grid-column: 1; grid-row: 2; }
  footer .fgrid > .socials      { grid-column: 2; grid-row: 2; }
  footer .fgrid > .archive-note { grid-column: 3; grid-row: 2; }

  /* Sve tri kreću od gornjeg ruba reda — to je ta zajednička vodoravna crta.
     Vlastite gornje margine iz base.css bi je razbile, pa idu na 0. */
  footer .fgrid > .fdonate,
  footer .fgrid > .socials,
  footer .fgrid > .archive-note { align-self: start; margin-top: 0; }
}

/* Ispod 881px .fgrid je jedan stupac (base.css): red-2 ćelije su tada obične
   stavke u nizu, a `order` čuva dosadašnji redoslijed čitanja — poziv na
   darivanje ostaje odmah ispod kontakt podataka, ne na kraju podnožja. */
@media (max-width: 880px) {
  footer .fgrid > .fbrand       { order: 1; }
  footer .fgrid > .fdonate      { order: 2; }
  footer .fgrid > .fcol         { order: 3; }
  footer .fgrid > .socials      { order: 4; }
  footer .fgrid > .archive-note { order: 5; }
}

/* Mobilni izbornik — telefon i e-mail (tel:/mailto: linkovi) u podnožju */
.menu-foot .info a { color: inherit; transition: color .2s; }
.menu-foot .info a:hover,
.menu-foot .info a:focus-visible { color: var(--gold-soft); }

/* Raspored (naslovnica) — auto-prepoznati tel:/mailto: linkovi u retku kartice */
.is-row .d a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 2px; transition: color .2s; }
.is-row .d a:hover,
.is-row .d a:focus-visible { color: var(--marian); }

/* Pristupačnost / pomoćno */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.post-hero-img { margin: 0 0 1.6em; }
.post-hero-img img { width: 100%; height: auto; border-radius: var(--r-md); display: block; }
.page-links { margin-top: 1.5em; font-size: .9rem; }
.page-links a { color: var(--marian); border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--r-sm); margin: 0 3px; }

/* =========================================================================
   NASLOVNICA — Hero: lijevi sadržaj (naslov u dva reda, razdjelnik, kartica
   "Današnje mise / Krunica"). Postojeća Customizer polja gos_hero_title/
   title_em ostaju ista — samo je HTML omotač promijenjen (dva <span> umjesto
   <em>) radi vizualnog razdvajanja u dva reda. "Današnje mise" je od 1.8.0
   dinamički generirano (assets/js/mass-schedule.js iz masses.json, vidi
   inc/mise-json.php) — kartica se uvijek prikazuje, redak Krunice ostaje
   ovisan o gos_hero_rosary_today (nepromijenjeno). base.css definira
   ".hero h1" (uklj. max-width:14ch) — ovdje ga presrećemo preko uže/
   preciznije klase ".hero .hero-title" (veća specifičnost od ".hero h1"),
   bez diranja base.css. */
.hero .hero-title { max-width: 640px; }
.hero-title__main,
.hero-title__accent { display: block; }
.hero-title__main {
  color: #fff; font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.1rem);
}
.hero-title__accent {
  margin-top: 2px;
  color: var(--gold-soft); font-style: italic; font-weight: 400;
  font-size: clamp(2.9rem, 6.4vw, 4.9rem);
}
.hero-divider {
  width: 74px; height: 2px; margin: 26px 0 0;
  background: linear-gradient(90deg, var(--gold), rgba(196,154,67,0));
}
.hero-schedule {
  display: inline-flex; align-items: stretch; gap: 20px;
  margin-top: 30px; padding: 16px 20px;
  border: 1.5px solid rgba(178,151,88,.4);
  border-radius: var(--r-md);
  /* Kartica ide tamnije prema crnoj (umjesto čiste #404472 na dvije razine
     prozirnosti) da se jasno odvoji od hero pozadine, koja je otkad je
     --night objedinjen s --marian iste nijanse plave. rgb(45,48,80) =
     color-mix 70% #404472 + 30% #000000 — nježnija/manje kontrastna mješavina
     nego prvi pokušaj (55/45), i dalje isključivo boje palete. Zlatni obrub
     ostaje pojačan radi dodatnog kontrasta. */
  background: linear-gradient(155deg, rgba(45,48,80,.74), rgba(45,48,80,.64));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(4,8,20,.28);
  backdrop-filter: blur(6px);
}
.hero-schedule__item { display: flex; align-items: center; gap: 13px; }
.hero-schedule__item small {
  display: block; margin-bottom: 4px;
  color: rgba(247,243,236,.56); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.hero-schedule__item strong { color: #fff; font-size: .98rem; font-weight: 500; }
.hero-schedule__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid rgba(178,151,88,.55); border-radius: 50%;
}
.hero-schedule__icon svg {
  width: 19px; height: 19px; fill: none; stroke: var(--gold-soft);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.hero-schedule__divider { width: 1px; align-self: stretch; background: rgba(247,243,236,.14); }
/* Prikazuje se samo ako je JavaScript onemogućen (dinamički raspored misa
   se inače renderira u .hero-schedule__mass-slot preko mass-schedule.js). */
.hero-schedule-noscript { margin-top: 14px; color: rgba(247,243,236,.6); font-size: .82rem; }

/* Dodatni difuzni snopovi svjetlosti U POZADINI (.hero-bg), odvojeni od
   postojećih .hero-light .ray elemenata (nedirano, ostaju kakvi jesu) —
   dublji, atmosferski sloj, dolazi odozgo s desne strane. Čisti CSS
   gradijenti + izražen blur, BEZ linija/rubova (nije "zraka" kao element,
   nego mekana svjetlosna mrlja) — dio je same .hero-bg (z-index:0, base.css),
   pa ga .hero-scrim (isti z-index, kasnije u DOM-u) i dalje blago prigušuje,
   ostaje iza kapljice i svega ostalog, ne odvlači pažnju od teksta. base.css
   nije dirano — ovo je ::before dodan iz wp.css (učitava se poslije). */
.hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(208deg, rgba(255,244,214,.24) 0%, rgba(255,244,214,0) 44%),
    linear-gradient(222deg, rgba(233,199,124,.16) 10%, rgba(233,199,124,0) 52%),
    linear-gradient(238deg, rgba(255,244,214,.1) 20%, rgba(255,244,214,0) 60%);
  filter: blur(70px);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* =========================================================================
   .hero-radiance — AMBIENTALNA kompozicija desne strane hero sekcije.
   NAMJERNO odvojena od .hero-photo-wrap (kapljice): pokriva CIJELI .hero
   (position:absolute inset:0, isto kao .hero-bg/.hero-scrim/.hero-light),
   ne mali okvir kapljice — zato zrake/sjaj mogu izlaziti daleko izvan
   kapljice i protezati se gotovo cijelom visinom herosa, umjesto da budu
   "zalijepljeni" uz nju. Sve pozicije/veličine su % OVOG punog .hero okvira
   (ne %-of-vlastite-kutije-kapljice kao prije) — zato je bilo koje rezanje
   pri vrhu nemoguće bez obzira na veličinu kapljice: gradijenti blijede na
   OBA kraja (isto načelo kao ranije), pa i kad ih .hero{overflow:hidden}
   negdje presiječe, boja je tamo već gotovo prozirna. z-index:1, ISPRED
   .hero-light-a (isti z-index, kasniji u DOM-u) ali IZA .hero-photo-wrap-a
   (z-index:2) — zrake/sjaj su POZADINA, kapljica ih uvijek prekriva. */
.hero-radiance {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
/* Na mobitelu (≤880px, širina gdje postoji hamburger meni) isključeno:
   blur/glow slojevi (.hr-beam, .hr-glow, veliki filter:blur+mix-blend-mode)
   usporavali su requestAnimationFrame/GSAP tako drastično da je animacija
   otvaranja mobilnog izbornika na vrhu naslovnice znala "puzati" i po 5-9
   sekundi umjesto ~0.6s (dijagnosticirano izolacijom element-po-element). */
@media(max-width:880px){ .hero-radiance { display: none !important; } }
/* Snopovi svjetlosti — dolaze iz gornjeg desnog dijela pozadine, NE iz
   kapljice: pozicionirani su na % PUNE širine/visine herosa, ne kutije
   kapljice. Gradijent blijedi na oba kraja (vrh/dno) da nikad ne ostavi
   vidljivu ravnu crtu gdje god ih .hero obreže. Veliki blur + screen-blend
   = mekan snop kroz maglu, ne oštra traka. */
.hr-beam {
  position: absolute; top: -10%; height: 130%;
  filter: blur(58px);
  mix-blend-mode: screen;
  background: linear-gradient(180deg,
    rgba(255,246,222,0) 0%,
    rgba(255,246,222,.4) 26%,
    rgba(255,246,222,.14) 56%,
    rgba(255,246,222,0) 86%);
}
/* 4 preklapajuća snopa (bilo 3 — "tri jasno vidljive trake" nije cilj),
   različitih širina/kutova/prozirnosti, gusto preklopljeni (45–98%) da se
   stope u JEDNO difuzno svjetlosno polje s naznakom smjera, ne u tri
   prebrojive trake. Razmaknuti šire nego kapljičin vlastiti obris — dio se
   vidi IZNAD kapljice, dio LIJEVO u razmaku prema tekstu, dio DESNO u
   vanjskoj margini. */
.hr-beam.b1 { left: 44%; width: 11%; transform: rotate(-10deg); opacity: .3; }
.hr-beam.b2 { left: 58%; width: 16%; transform: rotate(-2deg);  opacity: .4; }
.hr-beam.b3 { left: 76%; width: 14%; transform: rotate(6deg);   opacity: .36; }
.hr-beam.b4 { left: 91%; width: 9%;  transform: rotate(13deg);  opacity: .26; }
/* Sjaj/aura POZADINE — više VRLO blagih preklapajućih slojeva (različite
   veličine/pozicije/blur), a ne jedan veliki krug: rubovi im se nikad ne
   poklapaju, pa se nijedan pojedinačni "rub" ne vidi — stapaju se jedni s
   drugima i s .hero-bg iza njih. Namjerno "gotovo neprimjetni" (niske
   opacity, 5 slojeva umjesto 4, veći blur) — ovo je POZADINSKA atmosfera;
   kapljičin VLASTITI, tijesni sjaj je posve odvojen (.gos-drop-outer-glow,
   u .hero-photo-shape). */
.hr-glow {
  position: absolute; border-radius: 50%;
  mix-blend-mode: screen;
}
.hr-glow.g1 { top: 2%;  right: -4%; width: 54%; height: 50%; filter: blur(85px);  background: radial-gradient(circle, rgba(233,199,124,.13) 0%, rgba(233,199,124,0) 72%); }
.hr-glow.g2 { top: 22%; right: 16%; width: 66%; height: 62%; filter: blur(105px); background: radial-gradient(circle, rgba(243,224,172,.1) 0%, rgba(243,224,172,0) 74%); }
.hr-glow.g3 { top: 42%; right: -6%; width: 46%; height: 44%; filter: blur(70px);  background: radial-gradient(circle, rgba(255,248,225,.1) 0%, rgba(255,248,225,0) 70%); }
.hr-glow.g4 { top: -2%; right: 28%; width: 34%; height: 32%; filter: blur(60px);  background: radial-gradient(circle, rgba(178,151,88,.12) 0%, rgba(178,151,88,0) 72%); }
/* Sitne svjetlosne čestice — dio pozadinske atmosfere, raspršene po cijeloj
   desnoj strani (ne stisnute uz kapljicu). */
.hr-sparkle { position: absolute; inset: 0; width: 100%; height: 100%; }
.hr-sparkle circle { filter: blur(.3px); }

/* =========================================================================
   NASLOVNICA — Hero: prava dvostupčana kompozicija (tekst lijevo / suza
   desno kao dominantan element), gos_hero_photo.
   4 eksplicitna stupca (tekst / razmak-praznina / suza / margina-praznina):
   svaki stupac ima točno određenu širinu, prazni stupci 2 i 4 su razmak/
   margina — deterministično, bez fragilne calc()-antikolizijske matematike.
   base.css i dalje definira ".hero{display:flex}" — ovdje ga presrećemo
   (wp.css se učitava POSLIJE base.css pa ista specifičnost svejedno
   pobjeđuje), bez diranja base.css. */
/* 5 stupaca (margina / tekst / razmak / suza / margina) — lijeva i desna
   margina su NAMJERNO ista vrijednost (14%) tako da hero sadržaj vizualno
   djeluje centriran, umjesto da tekst bude priljubljen uz sam rub stranice
   dok desna margina (uz suzu) ostaje veća. Margine povećane s 12%→14% i
   razmak-stupac smanjen 13%→9% (isti ukupni zbroj fiksnih stupaca, 67%) da
   se cijela kompozicija (tekst + kapljica) pomakne blago prema sredini, a
   ne samo prema svom rubu — bez gubitka zraka između njih. */
.hero {
  display: grid;
  grid-template-columns: 14% 30% 9% auto 14%;
  align-items: center;
  /* align-content:center JE STVARNI POPRAVAK reza pri vrhu suze (ne blur/
     gradijent na zrakama — to je bila samo posljedica). .hero{min-height:74vh}
     je čest slučaj VEĆI od jednog jedinog retka koji sadrži (visina retka =
     najviši element, .hero-photo-wrap ili .hero-inner). Bez align-content,
     zadano ponašanje (normal≈start) gura taj redak uz sam vrh .hero-a i svu
     "višak" visinu ostavlja na dnu — pa halo/zrake koje "cure" iznad kapljice
     (negativni inset) nemaju kamo, i .hero{overflow:hidden} ih odrezuje.
     align-content:center simetrično dijeli tu višak-visinu iznad i ispod
     retka, garantirajući razmak za bleed. */
  align-content: center;
}
/* .hero-inner NAMJERNO ima svoj align-self:start + eksplicitan padding-top —
   bez ovoga, razmak od vrha herosa dolazio je isključivo od "align-items:center"
   centriranja lijevog stupca unutar retka čiju visinu diktira .hero-photo-wrap
   (calc(74vh*.88), ovisi o visini prozora, ne o duljini teksta). Kad bi
   .hero-inner (visina ovisi o ŠIRINI stupca, ne o visini prozora) postao viši
   ili jednak .hero-photo-wrap-u — što se događa na nižim prozorima poput
   1366×768 — centriranje nije imalo što centrirati i razmak je kolabirao na
   0px (tekst zalijepljen uz vrh). align-self:start izuzima .hero-inner iz tog
   centriranja; padding-top je sad stvarna, kontrolirana vrijednost koja ne
   ovisi o visini .hero-photo-wrap-a. (.hero-photo-wrap zadržava svoj postojeći
   align-self:center, nedirano.) */
.hero .hero-inner {
  grid-column: 2; margin: 0; max-width: none; padding-left: 0;
  align-self: start;
  padding-top: clamp(40px, 6vh, 76px);
}

/* Kapljica je NAMJERNO izvan grid-flowa (position:absolute) na desktopu —
   veličina joj ne utječe na visinu retka/.hero-a (.hero ostaje na svojoj
   min-height:74vh podlozi bez obzira koliko kapljica naraste).
   VERTIKALNO POZICIONIRANJE: `top:50%; transform:translateY(-50%)` — PRAVO
   geometrijsko centriranje na Y-osi .hero-a, NE `bottom:%` sidrenje. Ovo je
   namjerna zamjena za prijašnji `bottom:3%` pristup: bottom-sidrena kapljica
   čija veličina ovisi o `min(vw,vh)` "tone" prema dolje čim vw-strop postane
   uži od vh-formule (izmjereno: pomak od centra herosa rastao od -66px na
   1669px do +144px na 1024px, širine i visine SASVIM nepovezano) — mijenjaj
   VELIČINU koliko god treba (i dalje `min(37vw,77.6vh)`, kontinuirana
   funkcija, ne breakpoint-tablica), POZICIJA CENTRA ostaje uvijek točno na
   sredini .hero-a jer je centriranje strukturno (top:50%+translateY),
   potpuno neovisno o tome koja od vw/vh formula "pobjeđuje" pri danoj
   veličini ekrana. */
.hero-photo-wrap {
  position: absolute; z-index: 2;
  top: 50%; right: 14%;
  transform: translateY(-50%);
  width: min(37vw, 77.6vh); height: auto; aspect-ratio: 100 / 124;
  pointer-events: none;
}
/* Na mobitelu (≤880px) isključena i kapljica s fotografijom (vanjska/unutarnja
   SVG kontura s feGaussianBlur filterima + maskirana fotografija) — zajedno s
   .hero-radiance (vidi gore) bila je uzrok zastoja pri otvaranju mobilnog
   izbornika na vrhu naslovnice. */
@media(max-width:880px){ .hero-photo-wrap { display: none !important; } }

/* SAMOSTALNA SVJETLOSNA KAPLJICA: nježno organski, profinjen oblik (6
   asimetričnih kubnih krivulja — namjerno NIJE simetrična ikona kapljice)
   s vlastitim toplim, višeslojnim zlatnim ispunjenjem (svjetlo "odozgo",
   ne ravnomjeran krug) — postoji UVIJEK, neovisno o fotografiji. Bleed je
   NAMJERNO malen i tijesan (-4%) — ovo je kapljičin VLASTITI, blizak sjaj
   (rub koji "gori"), a NE atmosfera cijele desne strane (to je isključivo
   .hero-radiance, potpuno odvojen sloj, vidi niže kod .hero). */
.hero-photo-shape {
  position: absolute; inset: -4%; z-index: 1;
  width: auto; height: auto; pointer-events: none;
}
.gos-drop-fill { opacity: .92; }
/* Vanjska kontura: ŠIRA zamagljena verzija iste linije ispod (topli sjaj,
   "jača i toplija") + tanja oštrija verzija iznad (definicija) — zajedno
   djeluju kao svjetlosni rub, ne kao tehnički okvir jednim potezom. Namjerno
   tanji/tiši nego prije (stroke-width 7→5, 2.2→2) jer sad ne mora nositi
   dojam "atmosfere" sam — to je posao .hero-radiance-a. */
.gos-drop-outer-glow { stroke: #f3d9a0; stroke-width: 5; opacity: .28; }
.gos-drop-outer { stroke: #eccb86; stroke-width: 2; opacity: .8; }

.hero-photo-frame {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
}
.hero-photo-inner-contour {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; pointer-events: none;
}
/* Unutarnja kontura: tanja, prozirnija, "kao odsjaj" — nacrtana na ZNATNO
   MANJEM (scale .74, bilo .8) putu nego vanjska, pa ostaje jasno vidljiv
   razmak + svjetlosni prijelaz (zlatno ispunjenje kapljice) između dvije
   linije — dvije odvojene "svjetlosne niti", ne zalijepljene ljuske. Ista
   dvoslojna tehnika kao vanjska (tanka zamagljena "glow" verzija ispod +
   oštrija tanka linija iznad), samo suptilnija, da i unutarnja kontura
   izgleda kao nit svjetlosti, ne kao ravna CSS linija. */
.gos-drop-inner-glow { stroke: #f7ecc9; stroke-width: 3; opacity: .16; }
.gos-drop-inner { stroke: #f7ecc9; stroke-width: .9; opacity: .42; }

/* .hero-photo-empty: DEFAULT stanje kad administrator nije uploadao Hero
   fotografiju — ista maska/feather kao .hero-photo-frame (identičan rub),
   ali umjesto <img> prikazuje postojeću tamnu/sakralnu atmosferu herosa
   (--night/--night-2, ista paleta kao .hero-bg/.hero-scrim) s toplim zlatnim
   sjajem odozgo (kao izvor svjetlosti) — kapljica NIKAD nije "prazna", nego
   uvijek ima sadržaj, fotografija je samo zamjena za ovaj isti prostor. */
.hero-photo-empty {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(178,151,88,.3) 0%, rgba(178,151,88,0) 48%),
    linear-gradient(165deg, var(--night-2) 0%, var(--night) 65%, #141a2c 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 124'%3E%3Cfilter id='b' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='13'/%3E%3C/filter%3E%3Cpath d='M50,6C34,22 14,48 11,74C8,99 27,117 50,118C73,117 92,99 89,74C86,48 66,22 50,6Z' transform='translate(50 62) scale(.74) translate(-50 -62)' filter='url(%23b)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 124'%3E%3Cfilter id='b' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='13'/%3E%3C/filter%3E%3Cpath d='M50,6C34,22 14,48 11,74C8,99 27,117 50,118C73,117 92,99 89,74C86,48 66,22 50,6Z' transform='translate(50 62) scale(.74) translate(-50 -62)' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* .hero-photo-frame: prava fotografija (uploadana), NE crtana ilustracija.
   Maska koristi ISTI (manji, scale .8) put kao unutarnja kontura, s
   IZRAŽENIM feGaussianBlur (stdDeviation 10, veći nego prije) tako da
   fotografija stvarno išćezava u svjetlu zlatnog tijela kapljice prema
   rubovima — "uronjena u svjetlost", ne "izrezana u masku". Slika je
   dodatno blago zumirana (scale 1.12) da se detalji bolje vide unutar
   kapljice, uz zadržan fokus (object-position/transform-origin). */
.hero-photo-frame {
  overflow: hidden;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 124'%3E%3Cfilter id='b' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='13'/%3E%3C/filter%3E%3Cpath d='M50,6C34,22 14,48 11,74C8,99 27,117 50,118C73,117 92,99 89,74C86,48 66,22 50,6Z' transform='translate(50 62) scale(.74) translate(-50 -62)' filter='url(%23b)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 124'%3E%3Cfilter id='b' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='13'/%3E%3C/filter%3E%3Cpath d='M50,6C34,22 14,48 11,74C8,99 27,117 50,118C73,117 92,99 89,74C86,48 66,22 50,6Z' transform='translate(50 62) scale(.74) translate(-50 -62)' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.hero-photo-frame img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  object-position: var(--hero-photo-pos, 50% 50%);
  transform: scale(1.12);
  transform-origin: var(--hero-photo-pos, 50% 50%);
}
/* Svjetlosni overlay: jače, mekano svjetlo koje "pada" odozgo (prva
   gradijent-linija), plus blagi topli/tamni tonalni prijelaz za dubinu —
   isti sloj radi za bilo koju fotografiju administrator uploada. */
.hero-photo-frame__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,248,230,.4) 0%, rgba(255,242,214,.12) 32%, rgba(255,242,214,0) 56%),
    linear-gradient(200deg, rgba(233,199,124,.14) 0%, rgba(233,199,124,0) 42%, rgba(10,16,32,.3) 100%);
  pointer-events: none;
}
/* Preglednici bez CSS mask/-webkit-mask podrške (rijetko, npr. vrlo stari Firefox):
   grubo poligonalno kadriranje umjesto točnog krivuljnog oblika suze. */
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .hero-photo-frame {
    clip-path: polygon(50% 8%, 65% 22%, 77% 38%, 85% 55%, 88% 70%, 82% 84%, 68% 94%, 50% 97%, 32% 94%, 18% 84%, 12% 70%, 15% 55%, 23% 38%, 35% 22%);
  }
}

/* =========================================================================
   RESPONZIVNO
   ========================================================================= */
@media (max-width: 880px) {
  .post-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .section-links .sl-desc { display: none; }
  /* Ispod 880px hero prelazi u slaganje-u-stupac, pa 5-stupčano desktop
     pozicioniranje (margina/tekst/razmak/suza/margina) više nije potrebno —
     suza ide iznad teksta, hero na mobitelu smije narasti nešto iznad 74vh
     kako bi oba elementa stala u stog (uobičajeno ponašanje za slagani hero).
     align-content:start (umjesto naslijeđenog "center") NAMJERNO: kad je
     hero-inner (tekst) kraći od .hero-a min-height:74vh poda, "center" bi
     razdijelio višak-visinu I IZNAD I ISPOD cijelog sloga (suza+tekst) —
     dodatan, nepredvidiv prostor iznad suze uz margin-top koji već postoji.
     "start" jamči da SAV eventualni višak ide ISPOD (manje uočljivo), a
     razmak iznad suze ovisi ISKLJUČIVO o margin-top-u niže — jedan, kontrolirani
     izvor razmaka, ne kombinacija dva. */
  .hero { grid-template-columns: 1fr; row-gap: 28px; align-content: start; }
  .hero .hero-inner, .hero-photo-wrap { grid-column: 1; }
  /* .hero-inner je sada PRVI/JEDINI red u stogu (.hero-photo-wrap je iznad
     ovoga trajno sakriven na mobitelu, vidi .hero-photo-wrap display:none
     niže) — razmak od headera koji je prije davao .hero-photo-wrap-ov
     margin-top (clamp(20px,4vh,34px)) više ne postoji, pa ga hero-inner
     sada nosi sam, izjednačen s postojećim donjim razmakom (66px, base.css). */
  .hero .hero-inner { padding-left: 28px; padding-top: 66px; }
  /* .hero-schedule je display:inline-flex (base pravilo) — širina se
     određuje isključivo prema SADRŽAJU (ikone+tekst+razmaci), NE prema
     dostupnom prostoru u .hero-inner-u. Na širim ekranima to je namjerno
     (kartica ne razvlači se preko cijele širine) — ali na uskim mobitelima
     (izmjereno: ~338px vlastite širine, konstantno, neovisno o ekranu)
     ta fiksna širina premašuje dostupni prostor (širine ≤ ~337px, npr.
     320px uobičajeni mali telefon) i .hero{overflow:hidden} je NEVIDLJIVO
     odsijeca (bez horizontalnog scrolla — pa se ne vidi ni u DevTools
     overflow provjerama, samo vizualno nedostaje dio kartice). Fiksni
     razmaci/padding/veličina ikone smanjeni kroz clamp() da kartica stvarno
     smanji svoju sadržajnu širinu na uskim ekranima (ne oslanja se na
     flex-shrink stiskanje kruga ikone), plus max-width/flex-wrap kao
     sigurnosna mreža za ekstremno uske slučajeve. */
  .hero-schedule {
    max-width: 100%; flex-wrap: wrap;
    gap: clamp(10px, 4vw, 20px);
    padding: clamp(12px, 3vw, 16px) clamp(14px, 4vw, 20px);
  }
  .hero-schedule__item { gap: clamp(8px, 2.5vw, 13px); }
  .hero-schedule__icon { width: clamp(32px, 9vw, 40px); height: clamp(32px, 9vw, 40px); }
  /* .hero-photo-wrap: position:relative (NE static!) — ovo je KLJUČNA
     ispravka razdvajanja slojeva. static uklanja wrap kao containing block
     za svu njegovu djecu (.hero-photo-shape/.hero-photo-inner-contour/
     .hero-photo-frame/.hero-photo-empty, svi position:absolute s inset-ima
     namijenjenim WRAP-u) — bez containing-blocka, preglednik posegne za
     SLJEDEĆIM pozicioniranim pretkom, .hero-om (cijela sekcija, drastično
     druge veličine/omjera) — izmjereno i dokazano (offsetParent). relative
     zadržava wrap U grid-flowu (order/grid-column i dalje rade identično
     kao sa static), ALI ga i dalje čini containing blockom — ista referenca
     na SVIM veličinama, desktop i mobitel, bez ijedne iznimke.
     top/right/transform EKSPLICITNO resetirani na auto/none — desktop
     pravilo (position:absolute) ispod postavlja top:50%;right:14%;
     transform:translateY(-50%) radi centriranja NA DESKTOPU. Za
     position:relative elemente top/right/transform I DALJE vrijede (kao
     pomak od normalne pozicije, ne kao sidrenje na rub containing blocka) —
     bez ovog reseta, right:14% je na mobitelu pomicao suzu ULIJEVO za 14%
     ŠIRINE CIJELOG HEROSA (izmjereno: -121px na 880px širine, kapljica
     vizualno "vučena" u stranu), a top:50%+translateY(-50%) ju je dodatno
     pomicao okomito.
     VODORAVNO CENTRIRANJE: left:50%+translateX(-50%) umjesto justify-self:
     center (kako je bilo prije). Oboje matematički daju isti rezultat, ALI
     justify-self:center centrira kroz grid-algoritam koji ovisi o LANCU
     izvedenih vrijednosti (40vh → clamp() → aspect-ratio → širina), a svaki
     korak tog lanca preglednik može sub-pixel zaokružiti malo drugačije —
     na desktopu (Chromium) razlika je izmjereno ispod 0.15px, nevidljivo,
     ALI korisnica je prijavila vizualno primjetan pomak baš na iPhoneu
     (WebKit), gdje nemamo alat za izravnu provjeru. left:50%+translateX(-50%)
     je jedan izravan izračun (pola širine kontejnera pa pola širine
     elementa), identičan u svim rendering engine-ima, bez posrednih
     koraka koji bi mogli akumulirati zaokruživanje — strukturno otporniji
     mehanizam, ne "popravak" bez dokazanog uzroka. */
  .hero-photo-wrap {
    position: relative; top: auto; right: auto;
    left: 50%; transform: translateX(-50%);
    order: -1; margin-top: clamp(20px, 4vh, 34px);
    /* TEST: eksplicitan width umjesto width:auto+aspect-ratio:100/124 — izolirana
       provjera utječe li aspect-ratio resolution algoritam (noviji CSS property,
       Safari tek od v15) na iOS WebKit render. Matematički identično (100/124
       primijenjeno na svaku clamp vrijednost), samo drugi mehanizam izračuna.
       Ako test ne pokaže razliku na stvarnom iPhoneu, vratiti na aspect-ratio. */
    height: clamp(200px, 40vh, 440px); width: clamp(161.29px, 32.2581vh, 354.84px);
  }
  /* .hero-radiance na mobitelu: kapljica je sad SREDIŠNJA (centrirana, na
     vrhu stoga), ne uz desni rub — snopovi/sjaj se preraspoređuju oko
     sredine gornjeg dijela herosa umjesto uz desni kut. */
  .hr-beam.b1 { left: 32%; width: 13%; }
  .hr-beam.b2 { left: 46%; width: 17%; }
  .hr-beam.b3 { left: 62%; width: 15%; }
  .hr-beam.b4 { left: 78%; width: 10%; }
  .hr-glow.g1 { top: 1%;  right: 16%; width: 72%; height: 30%; }
  .hr-glow.g2 { top: 9%;  right: 30%; width: 82%; height: 34%; }
  .hr-glow.g3 { top: 15%; right: 8%;  width: 62%; height: 26%; }
  .hr-glow.g4 { top: -1%; right: 40%; width: 48%; height: 20%; }
}
/* Ispod ~350px (mali telefoni, npr. 320px) kartica "Danas nje mise/Krunica"
   ni uz smanjene razmake/ikonu ne stane u jedan red (tekstualni sadržaj je
   donja granica koja se više ne može smanjivati bez utjecaja na čitljivost)
   — flex-wrap:wrap (gore) je već sprječava od nevidljivog odsijecanja, ali
   bez ovoga bi tanka razdjelna linija ostala "osamljena" na kraju prvog reda
   dok druga stavka prelazi u novi red. Sakrivanjem razdjelnika kad se
   stvarno prelama izbjegava se taj vizualni artefakt — sama dva retka
   (ikona+tekst, ikona+tekst) dovoljno se razlikuju bez linije između njih. */
@media (max-width: 350px) {
  .hero-schedule__divider { display: none; }
}
/* Vrlo mali mobiteli (<310px) — provjereno mjerenjem od 240px naviše (240px
   je praktični pod ovog alata za testiranje, uži Chrome prozor ne otvara;
   stvarni telefoni rijetko idu ispod ~280-320px CSS-piksela pa je ovo već
   ispod praktičnog minimuma). Izmjereno: NEMA horizontalnog scrolla ni
   asimetrične margine u ovom rasponu — hero-inner padding je već simetričan
   (28px lijevo/desno) na svim veličinama. JEDAN stvaran, mjerljiv problem
   pronađen: `.btn` ima fiksni `padding:13px 26px` (base.css) pa se dulji CTA
   tekst ("Raspored svetih misa") prelama u 2 retka ispod ~260px — nije
   pucanje layouta, ali izgleda nespretno. Ispravljeno slaganjem CTA gumba
   u stupac (svaki preko cijele širine) umjesto reda-koji-se-prelama — gumb
   tako dobiva puno više prostora za tekst u jednom retku. Bočni padding
   dodatno smanjen (28px→20px, i dalje simetrično obje strane) kao dodatni
   "zrak" na ekstremno uskim ekranima. */
@media (max-width: 310px) {
  .hero .hero-inner { padding-left: 20px; padding-right: 20px; }
  .hero .cta { flex-direction: column; align-items: stretch; }
  .hero .cta .btn { text-align: center; }
}

/* =========================================================================
   .devetnica — "floating" preklapajuća kartica na desktopu/tabletu (>880px).
   Ispod 880px devetnica ostaje potpuno kao prije (base.css: puna širina,
   var(--stone) pozadina, gornji/donji gold obrub, bez radiusa) — ovaj blok
   se ondje uopće ne primjenjuje, mobilni izgled nedirano.

   STRUKTURA (desktop/tablet) — NAMJERNO razdvojeno na dva elementa s
   RAZLIČITIM ulogama (prijašnji pokušaj je stavio border/radius/pozadinu
   NA .devetnica pa je dodani padding-bottom razvukao vidljivi "banner"
   samog sebe — pogrešno, banner se time promijenio):
   - .devetnica .wrap (UNUTARNJI div) = STVARNI, VIDLJIVI banner — border
     SA SVE ČETIRI STRANE, border-radius na sva 4 kuta, bijela pozadina,
     sjena. Veličina/oblik ovog elementa određuje ISKLJUČIVO njegov vlastiti
     sadržaj (badge/tekst/CTA), NIŠTA više — nedirano ovim krugom, identično
     "stanju prije zadnje izmjene".
   - .devetnica (VANJSKI element) = obična bijela POVRŠINA, BEZ border-a,
     BEZ border-radiusa, BEZ vlastite sjene — samo pozicionira/preklapa
     preko hero-a (margin-top) i, novo, ima padding-bottom da bude VIŠA
     od svog sadržaja (wrap-a). Budući da .wrap NEMA overflow:hidden
     ograničenje niti popunjava .devetnica-inu visinu (obično in-flow
     dijete, visina = vlastiti sadržaj), wrap ostaje TOČNO svoje prijašnje
     veličine, sjedi na vrhu .devetnice, a dodatnih 40px bijelog prostora
     vidljivo je ISPOD njegovog zaobljenog donjeg ruba — dodatna površina
     koja odvaja banner od video sekcije, bez ikakvog utjecaja na banner
     sam. Isti pristup radi za overlap: margin-top i dalje sjedi na
     .devetnici, pa je wrap-ov vrh (= devetnica-in vrh, wrap je prvo/jedino
     dijete) i dalje na istoj poziciji preko hero-a kao prije.

   PREKLAPANJE: margin-top je clamp(-40px,-4vh,-20px) — smanjeno s
   clamp(-52px,-5vh,-28px) (sve tri vrijednosti manje, isti responzivni
   oblik) da se doda više "zraka" između zadnjeg hero elementa i kartice.
   Budući da je NOVI raspon STROGO manji (po apsolutnoj vrijednosti) od
   starog na SVAKOJ visini prozora, ovo JAMČENO samo povećava razmak — nikad
   ga ne smanjuje niti otvara rizik kolizije koji prije nije postojao.
   Provjereno da razmak između zadnjeg hero elementa (raspored/CTA) i
   kartice ostaje pozitivan (i veći nego prije) na širokom rasponu širina/
   visina uključujući najtešnji slučaj (881×1000: 16px→26px).

   .devetnica NIJE potomak .hero-a (susjedna <section>) pa .hero{overflow:
   hidden} ne odsijeca preklapanje (odsijeca samo VLASTITE potomke, ne
   susjede) — provjereno, nema ni druge overflow:hidden/scroll prepreke
   (body ima samo overflow-x:hidden, #main nema overflow pravilo). Body
   background nije diran — .devetnica ima SVOJU LOKALNU bijelu pozadinu,
   ne oslanja se na/ne mijenja globalni body stil.

   z-index:3 na .devetnica EKSPLICITAN (ne oslanjati se na DOM-redoslijed) —
   .hero sam nema z-index pa ne uspostavlja vlastiti stacking-context.

   #reveal (GSAP ScrollTrigger pin, trigger:'#reveal', start:'top top') NIJE
   dirano — mjeri stvarnu poziciju dinamički, bez potrebe za JS izmjenom. */
@media (min-width: 881px) {
  .devetnica {
    position: relative; z-index: 3;
    width: min(1180px, calc(100% - 56px));
    margin: clamp(-40px, -4vh, -20px) auto 0;
    padding-bottom: 40px;
    background: var(--paper);
    /* base.css .devetnica{border-top/border-bottom:2px solid var(--gold)}
       vrijedi na SVIM širinama (nije mobile-scoped) — bez ovog eksplicitnog
       reseta, ta linija je "curila" i na desktopu, sudarajući se s .wrap-ovim
       zaobljenim gornjim rubom (izgledalo je kao oštar kut) i ostavljajući
       vidljivu zlatnu crtu na dnu produženog prostora. .wrap (niže) je jedini
       element s obrubom na desktopu/tabletu. */
    border: none;
    /* STVARNI uzrok "bijelih šiljaka": .devetnica nema border-radius (uklonjen
       kad je border/radius premješten na .wrap), pa je .devetnica OSTALA
       PRAVOKUTNA (oštri kutovi) — a budući da je .wrap uvučen samo za svoju
       vlastitu debljinu obruba (3px) i ZAOBLJEN, njegov okrugli kut ne
       pokriva cijeli taj uski, oštri kut .devetnice ispod. Ta tanka
       "L" pukotina (var(--paper), vrlo blizu bijeloj) u kutu iza zaobljenog
       ruba čita se kao šiljak/trokut na tamnoj hero pozadini. Dokazano uživo
       preko document.elementFromPoint() točno u toj pukotini — vraćao je
       SECTION.devetnica, ne .wrap. Ispravak: .devetnica dobiva ISTI
       border-radius kao .wrap, pa oba oblika prate identičnu krivulju i
       pukotina nestaje (bez overflow:hidden — to bi odsjeklo .wrap-ov
       box-shadow, koji sjedi na ISTOM elementu). */
    border-radius: var(--r-lg);
  }
  /* transform:translateZ(0) + will-change:transform — .devetnica-ina pozicija
     koristi clamp(-52px,-5vh,-28px) za margin-top; -5vh može ispasti na
     necjelobrojan piksel ovisno o visini prozora (izmjereno uživo: čak i uz
     "čist" -52px margin-top, .wrap-ov stvarni top zna ispasti npr. 870.188px
     — sub-pikselna pozicija dolazi iz LANCA izračuna iznad, ne samo iz ove
     jedne vrijednosti), pa cijela .wrap kutija (border-radius 14px + border)
     katkad sjedne na takvu poziciju — poznata Chromium nijansa gdje zaobljeni
     kut s obrubom na sub-pikselnoj poziciji zna ostaviti dlakoravu "bijelu"
     pukotinu točno na vrhu krivulje (vlastita pozadina elementa procuri kroz
     grešku u rasterizaciji ruba, ne kroz stvarni CSS sloj). translateZ(0)
     samo (bez will-change) preglednik ponekad optimizira natrag u obični 2D
     identitet kad je pomak 0 (izmjereno: matrix(1,0,0,1,0,0), ne matrix3d) —
     will-change:transform eksplicitno traži zaseban, cjelobrojno poravnat
     GPU sloj, pouzdanije od samog translateZ(0). Ne mijenja izgled, poziciju
     ni layout. border-width 2px→3px, samo debljina, boja/stil isti. */
  .devetnica .wrap {
    /* var(--paper) umjesto #fff — ista krem nijansa koju već koristi .is-card
       pozadina (base.css), pa je kartica dosljedna ostatku sitea. --paper je
       vrlo blizu bijeloj (#f7f3ec) pa nije trebalo dodatno svjetliju izvedenicu. */
    background: var(--paper);
    border: 3px solid var(--gold);
    border-radius: var(--r-lg);
    /* Suptilnija sjena — zadržava odvajanje od hero pozadine, bez "lebdećeg"
       dojma prejakog dvoslojnog shadowa koji je ovdje bio prije. */
    box-shadow: 0 14px 32px rgba(10, 16, 32, .16), 0 3px 8px rgba(10, 16, 32, .10);
    will-change: transform;
    transform: translateZ(0);
  }
  /* Više zraka između .d-badge i .d-txt — base.css .devetnica .d-main{gap:20px}
     vrijedi i na mobitelu (nedirano); ovdje samo povećavamo taj razmak za
     desktop/tablet prikaz .wrap-a. */
  .devetnica .d-main { gap: 30px; }
}
@media (max-width: 640px) {
  .pdf-modal { padding: 0; }
  .pdf-modal__panel { height: 100vh; max-width: none; border-radius: 0; }
  .listic-pdf-card { padding: 18px 20px; }
}
@media (min-width: 601px) and (max-width: 980px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}