/* ── Design-Tokens des Plugins ──
   Eigener Namespace (--sp-*), damit nichts mit Variablen des Themes kollidiert.
   Werte = Studio-Theme. Im Theme überschreiben, z. B.: :root { --sp-black: #000; } */
:root {
  --sp-black: #111111;
  --sp-white: #FFFFFF;
  --sp-light-grey: #F5F5F5;
  --sp-grey: #5A5A5A;
  --sp-fs-small: clamp(0.875rem, 0.7917rem + 0.1736vw, 1rem);
  --sp-fs-base: clamp(1rem, 0.9167rem + 0.1736vw, 1.125rem);
  --sp-fs-medium: clamp(1.125rem, 0.9583rem + 0.3472vw, 1.375rem);
  --sp-fs-large: clamp(1.5rem, 0.6667rem + 1.7361vw, 2.75rem);
  --sp-mini: 4px;
  --sp-small: 8px;
  --sp-base: 16px;
  --sp-medium: 32px;
  --sp-large: 64px;
  --sp-max-width: 1040px;
}

/* Studio Portfolio – isolierter Namespace, greift nicht ins Theme/Elementor ein */

/* width + flex + min-width:0 → füllt auch in Elementor-Atomic-V4-Flex-Containern
   (.e-flexbox-base, display:flex;flex-direction:row) die volle Breite. Sonst schrumpft
   der Grid-Container auf Inhaltsbreite und Masonry berechnet falsche Spaltenbreiten. */
.studio-portfolio { --gap: 1.5rem; width: 100%; flex: 1 1 100%; min-width: 0; max-width: 100%; }

/* Grid */
.studio-portfolio-grid { display: grid; gap: var(--gap); }
.studio-portfolio-grid.cols-1 { grid-template-columns: 1fr; }
.studio-portfolio-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.studio-portfolio-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.studio-portfolio-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.studio-portfolio-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.studio-portfolio-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Masonry (Masonry.js positioniert, Breiten via Sizer) */
.studio-portfolio-masonry { --gutter: 24px; }
.studio-portfolio-masonry .studio-portfolio-sizer,
.studio-portfolio-masonry .studio-portfolio-item { box-sizing: border-box; }
.studio-portfolio-masonry .studio-portfolio-item { margin-bottom: var(--gutter); }
/* Gutter-Sizer: liefert Masonry die exakte gerenderte Spalten-Lücke → kein Sub-Pixel-Drift */
.studio-portfolio-masonry .studio-portfolio-gutter-sizer { width: var(--gutter); }
.studio-portfolio-masonry.cols-1 .studio-portfolio-sizer,
.studio-portfolio-masonry.cols-1 .studio-portfolio-item { width: 100%; }
.studio-portfolio-masonry.cols-2 .studio-portfolio-sizer,
.studio-portfolio-masonry.cols-2 .studio-portfolio-item { width: calc((100% - 1 * var(--gutter)) / 2); }
.studio-portfolio-masonry.cols-3 .studio-portfolio-sizer,
.studio-portfolio-masonry.cols-3 .studio-portfolio-item { width: calc((100% - 2 * var(--gutter)) / 3); }
.studio-portfolio-masonry.cols-4 .studio-portfolio-sizer,
.studio-portfolio-masonry.cols-4 .studio-portfolio-item { width: calc((100% - 3 * var(--gutter)) / 4); }
.studio-portfolio-masonry.cols-5 .studio-portfolio-sizer,
.studio-portfolio-masonry.cols-5 .studio-portfolio-item { width: calc((100% - 4 * var(--gutter)) / 5); }
.studio-portfolio-masonry.cols-6 .studio-portfolio-sizer,
.studio-portfolio-masonry.cols-6 .studio-portfolio-item { width: calc((100% - 5 * var(--gutter)) / 6); }

/* Item – Opacity-Fade; das Positions-Gleiten übernimmt Masonry (transitionDuration) */
.studio-portfolio-item { transition: opacity .3s ease; }

/* Grid: hart aus dem Fluss nehmen (CSS-Grid ordnet selbst neu an) */
.studio-portfolio-grid .studio-portfolio-item.is-hidden { display: none; }

/* Masonry: zweistufig –
   1) .is-hidden blendet aus (nur opacity, bleibt kurz im Layout)
   2) .is-gone nimmt das Item aus dem Layout (display:none), erst NACH dem Ausblenden */
.studio-portfolio-masonry .studio-portfolio-item.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.studio-portfolio-masonry .studio-portfolio-item.is-gone { display: none; }
.studio-portfolio-link { display: block; color: inherit; text-decoration: none; }
.studio-portfolio-thumb {
  overflow: hidden;
  background: var(--sp-light-grey);
}
.studio-portfolio-grid .studio-portfolio-thumb { aspect-ratio: 4 / 3; }
.studio-portfolio-thumb img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.studio-portfolio-grid .studio-portfolio-thumb img { height: 100%; }
/* Masonry: Thumb hat per Inline-Style das echte aspect-ratio → Item-Höhe steht sofort fest,
   das Bild füllt den Rahmen (kein Crop, da Ratio = echtes Bildverhältnis). */
.studio-portfolio-masonry .studio-portfolio-thumb img { height: 100%; }

/* Textblock (Layout 1 + 2): Lead → Titel → Jahr → Kategorie
   Bewusst nur EINE Klasse pro Selektor und kein !important → im Child-Theme reicht z. B.
   .studio-portfolio-title { font-size: 1.5rem; } – wirkt in Layout 1 und 2.
   Unterschiede zwischen den Layouts laufen über Variablen (--sp-title-size, --sp-meta-color). */
.studio-portfolio-text {
  margin-top: .75rem;
}
.studio-portfolio-text > * { margin: 0; }
.studio-portfolio-lead {
  font-size: var(--sp-fs-small);
  line-height: 1.4;
  margin-bottom: var(--sp-mini);
}
.studio-portfolio-title {
  font-size: var(--sp-title-size, var(--sp-fs-base));
  font-weight: 600;
  line-height: 1.3;
}
.studio-portfolio-year,
.studio-portfolio-cats {
  font-size: var(--sp-fs-small);
  line-height: 1.4;
  color: var(--sp-meta-color, var(--sp-grey));
}
/* Abstand unter dem Titel – egal ob Jahr oder (ohne Jahr) gleich die Kategorie folgt */
.studio-portfolio-title + * { margin-top: var(--sp-mini); }

/* Layout 2: Text als Overlay auf dem Bild */
.studio-portfolio-thumb-overlay { position: relative; }
.studio-portfolio-title-overlay {
  --sp-title-size: var(--sp-fs-medium);
  --sp-meta-color: rgba(255,255,255,.8);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1.25rem;
  margin: 0;
  color: var(--sp-white);
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 60%);
  transition: background .3s;
}
.studio-portfolio-item:hover .studio-portfolio-title-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.1) 70%);
}

/* Filter */
.studio-portfolio-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-small);
  margin: 0 0 1.5rem;
  width: 100%;
}
.studio-portfolio-filter-btn {
  padding: var(--sp-small) var(--sp-base);
  background: var(--sp-light-grey);
  border: none;
  border-radius: 999px;
  color: var(--sp-black);
  font: inherit;
  font-size: var(--sp-fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.studio-portfolio-filter-btn:hover { background: var(--sp-grey); color: var(--sp-white); }
.studio-portfolio-filter-btn.is-active { background: var(--sp-black); color: var(--sp-white); }

.studio-portfolio-empty { padding: var(--sp-medium) 0; color: var(--sp-grey); }

/* Responsive – Tablet = max-width 1024px, Mobile = max-width 768px */
@media (max-width: 1024px) {
  .studio-portfolio-grid.cols-3,
  .studio-portfolio-grid.cols-4,
  .studio-portfolio-grid.cols-5,
  .studio-portfolio-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
  .studio-portfolio-masonry.cols-3 .studio-portfolio-sizer,
  .studio-portfolio-masonry.cols-3 .studio-portfolio-item,
  .studio-portfolio-masonry.cols-4 .studio-portfolio-sizer,
  .studio-portfolio-masonry.cols-4 .studio-portfolio-item,
  .studio-portfolio-masonry.cols-5 .studio-portfolio-sizer,
  .studio-portfolio-masonry.cols-5 .studio-portfolio-item,
  .studio-portfolio-masonry.cols-6 .studio-portfolio-sizer,
  .studio-portfolio-masonry.cols-6 .studio-portfolio-item {
    width: calc((100% - 1 * var(--gutter)) / 2);
  }
}
@media (max-width: 768px) {
  /* [class*="cols-"] = gleiche Spezifität wie .cols-N oben → gewinnt durch Reihenfolge, ohne !important */
  .studio-portfolio-grid[class*="cols-"] { grid-template-columns: 1fr; }
  .studio-portfolio-masonry[class*="cols-"] .studio-portfolio-sizer,
  .studio-portfolio-masonry[class*="cols-"] .studio-portfolio-item { width: 100%; }
}


/* ── Infinite Scroll: Sentinel + Loader ── */
.studio-portfolio-sentinel { width: 100%; height: 1px; }
.studio-portfolio-loader {
  display: flex;
  justify-content: center;
  padding: var(--sp-medium) 0;
}
.studio-portfolio-loader[hidden] { display: none; }
.studio-portfolio-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--sp-light-grey);
  border-top-color: var(--sp-black);
  border-radius: 50%;
  animation: studio-portfolio-spin .7s linear infinite;
}
@keyframes studio-portfolio-spin { to { transform: rotate(360deg); } }

/* Load more */
.studio-portfolio-loadmore-wrap { display: flex; justify-content: center; padding: var(--sp-medium) 0; }
.studio-portfolio-loadmore {
  padding: var(--sp-small) var(--sp-large);
  background: var(--sp-black); color: var(--sp-white);
  border: none; border-radius: 999px;
  font: inherit; font-size: var(--sp-fs-small); font-weight: 600;
  cursor: pointer; transition: opacity .15s;
}
.studio-portfolio-loadmore:hover { opacity: .85; }
.studio-portfolio-loadmore[disabled] { opacity: .5; cursor: default; }
.studio-portfolio-loadmore[hidden] { display: none; }

/* Pagination (Nummern) */
.studio-portfolio-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-mini); padding: var(--sp-medium) 0; }
.studio-portfolio-page {
  min-width: 40px; padding: var(--sp-small) var(--sp-base);
  background: var(--sp-light-grey); color: var(--sp-black);
  border: none; border-radius: var(--sp-mini);
  font: inherit; font-size: var(--sp-fs-small); font-weight: 500;
  cursor: pointer; transition: background .15s, color .15s;
}
.studio-portfolio-page:hover { background: var(--sp-grey); color: var(--sp-white); }
.studio-portfolio-page.is-active { background: var(--sp-black); color: var(--sp-white); }
.studio-portfolio-page[disabled] { opacity: .4; cursor: default; }
.studio-portfolio-page-gap { align-self: center; padding: 0 var(--sp-mini); color: var(--sp-grey); font-size: var(--sp-fs-small); }


/* ── Portfolio (Einzelseite) ── */
.portfolio-single {
  max-width: var(--sp-max-width);
  margin: 0 auto;
  padding: 3rem var(--sp-medium);
}
.portfolio-single-header  { text-align: center; margin-bottom: var(--sp-medium); }
.portfolio-single-cats    { font-size: var(--sp-fs-small); color: var(--sp-grey); margin-bottom: var(--sp-small); text-transform: uppercase; }
.portfolio-single-title   { font-size: var(--sp-fs-large); font-weight: 700; line-height: 1.1; margin-bottom: .75rem; }
.portfolio-single-excerpt { font-size: var(--sp-fs-medium); color: var(--sp-grey); max-width: 60ch; margin: 0 auto; }
.portfolio-single-excerpt p { margin: 0; }
.portfolio-single-thumb   { margin: var(--sp-medium) 0; overflow: hidden; }
.portfolio-single-thumb img { width: 100%; height: auto; }
.portfolio-single-content { max-width: 70ch; margin: 0 auto; font-size: var(--sp-fs-base); line-height: 1.7; }
.portfolio-single-content p { margin-bottom: 1.25rem; }

.portfolio-single-tags {
  max-width: 70ch;
  margin: var(--sp-medium) auto 0;
  padding-top: 1.5rem;
  font-size: var(--sp-fs-small);
  color: var(--sp-grey);
}
.portfolio-single-tags .label  { margin-right: var(--sp-small); }
.portfolio-single-tags .portfolio-tag {
  display: inline-block;
  margin-right: var(--sp-small);
  color: var(--sp-black);
}

.portfolio-single-nav {
  max-width: 70ch;
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-base);
  padding-top: 1.5rem;
  font-size: var(--sp-fs-small);
}
.portfolio-nav-prev { justify-self: start; display: flex; align-items: center; gap: var(--sp-small); }
.portfolio-nav-next { justify-self: end;   display: flex; align-items: center; gap: var(--sp-small); text-align: right; }
.portfolio-single-nav a { color: var(--sp-black); }
.portfolio-single-nav a:hover .ttl { color: var(--sp-black); }

@media (max-width: 768px) {
  .portfolio-single-title { font-size: var(--sp-fs-large); }
  .portfolio-single-nav { grid-template-columns: 1fr; text-align: center; }
  .portfolio-nav-prev, .portfolio-nav-next { justify-self: center; }
}