/*
 * Albumdetail – kanonische Kopf- und Statuskomponente.
 * Diese Datei wird nach den historischen Styles geladen und bildet die
 * verbindliche responsive Ebene fuer die Albumansicht.
 */
body.thf-album-open,
body.thf-album-detail-page {
  --thf-album-blue: #2f80ff;
  --thf-album-blue-dark: #1f63dc;
  --thf-album-control: 36px;
}

body #view-album-photos .album-header-v2 {
  position: sticky !important;
  top: 70px;
  z-index: 12000 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 68px !important;
  margin: 0 0 16px !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(16,16,18,.94) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: visible !important;
}
body #view-album-photos .album-header-v2 .album-title-row {
  display: contents !important;
}

body #view-album-photos .album-header-v2 .btn-back {
  grid-column: 1 !important;
  width: auto !important;
  min-width: 84px !important;
  height: var(--thf-album-control) !important;
  min-height: var(--thf-album-control) !important;
  margin: 0 !important;
  padding: 0 13px !important;
  gap: 7px !important;
  border: 1px solid rgba(116,171,255,.72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--thf-album-blue), var(--thf-album-blue-dark)) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(31,99,220,.28), inset 0 1px 0 rgba(255,255,255,.22) !important;
  font-size: .6rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
body #view-album-photos .album-header-v2 .btn-back:hover {
  border-color: rgba(164,202,255,.9) !important;
  background: linear-gradient(135deg, #3b8aff, #246ee9) !important;
  box-shadow: 0 9px 22px rgba(31,99,220,.38), inset 0 1px 0 rgba(255,255,255,.28) !important;
  transform: translateY(-1px) !important;
}
body #view-album-photos .album-header-v2 .btn-back:active { transform: none !important; }
body #view-album-photos .album-header-v2 .btn-back:focus-visible,
body #view-album-photos .album-header-v2 .album-info-btn:focus-visible,
body #view-album-photos .album-header-v2 .album-share-btn:focus-visible,
body #view-album-photos .album-header-v2 .format-filter-select:focus-visible {
  outline: 3px solid rgba(107,167,255,.48) !important;
  outline-offset: 3px;
}

body #view-album-photos .album-header-v2 .album-title-stack {
  grid-column: 2 !important;
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  margin: 0 !important;
}
body #view-album-photos .album-header-v2 .album-title-heading {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 9px !important;
  min-width: 0 !important;
}
body #view-album-photos .album-header-v2 #albumTitle {
  flex: 0 1 auto !important;
  min-width: 160px !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255,255,255,.95) !important;
  font-size: clamp(1.05rem, 1.28vw, 1.45rem) !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: -.018em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body #view-album-photos .album-header-v2 .album-live-title-badge {
  position: static !important;
  flex: 0 0 auto !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 9px !important;
  font-size: .56rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body #view-album-photos .album-header-v2 .album-subtitle-line {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(255,255,255,.48) !important;
  font-size: .7rem !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #view-album-photos .album-header-v2 .album-info-btn,
body #view-album-photos .album-header-v2 .album-share-btn {
  width: var(--thf-album-control) !important;
  min-width: var(--thf-album-control) !important;
  height: var(--thf-album-control) !important;
  min-height: var(--thf-album-control) !important;
  margin: 0 !important;
}
body #view-album-photos .album-header-v2 .album-info-btn { grid-column: 3 !important; }
body #view-album-photos .album-header-v2 .album-share-btn { grid-column: 4 !important; }
body #view-album-photos .album-header-v2 .album-format-filter {
  grid-column: 5 !important;
  width: auto !important;
  margin: 0 !important;
  justify-self: end !important;
}
body #view-album-photos .album-header-v2 .format-filter-select {
  width: auto !important;
  min-width: 178px !important;
  height: var(--thf-album-control) !important;
  min-height: var(--thf-album-control) !important;
  margin: 0 !important;
}
body #view-album-photos .album-header-v2 .album-stats-note {
  grid-column: 6 !important;
  display: inline-flex !important;
  min-height: var(--thf-album-control) !important;
  margin: 0 !important;
  padding: 0 11px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
body #view-album-photos .album-header-v2 .album-stats-note[hidden] { display: none !important; }

.album-grid-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 13px;
  color: rgba(255,255,255,.58);
  font-size: .76rem;
  line-height: 1.35;
}
.album-grid-summary[hidden] { display: none !important; }
.album-grid-summary strong { color: rgba(255,255,255,.9); }
.photo-card.is-jump-target {
  animation: thfNewPhotoTarget 1.35s ease both;
  scroll-margin-top: 165px;
}
@keyframes thfNewPhotoTarget {
  0%, 100% { box-shadow: 0 0 0 2px rgba(96,165,250,.55), 0 16px 38px rgba(0,0,0,.28); }
  45% { box-shadow: 0 0 0 5px rgba(147,197,253,.92), 0 22px 52px rgba(37,99,235,.42); }
}

@media (max-width: 1100px) and (min-width: 761px) {
  body #view-album-photos .album-header-v2 {
    grid-template-columns: auto minmax(0,1fr) auto auto !important;
    grid-template-rows: auto auto !important;
  }
  body #view-album-photos .album-header-v2 .album-info-btn { grid-column: 3 !important; grid-row: 1 !important; }
  body #view-album-photos .album-header-v2 .album-share-btn { grid-column: 4 !important; grid-row: 1 !important; }
  body #view-album-photos .album-header-v2 .album-format-filter { grid-column: 2 / 4 !important; grid-row: 2 !important; justify-self: start !important; }
  body #view-album-photos .album-header-v2 .album-stats-note { grid-column: 4 !important; grid-row: 2 !important; justify-self: end !important; }
}

@media (max-width: 760px) {
  body.thf-album-open,
  body.thf-album-detail-page { --thf-album-control: 34px; }
  body #view-album-photos .album-header-v2 {
    top: 70px;
    grid-template-columns: 34px minmax(0,1fr) 34px 34px 34px !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    min-height: 64px !important;
    padding: 11px 0 !important;
  }
  body #view-album-photos .album-header-v2 .btn-back {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
  }
  body #view-album-photos .album-header-v2 .btn-back span { display: none !important; }
  body #view-album-photos .album-header-v2 .album-title-stack { grid-column: 2 !important; grid-row: 1 !important; }
  body #view-album-photos .album-header-v2 #albumTitle {
    min-width: 0 !important;
    font-size: clamp(.92rem, 4.15vw, 1.15rem) !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body #view-album-photos .album-header-v2 .album-subtitle-line { display: none !important; }
  body #view-album-photos .album-header-v2 .album-info-btn { grid-column: 3 !important; grid-row: 1 !important; }
  body #view-album-photos .album-header-v2 .album-share-btn { grid-column: 4 !important; grid-row: 1 !important; }
  body #view-album-photos .album-header-v2 .album-format-filter {
    grid-column: 5 !important;
    grid-row: 1 !important;
    width: 34px !important;
  }
  body #view-album-photos .album-header-v2 .format-filter-select {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  body #view-album-photos .album-header-v2 .format-filter-labels,
  body #view-album-photos .album-header-v2 .format-filter-select-icon { display: none !important; }
  body #view-album-photos .album-header-v2 .format-filter-mobile-icon { display: inline-grid !important; }
  body #view-album-photos .album-header-v2 .format-filter-menu {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: 126px !important;
    width: auto !important;
  }
  body #view-album-photos .album-header-v2 .album-stats-note {
    grid-column: 2 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: .68rem !important;
  }
  body #view-album-photos .album-header-v2 .album-stats-note > :not(.album-stat--selections) { display: none !important; }
  body #view-album-photos .album-header-v2 .album-stats-note:not(.has-selections) { display: none !important; }
  .album-grid-summary { font-size: .7rem; }
}

@media (max-width: 420px) {
  body.thf-album-open,
  body.thf-album-detail-page { --thf-album-control: 32px; }
  body #view-album-photos .album-header-v2 {
    grid-template-columns: 32px minmax(0,1fr) 32px 32px 32px !important;
    gap: 6px !important;
  }
  body #view-album-photos .album-header-v2 .btn-back,
  body #view-album-photos .album-header-v2 .album-info-btn,
  body #view-album-photos .album-header-v2 .album-share-btn,
  body #view-album-photos .album-header-v2 .album-format-filter,
  body #view-album-photos .album-header-v2 .format-filter-select {
    width: 32px !important;
    min-width: 32px !important;
  }
  body #view-album-photos .album-header-v2 .album-live-title-badge {
    min-height: 20px !important;
    padding: 0 6px !important;
    font-size: .48rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-card.is-jump-target { animation: none; }
}