/* ================================================================
   NASLOVNA KARTICA VJENČANJA — JEDNA, ZA OBA PORTALA
   ================================================================
   Vedran 2026-08-09, doslovno:

     „collapsed kartica nije ni slična kao kod gostiju, uopće nisi
      unificirao… mora biti ista, ista, ista. Kad kažem da nešto
      unificiraš, to znači da se taj shell doslovno prenosi, a ne
      površno."

   Prethodni pokušaj je dijelio samo MEHANIKU sklapanja
   (`dalia-collapse.css`), a kroj kartice je ostao dvostruk: gost je
   imao `.gp-hero2` (imena 23px u redu, sitni datum), par `.cp-hero`
   (imena clamp(36–50px) u stupcu, rukopisni datum). Dvije kartice koje
   se zovu isto i izgledaju različito — točno ono na što se žalio.

   Sada je kartica JEDNA DATOTEKA i JEDAN SKUP KLASA (`.gp-hero2*`).
   Oba predloška renderiraju ISTI markup; ovdje nema nijednog pravila
   koje bi vrijedilo samo za jedan portal.

   ZAŠTO `gp-` PREFIKS, KAD VIŠE NIJE SAMO GOSTOV: preimenovanje bi
   diralo gostov predložak, njegov dark blok i njegova mobilna pravila
   u istom potezu kad se popravlja parov ekran. Ime je slabiji signal
   od ponašanja; klase se prevode kad se dira sam gostov deck, ne usput.

   MJESTO U DECKU (`grid-column/row`) NIJE OVDJE — to je stvar svakog
   decka i ostaje u njegovoj datoteci. Ovdje je samo KROJ.
   ================================================================ */

/* ── Papir + akvarelni uglovi ───────────────────────────────────
   `display:flex` je OVDJE, ne u decku: gostov `.gp-tile` ga je davao, a
   parov `.paperC` ne — pa su `align-items`/`justify-content` niže na parovoj
   kartici bili mrtvo slovo i sadržaj je padao na dno papira.

   Selektor uglova je `.gp-hero2 > .gp-hero2-corner` (0,2,0), a ne sama klasa
   (0,1,0). Razlog je izmjeren, ne stilski: parov predložak ima
   `.paperC > * { position: relative }` — ISTA specifičnost, a inline `<style>`
   dolazi POSLIJE ove datoteke, pa je pobjeđivao. Uglovi su tada bili u toku
   dokumenta i dizali karticu s 72px na 287px. */
.gp-hero2 { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 26px 20px; }
/* BEZ `z-index` (Vedran 2026-08-09: „cvijeća se ne vidi").
   Ovdje je nakratko stajao `var(--z-behind)` = -1, jer je tokenizacija sirovu
   nulu prevela u najbliži token. Negativan sloj gura ugao IZA pozadine
   `.paperC`, pa cvijeće nestane s papira umjesto da leži na njemu.
   Apsolutni element bez `z-index` ionako slika iznad pozadine roditelja, a
   ispod `.gp-hero2-body` koji ima svoj sloj — točno željeni redoslijed. */
.gp-hero2 > .gp-hero2-corner { position: absolute; width: 172px; height: auto; pointer-events: none; opacity: .58; }
.gp-hero2 > .gp-hero2-corner.dc-tl { top: 0; left: 0; }
.gp-hero2 > .gp-hero2-corner.dc-br { bottom: 0; right: 0; width: 132px; transform: scale(-1,-1); }
.gp-hero2-body { position: relative; z-index: var(--z-content); display: flex; flex-direction: column; align-items: center; }

/* ── Imena ────────────────────────────────────────────────────── */
.gp-hero2-names {
  font-family: var(--font-serif); font-weight: 500; line-height: 0.92;
  color: var(--hero-ink); letter-spacing: -0.015em;
  font-size: clamp(46px, 5.2vw, 70px);
  display: flex; flex-direction: column; align-items: center; margin: 0;
}
.gp-hero2-names .nm { display: inline-block; cursor: default; transition: text-shadow .35s var(--ease, cubic-bezier(.22,1,.36,1)); }
.gp-hero2-names .amp {
  font-family: var(--font-serif); font-style: italic; color: var(--hero-amp);
  font-size: clamp(36px, 3.8vw, 52px); line-height: 1; margin: 2px 0;
  transition: transform .35s var(--ease, cubic-bezier(.22,1,.36,1)), color .35s;
}
.gp-hero2-names:hover .nm { text-shadow: 0 3px 22px rgba(182,146,212,0.38); }
.gp-hero2-names:hover .amp { transform: scale(1.07); color: var(--hero-amp-hover); }

/* ── Datum, mjesto ────────────────────────────────────────────── */
.gp-hero2-date { font-family: var(--font-script, 'Caveat', cursive); font-size: clamp(20px, 2vw, 26px); color: var(--hero-date); margin-top: 16px; }
.gp-hero2-venue { font-family: var(--font-sans); font-size: 13px; color: var(--hero-meta); margin-top: 6px; letter-spacing: 0.05em; }
.gp-hero2-venue a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(181,107,141,.5); }
/* Poziv na dopunu (par bez upisanog datuma/imena) — gost ga nikad ne vidi,
   ali kroj mu pripada ovdje da se ne piše po decku. */
.gp-hero2-add { font-family: var(--font-sans); font-size: 13px; color: var(--hero-meta); text-decoration: none; border-bottom: 1px dotted rgba(181,107,141,.5); margin-top: 10px; }
/* Pozivi na upis žive IZVAN .dc-strip gumba (a-u-gumbu = nevažeći HTML,
   klik je gutao toggle) — vlastiti red ispod vrpce. */
.gp-hero2-prompts { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 18px 10px; }
.gp-hero2-prompts .gp-hero2-add { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .gp-hero2-names .nm, .gp-hero2-names .amp { transition: none; }
  .gp-hero2-names:hover .nm { text-shadow: none; }
  .gp-hero2-names:hover .amp { transform: none; }
}

body.dark-mode .gp-hero2-names { color: var(--hero-ink-dark); }
body.dark-mode .gp-hero2-date { color: var(--hero-date-dark); }
body.dark-mode .gp-hero2-venue, body.dark-mode .gp-hero2-add { color: var(--hero-meta-dark); }
body.dark-mode .gp-hero2-corner { opacity: 0.32; }

/* ══ MOBITEL: NASLOVNA JE TANKA VRPCA ═════════════════════════════
   Vedran 2026-07-29 (gost) i 2026-08-09 (par, isti kroj):

   Panel je projektiran za desktop i tamo ima smisla; na 390px je uzimao
   280+ px prvog ekrana da kaže dvije stvari koje se ionako znaju — tko
   se ženi i kada. Vrpca je ~72px: imena u JEDNOM redu i sitni datum.
   Cvijeće ostaje, ali blijedo i izlazi iz okvira.

   Ostatak (mjesto, odbrojavanje) čeka tap — mehanika je u
   `dalia-collapse.css`, ovdje je samo kako izgleda.                */
@media (max-width: 900px) {
  .gp-hero2 { min-height: 0; padding: 0; }
  .gp-hero2 > .gp-hero2-body { padding: 0; width: 100%; }
  /* Cvijeće je NAMJERNO izvan papira — kut mora disati. Da ne pobjegne preko
     susjedne kartice, kartica ga REŽE, isto kao kod gosta (`.gp-tile` ima
     `overflow:hidden`). Geometrija je zato znak po znak gostova: pokušaj da se
     cvijet smanji dok ne stane dao je dvije različite kartice, a to je upravo
     ono što ova datoteka postoji da spriječi. Rez je u decku
     (`.cp-grid > .cp-hero{overflow:hidden}`) jer je ondje i pravilo koje ga je
     ukinulo. */
  .gp-hero2 > .gp-hero2-corner.dc-tl { width: 118px; height: auto; top: -16px; left: -22px; opacity: .5; }
  /* dc-br se povlači dalje u kut da šiljak stoji na čistom papiru, a ne
     preko latica. */
  .gp-hero2 > .gp-hero2-corner.dc-br { width: 78px; height: auto; bottom: -20px; right: -26px; opacity: .40; }

  /* Imena i datum idu na SREDINU (Vedran 2026-07-31): lijevo poravnati
     sjedili su točno na cvijeću iz gornjeg lijevog kuta, a sredina vrpce
     je čisti papir jer su oba cvjetna ugla vani. */
  .gp-hero2 .dc-strip { padding: 13px 44px; text-align: center; }
  .gp-hero2 .gp-hero2-names {
    font-size: 23px; flex-direction: row; align-items: baseline;
    gap: 7px; line-height: 1.05; justify-content: center;
  }
  .gp-hero2 .gp-hero2-names .amp { font-size: 18px; margin: 0; }
  .gp-hero2 .gp-hero2-date {
    font-family: var(--font-sans); font-size: 11.5px; color: var(--hero-meta);
    margin-top: 3px; letter-spacing: .02em;
  }
  .gp-hero2 .gp-hero2-add { font-size: 11.5px; margin-top: 3px; }

  .gp-hero2 .dc-more { padding: 0 16px 14px; text-align: center; }
  .gp-hero2 .gp-hero2-venue { font-size: 12.5px; margin: 0 0 10px; text-align: center; }

  /* Odbrojavanje: PUN triplet s razmakom (Vedran 2026-08-09: „ovo
     odbrojavanje meni piše 365 dana, a ne brojanje dana s lijepim
     razmakom, tu je stisnuo").

     Parov deck je na mobitelu imao vlastito pravilo koje je gasilo sve
     ćelije osim dana i razmak spuštalo na nulu — pa je ostajala jedna
     zbijena brojka. Ovdje triplet ostaje cijel, jer je i kod gosta cijel:
     to je ista kartica. */
  .gp-hero2 .diary-timer { margin: 0; padding: 8px 16px; gap: 11px; display: flex; }
  .gp-hero2 .diary-timer .cd-cell,
  .gp-hero2 .diary-timer .tdiv { display: block; }
  .gp-hero2 .diary-timer .tn { font-size: 18px; }
  .gp-hero2 .diary-timer .tl { font-size: 9.5px; }
}