/* ============================================================
   stadtguide-hub.css (v2)
   Bausteine der Guide-Übersicht (/agnesviertel-guide/ + EN):
   Such-/Filter-Toolbar, „Aktuell beliebt", „Frisch im Guide",
   Autorin-Block, Distanz-/Lesezeit-/Neu-Badges, Rubriken-Karten.

   Formsprache der Marke: Boxen/Karten = var(--radius) (2px, fast
   eckig wie .ed-cross-card), interaktive Pills/Buttons = 100px
   (wie .ed-hero-pill / .main-btn). Das Artikel-Grid nutzt bewusst
   das NATIVE .ed-cross-grid-Layout aus zimmer-detail.css (2 Spalten,
   große Karten, Titel clamp 24–36px) — kein Spalten-Override mehr,
   damit Vorschau-Karten exakt wie im Rest der Site aussehen.

   Konditional geladen: auf dem Hub (functions.php, page-key
   agnesviertel-guide) und überall, wo [mercure_stadtguide_grid]
   rendert (Rubrik-Seiten). Alles unter `.sg-hub` gescoped.
   ============================================================ */

.sg-hub { --sg-line: var(--c-grey-15); }
.sg-hub *,
.sg-hub *::before,
.sg-hub *::after { box-sizing: border-box; }

/* ===== TOOLBAR (Suche + Filter + Sortierung) ===== */
.sg-hub .sg-toolbar {
	background: var(--c-white);
	border: 1px solid var(--sg-line);
	border-radius: var(--radius);
	padding: clamp(20px, 2.6vw, 30px);
	margin-bottom: clamp(30px, 4vw, 48px);
	box-shadow: var(--shadow-card);
}
.sg-hub .sg-search {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--sg-line);
	border-radius: var(--radius);
	padding: 4px 20px;
	background: var(--c-cream);
	transition: border-color .2s;
}
.sg-hub .sg-search:focus-within { border-color: var(--c-purple); }
.sg-hub .sg-search svg { width: 19px; height: 19px; color: var(--c-purple-text); flex-shrink: 0; }
.sg-hub .sg-search__input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: var(--f-sans);
	font-size: 15.5px;
	color: var(--c-dark);
	padding: 14px 0;
	outline: none;
	min-width: 0;
}
.sg-hub .sg-search__input::placeholder { color: rgba(83, 81, 79, .5); }

.sg-hub .sg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}
.sg-hub .sg-chip {
	font-family: var(--f-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--c-dark);
	background: var(--c-cream);
	border: 1px solid var(--sg-line);
	border-radius: 100px;
	padding: 10px 18px;
	cursor: pointer;
	transition: background .18s, border-color .18s, color .18s;
	white-space: nowrap;
	line-height: 1;
}
.sg-hub .sg-chip .n { color: rgba(83, 81, 79, 0.85); font-size: 11px; margin-left: 3px; }
.sg-hub .sg-chip:hover { border-color: var(--c-purple); color: var(--c-purple-text); }
.sg-hub .sg-chip.is-on { background: var(--c-purple-ink); color: var(--c-white); border-color: var(--c-purple-ink); }
.sg-hub .sg-chip.is-on .n { color: rgba(255, 255, 255, .92); } /* A11y: .72 ergab 3,9:1 auf Purple */

.sg-hub .sg-toolbar__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--sg-line);
}
.sg-hub .sg-count { font-family: var(--f-sans); font-size: 13px; color: rgba(83, 81, 79, 0.85); }
.sg-hub .sg-count__n { color: var(--c-dark); font-weight: 600; }
.sg-hub .sg-sort {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	font-family: var(--f-sans);
	font-size: 12.5px;
}
.sg-hub .sg-sort__lbl { color: rgba(83, 81, 79, 0.85); margin-right: 5px; }
.sg-hub .sg-sortopt {
	background: transparent;
	border: none;
	border-radius: 100px;
	padding: 8px 15px;
	font-family: var(--f-sans);
	font-size: 12.5px;
	color: var(--c-dark);
	cursor: pointer;
	transition: background .18s, color .18s;
}
.sg-hub .sg-sortopt:hover { color: var(--c-purple-text); }
.sg-hub .sg-sortopt.is-on { background: var(--c-dark); color: var(--c-white); }

/* ===== ARTIKEL-GRID =====
   Layout kommt vollständig vom nativen .ed-cross-grid / .ed-cross-card
   (2 Spalten, große Karten) — hier nur Zusatz-Elemente. */
.sg-hub .sg-card { position: relative; }
.sg-hub .sg-card[hidden] { display: none !important; }

/* Teaser (nativer .specs-Stil) + Badges gestapelt in der linken Body-Spalte
   (native .body bleibt grid 1fr auto → Pfeil rechts). */
.sg-hub .sg-card .sg-body-main {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.sg-hub .sg-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-hub .sg-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--f-sans);
	font-size: 12px;
	line-height: 1;
	color: var(--c-dark);
	background: var(--c-cream);
	border: 1px solid var(--sg-line);
	border-radius: 100px;
	padding: 7px 13px;
}
.sg-hub .sg-badge svg { width: 13px; height: 13px; color: var(--c-purple-text); }
.sg-hub .sg-badge--dist { background: var(--c-purple-soft); border-color: var(--c-purple-soft); color: var(--c-purple-text); }
/* A11y: Die Badges sind helle Chips innerhalb dunkler Karten-Kontexte — dort gilt wieder dunkles Purple. */
.sg-hub .sg-badge { --c-purple-text: var(--c-purple-ink, #a790c4); }

.sg-hub .sg-neu {
	position: absolute;
	top: 16px;
	left: 16px;
	font-family: var(--f-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-white);
	background: var(--c-purple-ink);
	padding: 6px 12px;
	border-radius: 100px;
	z-index: 3;
}
.sg-hub .sg-neu--inline {
	position: static;
	display: inline-block;
	color: var(--c-purple-text);
	background: var(--c-purple-soft);
	margin-bottom: 4px;
}

.sg-hub .sg-empty {
	text-align: center;
	padding: 64px 24px;
	font-family: var(--f-serif);
	font-style: italic;
	font-size: 17px;
	color: rgba(83, 81, 79, 0.85);
}

/* „Mehr laden" — Ghost-Pill wie die Marken-Buttons */
.sg-hub .sg-more { display: flex; justify-content: center; margin-top: clamp(28px, 3.5vw, 44px); }
.sg-hub .sg-morebtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid var(--c-dark);
	border-radius: 100px;
	padding: 16px 34px;
	font-family: var(--f-sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-dark);
	cursor: pointer;
	transition: border-color .2s, color .2s, background .2s;
}
.sg-hub .sg-morebtn:hover { border-color: var(--c-purple); color: var(--c-purple-text); }
.sg-hub .sg-morebtn[hidden] { display: none !important; }
.sg-hub .sg-more__n { font-weight: 400; letter-spacing: .12em; color: rgba(83, 81, 79, 0.85); }
.sg-hub .sg-morebtn:hover .sg-more__n { color: inherit; }

/* ===== AKTUELL BELIEBT (Meistgelesen) ===== */
.sg-hub .sg-rankgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
}
.sg-hub .sg-rank {
	background: var(--c-white);
	border: 1px solid var(--sg-line);
	border-radius: var(--radius);
	padding: clamp(26px, 2.6vw, 36px) clamp(22px, 2.2vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: clamp(220px, 22vw, 280px);
	transition: transform .3s ease, border-color .3s;
}
.sg-hub .sg-rank:hover { transform: translateY(-4px); border-color: var(--c-purple); }
.sg-hub .sg-rank__top { display: flex; align-items: baseline; justify-content: space-between; }
.sg-hub .sg-rank__num {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(44px, 4vw, 58px);
	line-height: .8;
	color: var(--c-purple-text);
}
.sg-hub .sg-rank__tag {
	font-family: var(--f-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--c-purple-text);
}
.sg-hub .sg-rank h3 {
	font-family: var(--f-sans);
	font-size: clamp(19px, 1.8vw, 24px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--c-dark);
	margin: 0;
	transition: color .2s;
}
.sg-hub .sg-rank a:hover h3 { color: var(--c-purple-text); }
.sg-hub .sg-rank__meta {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
	padding-top: 14px;
	border-top: 1px solid var(--sg-line);
	font-family: var(--f-sans);
	font-size: 12px;
	color: rgba(83, 81, 79, 0.85);
}
.sg-hub .sg-rank__meta .views { color: var(--c-dark); font-weight: 600; }
.sg-hub .sg-rank__meta .reco {
	font-family: var(--f-serif);
	font-style: italic;
	color: var(--c-purple-text);
}
.sg-hub .sg-rank__meta span { display: inline-flex; align-items: center; gap: 6px; }
.sg-hub .sg-rank__meta svg { width: 13px; height: 13px; opacity: .7; }

/* ===== FRISCH IM GUIDE ===== */
.sg-hub .sg-freshgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
}
.sg-hub .sg-fresh {
	display: grid;
	grid-template-columns: 116px 1fr;
	gap: 18px;
	align-items: center;
	background: var(--c-white);
	border: 1px solid var(--sg-line);
	border-radius: var(--radius);
	padding: 16px;
	transition: border-color .2s, transform .25s;
}
.sg-hub .sg-fresh:hover { border-color: var(--c-purple); transform: translateY(-2px); }
.sg-hub .sg-fresh__ph {
	width: 116px;
	height: 116px;
	border-radius: var(--radius);
	background-color: var(--c-cream);
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
	display: block;
}
.sg-hub .sg-fresh__ph--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c4bcae;
}
.sg-hub .sg-fresh__ph--empty svg { width: 26px; height: 26px; }
.sg-hub .sg-fresh__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sg-hub .sg-fresh__neu {
	align-self: flex-start;
	font-family: var(--f-sans);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-purple-text);
	background: var(--c-purple-soft);
	padding: 4px 10px;
	border-radius: 100px;
}
.sg-hub .sg-fresh__title {
	font-family: var(--f-sans);
	font-size: 16.5px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--c-dark);
}
.sg-hub .sg-fresh:hover .sg-fresh__title { color: var(--c-purple-text); }
.sg-hub .sg-fresh__date {
	font-family: var(--f-serif);
	font-style: italic;
	font-size: 12.5px;
	color: rgba(83, 81, 79, 0.85);
}

/* ===== AUTORIN (Eva von Eventhotels) — offener Editorial-Block ===== */
.sg-hub .sg-author {
	display: grid;
	grid-template-columns: clamp(200px, 24vw, 280px) 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.sg-hub .sg-author__photo {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--sg-line);
	background: var(--c-white);
}
.sg-hub .sg-author__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-hub .sg-author__name {
	font-family: var(--f-sans);
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--c-dark);
	margin: 0 0 6px;
}
.sg-hub .sg-author__name .it { font-family: var(--f-serif); font-style: italic; font-weight: 300; color: var(--c-purple-text); }
.sg-hub .sg-author__role {
	font-family: var(--f-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--c-purple-text);
	margin: 0 0 18px;
}
.sg-hub .sg-author__bio {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.6;
	color: var(--c-dark);
	opacity: .85;
	max-width: 58ch;
	margin: 0 0 22px;
}
.sg-hub .sg-author__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-hub .sg-author__pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--f-sans);
	font-size: 12px;
	color: var(--c-dark);
	background: var(--c-white);
	border: 1px solid var(--sg-line);
	border-radius: 100px;
	padding: 8px 15px;
}

/* Sub-Head „Frisch im Guide" innerhalb der Autorin-Sektion */
.sg-hub .sg-subhead {
	margin: clamp(40px, 5vw, 64px) 0 clamp(20px, 2.5vw, 30px);
	padding-top: clamp(28px, 3.5vw, 44px);
	border-top: 1px solid var(--sg-line);
}

/* ===== RUBRIKEN-KARTEN ===== */
.sg-hub .sg-minigrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
}
.sg-hub .sg-mini {
	background: var(--c-white);
	border: 1px solid var(--sg-line);
	border-radius: var(--radius);
	padding: clamp(30px, 3vw, 44px) clamp(24px, 2.4vw, 34px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform .3s ease, border-color .3s;
}
.sg-hub .sg-mini:hover { transform: translateY(-4px); border-color: var(--c-purple); }
.sg-hub .sg-mini__cnum {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 300;
	font-size: 15.5px;
	color: var(--c-purple-text);
}
.sg-hub .sg-mini h3 {
	font-family: var(--f-sans);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--c-dark);
	margin: 0;
}
.sg-hub .sg-mini__go {
	margin-top: 6px;
	font-family: var(--f-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-dark);
}
.sg-hub .sg-mini:hover .sg-mini__go { color: var(--c-purple-text); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
	.sg-hub .sg-rankgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
	.sg-hub .sg-minigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sg-hub .sg-freshgrid { grid-template-columns: 1fr; }
	.sg-hub .sg-rank { min-height: 0; }
}
@media (max-width: 880px) {
	.sg-hub .sg-author { grid-template-columns: 1fr; gap: 28px; }
	.sg-hub .sg-author__photo { width: clamp(160px, 40vw, 220px); }
}
@media (max-width: 680px) {
	.sg-hub .sg-rankgrid { grid-template-columns: 1fr; }
	.sg-hub .sg-toolbar__foot { flex-direction: column; align-items: flex-start; }
	.sg-hub .sg-sort { font-size: 12px; }
}
@media (max-width: 420px) {
	.sg-hub .sg-minigrid { grid-template-columns: 1fr; }
	.sg-hub .sg-chip { font-size: 12.5px; padding: 9px 15px; }
	.sg-hub .sg-fresh { grid-template-columns: 92px 1fr; }
	.sg-hub .sg-fresh__ph { width: 92px; height: 92px; }
}

/* Lange, unbrechbare Wörter (z. B. „Sehenswürdigkeiten") dürfen die
   minmax(0,1fr)-Spalten nicht sprengen → sanft umbrechen. */
.sg-hub .sg-mini h3,
.sg-hub .sg-rank h3,
.sg-hub .sg-fresh__title { overflow-wrap: break-word; }

/* Foto-lose Karten (.ed-cross-card--text): generische Geometrie aus
   zimmer-detail.css (min-height, große Paddings, arrow align-self:end)
   zurücksetzen, damit sie im selben Grid gleich hoch/ausgerichtet sind. */
.sg-hub .sg-card--text .body {
	min-height: 0;
	padding: clamp(20px, 2.4vw, 32px);
}
.sg-hub .sg-card--text .body .arrow { align-self: center; }

/* Fokus-Sichtbarkeit (Tastatur) */
.sg-hub .sg-chip:focus-visible,
.sg-hub .sg-sortopt:focus-visible,
.sg-hub .sg-morebtn:focus-visible,
.sg-hub .sg-search__input:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
/* Karten-Links sind display:contents (kein eigener Kasten) → Fokusring auf
   die Karte selbst legen (nur bei Tastatur, via :has(:focus-visible)). */
.sg-hub .sg-card:has(a:focus-visible) { outline: 2px solid var(--c-purple); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.sg-hub * { transition: none !important; }
}

/* ============================================================
   AUTOREN-ARCHIV (/author/eva-von-eventhotels/ · templates/author.html)
   Schlichte editoriale Beitragsliste unter der Autorin-Karte.
   ============================================================ */
.sg-authorlist { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); }
.sg-authorlist .sg-subhead { margin-bottom: clamp(20px, 3vw, 32px); }
.sg-authorlist .wp-block-post-title {
	font-family: var(--f-serif);
	font-weight: 500;
	font-size: clamp(21px, 2.2vw, 28px);
	line-height: 1.25;
	margin: 0 0 6px;
	overflow-wrap: break-word;
}
.sg-authorlist .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.sg-authorlist .wp-block-post-title a:hover { color: var(--c-purple-text); }
.sg-authorlist .wp-block-post-excerpt {
	font-size: 15px;
	line-height: 1.65;
	opacity: 0.85;
	max-width: 68ch;
}
.sg-authorlist .wp-block-post-excerpt__more-link { display: none; }
.sg-authorlist li,
.sg-authorlist .wp-block-post {
	list-style: none;
	padding: clamp(18px, 2.4vw, 28px) 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.sg-authorlist .wp-block-post:first-child { padding-top: 0; }
.sg-authorlist .wp-block-query { margin: 0; }
.sg-authorlist .wp-block-query-pagination {
	margin-top: clamp(24px, 3vw, 36px);
	font-family: var(--f-sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: flex;
	gap: 14px;
	align-items: center;
}
.sg-authorlist .wp-block-query-pagination a { color: var(--c-purple-text); text-decoration: none; }
.sg-authorlist .wp-block-query-pagination a:hover { text-decoration: underline; }
.sg-authorlist__back { margin-top: clamp(28px, 4vw, 44px); }

/* Haupt-Überschrift des Autoren-Archivs ist ein H1 (SEO) — exakt im
   Look der .ed-cross-head-h2 aus zimmer-detail.css. */
.ed-cross-head h1 {
	font-family: var(--f-sans);
	font-size: clamp(36px, 5vw, 72px);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 14px 0 0;
	overflow-wrap: break-word;
	word-break: normal;
}
.ed-cross-head h1 .it {
	font-family: var(--f-serif);
	font-style: italic;
	color: var(--c-purple-text);
	font-weight: 300;
}

/* Agnesviertel-Guide: Autorin + „Frisch im Guide“ übernehmen den dunklen
   Look der .ed-specs (faq.css), damit Hell/Dunkel im Wechsel bleibt. Das
   Autoren-Archiv hat kein .sg-freshgrid und bleibt hell. !important nur,
   weil das Layout den Creme-Hintergrund als Inline-Style setzt. */
.ed-cross:has(.sg-author):has(.sg-freshgrid) {
	background: var(--c-dark) !important;
	color: var(--c-white);
	position: relative;
	overflow: hidden;
}
.ed-cross:has(.sg-author):has(.sg-freshgrid)::before {
	content: '';
	position: absolute;
	top: -200px; right: -200px;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(167,144,196,0.15) 0%, transparent 65%);
	pointer-events: none;
}
.ed-cross:has(.sg-author):has(.sg-freshgrid) > .container { position: relative; z-index: 2; }
.ed-cross:has(.sg-author):has(.sg-freshgrid) .ed-cross-head .eyebrow,
.ed-cross:has(.sg-author):has(.sg-freshgrid) .sg-subhead .eyebrow { color: rgba(255, 255, 255, 0.7); }
.ed-cross:has(.sg-author):has(.sg-freshgrid) .ed-cross-head h2,
.ed-cross:has(.sg-author):has(.sg-freshgrid) .sg-author__name { color: var(--c-white); }
.ed-cross:has(.sg-author):has(.sg-freshgrid) .sg-author__bio { color: rgba(255, 255, 255, 0.7); opacity: 1; }
.ed-cross:has(.sg-author):has(.sg-freshgrid) .sg-author__photo { border-color: rgba(255, 255, 255, 0.22); }
.ed-cross:has(.sg-author):has(.sg-freshgrid) .sg-author__pill {
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.22);
}
.ed-cross:has(.sg-author):has(.sg-freshgrid) .sg-subhead { border-top-color: rgba(255, 255, 255, 0.22); }