/* ==========================================================
   PetrolPress
   03 – Layout
   Zentrale Layout-Regeln für Container, Sections, Grids
   und WordPress-Ausrichtungen
========================================================== */


/* ==========================================================
   BOX SIZING & DOCUMENT FLOW
========================================================== */

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

html {
	min-width: 320px;
}

body {
	min-width: 320px;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

iframe {
	max-width: 100%;
}

main {
	display: block;
}


/* ==========================================================
   PAGE SHELL
========================================================== */

.site {
	position: relative;
	min-height: 100vh;
	background: var(--color-background);
}

.site-content {
	position: relative;
	z-index: var(--z-base);
}

.site-main {
	min-width: 0;
}

.content-area {
	min-width: 0;
}


/* ==========================================================
   CONTAINERS
========================================================== */

.container,
.site-container,
.wp-site-blocks > .alignwide,
.entry-content > .alignwide {
	width: min(
		calc(100% - (2 * var(--container-padding))),
		var(--pp-container-width, var(--container-width))
	);
	margin-inline: auto;
}

.container-wide {
	width: min(
		calc(100% - (2 * var(--container-padding))),
		var(--container-width-wide)
	);
	margin-inline: auto;
}

.container-narrow,
.content-narrow {
	width: min(
		calc(100% - (2 * var(--container-padding))),
		var(--container-width-narrow)
	);
	margin-inline: auto;
}

.content-width {
	width: min(100%, var(--pp-content-width, var(--content-width)));
}

.full-width {
	width: 100%;
}

.alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.alignwide {
	width: min(
		calc(100% - (2 * var(--container-padding))),
		var(--container-width-wide)
	);
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================================
   SECTIONS
========================================================== */

.section,
.site-section {
	position: relative;
	padding-block: var(--section-spacing-medium);
}

.section-sm {
	padding-block: var(--section-spacing-small);
}

.section-lg {
	padding-block: var(--section-spacing-large);
}

.section-tight {
	padding-block: var(--space-12);
}

.section-flush {
	padding-block: 0;
}

.section-top-flush {
	padding-top: 0;
}

.section-bottom-flush {
	padding-bottom: 0;
}

.section-background {
	background: var(--color-background-soft);
}

.section-background-alt {
	background: var(--color-background-alt);
}

.section-primary-soft {
	background: var(--gradient-primary-soft);
}

.section-dark {
	color: var(--color-white);
	background: var(--gradient-footer);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6,
.section-dark strong {
	color: var(--color-white);
}

.section-dark p,
.section-dark li {
	color: rgba(255, 255, 255, 0.82);
}

.section-divider {
	border-top: 1px solid var(--color-border);
}

.section-overflow-hidden {
	overflow: hidden;
}


/* ==========================================================
   SECTION HEADERS
========================================================== */

.section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
	margin-bottom: var(--space-10);
}

.section-header-content {
	max-width: 720px;
}

.section-header-content > :last-child {
	margin-bottom: 0;
}

.section-header-centered {
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: var(--space-10);
	text-align: center;
}

.section-header-centered .eyebrow,
.section-header-centered .section-eyebrow {
	justify-content: center;
}

.section-header-centered .eyebrow::before,
.section-header-centered .section-eyebrow::before {
	display: none;
}

.section-actions {
	flex: 0 0 auto;
}


/* ==========================================================
   GRID SYSTEM
========================================================== */

.grid {
	display: grid;
	gap: var(--space-6);
	min-width: 0;
}

.grid-tight {
	gap: var(--space-4);
}

.grid-relaxed {
	gap: var(--space-8);
}

.grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-auto-sm {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.grid-auto-md {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.grid-auto-lg {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-main-sidebar {
	grid-template-columns:
		minmax(0, 1fr)
		minmax(260px, var(--pp-sidebar-width, var(--sidebar-width)));
	align-items: start;
}

.grid-sidebar-main {
	grid-template-columns:
		minmax(260px, var(--pp-sidebar-width, var(--sidebar-width)))
		minmax(0, 1fr);
	align-items: start;
}

.grid-hero {
	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(360px, 0.95fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 6rem);
}


/* ==========================================================
   FLEX UTILITIES
========================================================== */

.flex {
	display: flex;
}

.inline-flex {
	display: inline-flex;
}

.flex-column {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.items-start {
	align-items: flex-start;
}

.items-center {
	align-items: center;
}

.items-end {
	align-items: flex-end;
}

.justify-start {
	justify-content: flex-start;
}

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

.justify-between {
	justify-content: space-between;
}

.justify-end {
	justify-content: flex-end;
}

.gap-1 {
	gap: var(--space-1);
}

.gap-2 {
	gap: var(--space-2);
}

.gap-3 {
	gap: var(--space-3);
}

.gap-4 {
	gap: var(--space-4);
}

.gap-6 {
	gap: var(--space-6);
}

.gap-8 {
	gap: var(--space-8);
}

.gap-10 {
	gap: var(--space-10);
}


/* ==========================================================
   STACK & CLUSTER PATTERNS
========================================================== */

.stack {
	display: flex;
	flex-direction: column;
}

.stack > * {
	margin-block: 0;
}

.stack-sm {
	gap: var(--space-3);
}

.stack-md {
	gap: var(--space-5);
}

.stack-lg {
	gap: var(--space-8);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.cluster-center {
	justify-content: center;
}

.cluster-between {
	justify-content: space-between;
}


/* ==========================================================
   SPLIT LAYOUTS
========================================================== */

.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(2rem, 6vw, 5rem);
}

.split-reverse > :first-child {
	order: 2;
}

.split-reverse > :last-child {
	order: 1;
}

.split-content {
	max-width: 620px;
}

.split-media {
	position: relative;
	min-width: 0;
}


/* ==========================================================
   THEME LAYOUT ENGINE

   The body classes are supplied by the PetrolPress layout API.
   Dynamic widths come from inc/helpers/css-variables.php.
========================================================== */

.content-sidebar-layout,
.sidebar-layout,
.content-layout {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(240px, var(--pp-sidebar-width, var(--sidebar-width)));
	grid-template-areas: "main sidebar";
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	width: 100%;
	min-width: 0;
}

.content-sidebar-layout > :not(.sidebar):not(.widget-area),
.sidebar-layout > :not(.sidebar):not(.widget-area),
.content-layout > :not(.sidebar):not(.widget-area) {
	grid-area: main;
	min-width: 0;
}

.content-sidebar-layout > .sidebar,
.content-sidebar-layout > .widget-area,
.sidebar-layout > .sidebar,
.sidebar-layout > .widget-area,
.content-layout > .sidebar,
.content-layout > .widget-area {
	grid-area: sidebar;
	width: 100%;
	min-width: 0;
}

.petrolpress-layout-left-sidebar .content-sidebar-layout,
.petrolpress-layout-left-sidebar .sidebar-layout,
.petrolpress-layout-left-sidebar .content-layout {
	grid-template-columns:
		minmax(240px, var(--pp-sidebar-width, var(--sidebar-width)))
		minmax(0, 1fr);
	grid-template-areas: "sidebar main";
}

.petrolpress-layout-no-sidebar .content-sidebar-layout,
.petrolpress-layout-no-sidebar .sidebar-layout,
.petrolpress-layout-no-sidebar .content-layout,
.petrolpress-layout-full-width .content-sidebar-layout,
.petrolpress-layout-full-width .sidebar-layout,
.petrolpress-layout-full-width .content-layout {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main";
}

.petrolpress-layout-no-sidebar .content-sidebar-layout > .sidebar,
.petrolpress-layout-no-sidebar .content-sidebar-layout > .widget-area,
.petrolpress-layout-no-sidebar .sidebar-layout > .sidebar,
.petrolpress-layout-no-sidebar .sidebar-layout > .widget-area,
.petrolpress-layout-no-sidebar .content-layout > .sidebar,
.petrolpress-layout-no-sidebar .content-layout > .widget-area,
.petrolpress-layout-full-width .content-sidebar-layout > .sidebar,
.petrolpress-layout-full-width .content-sidebar-layout > .widget-area,
.petrolpress-layout-full-width .sidebar-layout > .sidebar,
.petrolpress-layout-full-width .sidebar-layout > .widget-area,
.petrolpress-layout-full-width .content-layout > .sidebar,
.petrolpress-layout-full-width .content-layout > .widget-area {
	display: none;
}

.petrolpress-layout-no-sidebar .content-sidebar-layout > :not(.sidebar):not(.widget-area),
.petrolpress-layout-no-sidebar .sidebar-layout > :not(.sidebar):not(.widget-area),
.petrolpress-layout-no-sidebar .content-layout > :not(.sidebar):not(.widget-area) {
	width: min(100%, var(--pp-content-width, var(--content-width)));
	margin-inline: auto;
}

.petrolpress-layout-full-width .content-sidebar-layout > :not(.sidebar):not(.widget-area),
.petrolpress-layout-full-width .sidebar-layout > :not(.sidebar):not(.widget-area),
.petrolpress-layout-full-width .content-layout > :not(.sidebar):not(.widget-area) {
	width: 100%;
	max-width: none;
}

/* Generic container aliases used by classic and future templates. */
.container,
.site-container {
	max-width: none;
}

.petrolpress-layout-full-width .site-main > .container,
.petrolpress-layout-full-width .site-main > .site-container {
	width: 100%;
	max-width: none;
}

/* ==========================================================
   CONTENT LAYOUT
========================================================== */

.content-layout {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(260px, var(--pp-sidebar-width, var(--sidebar-width)));
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.primary-content {
	min-width: 0;
}

.sidebar {
	min-width: 0;
}

.sidebar-sticky {
	position: sticky;
	top: calc(var(--header-height) + var(--space-6));
}

.entry-content,
.page-content {
	min-width: 0;
}

.entry-content > *,
.page-content > * {
	max-width: var(--pp-content-width, var(--content-width));
	margin-left: auto;
	margin-right: auto;
}

.entry-content > .alignwide,
.page-content > .alignwide {
	max-width: var(--container-width-wide);
}

.entry-content > .alignfull,
.page-content > .alignfull {
	max-width: none;
}

.entry-content > .wp-block-image,
.page-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.page-content > .wp-block-gallery {
	width: 100%;
}


/* ==========================================================
   MEDIA & ASPECT RATIOS
========================================================== */

.media-frame {
	position: relative;
	overflow: hidden;
	background: var(--color-background-alt);
	border-radius: var(--radius-lg);
}

.media-frame img,
.media-frame video,
.media-frame iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aspect-square {
	aspect-ratio: 1 / 1;
}

.aspect-landscape {
	aspect-ratio: 4 / 3;
}

.aspect-wide {
	aspect-ratio: 16 / 9;
}

.aspect-portrait {
	aspect-ratio: 4 / 5;
}

.aspect-story {
	aspect-ratio: 9 / 16;
}


/* ==========================================================
   POSITIONING HELPERS
========================================================== */

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.sticky {
	position: sticky;
}

.inset-0 {
	inset: 0;
}

.center-absolute {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.overflow-hidden {
	overflow: hidden;
}

.overflow-visible {
	overflow: visible;
}

.isolation {
	isolation: isolate;
}


/* ==========================================================
   SPACING UTILITIES
========================================================== */

.mt-0 {
	margin-top: 0;
}

.mt-4 {
	margin-top: var(--space-4);
}

.mt-6 {
	margin-top: var(--space-6);
}

.mt-8 {
	margin-top: var(--space-8);
}

.mt-10 {
	margin-top: var(--space-10);
}

.mt-12 {
	margin-top: var(--space-12);
}

.mb-0 {
	margin-bottom: 0;
}

.mb-4 {
	margin-bottom: var(--space-4);
}

.mb-6 {
	margin-bottom: var(--space-6);
}

.mb-8 {
	margin-bottom: var(--space-8);
}

.mb-10 {
	margin-bottom: var(--space-10);
}

.mb-12 {
	margin-bottom: var(--space-12);
}

.mx-auto {
	margin-inline: auto;
}

.p-0 {
	padding: 0;
}

.p-4 {
	padding: var(--space-4);
}

.p-6 {
	padding: var(--space-6);
}

.p-8 {
	padding: var(--space-8);
}


/* ==========================================================
   VISIBILITY
========================================================== */

.hidden {
	display: none !important;
}

.mobile-only {
	display: none;
}

.desktop-only {
	display: block;
}


/* ==========================================================
   WORDPRESS-SPECIFIC LAYOUT
========================================================== */

.wp-block-group {
	position: relative;
}

.wp-block-group.has-background {
	padding: var(--space-8);
	border-radius: var(--radius-lg);
}

.wp-block-columns {
	gap: var(--space-6);
}

.wp-block-column {
	min-width: 0;
}

.wp-block-cover,
.wp-block-media-text,
.wp-block-gallery {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.wp-block-separator {
	width: min(100%, var(--container-width-narrow));
	margin-inline: auto;
}

.wp-caption,
.gallery-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	margin-top: var(--space-2);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-snug);
	color: var(--color-text-muted);
	text-align: center;
}

.alignleft {
	float: left;
	margin-right: var(--space-6);
	margin-bottom: var(--space-4);
}

.alignright {
	float: right;
	margin-left: var(--space-6);
	margin-bottom: var(--space-4);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================================
   CLEARFIX
========================================================== */

.clearfix::after,
.entry-content::after,
.page-content::after {
	display: table;
	clear: both;
	content: "";
}


/* ==========================================================
   RESPONSIVE LAYOUT
========================================================== */

@media (max-width: 1100px) {

	.grid-4,
	.grid-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.grid-hero {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
		gap: var(--space-10);
	}

	.content-layout,
	.grid-main-sidebar,
	.grid-sidebar-main {
		grid-template-columns: minmax(0, 1fr);
	}

	.sidebar-sticky {
		position: static;
	}
}

@media (max-width: 782px) {

	.section,
	.site-section {
		padding-block: var(--section-spacing-small);
	}

	.section-header {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: var(--space-8);
	}

	.section-actions {
		width: 100%;
	}

	.grid-2,
	.grid-3,
	.grid-4,
	.grid-5,
	.grid-hero,
	.split {
		grid-template-columns: minmax(0, 1fr);
	}

	.split-reverse > :first-child,
	.split-reverse > :last-child {
		order: initial;
	}

	.mobile-only {
		display: block;
	}

	.desktop-only {
		display: none !important;
	}

	.alignleft,
	.alignright {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 480px) {

	:root {
		--container-padding: 1rem;
	}

	.grid,
	.grid-tight,
	.grid-relaxed {
		gap: var(--space-5);
	}

	.section-header,
	.section-header-centered {
		margin-bottom: var(--space-6);
	}

	.wp-block-group.has-background {
		padding: var(--space-5);
	}
}