/* ==========================================================================
   FRONT-PAGE — alle Klassen ausschließlich auf front-page.html genutzt
   (Ausnahme: .mygc-az-buttons / .mygc-az-btn, zusätzlich auf den
   german-cities-Buchstabenseiten — s. Enqueue-Bedingung in functions.php).

   Fund (Juli 2026): Die Shorthands "margin: 0 ..." an .mygc-states und
   .mygc-topic-cards überschrieben WordPress' blockGap-Regel
   (:where(.is-layout-constrained) > * + * — Spezifität 0 wegen :where())
   und nullten damit auch den oberen Abstand zum vorangehenden <p>.
   Gelöst: kein margin-Shorthand mehr; margin-block-start explizit mit
   Spacing-Preset 5 (= blockGap 1.5rem) — deterministisch, unabhängig von
   den generierten Layout-Styles. Gilt für alle wp:html-Listen der Seite.
   ========================================================================== */

/* Hero */
.mygc-hero {
	padding-top: var(--wp--preset--spacing--7);
	padding-bottom: var(--wp--preset--spacing--9);
}

/* --------------------------------------------------------------------------
   Stat-Boxen (Fund Juli 2026): von wp:columns auf <ul> umgestellt — jetzt
   verlinkte Kacheln mit Hover (analog .mygc-topic-card). Die frühere Lücke
   zwischen Zahl und Text kam vom Standard-blockGap (1.5rem) zwischen den
   beiden Paragraphen — jetzt flex-gap Spacing-Preset 1 (0.25rem).
   -------------------------------------------------------------------------- */
.mygc-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--3);
	list-style: none;
	margin-block-start: var(--wp--preset--spacing--5);
	margin-block-end: 0;
	margin-inline: 0;
	padding: 0;
}
.mygc-stats-row li { margin: 0; }

.mygc-stat-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	background: var(--wp--preset--color--taoi-box);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2);
	text-align: center;
	text-decoration: none;
	transition: background .15s ease;
}
.mygc-stat-box:hover { background: #e4ecf3; }

.mygc-stat-number {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.2;
	color: #000; /* überschreibt die globale Link-Farbe innerhalb des <a> */
}

.mygc-stat-label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--politics-gray);
}

/* Wiederkehrender Sektions-Trenner: Latest Guides + A-Z-Index */
.mygc-section-divider {
	border-top: 1px solid var(--wp--preset--color--politics-gray);
	padding-block: var(--wp--preset--spacing--9);
}

/* --------------------------------------------------------------------------
   Latest Guides (Fund Juli 2026): Grid-Klasse für wp:post-template — das
   layout:{"type":"grid"} saß vormals am wp:query (kein Layout-Container,
   wurde nie gerendert → alle Posts untereinander). 230px-Mindestbreite
   ergibt bei 800px Content-Breite 3 Cards pro Reihe.
   -------------------------------------------------------------------------- */
.mygc-guide-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
	gap: var(--wp--preset--spacing--5);
	list-style: none;
	margin-block-start: var(--wp--preset--spacing--5);
	margin-block-end: 0;
	margin-inline: 0;
	padding: 0;
}
.mygc-guide-grid > li { margin: 0; }

/* Guide-Card (Latest Guides, 8× pro Seite) */
/* Fund (Juli 2026): position:relative ergänzt — Bezugsrahmen für den
   "Stretched Link" am Titel weiter unten (macht die ganze Card hoverbar/
   klickbar, nicht nur den Titel-Text). */
.mygc-guide-card {
	position: relative;
	border: 1px solid #e3e5e7;
	border-radius: 10px;
	padding-bottom: var(--wp--preset--spacing--3);
	box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
	transition: box-shadow 0.15s ease;
}

.mygc-guide-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.08);
}

.mygc-guide-card-image img {
	border-radius: 9px 9px 0 0;
	display: block;
}

.mygc-guide-card-body {
	padding-block-start: var(--wp--preset--spacing--3);
	padding-inline: var(--wp--preset--spacing--3);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1); /* vormals deklariert, nie gerendert (Fund) */
}

/* Fund (Juli 2026): Vereinzelte (meist kurze) Post-Titel erschienen
   zentriert. Ursache war NICHT text-align, sondern WordPress Cores
   eigene Constrained-Layout-Regel (global-styles-inline-css):
     .is-layout-constrained > :where(...) {
       max-width: var(--wp--style--global--content-size);
       margin-left: auto !important;
       margin-right: auto !important;
     }
   .mygc-guide-card-body ist selbst is-layout-constrained → der Titel
   (direktes Kind) bekommt diese Regel. In Flexbox überstimmen beidseitig
   auto gesetzte Cross-Axis-Margins das Default-Stretching: das Element
   schrumpft auf Inhaltsbreite, der Rest wird links/rechts verteilt — bei
   kurzen Titeln sichtbar, bei langen (die den Platz ohnehin ausfüllen)
   nicht. :where() hat Spezifität 0, nur die !important-Margins ziehen —
   daher hier ebenfalls !important nötig (einer der wenigen legitimen
   Einsatzfälle: Kontern einer !important-Core-Regel). */
.mygc-guide-card-body > .wp-block-post-title {
	width: 100%;
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Fund (Juli 2026): "Stretched Link" — der Titel-Link bekommt ein
   unsichtbares ::after, das dank position:relative auf .mygc-guide-card
   (oben) den GESAMTEN Kartenrahmen überdeckt, nicht nur seinen eigenen
   Text. Hover/Klick wirken dadurch überall auf der Card, exakt wie der
   bereits vorhandene box-shadow-Hover. Da :hover jetzt großflächig
   feuert, greift text-decoration:underline entsprechend mit.
   Nebeneffekt (Standardverhalten dieses Patterns): Der Excerpt-Text
   lässt sich per Klick nicht mehr markieren/kopieren, da ein Klick dort
   jetzt dem Link folgt statt eine Textauswahl zu setzen. */
.mygc-guide-card-body .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.mygc-guide-card-body .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Testimonial */
/* Fund 1 (Juli 2026): Nur padding-block war ursprünglich gesetzt. Bei
   Fensterbreiten < 640px griff die contentSize-Begrenzung des Zitats
   nicht mehr (Box selbst war dann schon schmaler) — Text klebte an den
   Rändern. Gelöst über padding (alle vier Seiten) statt padding-block.
   Fund 2 (Juli 2026): Testimonial ist jetzt ein verschachteltes <div>
   innerhalb der "Visitor Voices"-Section (statt eigener <section> mit
   eigenem .mygc-section-divider-Padding) — vermeidet doppeltes Padding-
   Stacking (6rem Sektions-Padding + 2rem Box-Padding = 8rem Leerraum
   vorher). margin-top explizit statt blockGap: hat sich in diesem Projekt
   wiederholt als unzuverlässig gerendert (s. Fund-Kommentare zu
   .mygc-states/.mygc-topic-cards) — hier deterministisch stattdessen. */
.mygc-testimonial {
	background: var(--wp--preset--color--taoi-box);
	padding: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--5);
}

/* Fund (Juli 2026): Core-Default für .wp-block-quote (border-left: .25em
   solid; padding-left: 1em) blieb bisher aktiv — sichtbarer Strich links
   am zentrierten Testimonial-Zitat. Hier gezielt entfernt. */
.mgc-t .wp-block-quote {
	text-align: center;
	font-size: 1.375rem;
	border-left: 0;
	padding-left: 0;
	margin-left: 0;
}
.mgc-t .wp-block-quote cite {
	font-style: normal;
	font-weight: 600;
	font-size: 1rem;
}

/* Fund (Juli 2026): MGC Testimonials v1.3.0 rendert ALLE Zitate ins
   Markup (SEO-sichtbar, Seite bleibt voll cachebar); sichtbar ist per
   Default nur das ERSTE — das ist zugleich der No-JS-Fallback. Das
   Mini-Inline-Script des Shortcodes blendet stattdessen ein zufälliges
   ein (Inline-Style schlägt diese Regel) → Rotation pro Seitenaufruf im
   Browser, unabhängig von LiteSpeed/CDN. Ersatz für den verworfenen
   ESI-Ansatz (ESI-Reassembly scheiterte im Hostinger-Stack, siehe
   Plugin-Kommentar). Sibling-Kombinator statt :not(:first-child):
   bleibt korrekt, falls der Wrapper je ein anderes Element VOR den
   Zitaten erhält. */
.mgc-t .wp-block-quote + .wp-block-quote { display: none; }
/* ==========================================================================
   BROWSE BY STATE (interaktive Karte)
   Vormals inline <style> innerhalb des wp:html-Blocks in
   browse-by-state-map.php — jetzt hier, conditional mit front-page.css.
   ========================================================================== */
.mygc-states {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin-block-start: var(--wp--preset--spacing--5); /* Fund: vormals per Shorthand genullt */
	margin-block-end: 1.75rem;
	margin-inline: 0;
	padding: 0;
}
.mygc-states li { margin: 0; }

.mygc-state-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--politics-gray);
	color: var(--wp--preset--color--politics-gray);
	background: var(--wp--preset--color--white);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Fund (Juli 2026): a:visited (style.css, Spezifität 0,1,1) schlägt eine
   einzelne Klasse wie .mygc-state-pill (0,1,0) — Link erschien nach Besuch
   blau statt politics-gray. Fix mit :visited kombiniert (0,2,0), VOR
   .is-active platziert: bei gleicher Spezifität gewinnt die Regel, die
   später im Quelltext steht — .is-active soll immer Vorrang behalten,
   auch bei bereits besuchten Links. */
.mygc-state-pill:visited {
	color: var(--wp--preset--color--politics-gray);
}

.mygc-state-pill.is-active {
	background: var(--wp--preset--color--country-teal);
	border-color: var(--wp--preset--color--country-teal);
	color: var(--wp--preset--color--white);
}

.mygc-map-wrap { position: relative; max-width: 640px; margin: 0 auto; aspect-ratio: 300 / 402; }
.mygc-map-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Leitlinien/Punkte sind rein dekorativ — dürfen die Karte darunter nie blockieren */
.mygc-map-overlay { pointer-events: none; }

.mygc-de-state { fill: var(--wp--preset--color--taoi-box); stroke: var(--wp--preset--color--white); stroke-width: 1; stroke-linejoin: round; transition: fill .15s ease; cursor: pointer; }
.mygc-de-state.is-active { fill: var(--wp--preset--color--country-teal); }

.mygc-map-leader { stroke: #c7cacd; stroke-width: 1; }
.mygc-map-dot { fill: #9a9d9f; }
.mygc-map-labels { position: absolute; inset: 0; pointer-events: none; }
.mygc-map-label { pointer-events: auto; }

.mygc-map-label {
	position: absolute;
	transform: translate(-50%, -50%);
	display: inline-flex;
	padding: 1px 5px;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--politics-gray);
	color: var(--wp--preset--color--politics-gray);
	background: var(--wp--preset--color--white);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Fund (Juli 2026): identisches a:visited-Problem wie bei .mygc-state-pill
   oben — gleiche Lösung, gleiche Platzierung vor .is-active. */
.mygc-map-label:visited {
	color: var(--wp--preset--color--politics-gray);
}

.mygc-map-label.is-active {
	background: var(--wp--preset--color--country-teal);
	border-color: var(--wp--preset--color--country-teal);
	color: var(--wp--preset--color--white);
}
.mygc-map-label .mygc-abbr { display: none; }

@media (max-width: 600px) {
	.mygc-map-label { padding: 1px 4px; }
	.mygc-map-label .mygc-full { display: none; }
	.mygc-map-label .mygc-abbr { display: inline; }
}

/* ==========================================================================
   EXPLORE BY TOPIC (.mygc-topic-cards)
   7 Karten, gleiche Sektionsfarben wie header.html/footer.html.
   Auto-fit-Grid analog .mygc-footer-row: 4 → 3 → 2 → 1, max. 4 pro Reihe.
   ========================================================================== */
.mygc-topic-cards {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(max(160px, calc((100% - 3 * var(--wp--preset--spacing--4)) / 4)), 1fr)
	);
	gap: var(--wp--preset--spacing--4);
	list-style: none;
	margin-block-start: var(--wp--preset--spacing--5); /* Fund: vormals per Shorthand genullt */
	margin-block-end: 0;
	margin-inline: 0;
	padding: 0;
}
/* Fund (Juli 2026): Karte war vorher ein <a> um den gesamten Inhalt.
   Links im Beschreibungstext ergaben damit <a>-in-<a> (verboten) — der
   Parser schloss das äußere <a> vorzeitig, Text fiel aus der Karte.
   Neu: Karte = <li>, Haupt-Link liegt auf der Headline und wird per
   ::after als "Stretched Link" über die ganze Karte gelegt.
   position: relative ist der Anker für dieses Overlay. */
.mygc-topic-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
	padding: var(--wp--preset--spacing--3);
	border-top: 4px solid;
	border-radius: 4px;
	background: var(--wp--preset--color--taoi-box);
	transition: background .15s ease;
}
.mygc-topic-card:hover { background: #e4ecf3; }

/* Karten-Bild (Fund Juli 2026): füllt die Lücke zwischen farbigem
   border-top und Headline. Negative Margins = randlos bis an die
   Kartenkanten (heben das Karten-Padding auf); aspect-ratio 3/2 +
   object-fit: cover → jedes gelieferte Bild wird formatfüllend
   beschnitten, kein CLS. max-width: none überschreibt das globale
   img { max-width: 100% }, da width hier bewusst > 100% ist.
   Fund 2 (Juli 2026): height fehlte explizit. Das HTML-Attribut
   height="…" wirkt wie eine definite Presentational-Hint-Höhe — sobald
   Höhe NICHT auto ist, hat aspect-ratio nichts mehr zu berechnen (bleibt
   im Computed-Panel sichtbar, wirkt aber nicht). Bei 110×73-Platzhaltern
   kaum auffällig (73px statt korrekter ~125px), bei größeren Bildern
   (z.B. 720×480) massiv sichtbar: Bild lief in voller Attribut-Höhe durch,
   nur seitlich beschnitten. height:auto stellt die auto-Dimension wieder
   her, die aspect-ratio zum Rechnen braucht — Autoren-CSS schlägt dabei
   das Attribut unabhängig von Spezifität. */
.mygc-topic-card-img {
	width: calc(100% + 2 * var(--wp--preset--spacing--3));
	max-width: none;
	height: auto;
	margin: calc(-1 * var(--wp--preset--spacing--3)) calc(-1 * var(--wp--preset--spacing--3)) 0;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.mygc-topic-card-title {
	font-size: var(--wp--preset--font-size--base);
	margin: 0 0 -0.1em; /* Fund (Juli 2026): h3-Basisregel (1.5em 0 0.5em, style.css)
	              addierte sich zum flex-gap — Flex kollabiert Margins nicht.
	              Genullt (analog .mygc-sb-title); Abstand img/h3/desc steuert
	              jetzt allein das gap auf .mygc-topic-card. */
}

/* Haupt-Link der Karte: sitzt semantisch nur auf der Headline, wird aber
   per ::after (inset: 0 relativ zu .mygc-topic-card) über die gesamte
   Karte gestreckt — die ganze Kachel bleibt klickbar wie zuvor.
   color #000 überschreibt die globale Link-Farbe (bewusste Abweichung,
   wie vorher am umschließenden <a>). */
.mygc-topic-card-title a {
	color: #000;
	text-decoration: none;
}
.mygc-topic-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4px; /* deckungsgleich mit der Karte, für den Fokusring */
}
/* Sichtbarer Fokusring auf Kartengröße für Tastatur-Nutzer — das Overlay
   selbst ist die fokussierbare Fläche des gestreckten Links. */
.mygc-topic-card-title a:focus-visible {
	outline: none;
}
.mygc-topic-card-title a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--business-blue);
	outline-offset: 2px;
}

.mygc-topic-card-desc {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--politics-gray);
}

/* Links IM Beschreibungstext: liegen per z-index über dem gestreckten
   Karten-Link-Overlay und bleiben dadurch eigenständig klickbar.
   Optik: globale Link-Styles (Farbe/Unterstreichung) greifen normal. */
.mygc-topic-card-desc a {
	position: relative;
	z-index: 1;
}

.mygc-topic-card--country  { border-top-color: var(--wp--preset--color--country-teal); }
.mygc-topic-card--culture  { border-top-color: var(--wp--preset--color--culture-red); }
.mygc-topic-card--vacation { border-top-color: var(--wp--preset--color--vacation-green); }
.mygc-topic-card--business { border-top-color: var(--wp--preset--color--business-blue); }
.mygc-topic-card--politics { border-top-color: var(--wp--preset--color--politics-gray); }
.mygc-topic-card--info     { border-top-color: var(--wp--preset--color--info-purple); }
.mygc-topic-card--booking  { border-top-color: var(--wp--preset--color--booking-orange); }
.mygc-topic-card--blog     { border-top-color: var(--wp--preset--color--blog-gold); }