/* ==========================================================================
   DEG Pictures Core – Frontend

   Alle Klassen sind mit deg-pic- vorangestellt, damit nichts mit Astra oder
   anderen Plugins kollidiert.

   Die Farbwerte kommen als Fallback aus diesem Stylesheet und lassen sich vom
   Child Theme über die --deg-*-Variablen überschreiben. So sieht das Plugin
   allein schon richtig aus, fügt sich aber ins Theme ein, sobald es da ist.
   ========================================================================== */

.deg-pic,
.deg-pic-lightbox {
  --pic-night:   var(--deg-night, #111114);
  --pic-night-2: var(--deg-night-2, #17171c);
  --pic-night-3: var(--deg-night-3, #1f1f26);
  --pic-night-4: var(--deg-night-4, #282833);

  --pic-ink:    var(--deg-ink, #f4f4f6);
  --pic-ink-70: var(--deg-ink-70, rgba(244, 244, 246, 0.72));
  --pic-ink-55: var(--deg-ink-55, rgba(244, 244, 246, 0.56));
  --pic-ink-40: var(--deg-ink-40, rgba(244, 244, 246, 0.4));
  --pic-line:   var(--deg-line, rgba(255, 255, 255, 0.1));
  --pic-line-2: var(--deg-line-2, rgba(255, 255, 255, 0.06));

  --pic-brand:     var(--deg-brand, #7c5cff);
  --pic-violet:    var(--deg-violet, #5b3fd6);
  --pic-accent:    var(--deg-accent, #9b7bff);
  --pic-accent-14: var(--deg-accent-14, rgba(124, 92, 255, 0.14));
  --pic-accent-24: var(--deg-accent-24, rgba(124, 92, 255, 0.24));

  --pic-r-card: var(--deg-r-card, 28px);
  --pic-r-tile: var(--deg-r-tile, 22px);
  --pic-r-sm:   var(--deg-r-sm, 14px);
  --pic-ease:   cubic-bezier(0.2, 0.7, 0.2, 1);

  --pic-sh-2: 0 8px 28px rgba(0, 0, 0, 0.34);
  --pic-sh-3: 0 18px 48px rgba(0, 0, 0, 0.46);
}

.deg-pic { color: var(--pic-ink-70); }
.deg-pic *,
.deg-pic *::before,
.deg-pic *::after { box-sizing: border-box; }
.deg-pic img { max-width: 100%; display: block; }

.deg-pic-shell {
  width: 100%;
  max-width: var(--deg-shell, 1400px);
  margin-inline: auto;
  padding-inline: clamp(20px, 3.4vw, 56px);
}

/* Astra setzt im Seiteninhalt max-width: none auf die direkten Kinder. Ohne
   diese stärkere Regel liefe der Rahmen dort über die volle Breite und stünde
   nicht mehr im selben Maß wie die Kopfzeile. */
.deg-pic > .deg-pic-shell {
  max-width: var(--deg-shell, 1400px);
}

/* Im Seiteninhalt gibt es keinen Titelblock, der Abstand nach oben schafft –
   ohne das klebt die Ausgabe an der Kopfzeile. Auf der Archivseite bringt der
   Seitenkopf seinen Abstand selbst mit, deshalb hier gezielt nur dort. */
.entry-content > .deg-pic {
  padding-block-start: clamp(28px, 3.4vw, 52px);
}

/* Rückweg über der Albumseite. */
.deg-pic-back {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: clamp(16px, 2vw, 26px);
  font-size: 14.5px; font-weight: 500;
  color: var(--pic-ink-55); text-decoration: none;
  transition: color 0.2s var(--pic-ease);
}
.deg-pic-back:hover { color: var(--pic-accent); }
.deg-pic-back svg { width: 15px; height: 15px; }

/* Der Titel der Albumseite. Steht im Rahmen, also im selben Maß wie
   Faktenzeile und Raster – Astras eigener Titelblock wird vom Child Theme
   ausgeblendet, solange das Plugin aktiv ist. */
.deg-pic-album-title {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  max-width: 26ch;
}

/* Astra und die meisten Themes liefern diese Klasse mit. Das Plugin darf sich
   nicht darauf verlassen: ohne sie stünden die Beschriftungen von Suchfeld und
   Sortierung sichtbar in der Filterleiste. */
.deg-pic .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.deg-pic :focus-visible {
  outline: 2px solid var(--pic-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Astra unterstreicht Verweise im Seiteninhalt (.entry-content a). Innerhalb
   des Albenrasters ist das falsch: die Kachel als Ganzes ist der Verweis,
   nicht jede Textzeile darin. Zwei Klassen plus Element schlagen die
   Theme-Regel, ohne dass es !important braucht. */
.deg-pic a[class],
.deg-pic a[class]:hover,
.deg-pic a[class]:focus {
  text-decoration: none;
}

/* --- Seitenkopf der Übersicht ------------------------------------------- */

.deg-pic-hero { padding-block: clamp(40px, 5.5vw, 84px) 0; }

.deg-pic-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--pic-ink-55);
}
.deg-pic-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--pic-brand); box-shadow: 0 0 0 4px var(--pic-accent-14);
}

.deg-pic-display {
  margin: 20px 0 0; max-width: 20ch;
  color: var(--pic-ink); font-weight: 800;
  font-size: clamp(40px, 5.4vw, 74px); line-height: 0.98; letter-spacing: -0.03em;
}

.deg-pic-lead {
  margin: 22px 0 0; max-width: 62ch;
  color: var(--pic-ink-70); line-height: 1.6;
  font-size: clamp(16.5px, 1.25vw, 19px);
}

/* --- Kennzahlen --------------------------------------------------------- */

.deg-pic-stats {
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  margin: clamp(24px, 3vw, 38px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--pic-line-2);
}
.deg-pic-stats div { display: flex; align-items: baseline; gap: 9px; }
.deg-pic-stats .v {
  font-size: 25px; font-weight: 800; color: var(--pic-ink);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.deg-pic-stats .k {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pic-ink-40);
}

/* Die Kennzahlenzeile trennt sich im Archiv mit einer Linie vom Titelblock
   darüber. Steht sie ganz oben – etwa wenn der Shortcode allein auf einer
   Seite steht – hinge diese Linie im Nichts und der Abstand darüber wäre
   doppelt. */
.deg-pic-shell > .deg-pic-stats:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Dasselbe für das Raster und die Filterleiste, falls sie ohne Kennzahlen
   ausgegeben werden. */
.deg-pic-shell > .deg-pic-filterbar:first-child,
.deg-pic-shell > .deg-pic-albums:first-child {
  margin-top: 0;
}

/* --- Filterleiste ------------------------------------------------------- */

/* Bewusst ohne eigene Grundfarbe: die Leiste klebt oben und muss zu dem
   passen, was das Theme unter ihr malt. Eine feste Farbe – auch eine
   halbdurchsichtige – ergibt einen sichtbaren Kasten, sobald der Seitengrund
   auch nur geringfügig abweicht (Astra malt hier reines Schwarz, das Token
   ist #111114). Der Weichzeichner nimmt, was da ist, und passt damit immer. */
.deg-pic-filterbar {
  position: sticky; top: var(--deg-header-height, 0px); z-index: 30;
  margin: clamp(24px, 3vw, 38px) 0 0;
  padding: 16px 0;
  background: transparent;
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid var(--pic-line-2);
}

/* Ohne Weichzeichner scrollt der Inhalt sonst sichtbar durch die Leiste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .deg-pic-filterbar { background: var(--pic-night); }
}
.deg-pic-filterbar .deg-pic-shell { padding-inline: 0; }
.deg-pic-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.deg-pic-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.deg-pic-search > svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--pic-ink-40); pointer-events: none;
}
.deg-pic-search input[type="search"] {
  width: 100%; height: 48px; margin: 0; padding: 0 44px 0 48px;
  font: inherit; font-size: 16px; line-height: normal; color: var(--pic-ink);
  background: var(--pic-night-2); border: 1px solid var(--pic-line);
  border-radius: 999px; outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.deg-pic-search input::placeholder { color: var(--pic-ink-40); opacity: 1; }
.deg-pic-search input:focus {
  border-color: var(--pic-brand);
  box-shadow: 0 0 0 4px var(--pic-accent-14);
}
.deg-pic-search input::-webkit-search-cancel-button { display: none; }
.deg-pic-search .clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: var(--pic-night-4); color: var(--pic-ink-55);
  cursor: pointer; display: none; place-items: center;
}
.deg-pic-search .clear svg { width: 13px; height: 13px; }
.deg-pic-search[data-filled="true"] .clear { display: grid; }

.deg-pic-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.deg-pic-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 17px; border: 0; border-radius: 999px;
  background: var(--pic-night-2); color: var(--pic-ink-70);
  box-shadow: inset 0 0 0 1px var(--pic-line);
  font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.deg-pic-chip:hover { color: var(--pic-ink); box-shadow: inset 0 0 0 1px var(--pic-accent-24); }
.deg-pic-chip[aria-pressed="true"] { background: var(--pic-brand); color: #fff; box-shadow: none; }
.deg-pic-chip .n { font-size: 12.5px; opacity: 0.62; font-variant-numeric: tabular-nums; }

.deg-pic-filter-meta { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.deg-pic-count {
  font-size: 14px; color: var(--pic-ink-55);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.deg-pic-sort {
  height: 40px; margin: 0; padding: 0 34px 0 15px; border: 0; border-radius: 999px;
  background: var(--pic-night-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23F4F4F6' stroke-opacity='.55' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 15px center / 11px;
  box-shadow: inset 0 0 0 1px var(--pic-line);
  color: var(--pic-ink-70); font: inherit; font-size: 14.5px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}

/* --- Albenraster -------------------------------------------------------- */

.deg-pic-albums {
  display: grid; gap: clamp(18px, 1.9vw, 30px);
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(26px, 3vw, 44px);
}

.deg-pic-album {
  display: flex; flex-direction: column;
  border-radius: var(--pic-r-card); overflow: hidden;
  background: var(--pic-night-2); color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--pic-line-2);
  transition: box-shadow 0.3s var(--pic-ease), transform 0.3s var(--pic-ease);
}
.deg-pic-album:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--pic-accent-24), var(--pic-sh-2), var(--pic-sh-3);
}

.deg-pic-album__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--pic-night-3);
}
.deg-pic-album__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--pic-ease), filter 0.4s var(--pic-ease);
  filter: saturate(0.96);
}
.deg-pic-album:hover .deg-pic-album__media img { transform: scale(1.05); filter: saturate(1.04); }
.deg-pic-album__placeholder {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--pic-night-3), var(--pic-night-4));
}

.deg-pic-album__count {
  position: absolute; top: 13px; right: 13px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(17, 17, 20, 0.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--pic-ink); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.deg-pic-album__count svg { width: 14px; height: 14px; opacity: 0.7; }

.deg-pic-album__body { padding: 18px 21px 21px; display: flex; flex-direction: column; flex: 1; }
.deg-pic-album__date {
  margin: 0 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pic-accent);
}
.deg-pic-album h3 {
  margin: 0; color: var(--pic-ink); font-weight: 800;
  font-size: clamp(17px, 1.25vw, 20px); line-height: 1.18; letter-spacing: -0.024em;
}
.deg-pic-album:hover h3 {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.deg-pic-album__meta {
  margin: auto 0 0; padding-top: 14px;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 14px; color: var(--pic-ink-55);
}
.deg-pic-album__meta .sep { color: var(--pic-ink-40); }

.deg-pic-empty {
  grid-column: 1 / -1; margin: 0; padding: 74px 24px; text-align: center;
  border-radius: var(--pic-r-card); background: var(--pic-night-2);
  box-shadow: inset 0 0 0 1px var(--pic-line-2);
  color: var(--pic-ink-55); font-size: 17px;
}
.deg-pic-empty strong { color: var(--pic-ink); font-weight: 700; }

/* --- Albumseite --------------------------------------------------------- */

.deg-pic-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin: 0 0 clamp(26px, 3vw, 42px);
  background: var(--pic-line-2);
  border-radius: var(--pic-r-card); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--pic-line-2);
}
.deg-pic-facts > div { background: var(--pic-night-2); padding: 20px 23px; }
.deg-pic-facts dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--pic-ink-40); margin-bottom: 8px;
}
.deg-pic-facts dd {
  margin: 0; font-size: 16.5px; font-weight: 600; color: var(--pic-ink);
  letter-spacing: -0.018em; line-height: 1.3;
}

.deg-pic-text { margin: 0 0 clamp(26px, 3vw, 42px); max-width: 68ch; }

/* --- Bildraster, blockweise ausgerichtet -------------------------------- */
/* Reihen gleicher Höhe über die volle Breite. Die Höhen rechnet pictures.js
   aus data-ar. Ohne JavaScript greift das Spaltenraster darunter.          */

.deg-pic-grid {
  --gap: 10px;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.deg-pic-grid.is-justified { display: flex; flex-wrap: wrap; }

.deg-pic-shot {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--pic-r-sm); background: var(--pic-night-3);
  cursor: zoom-in;
}
.deg-pic-grid:not(.is-justified) .deg-pic-shot { aspect-ratio: 3 / 2; }
.deg-pic-shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--pic-ease);
}
.deg-pic-shot:hover img { transform: scale(1.035); }
.deg-pic-shot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--pic-line-2);
  pointer-events: none; transition: box-shadow 0.25s var(--pic-ease);
}
.deg-pic-shot:hover::after { box-shadow: inset 0 0 0 2px var(--pic-accent); }

/* --- Lightbox ----------------------------------------------------------- */

.deg-pic-lightbox {
  position: fixed; inset: 0; z-index: 100000;
  display: none; grid-template-rows: auto 1fr auto;
  background: rgba(9, 9, 11, 0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--pic-ink-70);
}
.deg-pic-lightbox.is-open { display: grid; }
.deg-pic-lightbox * { box-sizing: border-box; }

.deg-pic-lb__bar {
  display: flex; align-items: center; gap: 16px;
  padding: 16px clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--pic-line-2);
}
.deg-pic-lb__title { font-size: 15px; font-weight: 600; color: var(--pic-ink); }
.deg-pic-lb__counter { font-size: 14px; color: var(--pic-ink-55); font-variant-numeric: tabular-nums; }
.deg-pic-lb__tools { margin-left: auto; display: flex; gap: 8px; }

.deg-pic-lb__icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: var(--pic-night-3);
  color: var(--pic-ink-70); cursor: pointer; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.deg-pic-lb__icon:hover { background: var(--pic-night-4); color: var(--pic-ink); }
.deg-pic-lb__icon svg { width: 18px; height: 18px; }

.deg-pic-lb__stage {
  position: relative; display: grid; place-items: center;
  min-height: 0; padding: clamp(12px, 2vw, 28px);
}
.deg-pic-lb__stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 8px; box-shadow: var(--pic-sh-3);
}

.deg-pic-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(30, 30, 38, 0.82); color: var(--pic-ink);
  cursor: pointer; transition: background 0.2s var(--pic-ease);
}
.deg-pic-lb__nav:hover { background: var(--pic-brand); }
.deg-pic-lb__nav svg { width: 22px; height: 22px; }
.deg-pic-lb__prev { left: clamp(10px, 2vw, 26px); }
.deg-pic-lb__next { right: clamp(10px, 2vw, 26px); }

.deg-pic-lb__foot { padding: 14px clamp(16px, 3vw, 32px) 20px; border-top: 1px solid var(--pic-line-2); }
.deg-pic-lb__thumbs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.deg-pic-lb__thumbs button {
  flex: none; width: 76px; height: 52px; padding: 0; border: 0; border-radius: 7px;
  overflow: hidden; background: var(--pic-night-3); cursor: pointer; opacity: 0.5;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.deg-pic-lb__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.deg-pic-lb__thumbs button:hover { opacity: 0.85; }
.deg-pic-lb__thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--pic-accent); }

body.deg-pic-locked { overflow: hidden; }

/* --- Raster-Anpassungen ------------------------------------------------- */

@media (max-width: 1180px) {
  .deg-pic-albums { grid-template-columns: repeat(3, 1fr); }
  .deg-pic-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .deg-pic-albums { grid-template-columns: repeat(2, 1fr); }
  .deg-pic-filter-meta { margin-left: 0; width: 100%; }
  .deg-pic-grid { --gap: 7px; }
}

@media (max-width: 560px) {
  .deg-pic-albums { grid-template-columns: 1fr; }
  .deg-pic-facts { grid-template-columns: 1fr; }
  .deg-pic-lb__foot { display: none; }
  /* Unter 561px räumt pictures.js die Reihenmaße selbst weg (unjustify) und
     das Spaltenraster oben greift wieder – hier bewusst keine Regel, die
     gegen Inline-Styles ankämpfen müsste. */
}

@media (prefers-reduced-motion: reduce) {
  .deg-pic *, .deg-pic *::before, .deg-pic *::after,
  .deg-pic-lightbox *, .deg-pic-lightbox *::before, .deg-pic-lightbox *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}