/* ==========================================================================
   PROMPTS — pr-* Namespace (Templates prompts, prompts-category, prompt)
   Prompt-Bibliothek im Look der Suchseite: Hero mit Suchleiste und
   SF-Symbol-Hintergrund, Filter-Sidebar, Treffer-Liste. Die sf-*-Basis
   (Hero, Layout, Chips, Results) kommt aus search.css; hier stehen nur
   die Prompt-spezifischen Ergänzungen (Copy, Badges, Detailseite).
   ========================================================================== */

.pw-prompts { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--pw-text); }
.pw-prompts .pw-container--narrow { max-width: 960px; margin: 0 auto; padding: 0 var(--pw-space-lg); }
@media (prefers-color-scheme: dark) { .pw-prompts { color: var(--pw-fg); } }

/* Per hidden-Attribut versteckte Elemente konsequent ausblenden: einzelne
   sf-*-Regeln (z. B. display:inline-block auf .sf-filters__reset) würden
   das UA-Stylesheet sonst überstimmen. */
.pw-prompts [hidden] { display: none !important; }

/* Luft zwischen letztem Eintrag und dem Abschluss-Block darunter */
.pw-prompts .sf-layout { padding-bottom: var(--pw-space-3xl); }

/* ---- Hero-Ergänzungen (Basis: .sf-hero aus search.css) ---- */
.sf-hero__lead { max-width: 640px; margin: 0 auto var(--pw-space-lg); font-size: 15px; line-height: 1.6; color: var(--pw-text-secondary); }
/* Notizbuch-Icon (quadratisch, 1024px): groß und tief gesetzt; das untere
   Drittel ragt aus dem Hero heraus und wird von overflow:hidden bzw. der
   dunkleren Fläche darunter verdeckt. */
.sf-hero__bgimage--prompts { width: 620px; transform: translateY(33%); }
@media (max-width: 900px) { .sf-hero__bgimage--prompts { width: 380px; } }

/* ---- Treffer-Karte (Basis: .sf-result aus search.css) ----
   <article> statt <a>: Titel-Link wird über die Karte gestreckt,
   die Meta-Zeile (Badges + Copy-Button) liegt mit z-index darüber. */
.pr-result { position: relative; }
.pr-result[hidden] { display: none; }
.pr-result__link { color: inherit; }
.pr-result__link:hover { color: inherit; }
.pr-result__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Kopfzeile: Kategorie-Tag links, Copy-Button oben rechts (über dem
   Stretched Link), damit unter dem Prompt-Auszug kein Leerraum bleibt. */
.pr-result__head { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---- Sidebar-Chips als Buttons (Basis: .sf-chip aus search.css) ---- */
.pr-chip { font-family: inherit; cursor: pointer; text-align: left; width: 100%; }

/* ---- Reset-Button in der Sidebar (Basis: .sf-filters__reset) ---- */
.pr-reset { padding: 0; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }

/* ---- "Mehr laden"-Button unter der Treffer-Liste ---- */
.pr-more { display: flex; justify-content: center; margin: var(--pw-space-xl) 0 0; }
.pr-more__btn { padding: 10px 22px; background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-sm); font-family: inherit; font-size: 14px; font-weight: 600; color: var(--pw-text); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.pr-more__btn:hover { border-color: var(--pw-brand); color: var(--pw-brand); }

/* ---- Copy-Button ---- */
.pr-copy { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--pw-bg-alt); border: 1px solid var(--pw-border-light); border-radius: var(--pw-radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--pw-text); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.pr-copy:hover { border-color: var(--pw-brand); color: var(--pw-brand); }
.pr-copy__icon { display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; }
.pr-copy__icon svg { width: 100%; height: 100%; }
.pr-copy__icon--done { display: none; }
.pr-copy--done { background: #E1F5EE; border-color: #9adbc4; color: #085041; }
.pr-copy--done:hover { border-color: #9adbc4; color: #085041; }
.pr-copy--done .pr-copy__icon--copy { display: none; }
.pr-copy--done .pr-copy__icon--done { display: inline-flex; }

/* ---- Prompt des Monats (kompakte Box in der Seitenleiste) ----
   Ganze Kachel klickbar: Stretched Link auf dem Titel, Copy-Button
   liegt mit eigenem z-index darüber. */
.pr-featured { position: relative; margin: var(--pw-space-xl) 0 0; padding: 22px 18px; background: rgba(var(--pw-brand-rgb),0.04); border: 1px solid rgba(var(--pw-brand-rgb),0.35); border-radius: var(--pw-radius-md); transition: border-color 0.2s; }
.pr-featured:hover { border-color: var(--pw-brand); }
.pr-featured__label { margin: 0 0 12px; font-size: 11px; font-weight: 700; color: var(--pw-brand); text-transform: uppercase; letter-spacing: 0.08em; }
.pr-featured__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.pr-featured__title a { color: var(--pw-text); }
.pr-featured__title a:hover { color: var(--pw-brand); }
.pr-featured__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pr-featured .pr-copy { position: relative; z-index: 2; }
.pr-featured__excerpt { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--pw-text-secondary); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Leerer Filterzustand ---- */
.pr-empty { margin: var(--pw-space-2xl) auto; text-align: center; font-size: 15px; color: var(--pw-text-secondary); }

/* ---- Kategorie-Seite (weißer Grund, pageheader-Layout) ---- */
.pr-category-list { margin: var(--pw-space-xl) 0; }

/* ---- Detailseite ---- */
.pr-prompt { position: relative; margin: var(--pw-space-xl) 0; padding: 24px 28px; background: var(--pw-bg-alt); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); }
.pr-prompt__text { margin: 0 0 var(--pw-space-md); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: var(--pw-text); }

.pr-expected { margin: var(--pw-space-lg) 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--pw-brand); }
.pr-expected__title { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--pw-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pr-expected__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pw-text-secondary); }

/* Kontext-Abschnitte (Video, Blogpost): Header erscheinen nur, wenn das
   zugehörige Feld gefüllt ist (Bedingung im Template). */
.pr-detail__section { margin: var(--pw-space-2xl) 0 0; }
.pr-detail__heading { margin: 0 0 var(--pw-space-lg); font-size: 22px; font-weight: 700; color: var(--pw-text); letter-spacing: -0.01em; }
.pr-detail__video { margin: 0; }
.pr-detail__video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--pw-radius-md); }
.pr-detail__blogpost { margin: 0; font-size: 15px; font-weight: 600; }
.pr-detail__blogpost a { color: var(--pw-brand); }
.pr-related { margin: var(--pw-space-2xl) 0 var(--pw-space-3xl); }
/* Trennlinie zwischen den Kontext-Abschnitten und den verwandten Prompts
   (als Pseudo-Element, damit sie exakt auf Inhaltsbreite liegt) */
.pr-related > .pw-container--narrow::before { content: ""; display: block; border-top: 1px solid var(--pw-border); margin-bottom: var(--pw-space-2xl); }
.pr-related__title { font-size: 22px; font-weight: 700; color: var(--pw-text); margin: 0 0 var(--pw-space-lg); letter-spacing: -0.01em; }

/* ---- Dark Mode ---- */
@media (prefers-color-scheme: dark) {
	.sf-hero__lead { color: var(--pw-text-secondary); }
	.pr-copy { background: var(--pw-dark-3); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.pr-copy:hover { border-color: var(--pw-brand); color: var(--pw-brand); }
	.pr-copy--done { background: #0a3a30; border-color: #14584a; color: #6ee7b7; }
	.pr-copy--done:hover { border-color: #14584a; color: #6ee7b7; }
	.pr-featured { background: rgba(var(--pw-brand-rgb),0.06); }
	.pr-featured__title a { color: var(--pw-fg); }
	.pr-featured__title a:hover { color: var(--pw-brand); }
	.pr-more__btn { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.pr-more__btn:hover { border-color: var(--pw-brand); color: var(--pw-brand); }
	.pr-prompt { background: #0f0f0f; border-color: var(--pw-dark-3); }
	.pr-prompt__text { color: var(--pw-fg); }
	.pr-related > .pw-container--narrow::before { border-top-color: var(--pw-dark-3); }
	.pr-related__title { color: var(--pw-fg); }
	.pr-detail__heading { color: var(--pw-fg); }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	/* Einspaltiges Layout: Trennlinie zwischen Sidebar-Inhalt (Filter +
	   Prompt des Monats) und der Treffer-Liste; das Desktop-Padding von
	   80px (search.css) wird auf den Featured-Abstand reduziert, damit
	   der Abstand über und unter der Box gleich ist (je 32px). */
	.pw-prompts .sf-aside { padding-bottom: var(--pw-space-xl); border-bottom: 1px solid var(--pw-border); }
}
@media (max-width: 900px) and (prefers-color-scheme: dark) {
	.pw-prompts .sf-aside { border-bottom-color: var(--pw-dark-3); }
}
@media (max-width: 640px) {
	.pr-result__meta { align-items: flex-start; flex-direction: column; }
	.pr-prompt { padding: 18px 20px; }
}