/*
Theme Name: Orbit_JR
Theme URI: https://janreinhardt.com
Author: Jan Reinhardt
Description: Blog-Theme mit ungewoehnlicher Startseite: drei Beitraege sitzen als Poster auf einer sichtbaren Kreisbahn, der Blog-Titel gross oben links daneben. Dunkler Kino-Canvas, off-white Typografie, Metadaten in Monospace. Ruhige Listen fuer Archiv und Suche. Full Site Editing.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.9.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orbit-jr
Tags: blog, entertainment, one-column, block-patterns, full-site-editing, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready
*/

/* Das meiste Styling kommt aus theme.json. Hier nur, was sich dort nicht ausdruecken laesst. */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* =========================================================
   ORBIT – Startseite (Mobile-first: gestapelt)
   ========================================================= */

.orbit-stage {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 1rem 1.5rem 2rem;
}

/* Kreisbahn nur auf dem Desktop sichtbar */
.orbit-ring { display: none; }

.orbit-title { margin: 1rem 0 3rem; }

.orbit-title .wp-block-site-title,
.orbit-blogtitle {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.95;
	font-size: clamp(2.4rem, 9vw, 3.2rem);
}
.orbit-title .wp-block-site-title a { text-decoration: none; }
.orbit-subtitle { font-size: clamp(1.05rem, 4vw, 1.4rem); }
/* Untertitel ist verlinkt, soll aber wie der Titel wirken: kein Link-Look */
.orbit-subtitle a { color: inherit; text-decoration: none; }

/* Beitraege gestapelt: Poster links, Meta daneben (oben buendig) */
.orbit-query .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}
.orbit-query .wp-block-post-template > li { margin: 0; }

.orbit-item {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.orbit-poster {
	flex: 0 0 110px;
	width: 110px;
	margin: 0;
}
.orbit-poster img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 3px;
	display: block;
}

.orbit-meta { margin: 0; }
.orbit-label { margin: 0 0 0.4rem; }
.orbit-label a { text-decoration: none; }
.orbit-label a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.orbit-date { margin: 0; }

.orbit-pager {
	margin-top: 2.5rem;
	justify-content: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.95rem;
	gap: 0.2rem;
}
.orbit-pager .page-numbers {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	display: inline-block;
	min-width: 1.9rem;
	padding: 0.35rem 0.35rem;
	text-align: center;
	border-radius: 4px;
}
.orbit-pager .page-numbers.current { color: var(--wp--preset--color--contrast); }
@media (hover: hover) {
	.orbit-pager a.page-numbers:hover { background: var(--wp--preset--color--surface); }
}

/* ---- Desktop: echte Kreisbahn ---- */
@media (min-width: 781px) {
	/* Oberer Freiraum als padding am main (NICHT als margin an der Buehne):
	   margin-top des ersten Kindes kollabiert durch den main hindurch und wird
	   von iOS-Browsern am Viewport-Rand weggeclamped -> wirkte nie. padding
	   kollabiert nie und schiebt die Bahn zuverlaessig nach unten. svh rechnet
	   die Safari-Tableiste mit ein. */
	.orbit-main { padding-top: 6svh; }
	.orbit-stage {
		aspect-ratio: 1200 / 600;
		/* Hoehe an die Viewport-Hoehe koppeln, damit der Footer ohne Scrollen
		   mit reinpasst. aspect-ratio bleibt -> Kreis bleibt rund. */
		width: min(100%, 152svh);
		margin: 0 auto;
		padding: 0;
	}

	.orbit-ring {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
	}
	.orbit-ring svg { width: 100%; height: 100%; overflow: visible; }

	/* Blog-Titel auf 10:45-Position (oben links, leicht rechts) */
	.orbit-title {
		position: absolute;
		left: 8%;
		top: 17%;
		width: 34%;
		margin: 0;
		z-index: 2;
	}
	.orbit-title .wp-block-site-title,
	.orbit-blogtitle { font-size: clamp(2.3rem, 4vw, 3.6rem); }
	.orbit-subtitle { font-size: clamp(1.1rem, 1.7vw, 1.4rem); }

	/* Drei Posts auf dem Bogen 12:30–8:30, symmetrisch zur 10:30–4:30-Achse
	   (1:00 / 4:30 / 8:00). Werte aus Python: Mittelpunkt 600/300, r=215. */
	.orbit-query .wp-block-post-template { display: block; position: static; }
	.orbit-query .wp-block-post-template > li {
		position: absolute;
		width: 16%;
		transform: translate(-50%, -50%);
		z-index: 3;
	}
	.orbit-query .wp-block-post-template > li:nth-child(1) { left: 58.96%; top: 18.97%; }
	.orbit-query .wp-block-post-template > li:nth-child(2) { left: 62.67%; top: 75.34%; }
	.orbit-query .wp-block-post-template > li:nth-child(3) { left: 34.48%; top: 67.92%; }

	/* Post 3 (links auf der Bahn): Beschriftung LINKS vom Bild, rechtsbuendig */
	.orbit-query .wp-block-post-template > li:nth-child(3) .orbit-meta {
		left: auto;
		right: 110%;
		text-align: right;
	}

	.orbit-item { display: block; position: relative; }
	.orbit-poster { flex: none; width: 100%; }
	.orbit-poster img { box-shadow: 0 12px 40px rgba(0,0,0,0.5); }

	/* Titel + Datum AUSSEN daneben, oben buendig zur Bildoberkante */
	.orbit-meta {
		position: absolute;
		left: 110%;
		top: 0;
		width: max-content;
		max-width: 230px;
	}

	/* Pagination unten rechts */
	.orbit-pager {
		position: absolute;
		right: 3%;
		bottom: 4%;
		margin: 0;
		z-index: 2;
	}
}

/* Hochformat (iPad Portrait faellt auch in den Desktop-Breakpoint):
   Buehne ist flach, darunter ist Platz -> Pagination unter die Buehne.
   Der Platz fuer den Pager kommt als padding-bottom am main (kein
   margin-collapse), damit der Footer GARANTIERT unter dem Pager bleibt.
   static wuerde den Pager an den ANFANG der Buehne fliessen lassen (alle
   anderen Buehnen-Kinder sind absolut), darum absolut an die Unterkante. */
@media (min-width: 781px) and (orientation: portrait) {
	.orbit-main { padding-bottom: 4rem; }
	.orbit-pager {
		position: absolute;
		top: 100%;
		left: 0;
		right: auto;
		bottom: auto;
		width: 100%;
		margin: 1.25rem 0 0;
		justify-content: center;
	}
}

/* dezenter Hover auf den Postern */
.orbit-poster img { transition: opacity 0.3s ease, transform 0.35s ease; }
.orbit-item:hover .orbit-poster img { opacity: 0.9; }
@media (min-width: 781px) {
	.orbit-item:hover .orbit-poster img { transform: scale(1.04); opacity: 1; }
}


/* =========================================================
   Filmliste – Fallback fuer Archiv / Suche / Index
   ========================================================= */

.film-list .wp-block-post {
	padding: 2.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.film-list .wp-block-post:first-child { padding-top: 0; }
.film-row { align-items: flex-start; }
.film-row .poster-thumb {
	flex: 0 0 128px;
	width: 128px;
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
}
.film-row .poster-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease;
}
.film-row:hover .poster-thumb img { opacity: 0.85; }
.film-row .entry-body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) {
	.film-row .poster-thumb { flex-basis: 96px; width: 96px; }
	.film-list .wp-block-post { padding: 1.75rem 0; }
}

/* =========================================================
   Sonstiges
   ========================================================= */

.rating-stars {
	font-feature-settings: "tnum";
	letter-spacing: 0.15em;
}

/* Footer-Zeile (Copyright/Datenschutz + Social): Mono, gedimmt, dezente Links */
.orbit-colophon {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.orbit-colophon a { color: inherit; text-decoration: none; }
@media (hover: hover) {
	.orbit-colophon a:hover { color: var(--wp--preset--color--contrast); }
}

/* Social als monochrome Icons, inline in der Footer-Zeile, so gross wie der Text */
.orbit-social {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	vertical-align: middle;
	margin-left: 0.15em;
}
.orbit-social a {
	display: inline-flex;
	color: inherit;
	line-height: 0;
}
.orbit-social svg {
	width: 1.2em;
	height: 1.2em;
	display: block;
}
@media (hover: hover) {
	.orbit-social a:hover { color: var(--wp--preset--color--contrast); }
}

:where(a:focus-visible, button:focus-visible, .wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.orbit-poster img,
	.film-row .poster-thumb img { transition: none; }
	.orbit-item:hover .orbit-poster img { transform: none; }
}