/* ================================================================
   DALIA — SKLOPIVA KARTICA (jedan izvor za sve portale)
   ================================================================
   Vedran 2026-08-08: „kartica vjenčanja neka bude ista kao kod gostiju
   — collapsable — i moramo to nekako povezati i unificirati. Kad se
   promijeni datum ili stil na jednoj, da se i na drugoj."

   Do danas je sklapanje postojalo SAMO na gostovoj naslovnoj kartici
   (`.gph-strip` u `templates/guest_portal/dashboard.html`) — 40 redaka
   CSS-a i vlastita `gphToggle()` funkcija u istom predlošku. Kopirati to
   u `couple/dashboard.html` značilo bi dvije istine koje se razilaze pri
   prvoj izmjeni. Zato je obrazac izvađen OVDJE, a oba portala ga uvoze.

   UGOVOR (isti u oba portala):

     .dc                  kartica koja se može sklopiti
     .dc-strip            vrpca — uvijek vidljivi sažetak; MORA biti
                          <button type="button" data-dc-toggle>
     .dc-strip-txt        sadržaj vrpce (imena, naziv dvorane, naslov…)
     .dc-chev             šiljak koji se okreće; samo na mobitelu
     .dc-more             ostatak kartice — skriven dok vrpca nije tapnuta
     .dc.is-open          otvoreno stanje

   PRAVILO PLOHE: ovo je MOBILNI obrazac. Vedran, ista poruka: „TO SU SVE
   UPUTE ZA MOBILE BROWSER SAMO, znači takve stvari ne uvoditi na
   desktopu." Iznad 900px vrpca nestaje kao ploha (`display:contents`) pa
   kartica izgleda i ponaša se točno kao prije — nijedan piksel desktopa
   se ne mijenja. Guard: `tests/test_sklopive_kartice.py`.

   DVIJE VRSTE VRPCE:
     .dc-strip            sadržaj vrpce JEST desktop zaglavlje → na
                          desktopu `display:contents` (vrpca nestaje,
                          djeca ostaju u toku). Tako radi gostova
                          naslovna: imena i datum su i tamo i tamo.
     .dc-strip--mob       vrpca je DODATNI mobilni sažetak kojeg desktop
                          nema (dvorana: naziv + poruka, dok desktop već
                          sve to pokazuje preko fotografije) → na desktopu
                          `display:none`.
   ================================================================ */

/* ── Desktop: obrazac je mrtav ───────────────────────────────────
   Sva tri omotača su `display:contents`, pa je stablo OKVIRA iznad 900px
   znak po znak isto kao prije uvođenja vrpce: `.cp-hero-in > h1.names`
   ostaje `.cp-hero-in > h1.names`, iako u HTML-u sad ima dva <span>-a
   između. To je razlog zašto desktop ne treba nijedan novi CSS override
   po plohi — bez ovoga bi svaki flex/grid roditelj dobio jedno dijete
   umjesto tri i poravnanja bi se raspala. */
.dc-strip { display: contents; }
.dc-strip-txt { display: contents; }
.dc-more { display: contents; }
.dc-strip--mob { display: none; }
.dc-chev { display: none; }

@media (max-width: 900px) {
  /* ══ JEDAN KROJ ZA SVE SKLOPIVE KARTICE (Rasmus audit 2026-08-09) ══
     Vedran: „UNIFICIRAJ KVADRATE SVE NA DASHBOARDU."

     Izmjereno prije popravka — tri iste vrpce, tri visine:
       Dvorana 59px · Bilješke 88px · Naslovna 178px · (gost 70px)

     Uzrok nije bio u vrpci nego u tome što su i KARTICA i vrpca nosile
     razmak. Bilješke: 12px kartice + 13px vrpce + 8px `.ch` margine = 58px
     kroma oko 30px teksta, dvije trećine kartice.

     PRAVILO: sav razmak nosi `.dc-strip`, kartica ne nosi ništa.
     Sklopljeno = 56px (jedan redak). Iz toga slijedi svih pet visina bez
     ijednog override-a po kartici. */
  .dc { padding: 0 !important; }
  .dc:not(.is-open) { min-height: 0 !important; }

  /* Tri uloge u vrpci i ništa četvrto: naziv, brojka, šiljak. Rukopisni
     `em` i `.pill` iz `.ch` izlaze s mobitela — oni sami rade razliku u
     visini između kartica. */
  .dc .dc-strip .ch { margin: 0; font-size: 19px; line-height: 1.6; font-weight: 500; }
  .dc .dc-strip .ch em { font-family: inherit; font-style: normal; font-size: inherit; }
  .dc .dc-strip .ch .pill { display: none; }

  /* ⚠️ VRPCA I NJEZIN OMOTAČ MORAJU BITI `static`.
     Šiljak se sidri na KARTICU. Predlošci imaju `.paperC > * { position:
     relative }`, pa svaki redak-omotač (`.gal-head`, `.venue-strip`, `.ch`)
     postane sidro i šiljak sjedne uz kraj teksta umjesto uz desni rub —
     točno ono što se vidjelo na „Naša galerija ⌄  otvori →". */
  .dc .dc-strip,
  .dc > .ch,
  .dc .gal-head,
  .dc .venue-strip { position: static; }
  .dc-strip {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 13px 44px 13px 16px;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .dc-strip--mob {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .dc-strip-txt { display: block; min-width: 0; flex: 1; }

  /* Šiljak je APSOLUTAN, ne član reda: kao član bi svojom širinom
     pomaknuo optičku sredinu vrpce ulijevo (naučeno na gostovoj
     naslovnoj, 2026-07-31). */
  /* ŠILJAK JE UVIJEK KRAJNJE DESNO U PRVOM RETKU KARTICE.
     Sidri se na KARTICU (`.dc`), ne na vrpcu: vrpca je na nekim karticama
     samo dio retka (dvorana ima još i tipku za poruku, galerija „otvori →",
     pjesme Apple Music), pa bi šiljak vezan uz nju lutao — negdje na kraju
     naziva, negdje u drugi red. `top:28px` je polovica retka od 56px.

     Sve druge kontrole u retku stoje LIJEVO od njega (`right: 48px+`). */
  .dc > .dc-chev,
  .dc .dc-strip .dc-chev,
  .dc .dc-chev {
    position: absolute;
    right: 16px;
    top: 28px;
    margin-top: -9px;
    display: block;
    color: var(--lilac-400);
    transition: transform .2s var(--ease);
  }
  .dc.is-open > .dc-strip .dc-chev,
  .dc.is-open .dc-chev { transform: rotate(180deg); }

  .dc-more { display: none; }
  .dc.is-open .dc-more { display: block; padding: 0 16px 14px; }
  /* Kartice čiji je otvoreni dio flex red (dvorana: fotografija + tekst). */
  .dc.is-open .dc-more--flex { display: flex; }

  /* Vrpca ne smije nositi vlastiti fokus-prsten koji izlazi iz papira —
     kartica ga preuzima. Geometrija iz tokena (kanon: boja se tematizira,
     geometrija ne). */
  .dc-strip:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: calc(var(--focus-ring-offset) * -1);
    border-radius: var(--focus-ring-radius);
  }

  /* Brojka uz naslov u vrpci — koliko toga čeka unutra (prijave, pjesme,
     bilješke). Kad je nula, poziva se `hidden` pa se ne crta. */
  .dc-strip-count {
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--color-deep-mauve);
    background: rgba(181, 107, 141, 0.12);
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 7px;
    vertical-align: middle;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .dc-chev { transition: none; }
}