/* Hlavička galerie a záložky (includes/gallery_header.html, includes/gallery_tabs.html)
   pro veřejnou galerii, správu fotek i statistiky. Pozadí dává #header podle
   nastavení galerie v adminu (common/gallery_page.html); tady jen barvy písma
   a průsvitných ploch, světlá galerie s „Black font“ má varianty --dark. */

.sb-gh,
.sb-gtabs {
  --gh-fg: #FFFFFF;
  --gh-fg-soft: rgba(255, 255, 255, 0.88);
  --gh-surface: rgba(255, 255, 255, 0.18);
  --gh-surface-hover: rgba(255, 255, 255, 0.28);
  --gh-track: rgba(35, 39, 65, 0.22);
  --gh-count: rgba(255, 255, 255, 0.2);
  --gh-navy: #232741;
  --gh-primary-bg: #FFFFFF;
  --gh-primary-fg: #232741;
}

.sb-gh--dark,
.sb-gtabs--dark {
  --gh-fg: #232741;
  --gh-fg-soft: rgba(35, 39, 65, 0.82);
  --gh-surface: rgba(35, 39, 65, 0.08);
  --gh-surface-hover: rgba(35, 39, 65, 0.14);
  --gh-track: rgba(35, 39, 65, 0.08);
  --gh-count: rgba(35, 39, 65, 0.1);
  --gh-primary-bg: #232741;
  --gh-primary-fg: #FFFFFF;
}

/* Obrázek pozadí galerie: přes celé okno jen jednou, galerie se posouvá přes něj.
   position: fixed pseudo-prvku místo background-attachment: fixed (to iOS Safari
   neumí); clip-path ho ořízne na #header, aby nepřekryl menu ani patičku. */
#header.has-gallery-bg {
  position: relative;
  clip-path: inset(0);
}

#header.has-gallery-bg::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: var(--gallery-bg) center / cover no-repeat;
}

#header .sb-gh {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 0;
  margin-bottom: 32px;
  color: var(--gh-fg);
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  text-align: center;
}

/* staré styly hlavičky stahují mezery mezi slovy */
.sb-gh,
.sb-gtabs,
.sb-stats {
  word-spacing: normal;
  letter-spacing: normal;
}

.sb-gh *,
.sb-gtabs * {
  box-sizing: border-box;
}

/* editable_app.js čte data z prvku, na který se kliklo: kliknutí na ikonu musí
   dopadnout na tlačítko */
.sb-gh svg,
.sb-gtabs svg {
  pointer-events: none;
  flex: 0 0 auto;
}

.sb-gh__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#header .sb-gh a.sb-gh__back,
#header .sb-gh a.sb-gh__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--gh-fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}

#header .sb-gh a.sb-gh__back {
  padding: 0 16px 0 12px;
  border-radius: 999px;
  background: var(--gh-surface);
}

#header .sb-gh a.sb-gh__back:hover { background: var(--gh-surface-hover); }
#header .sb-gh a.sb-gh__link { margin-left: auto; }

.sb-gh__intro {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#header .sb-gh .sb-gh__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gh-fg-soft);
}

.sb-gh__meta > span + span::before {
  content: '·';
  margin-right: 14px;
}

.sb-gh__meta > .sb-gh__live + span::before { content: none; }

.sb-gh__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: #E5484D;
  color: #FFFFFF;
  letter-spacing: 0.06em;
}

.sb-gh__live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
}

.sb-gh__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
}

#header .sb-gh h1.sb-gh__title {
  margin: 0;
  padding: 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gh-fg);
  overflow-wrap: anywhere;
}

#header .sb-gh .sb-gh__headline {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--gh-fg-soft);
  text-transform: none;
}

#header .sb-gh input.editable-text-input {
  width: min(720px, 100%);
  margin: 0;
  padding: 4px 12px;
  border: 0 !important;
  border-bottom: 2px solid var(--gh-fg) !important;
  border-radius: 8px 8px 0 0;
  background: var(--gh-surface);
  color: var(--gh-fg) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  font-size: 22px !important;
  line-height: 1.4 !important;
  font-weight: 600;
  text-align: center;
}

#header .sb-gh h1 + input.editable-text-input {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 44px !important;
  font-weight: 400;
}

.sb-gh__icon-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--gh-surface);
  color: var(--gh-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sb-gh__icon-btn--small {
  width: 32px;
  height: 32px;
}

.sb-gh__icon-btn:hover { background: var(--gh-surface-hover); }

.sb-gh__actions {
  margin: 28px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#header .sb-gh .sb-gh__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--gh-surface);
  color: var(--gh-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

#header .sb-gh .sb-gh__btn:hover { background: var(--gh-surface-hover); }

#header .sb-gh .sb-gh__btn--primary,
#header .sb-gh .sb-gh__btn--primary:hover {
  background: var(--gh-primary-bg);
  color: var(--gh-primary-fg);
}

/* výběr fotek ke smazání: ostatní akce jsou mimo provoz */
#header .sb-gh .non-active {
  opacity: 0.4;
  pointer-events: none;
}

/* Sdílet: legacy rozbalovací menu (_share-dropdown.js) v novém tlačítku */
.sb-gh .s-share-dropdown.sb-gh__share {
  position: relative;
  text-align: center;
}

.sb-gh .s-share-dropdown__toggle::before,
.sb-gh .s-share-dropdown__toggle::after {
  content: none !important;
  display: none !important;
}

#header .sb-gh .s-share-dropdown__toggle span {
  order: 0;
  color: inherit;
}

.sb-gh .s-share-dropdown__menu {
  top: calc(100% + 8px);
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(35, 39, 65, 0.18);
  text-transform: none;
  text-align: left;
}

.sb-gh .s-share-dropdown__menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#header .sb-gh .s-share-dropdown__menu a {
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--gh-navy) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

#header .sb-gh .s-share-dropdown__menu a:hover { background: #F2F1ED; }

.sb-gh [hidden] {
  display: none !important;
}

/* Úprava názvu a popisu přímo v hlavičce (static/js/gallery-header.js) */
.sb-gh__editable {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#header .sb-gh .sb-gh__icon-btn--inline {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 14px;
  position: relative;
  top: -6px;
}

#header .sb-gh .sb-gh__icon-btn--small.sb-gh__icon-btn--inline {
  margin-left: 10px;
  top: -2px;
}

.sb-gh__editable.is-empty [data-gh-text]::before {
  content: attr(data-placeholder);
  font-style: italic;
  opacity: 0.75;
}

.sb-gh__edit {
  width: min(860px, 100%);
}

#header .sb-gh textarea.sb-gh__input,
#header .sb-gh input.sb-gh__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 18px;
  border: 2px solid var(--gh-fg);
  border-radius: 16px;
  background: var(--gh-surface);
  color: var(--gh-fg);
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  resize: none;
  overflow: hidden;
  outline: none;
  box-shadow: none;
}

#header .sb-gh textarea.sb-gh__input--title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 44px !important;
  line-height: 1.15 !important;
}

/* staré styly formulářů dávají polím pevnou výšku a šířku */
#header .sb-gh textarea.sb-gh__input,
#header .sb-gh input.sb-gh__input {
  min-width: 0 !important;
  min-height: 0 !important;
}

.sb-gh__edit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

#header .sb-gh .sb-gh__edit-error {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #B42318;
  font-size: 14px;
  font-weight: 600;
}

/* Viditelnost, odkaz a heslo pro hosty */
.sb-gh__access {
  margin-top: 12px;
}

#header .sb-gh .sb-gh__visibility {
  max-width: 760px;
  margin: 12px auto 0;
  text-align: center;
  color: var(--gh-fg-soft);
  font-size: 13px;
  line-height: 1.5;
  text-transform: none;
}

.sb-gh__visibility strong { font-weight: 700; color: var(--gh-fg); }
.sb-gh__visibility svg { vertical-align: -2px; margin-right: 4px; }

.sb-gh__actions--access { margin-top: 0; }

.sb-gh__password {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#header .sb-gh .sb-gh__btn code {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--gh-count);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: inherit;
}

.sb-gh__password-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

#header .sb-gh input.sb-gh__input--password {
  flex: 0 0 240px;
  width: 240px !important;
  max-width: 100%;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}

.sb-gh__password-form .sb-gh__edit-error { flex-basis: 100%; }

.sb-gh__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Odemknutí galerie heslem (pages/gallery_detail_unallowed.html) */
#header .sb-gh .sb-unlock {
  box-sizing: border-box;
  width: min(440px, 100%);
  margin: 28px auto 72px;
  padding: 28px;
  border-radius: 22px;
  background: #FFFFFF;
  color: #232741;
  box-shadow: 0 16px 40px rgba(35, 39, 65, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

#header .sb-gh .sb-unlock__lead {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #232741;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}

#header .sb-gh .sb-unlock__error {
  margin: 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: #FDECEA;
  color: #B42318;
  font-size: 14px;
  font-weight: 600;
}

#header .sb-gh input.sb-unlock__input {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px;
  margin: 0;
  padding: 0 20px;
  border: 1.5px solid #C6CADB;
  border-radius: 999px;
  background: #FFFFFF;
  color: #232741;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 16px;
  text-align: center;
  box-shadow: none;
}

#header .sb-gh input.sb-unlock__input:focus {
  border-color: #232741;
  outline: none;
}

#header .sb-gh input.sb-unlock__input.is-invalid { border-color: #B42318; }

#header .sb-gh .sb-unlock__submit {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: #E8743B;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

#header .sb-gh .sb-unlock__submit:hover { background: #D4612B; }

#header .sb-gh .sb-unlock__help {
  margin: 0;
  color: #5A6274;
  font-size: 13px;
  line-height: 1.55;
  text-transform: none;
}

#header .sb-gh .sb-unlock__help a {
  color: #23726A;
  font-weight: 700;
  text-decoration: underline;
}

/* Záložky jako přepínač */
.sb-gtabs {
  display: flex;
  justify-content: center;
  margin: 4px auto 32px;
  padding: 0 16px;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

.sb-gtabs__track {
  display: flex;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  border-radius: 999px;
  background: var(--gh-track);
  overflow-x: auto;
  scrollbar-width: none;
}

.sb-gtabs__track::-webkit-scrollbar { display: none; }

#header .sb-gtabs a.sb-gtabs__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--gh-fg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}

#header .sb-gtabs a.sb-gtabs__tab:hover { background: var(--gh-surface); }

#header .sb-gtabs a.sb-gtabs__tab.is-active {
  background: #FFFFFF;
  color: var(--gh-navy);
  box-shadow: 0 2px 8px rgba(35, 39, 65, 0.12);
}

.sb-gtabs__count {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--gh-count);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sb-gtabs__tab.is-active .sb-gtabs__count {
  background: #E6F5F3;
  color: #23726A;
}

@media (max-width: 600px) {
  #header .sb-gh h1.sb-gh__title { font-size: 38px; }
  #header .sb-gh textarea.sb-gh__input--title { font-size: 32px !important; }
  #header .sb-gh .sb-gh__headline { font-size: 16px; }
  .sb-gh__intro { padding-top: 20px; }
  .sb-gh__actions { margin-top: 20px; }
  #header .sb-gh .sb-gh__btn { padding: 0 14px; font-size: 13px; }
  #header .sb-gh { margin-bottom: 24px; }
  .sb-gtabs { margin: 0 auto 24px; justify-content: flex-start; }
  #header .sb-gtabs a.sb-gtabs__tab { padding: 0 14px; }
}