/*
Theme Name: tBosseck Portfolio
Author: Tobias Bosseck
Description: Schlankes Portfolio-Theme für Filmprojekte. Version 0.4: Metadaten im gemeinsamen Raster, Bilderstreifen mit 1 rem Lücken, Lightbox, Hover-Vorschau mit einstellbarer Abdunklung, Cookie-Hinweis.
Version: 0.4.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: tbosseck
*/

/* ------------------------------------------------------------------
   Grundwerte
   Farbschema folgt automatisch System/Browser:
   schwarzer Text auf Weiß, im Dunkelmodus weißer Text auf Schwarz.
   Die Schrift N27 wird von inc/fonts.php eingebunden, sobald Dateien gefunden werden.
------------------------------------------------------------------- */
:root {
	color-scheme: light dark;
	--bg: #fff;
	--fg: #000;
	--accent: #bf000a; /* Rot für Links im Fließtext und "tobias" beim Überfahren */
	--gutter: 1.5rem;  /* Abstand nach außen (Header, Footer, Bilder, Seitentitel) */
	--inset: 4rem;     /* zusätzlicher Abstand für Fließtexte und Projekttitel */
	--gap: 3rem;       /* Abstand zwischen Bildern und Zeilen (Startseite) */
	--strip-gap: 1rem; /* Abstand zwischen den Bildern im Bilderstreifen der Projektseite */
	--header-h: 4.5rem;
	--font: "N27", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #000;
		--fg: #fff;
	}
}

@media (max-width: 48rem) {
	:root {
		--inset: 0rem; /* mobil kein zusätzlicher Einzug: überall derselbe Rand */
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.5;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: var(--gutter);
	top: -6rem;
	z-index: 100;
	padding: 0.5rem 1rem;
	background: var(--fg);
	color: var(--bg);
}

.skip-link:focus {
	top: var(--gutter);
}

.site-main {
	flex: 1 0 auto;
}

/* ------------------------------------------------------------------
   Header
   Startseite und alle Textseiten: Header scrollt mit.
   Projektseite: Header bleibt oben stehen.
------------------------------------------------------------------- */
.site-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: var(--header-h);
	padding: 0 var(--gutter);
	background: var(--bg);
}

.tb-project .site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 50;
}

.tb-project .site-main {
	padding-top: var(--header-h);
}

.header-start {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	min-width: 0;
}

/* ------------------------------------------------------------------
   Logo
   Im Quelltext steht "Tobias Bosseck" (unsichtbarer Text), sichtbar ist die Animation.
   Startseite: "tBosseck", Hover "tobias Bosseck" ("tobias" wird beim Überfahren rot)
   Projektseite und Textseiten: "tB", Hover "tBosseck"
   Contact: "tobias Bosseck" einfarbig, Hover "tBosseck"
------------------------------------------------------------------- */
.logo {
	position: relative;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.logo--sub,
.logo--contact {
	display: inline-block;
}

/* Sichtbare Logo-Animation: reine Darstellung, nicht markierbar (kopiert wird der unsichtbare Text "Tobias Bosseck") */
.logo__vis {
	user-select: none;
	-webkit-user-select: none;
}

/* Ausfahrende Buchstaben: grid-template-columns von 0fr auf 1fr */
.ext {
	display: inline-grid;
	grid-template-columns: 0fr;
	vertical-align: bottom;
	transition: grid-template-columns 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ext > span {
	min-width: 0;
	overflow: hidden;
	white-space: pre;
}

.logo--home .ext--b,
.logo--contact .ext {
	grid-template-columns: 1fr;
}

.logo__first {
	transition: color 0.3s ease;
}

a.logo__first:hover,
a.logo__first:focus-visible {
	color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
	/* Startseite: "tobias" fährt aus (auch kurz, wenn man wieder ganz nach oben scrollt) */
	.logo--home:hover .ext--a,
	.logo--home:focus-within .ext--a,
	.logo--home.is-peek .ext--a {
		grid-template-columns: 1fr;
	}

	/* Projektseite und Textseiten: "osseck" fährt aus */
	.logo--sub:hover .ext--b,
	.logo--sub:focus-visible .ext--b,
	.logo--sub.is-peek .ext--b {
		grid-template-columns: 1fr;
	}

	/* Contact: "obias " fährt ein */
	.logo--contact:hover .ext--a,
	.logo--contact:focus-visible .ext--a {
		grid-template-columns: 0fr;
	}
}

/* "PORTFOLIO / Projekttitel": zentriert an der 1/3-Linie, nahe am Logo; rutscht bei der Logo-Animation nicht */
.crumb {
	position: absolute;
	left: 33.333%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: max(6rem, calc((33.333vw - 11rem) * 2));
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.crumb a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------
   Startseite: zwei Bilder pro Zeile, gleiche Höhe pro Zeile.
   Die Breite jedes Bildes richtet sich nach seinem Seitenverhältnis (--r),
   dadurch sind Ober- und Unterkante bündig. Der Titel hängt im Abstand
   zwischen den Zeilen und vergrößert ihn nicht.
------------------------------------------------------------------- */
.grid {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	padding: 0 var(--gutter) var(--gap);
}

.row {
	display: flex;
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.card {
	flex: var(--r, 1.7778) 1 0%;
	min-width: 0;
}

/* Einzelnes Bild in der letzten Zeile: halbe Breite wie sonst */
.row--solo .card {
	flex: 0 0 calc((100% - var(--gap)) / 2);
}

.card__link {
	position: relative;
	display: block;
}

.card__media {
	position: relative;
	display: block;
	overflow: hidden;
}

.card__link img {
	width: 100%;
	aspect-ratio: var(--r, 1.7778);
	object-fit: cover;
}

.card__ph {
	display: block;
	width: 100%;
	aspect-ratio: var(--r, 1.7778);
	background: currentColor;
	opacity: 0.08;
}

.card__title {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
}

/* Hover-Vorschau (Projektor-Hochlauf), Ebenen setzt assets/js/preview.js */
.card__stage {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	background: #000;
}

.card__stage .card__f {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

.empty {
	padding: 0 var(--gutter);
	font-size: 0.875rem;
}

/* ------------------------------------------------------------------
   Projektseite
   Bilderstreifen: alle Projektbilder mit 1 rem Lücken übereinander, Titelbild oben.
   Die Höhe richtet sich nach der Zahl der Bilder (keine Mindesthöhe).
   Scrollt man über dem Streifen (oder über den Seitenrand hinaus), springen die Bilder
   endlos Bild für Bild, dabei dunkeln nur die Bilder leicht ab (nicht die Lücken).
   Titel und Text scrollen halb so schnell.
   Die Maße (--strip-h Höhe des Streifens, --box Höhe der mobilen Box) setzt main.js.
------------------------------------------------------------------- */
.project {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-areas: "stripe text";
	column-gap: var(--gap);
	align-items: stretch;
	padding: 0 var(--gutter);
}

/* Bilderstreifen rechts, wenn das Titelbild von rechts kam */
html[data-side="right"] .project {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	grid-template-areas: "text stripe";
}

.project__stripe {
	grid-area: stripe;
	position: relative;
	overflow: hidden;
	min-width: 0;
}

.stripe__list {
	display: flex;
	flex-direction: column;
	gap: var(--strip-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stripe__list li {
	display: block;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.stripe__list li:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.stripe__list img {
	width: 100%;
}

/* Vor der Anordnung durch JavaScript nichts zeigen (kein Springen); Notausgang nach 2 s */
.js .project:not(.is-ready) .project__stripe {
	visibility: hidden;
	animation: tb-reveal 0s linear 2s forwards;
}

@keyframes tb-reveal {
	to {
		visibility: visible;
	}
}

.project.is-ready .project__stripe {
	min-height: var(--strip-h, 0px);
}

.project.is-ready .stripe__list {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	will-change: transform;
}

/* Text: weiter vom Rand weg (außen), Titel und Text scrollen halb so schnell (main.js).
   main.js schiebt den Text so weit nach unten, dass die Unterkante des Titels mit der Unterkante des Titelbilds abschließt. */
.project__text {
	grid-area: text;
	align-self: start;
	min-width: 0;
	padding-right: var(--inset);
	padding-bottom: var(--gap);
	font-size: 0.875rem;
	will-change: transform;
}

html[data-side="right"] .project__text {
	padding-right: 0;
	padding-left: var(--inset);
}

.project__title {
	margin: 0 0 1.5rem;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.meta {
	display: grid;
	grid-template-columns: fit-content(9rem) minmax(0, 1fr);
	column-gap: 1.5rem;
	margin: 0 0 1.5rem;
}

/* Alle Gruppen teilen sich die Spalten des gemeinsamen Rasters: gleiche Spaltenbreite, Werte bündig */
.meta__group {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: fit-content(9rem) minmax(0, 1fr);
	column-gap: 1.5rem;
	align-items: baseline; /* Beschriftung und Wert stehen auf einer Grundlinie */
	row-gap: 0.5rem;
	margin: 0;
}

@supports (grid-template-columns: subgrid) {
	.meta__group {
		grid-template-columns: subgrid;
		column-gap: normal;
	}
}

.meta__group + .meta__group,
.meta__group + .meta__heading {
	margin-top: 1.5rem;
}

.meta dt {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.meta dd {
	margin: 0;
}

.meta__block {
	display: block;
}

.meta__block + .meta__block {
	margin-top: 0.75rem;
}

.meta__wide {
	grid-column: 1 / -1;
}

/* Cast hängt mit kleinem Abstand an den Credits */
.meta dt.meta__gap,
.meta dd.meta__gap {
	margin-top: 0.75rem;
}

/* Projekttyp und Genre, darunter Lauflänge und Seitenverhältnis (halbe Deckkraft), jeweils ohne Beschriftung */
.meta-line {
	margin: 0 0 0.25rem;
	font-size: 0.875rem;
}

.meta-line--dim {
	opacity: 0.5;
}

.meta-line + :not(.meta-line) {
	margin-top: 1.5rem;
}

.meta > :first-child {
	margin-top: 0;
}

.meta__heading {
	grid-column: 1 / -1;
	margin: 1.5rem 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Lightbox: 2 rem Rahmen in der Hintergrundfarbe, öffnet und schließt vom/zum Bild (main.js)
------------------------------------------------------------------- */
.lb {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lb__bg {
	position: absolute;
	inset: 0;
	background: var(--bg);
}

.lb__img {
	position: relative;
	display: block;
	max-width: none;
	cursor: pointer;
	transform-origin: 0 0;
}

.lb__close {
	position: absolute;
	right: 1.5rem; /* Feinposition (knapp über der oberen rechten Bildecke) setzt main.js */
	bottom: calc(100% - 2rem);
	z-index: 2;
	margin: 0;
	padding: 0.5rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.lb__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Inhalt (Contact und andere Seiten): Seitentitel unter dem Logo, Fließtext weiter vom Rand
------------------------------------------------------------------- */
.page {
	padding: 0 var(--gutter) var(--gap);
}

.page__title {
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry-content {
	max-width: 46rem;
	margin-left: auto; /* vorerst zentriert; Werte für den Einzug folgen in einer späteren Version */
	margin-right: auto;
}

.entry-content > * {
	margin-top: 0;
	margin-bottom: 1.25em;
}

/* Überschriften und Listen in längeren Texten (Impressum, Datenschutz) */
.entry-content h2 {
	margin: 2.5rem 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry-content h3 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.25rem;
}

.entry-content li {
	margin-bottom: 0.4em;
}

/* Links im Fließtext: rot, beim Überfahren unterstrichen */
.entry-content a {
	color: var(--accent);
	text-decoration: none;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.entry-content figure {
	margin-left: 0;
	margin-right: 0;
}

.project__text .entry-content {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ------------------------------------------------------------------
   Footer
   Desktop: eine Zeile, Berufsbezeichnung rechts.
   Die aktuelle Seite steht in halber Deckkraft.
------------------------------------------------------------------- */
.site-footer {
	flex-shrink: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	padding: var(--gutter);
	background: var(--bg);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.footer-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-list a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.footer-list a.is-current {
	opacity: 0.5;
}

.footer-role {
	margin: 0 0 0 auto;
	text-align: right;
}

/* ------------------------------------------------------------------
   Cookie-Hinweis (assets/js/consent.js). Beide Knöpfe sind gleich gestaltet.
------------------------------------------------------------------- */
.consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 150;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: var(--gutter);
	background: var(--bg);
	border-top: 1px solid rgba(128, 128, 128, 0.45);
	font-size: 0.875rem;
}

.consent[hidden] {
	display: none;
}

.consent__text {
	flex: 1 1 24rem;
	max-width: 46rem;
	margin: 0;
}

.consent__text a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.consent__actions {
	display: flex;
	gap: 0.75rem;
}

.consent__btn {
	min-width: 7.5rem; /* beide Knöpfe gleich breit */
	margin: 0;
	padding: 0.6rem 1.25rem;
	border: 1px solid currentColor;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.consent__btn:hover,
.consent__btn:focus-visible {
	background: var(--fg);
	color: var(--bg);
}

/* ------------------------------------------------------------------
   Mobiles Layout
------------------------------------------------------------------- */
@media (max-width: 48rem) {
	.row {
		flex-direction: column;
	}

	.card,
	.row--solo .card {
		flex: none;
	}

	/* Header: Logo ohne Animation, Titel direkt daneben */
	.crumb {
		position: static;
		transform: none;
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}

	/* Projektseite: Bildstreifen-Box (ein Bild hoch, beginnt mit dem Titelbild) steht oben, scrollt mit */
	.project,
	html[data-side="right"] .project {
		display: flex;
		flex-direction: column;
	}

	.project__stripe {
		order: -1;
	}

	.project.is-ready .project__stripe {
		height: var(--box);
		min-height: 0;
		touch-action: none;
	}

	.project__text,
	html[data-side="right"] .project__text {
		padding: var(--gutter) 0 var(--gap); /* kein zusätzlicher Einzug: derselbe Rand wie überall */
	}

	.project__title {
		font-size: 1.75rem;
	}

	/* Footer: zentriert, oben Berufsbezeichnung (halbe Deckkraft), Mitte Social Links, unten Links */
	.site-footer {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		text-align: center;
	}

	.footer-role {
		order: 1;
		margin: 0;
		text-align: center;
		opacity: 0.5;
	}

	.footer-social {
		order: 2;
	}

	.footer-nav {
		order: 3;
	}

	.footer-list {
		justify-content: center;
	}

	.consent__actions {
		width: 100%;
	}

	.consent__btn {
		flex: 1 1 0;
	}
}

/* ------------------------------------------------------------------
   Weniger Bewegung
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ext,
	.logo__first {
		transition: none;
	}
}