/* ============================================================================
 * gallery.css — shared visual language for the couple gallery surface
 * ----------------------------------------------------------------------------
 * FAZA 0a (Bruno 2026-05-29). The gallery grew into 8 separate <style> blocks
 * with ~20 distinct border-radius values, two action colours (lilac vs gold),
 * three reject patterns and a thumb aspect that changed per page. This file is
 * the single token + utility layer the gallery migrates onto, phase by phase.
 *
 * ACTION COLOUR (Vedran 2026-09-10, nadjacava presudu od 2026-05-29):
 * couple action = MAUVE, ne lilac. Lilac (#8e62b8) je `--tone-organizer`
 * (dalia-portal.css:488), a `--tone-couple` je mauve (485) — galerija je do
 * danas na svojoj plohi nosila boju tudjeg portala. Gold (#C9A84C) je otisao
 * jos 2026-05-29 i ne vraca se; danger ostaje rose (nikad vristeci #c0392b).
 * Kat `--mauve-700` (#a55779), ne `--mauve-500` (#b56b8d): bijeli tekst na
 * 500 daje 3,85:1 i pada AA, na 700 daje 4,95:1 (dalia-portal.css:290 to
 * izrijekom zabranjuje za ispunjene gumbe).
 *
 * All values derive from dalia-portal.css canonical tokens via var(). No raw
 * hex except the frosted-badge tint (deliberate, pre-specced in the 2026-05-29
 * badge audit — needs an opaque ink fill that no token provides).
 *
 * Loaded per gallery template via {% block extra_head %}, after
 * dalia-portal.css. Single-class selectors only — coexists with Tailwind
 * output.css without specificity wars.
 * ========================================================================== */

:root {
  /* ── Radius ladder (rationalised from ~20 values to a 4px scale) ───────── */
  --gal-r-thumb:   8px;    /* image thumbnails, grid cards */
  --gal-r-card:   12px;    /* album cards, panels, modals body */
  --gal-r-panel:  16px;    /* large surfaces, sheets */
  --gal-r-pill:  999px;    /* pills, chips */
  --gal-r-circle:  50%;    /* avatars, people rings */

  /* ── Rhythm ────────────────────────────────────────────────────────────
   * thumb-gap is the rhythm BETWEEN photos (kept tight, not whitespace).
   * section-gap is the breathing room between sections (per rework2 audit). */
  --gal-thumb-gap:    6px;
  --gal-section-gap:  clamp(22px, 3vw, 36px);
  --gal-thumb-aspect: 1 / 1;

  /* ── Action language — mauve is the one signal ─────────────────────────── */
  --gal-action:          var(--mauve-700);   /* primary action fill (#a55779, 4,95:1) */
  --gal-action-strong:   #8f4767;            /* hover / pressed fill (6,43:1) */
  --gal-action-text:     var(--mauve-700);   /* action text on paper */
  --gal-action-contrast: var(--paper);       /* text on a mauve fill */
  /* `--gal-signal` OSTAJE lilac-400: jedini potrosac je outline pri
     `:focus-visible` (.gal-thumb, dolje), a fokusni prsten cijelog portala je
     `--focus-ring-color: var(--lilac-400)` (dalia-portal.css:154). Fokus je
     sistemska pomoc, ne akcent para — dvije boje prstena na dvije plohe bile
     bi veca greska od jedne lilac linije. */
  --gal-signal:          var(--lilac-400);   /* focus ring, uz --focus-ring-color */
  --gal-action-tint:     rgba(181, 107, 141, 0.10); /* mauve-500 @ 10% — soft hover bed */

  /* ── Danger — rose, quiet. Never #c0392b. ──────────────────────────────── */
  --gal-danger:      var(--rose-500);
  --gal-danger-tint: rgba(184, 122, 118, 0.12);

  /* ── Frosted badge (counter over photo) — pre-specced 2026-05-29 ───────── */
  --gal-badge-bg:     rgba(48, 38, 44, 0.55);
  --gal-badge-blur:   blur(10px) saturate(1.1);
  --gal-badge-border: rgba(255, 255, 255, 0.30);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --gal-ease:        var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  --gal-hover-scale: 1.04;
}

/* ============================================================================
 * UTILITY CLASSES
 * ========================================================================== */

/* ── Thumbnail card — one radius, one aspect, one hover everywhere ───────── */
.gal-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--gal-r-thumb);
  aspect-ratio: var(--gal-thumb-aspect);
  background: var(--paper-2);
  cursor: pointer;
}
.gal-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s var(--gal-ease);
}
.gal-thumb:hover > img,
.gal-thumb:focus-visible > img { transform: scale(var(--gal-hover-scale)); }
.gal-thumb:focus-visible { outline: 2px solid var(--gal-signal); outline-offset: 2px; }

/* Selected state — mauve ring + mauve check. Signal is "chosen", not decoration.
 * The check (.gal-check) is an explicit element the template drops inside the
 * thumb; it stays hidden until the parent carries .is-selected. KOŠ + approval
 * modal both select, so the check lives in the token layer, not per-page. */
.gal-thumb.is-selected { box-shadow: 0 0 0 3px var(--gal-action); }
.gal-check {
  position: absolute;
  top: 7px;
  left: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--gal-r-circle);
  background: var(--gal-action);
  color: var(--gal-action-contrast);
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s var(--gal-ease), transform 0.15s var(--gal-ease);
  pointer-events: none;
}
.gal-thumb.is-selected .gal-check { opacity: 1; transform: scale(1); }

/* ── Primary action button — mauve fill ─────────────────────────────────── */
.gal-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid var(--gal-action);
  border-radius: var(--gal-r-pill);
  background: var(--gal-action);
  color: var(--gal-action-contrast);
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--gal-ease), border-color 0.15s var(--gal-ease);
}
.gal-action-btn:hover:not(:disabled) {
  background: var(--gal-action-strong);
  border-color: var(--gal-action-strong);
}
.gal-action-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Ghost button — outline, mauve text ─────────────────────────────────── */
.gal-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid rgba(143, 127, 110, 0.28);
  border-radius: var(--gal-r-pill);
  background: transparent;
  color: var(--ink, #3f3138);
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s var(--gal-ease), color 0.15s var(--gal-ease), background 0.15s var(--gal-ease);
}
.gal-ghost-btn:hover:not(:disabled) {
  border-color: var(--gal-action);
  color: var(--gal-action-text);
  background: var(--gal-action-tint);
}
.gal-ghost-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Danger button — rose, quiet. "Sigurnost ne viče." ──────────────────── */
.gal-danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--gal-r-pill);
  background: transparent;
  color: var(--gal-danger);
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--gal-ease), border-color 0.15s var(--gal-ease);
}
.gal-danger-btn:hover:not(:disabled) {
  background: var(--gal-danger-tint);
  border-color: var(--gal-danger);
}
.gal-danger-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Frosted badge — counter that reads over light AND dark photos ──────── */
.gal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--gal-r-pill);
  background: var(--gal-badge-bg);
  -webkit-backdrop-filter: var(--gal-badge-blur);
  backdrop-filter: var(--gal-badge-blur);
  border: 1px solid var(--gal-badge-border);
  color: #fff;
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ── Reject affordance — ONE pattern across the gallery ──────────────────
 * Replaces the three old patterns (red "Odbij sve" / ghost / kebab). A quiet
 * round ink-frosted button that holds an icon (✕ or kebab). It does not shout;
 * the destructive confirm happens in a brand modal, never inline red. */
.gal-reject {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--gal-r-circle);
  background: var(--gal-badge-bg);
  -webkit-backdrop-filter: var(--gal-badge-blur);
  backdrop-filter: var(--gal-badge-blur);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s var(--gal-ease), color 0.15s var(--gal-ease);
}
.gal-thumb:hover .gal-reject,
.gal-thumb:focus-within .gal-reject { opacity: 1; }
.gal-reject:hover { color: #fff; }
/* Touch devices have no hover — reveal the reject affordance permanently. */
@media (hover: none) {
  .gal-reject { opacity: 1; }
}

/* ── Grid helpers ───────────────────────────────────────────────────────── */
.gal-grid {
  display: grid;
  gap: var(--gal-thumb-gap);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
@media (max-width: 520px) {
  .gal-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}