/**
 * Artist Directory & Works Styles
 * Version: 1.5.0 (Sticky rechte Spalte mit 120px top)
 */

/* ========= Grundlayout ========= */
.ceeju-artist-directory {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 100%;
  margin: 0 auto;
}

/* Accent als Default im Directory (Werkausgabe ausgenommen) */
.ceeju-artist-directory :where(:not(.ceeju-works-container, .ceeju-works-container *)) {
  font-family: var(--e-global-typography-accent-font-family, inherit);
  font-size: var(--e-global-typography-accent-font-size, 1rem);
  font-weight: var(--e-global-typography-accent-font-weight, 400);
  line-height: var(--e-global-typography-accent-line-height, 1.5);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
  text-transform: var(--e-global-typography-accent-text-transform, none);
}

/* ========= Header: Alphabet + Sortierhinweis ========= */
.ceeju-artist-directory__header {
  width: 100%;
  margin-bottom: 2rem;
}

/* Alphabet – volle Breite, verteilt; bei Break linksbündig */
.ceeju-alphabet-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 .5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}
@media (max-width:910px){
  .ceeju-alphabet-nav { justify-content: flex-start; gap:.5rem; }
}

/* Buchstaben-Links: explizit Accent-Typo sichern */
.ceeju-alphabet-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 2rem;
  padding: 0 .25rem;
  color: #000;
  text-decoration: none;
  background: transparent;
  border: none;
  transition: opacity .2s ease;

  font-family: var(--e-global-typography-accent-font-family, inherit) !important;
  font-size: var(--e-global-typography-accent-font-size, 1rem) !important;
  font-weight: var(--e-global-typography-accent-font-weight, 400) !important;
  line-height: var(--e-global-typography-accent-line-height, 1.5) !important;
  letter-spacing: var(--e-global-typography-accent-letter-spacing, normal) !important;
  text-transform: var(--e-global-typography-accent-text-transform, none) !important;
}
.ceeju-alphabet-nav__item:hover { opacity: .7; }

/* Sortierhinweis – NUR hier Text-Typografie (Elementor Text) */
.ceeju-sort-hint {
  flex: 1 0 100%;
  margin: .5rem 0 0 0;
  text-align: left;
  color: #999 !important;

  font-family: var(--e-global-typography-text-font-family, inherit) !important;
  font-size: var(--e-global-typography-text-font-size, 1rem) !important;
  font-weight: var(--e-global-typography-text-font-weight, 400) !important;
  line-height: var(--e-global-typography-text-line-height, 1.5) !important;
  letter-spacing: var(--e-global-typography-text-letter-spacing, normal) !important;
  text-transform: var(--e-global-typography-text-text-transform, none) !important;
}

/* ========= Body (2 Spalten) ========= */
.ceeju-artist-directory__body {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* ab Desktop nebeneinander je 50 % */
@media (min-width:1024px){
  .ceeju-artist-directory__body {
    flex-direction: row;
    gap: 0;
  }

  .ceeju-artist-directory__sidebar {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
  }

  .ceeju-artist-directory__content {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
    
    /* Sticky rechte Spalte */
    position: sticky;
    top: 120px;
    align-self: flex-start;
    max-height: calc(100vh - 140px); /* 120px top + 20px bottom spacing */
    overflow-y: auto;
    
    /* Scrollbar verstecken */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  
  /* Scrollbar verstecken für Chrome/Safari */
  .ceeju-artist-directory__content::-webkit-scrollbar {
    display: none;
  }
}

/* auf Tablet/Mobile bleibt es untereinander */
@media (max-width:1023px){
  .ceeju-artist-directory__sidebar,
  .ceeju-artist-directory__content {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ========= Mobile Overlay ========= */
@media (max-width:1023px) {
  .ceeju-artist-directory__content {
    position: fixed; inset: 0;
    background: #fff; z-index: 9999;
    overflow-y: auto; padding: 2rem;
    transform: translateY(100%); transition: transform .3s ease; visibility: hidden;
  }
  .ceeju-artist-directory__content.is-open { transform: translateY(0); visibility: visible; }
}

/* Close-Button nur mobil */
.ceeju-close-btn {
  display: none !important;
  position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px;
  background: transparent; border: 0; cursor: pointer; padding: 0; z-index: 10;
}
.ceeju-close-btn img { width:100%; height:100%; display:block; }
@media (max-width:1023px){ .ceeju-artist-directory__content.is-open .ceeju-close-btn { display:block !important; } }

/* ========= Künstlerliste ========= */
.ceeju-artist-list { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width:1024px){
  .ceeju-artist-list { flex:1; overflow-y:auto; overflow-x:hidden; padding-right:1rem; scrollbar-width:none; -ms-overflow-style:none; }
  .ceeju-artist-list::-webkit-scrollbar { display:none; }
}

/* Abschnittsbuchstabe: explizit Accent-Typo sichern */
.ceeju-artist-list__letter {
  color:#000;
  margin:0 0 .75rem 0;

  font-family: var(--e-global-typography-accent-font-family, inherit) !important;
  font-size: var(--e-global-typography-accent-font-size, 1.25rem) !important;
  font-weight: var(--e-global-typography-accent-font-weight, 700) !important;
  line-height: var(--e-global-typography-accent-line-height, 1.3) !important;
  letter-spacing: var(--e-global-typography-accent-letter-spacing, normal) !important;
  text-transform: var(--e-global-typography-accent-text-transform, none) !important;
}

/* Items-Container -> Basisfarbe grau */
.ceeju-artist-list__items {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  color:#999 !important; /* Basis: grau */
}

/* Reset/Basics */
.ceeju-artist-directory .ceeju-artist-list__items :is(button.ceeju-artist-list__item, a.ceeju-artist-list__item){
  all:unset;
  display:block; width:100%; cursor:pointer;
  color:inherit;
  text-decoration:none;
}

/* Item Typo + Default-Farbe (grau) */
.ceeju-artist-directory .ceeju-artist-list__item{
  padding:0 !important; margin:0;
  text-align:left !important; background:transparent !important;
  border:none !important; border-radius:0 !important;
  transition:color .2s ease, font-weight .2s ease;

  font-family: var(--e-global-typography-accent-font-family, inherit) !important;
  font-size: var(--e-global-typography-accent-font-size, 1rem) !important;
  font-weight: var(--e-global-typography-accent-font-weight, 400) !important;
  line-height: var(--e-global-typography-accent-line-height, 1.5) !important;
  letter-spacing: var(--e-global-typography-accent-letter-spacing, normal) !important;
  text-transform: var(--e-global-typography-accent-text-transform, none) !important;

  color:#999 !important; /* Standard grau */
}

/* ========= NEUE LOGIK: Werk-Status ========= */

/* Künstler MIT Werken: SCHWARZ */
.ceeju-artist-directory .ceeju-artist-list__item[data-has-works="true"] {
  color:#000 !important;
  cursor:pointer;
}

/* Künstler MIT Werken: HOVER → BOLD */
.ceeju-artist-directory .ceeju-artist-list__item[data-has-works="true"]:hover {
  font-weight:700 !important;
}

/* Künstler MIT Werken: AKTIV → SCHWARZ (wie vorher) */
.ceeju-artist-directory .ceeju-artist-list__item[data-has-works="true"][aria-current="true"],
.ceeju-artist-directory .ceeju-artist-list__item[data-has-works="true"].is-active {
  color:#000 !important;
}

/* Künstler OHNE Werke: GRAU + nicht klickbar */
.ceeju-artist-directory .ceeju-artist-list__item[data-has-works="false"],
.ceeju-artist-directory .ceeju-artist-list__item[disabled] {
  color:#999 !important;
  cursor:default !important;
  pointer-events:none;
  opacity:0.6;
}

/* visited nicht umfärben */
.ceeju-artist-directory .ceeju-artist-list__items a.ceeju-artist-list__item:visited { color: inherit !important; }

/* ========= Works & Platzhalter ========= */
.ceeju-works-container { min-height:300px; }
@media (max-width:1023px){ .ceeju-works-container { padding-top:3rem; } }
.ceeju-placeholder, .ceeju-loading {
  display:flex; align-items:center; justify-content:center; min-height:300px; padding:2rem; text-align:center; color:#666;
}

/* ========= Werk-Items ========= */
.ceeju-werk { margin-bottom:4rem; } .ceeju-werk:last-child { margin-bottom:0; }

/* Künstlername ÜBER Bild - Accent Typography */
.ceeju-werk__artist {
  margin:0 0 40px 0; /* 40px Abstand zum Bild */
  color:#000;
  
  font-family: var(--e-global-typography-accent-font-family, inherit);
  font-size: var(--e-global-typography-accent-font-size, 1rem);
  font-weight: var(--e-global-typography-accent-font-weight, 400);
  line-height: var(--e-global-typography-accent-line-height, 1.5);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
  text-transform: var(--e-global-typography-accent-text-transform, none);
}

.ceeju-werk__image { width:100%; height:auto; margin-bottom:20px; overflow:hidden; } /* 20px Abstand nach Bild */
.ceeju-werk__image img { 
  display:block; 
  width:100%; 
  height:auto; 
  object-fit:cover;
  
  /* Lazy Load Blur Effekt */
  filter: blur(20px);
  transition: filter 0.8s ease-out;
}

/* Bild geladen → scharf */
.ceeju-werk__image img.is-loaded {
  filter: blur(0);
}

/* Titel UNTER Bild - Accent Typography (aber nicht bold) */
.ceeju-werk__title {
  margin:0 0 1.5rem 0;
  color:#000;
  
  font-family: var(--e-global-typography-accent-font-family, inherit);
  font-size: var(--e-global-typography-accent-font-size, 1rem);
  font-weight: 400 !important; /* Explizit normal, nicht bold */
  line-height: var(--e-global-typography-accent-line-height, 1.5);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
  text-transform: var(--e-global-typography-accent-text-transform, none);
}

.ceeju-werk__meta {
  display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; color:#666; font-size:.875rem; line-height:1.5;
}
.ceeju-werk__meta-label { font-weight:600; }

.ceeju-werk__content {
  color:#000 !important; /* Immer schwarz */
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: var(--e-global-typography-text-font-size, 1.125rem);
  font-weight: var(--e-global-typography-text-font-weight, 400);
  line-height: var(--e-global-typography-text-line-height, 1.7);
  letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
  text-transform: var(--e-global-typography-text-text-transform, none);
}
.ceeju-werk__content p { margin:0 0 1rem 0; color:#000 !important; } /* Auch Paragraphen schwarz */
.ceeju-werk__content p:last-child { margin-bottom:0; }

/* ========= Toggle-Funktionalität ========= */
.ceeju-werk__excerpt {
  position: relative;
}

/* Im gekürzten Zustand: Zeige nur short-content */
.ceeju-werk__excerpt.is-truncated .ceeju-werk__full-content {
  display: none;
}

/* Im erweiterten Zustand: Zeige nur full-content */
.ceeju-werk__excerpt:not(.is-truncated) .ceeju-werk__short-content {
  display: none;
}

.ceeju-werk__toggle {
  display:inline-block; margin-top:.5rem; padding:.5rem 1rem;
  color:#0073aa; background:transparent; border:1px solid #0073aa; border-radius:4px;
  cursor:pointer; transition:all .2s ease; font-size:.875rem; font-weight:600; line-height:1.5;
}
.ceeju-werk__toggle:hover { color:#fff; background:#0073aa; }

/* ========= Responsive ========= */
@media (max-width:768px){
  .ceeju-werk__content { font-size: var(--e-global-typography-text-font-size, 1rem); }
}

/* ========= Fokus aus ========= */
.ceeju-artist-directory *:focus,
.ceeju-artist-directory *:focus-visible { outline:none !important; box-shadow:none !important; }

/* ========= Print ========= */
@media print {
  .ceeju-alphabet-nav, .ceeju-sort-hint, .ceeju-werk__toggle, .ceeju-close-btn { display:none; }
  .ceeju-artist-directory { display:block; }
}