/* =========================================================
   glo Photo microsite (Žofín 2026) — app styly
   Navazuje na glo-ui.css (tokeny --glo-*).
   ========================================================= */

/* ── Taby (přepínač Fotograf / Hosteska) ─────────────────── */
.glo-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.glo-tab {
  appearance: none;
  display: inline-block;
  border: 2px solid var(--glo-border);
  background: var(--glo-white);
  color: var(--glo-ink);
  font-family: var(--font-base);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.55em 1.4em;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.glo-tab .ico { width: 1.05em; height: 1.05em; margin-right: 0.5em; }
.glo-tab:hover {
  border-color: var(--glo-red);
  color: var(--glo-red);
}
.glo-tab.is-active {
  background: linear-gradient(100deg, var(--glo-red) 0%, var(--glo-maroon) 100%);
  color: var(--glo-white);
  border-color: transparent;
  box-shadow: 0 3px 10px oklch(0.4 0.14 20 / 0.30);
}

.glo-panel { animation: gloFade 0.2s ease-out; }
.glo-panel[hidden] { display: none; }
@keyframes gloFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.glo-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--glo-ink);
  margin: 1.75rem 0 0.75rem;
}

/* ── Drop-zóna (fotograf) ─────────────────────────────────── */
.glo-dropzone {
  border: 2.5px dashed var(--glo-border);
  border-radius: var(--radius-card);
  background: var(--glo-white);
  padding: 3rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease-out, background 0.15s ease-out, transform 0.1s ease-out;
  outline: none;
}
.glo-dropzone:hover,
.glo-dropzone:focus-visible {
  border-color: var(--glo-red);
  background: var(--glo-stripe);
}
.glo-dropzone.is-dragover {
  border-color: var(--glo-red);
  background: var(--glo-hover);
  transform: scale(1.01);
  box-shadow: 0 4px 18px oklch(0.4 0.14 20 / 0.18);
}
.glo-dropzone__icon { line-height: 0; margin-bottom: 0.6rem; color: var(--glo-red); }
.glo-dropzone__icon .ico { width: 44px; height: 44px; stroke-width: 1.6; }
.glo-dropzone__title { font-size: 1.15rem; font-weight: 700; color: var(--glo-ink); margin: 0 0 0.35rem; }
.glo-dropzone__hint { font-size: 0.875rem; color: var(--glo-ink-muted); margin: 0; }

/* ── Upload status ────────────────────────────────────────── */
.glo-uploads { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.glo-upload-item {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.875rem; padding: 0.6rem 0.9rem; border-radius: 10px;
  background: var(--glo-stripe); border: 1.5px solid var(--glo-border);
}
.glo-upload-item.is-error { background: oklch(0.95 0.04 20); border-color: oklch(0.65 0.14 20); color: var(--glo-maroon); }
.glo-upload-item.is-ok { border-color: oklch(0.75 0.13 145); }
.glo-upload-item__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--glo-border); overflow: hidden; }
.glo-upload-item__bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--glo-orange-hi), var(--glo-orange)); transition: width 0.15s ease-out; }
.glo-upload-item__name { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* ── Řádek náhledů „právě nahráno" ───────────────────────── */
.glo-thumbrow { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.glo-thumbrow img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 10px;
  border: 1.5px solid var(--glo-border); box-shadow: var(--shadow-card);
  animation: gloPop 0.25s ease-out;
}
@keyframes gloPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

/* ── Live badge (hosteska) ────────────────────────────────── */
.glo-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--glo-ink-muted); }
.glo-live__dot { width: 9px; height: 9px; border-radius: 50%; background: #35b34b; box-shadow: 0 0 0 0 oklch(0.65 0.16 145 / 0.7); animation: gloPulse 1.8s infinite; }
@keyframes gloPulse { 0% { box-shadow: 0 0 0 0 oklch(0.65 0.16 145 / 0.6); } 70% { box-shadow: 0 0 0 8px oklch(0.65 0.16 145 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.65 0.16 145 / 0); } }

/* ── Počet fotek (toolbar) ────────────────────────────────── */
.glo-count { font-size: 0.85rem; font-weight: 700; color: var(--glo-ink-muted); }

/* ── Galerie: tabulka (hosteska) ──────────────────────────── */
.glo-table--photos { table-layout: auto; }
.glo-table--photos th.col-thumb, .glo-table--photos td.col-thumb { width: 92px; }
.glo-table--photos th.col-actions { text-align: right; }
.glo-table--photos td.glo-table__actions { text-align: right; white-space: nowrap; }

.glo-table__thumb {
  display: block;
  width: 76px; height: 57px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--glo-border);
  background: var(--glo-hover);
}
.glo-table--photos td { vertical-align: middle; }

.glo-table__actions .btn { font-size: 0.95rem; padding: 0.55em 1.15em; vertical-align: middle; margin-left: 0.55rem; }
.glo-table__actions .btn:first-child { margin-left: 0; }
.glo-table__actions .btn-icononly { padding: 0.55em 0.8em; }
.glo-table__actions .ico { width: 1.2em; height: 1.2em; }

/* stavové pilulky */
.glo-pill {
  display: inline-flex; align-items: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.25em 0.7em; border-radius: 999px; white-space: nowrap;
}
.glo-pill--printed { background: oklch(0.93 0.06 145); color: oklch(0.42 0.12 145); }
.glo-pill--muted { background: var(--glo-border); color: var(--glo-ink-muted); }

@media (max-width: 640px) {
  .glo-table__thumb { width: 56px; height: 42px; }
  .glo-table--photos th, .glo-table--photos td { padding: 8px 8px; }
  .glo-table__actions .btn { font-size: 0.85rem; padding: 0.45em 0.85em; margin-left: 0.4rem; }
}

.glo-empty {
  text-align: center; color: var(--glo-ink-muted);
  padding: 3.5rem 1.5rem; font-size: 0.95rem;
  background: var(--glo-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.glo-empty__ico { width: 52px; height: 52px; color: var(--glo-red); opacity: 0.5; stroke-width: 1.5; margin-bottom: 0.9rem; }
.glo-empty__title { font-size: 1.15rem; font-weight: 700; color: var(--glo-ink); margin: 0 0 0.4rem; }
.glo-empty__text { font-size: 0.9rem; color: var(--glo-ink-muted); margin: 0 auto; max-width: 400px; line-height: 1.5; }

/* ── QR modal ─────────────────────────────────────────────── */
.glo-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.glo-modal[hidden] { display: none; }
.glo-modal__backdrop { position: absolute; inset: 0; background: oklch(0.12 0.06 15 / 0.55); backdrop-filter: blur(2px); }
.glo-modal__card {
  position: relative; background: var(--glo-white); border-radius: 20px;
  box-shadow: 0 12px 48px oklch(0.12 0.06 15 / 0.4);
  padding: 1.75rem 1.75rem 1.5rem; max-width: 340px; width: 100%; text-align: center;
  animation: gloPop 0.2s ease-out;
}
.glo-modal__close {
  position: absolute; top: 8px; right: 12px; background: none; border: none;
  font-size: 1.6rem; line-height: 1; color: var(--glo-ink-muted); cursor: pointer;
}
.glo-modal__close:hover { color: var(--glo-red); }
.glo-modal__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; color: var(--glo-ink); }
.glo-qr { display: flex; justify-content: center; margin-bottom: 0.9rem; }
.glo-qr img { width: 240px; height: 240px; image-rendering: pixelated; border: 8px solid #fff; border-radius: 8px; }
.glo-qr__url { display: block; font-size: 0.8rem; color: var(--glo-red); word-break: break-all; text-decoration: none; }
.glo-qr__url:hover { text-decoration: underline; }

/* ── Toast ────────────────────────────────────────────────── */
.glo-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--glo-ink); color: #fff; font-size: 0.875rem; font-weight: 500;
  padding: 0.7rem 1.2rem; border-radius: 999px; box-shadow: var(--shadow-card);
  z-index: 200; opacity: 0; transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none;
}
.glo-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.glo-toast.is-error { background: var(--glo-red); }

@media (max-width: 640px) {
  .glo-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
  .glo-dropzone { padding: 2rem 1rem; }
}