/**
 * citelayer Design System — Layouts
 * Container, Grid, Section, Sidebar, Responsive Breakpoints
 *
 * Depends on: variables.css
 * Mobile-first: Base = Mobile, dann aufsteigend mit @media min-width
 */

/* ============================================================
   CONTAINER
   ============================================================ */

.cl-container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}

.cl-container--narrow {
	max-width: 800px;
}

.cl-container--wide {
	max-width: 1400px;
}

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

.cl-section {
	padding-top: var(--section-py);
	padding-bottom: var(--section-py);
	position: relative;
}

.cl-section--flush-top    { padding-top: 0; }
.cl-section--flush-bottom { padding-bottom: 0; }
.cl-section--sm { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); }

.cl-section--bg-alt    { background: var(--cl-bg-alt); }
.cl-section--bg-warm   { background: var(--cl-bg-warm); }
.cl-section--bg-purple { background: var(--cl-bg-purple); }

.cl-section.cl-hero--inner {
	padding-bottom: var(--space-10);
}
/* ============================================================
   GRID SYSTEM
   ============================================================ */

/* Auto-fit Grid (Cards, Features) */
.cl-grid {
	display: grid;
	gap: 1.5rem;
}

.cl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cl-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-responsive (min 280px Spalte) */
.cl-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cl-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Pricing Grid */
.cl-grid--pricing-top {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.cl-grid--pricing-bottom {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

/* ============================================================
   TWO-COLUMN CONTENT LAYOUT (Sidebar)
   ============================================================ */

.cl-layout--sidebar {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 3rem;
	align-items: start;
}

.cl-layout--sidebar-left {
	grid-template-columns: 280px 1fr;
}

/* Content + Sidebar */
.cl-layout__main  { min-width: 0; }
.cl-layout__aside { min-width: 0; }

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

.cl-flex       { display: flex; }
.cl-flex--wrap { flex-wrap: wrap; }
.cl-flex--center { align-items: center; justify-content: center; }
.cl-flex--between { align-items: center; justify-content: space-between; }
.cl-flex--gap-sm { gap: var(--space-5); }
.cl-flex--gap-md { gap: var(--space-8); }
.cl-flex--gap-lg { gap: 3rem; }

/* ============================================================
   SECTION HEADER (Eyebrow + Heading + Subline)
   ============================================================ */

.cl-section-header {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.cl-section-header--center {
	text-align: center;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.cl-section-header__heading {
	font-size: var(--heading-md);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--space-5);
}

.cl-section-header__subline {
	font-size: var(--text-lg);
	color: var(--cl-text-secondary);
	line-height: var(--leading-relaxed);
	max-width: 640px;
}

.cl-section-header--center .cl-section-header__subline {
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   PINNED HORIZONTAL SCROLL LAYOUT
   → Alle Regeln in pinned-scroll.css (Pixel)
   layouts.css enthält nur den Mobile-Fallback (s.u.)
   ============================================================ */

/* ============================================================
   POST GRID (Blog)
   ============================================================ */

.cl-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.cl-post-grid--featured {
	grid-template-columns: 1.4fr 1fr;
}

/* RANKMAth FAQ */
.rank-math-block.cl-faq .rank-math-question {
    justify-content: flex-start;
    gap: 4px;
}
.rank-math-block.cl-faq .rank-math-question::after {
    margin-left: auto;
}

/* ============================================================
   RESPONSIVE — Mobile First
   ============================================================ */

/* --- Tablet Portrait: max-width 1024px --- */
@media (max-width: 1024px) {
	.cl-grid--3        { grid-template-columns: repeat(2, 1fr); }
	.cl-grid--4        { grid-template-columns: repeat(2, 1fr); }
	.cl-grid--pricing-top {
		grid-template-columns: 1fr 1fr;
	}
	.cl-grid--pricing-top .cl-pricing__card:last-child {
		grid-column: 1 / -1;
		max-width: 480px;
		justify-self: center;
		width: 100%;
	}
	.cl-layout--sidebar {
		grid-template-columns: 1fr;
	}
	.cl-layout--sidebar-left {
		grid-template-columns: 1fr;
	}
	.cl-layout--sidebar .cl-layout__aside {
		order: -1;
	}
	.cl-post-grid        { grid-template-columns: repeat(2, 1fr); }
	.cl-post-grid--featured { grid-template-columns: 1fr; }
}

/* --- Mobile: max-width 768px --- */
@media (max-width: 768px) {
	/* Header */
	.cl-header__nav {
		display: none;
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(24px);
		-webkit-backdrop-filter: blur(24px);
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2.5rem;
		z-index: calc(var(--z-nav) - 1);
	}
	.cl-header__nav.is-open      { display: flex; }
	.cl-header__nav .cl-header__link { font-size: 1.25rem; }
	.cl-header__toggle           { display: flex; z-index: calc(var(--z-nav) + 1); }

	.cl-header__toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
	.cl-header__toggle.is-open span:nth-child(2) { opacity: 0; }
	.cl-header__toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

	/* Grids */
	.cl-grid--2 { grid-template-columns: 1fr; }
	.cl-grid--3 { grid-template-columns: 1fr; }
	.cl-grid--4 { grid-template-columns: 1fr; }

	.cl-grid--pricing-top    { grid-template-columns: 1fr; }
	.cl-grid--pricing-bottom { grid-template-columns: 1fr; }
	.cl-grid--pricing-top .cl-pricing__card:last-child { max-width: none; }

	/* Stats */
	.cl-stats__grid { grid-template-columns: 1fr; }
	.cl-stats__item:not(:last-child)::after { display: none; }
	.cl-stats__item { border-bottom: 1px solid var(--cl-border); }
	.cl-stats__item:last-child { border-bottom: none; }

	/* Pinned → Mobile-Fallback in pinned-scroll.css */

	/* Step Panel */
	.cl-step-panel {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
		max-width: 100% !important;
	}
	.cl-step-panel__num { font-size: 3rem !important; }

	/* Form Row → Stack */
	.cl-form--inline    { flex-direction: column; }
	.cl-form--inline .cl-form__input { border-radius: var(--radius-md); border-right: 1.5px solid var(--cl-border); }
	.cl-form--inline .cl-btn { border-radius: var(--radius-full); width: 100%; }
	.cl-form__row       { grid-template-columns: 1fr; }

	/* CTA Section */
	.cl-final-cta__buttons { flex-direction: column; align-items: center; }
	.cl-hero__ctas         { flex-direction: column; align-items: flex-start; }

	/* Footer */
	.cl-footer__grid   { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.cl-footer__bottom { flex-direction: column; text-align: center; }

	/* Post Grid */
	.cl-post-grid      { grid-template-columns: 1fr; }
}

/* --- Small Mobile: max-width 480px --- */
@media (max-width: 480px) {
	.cl-btn            { width: 100%; padding: 1rem 1.5rem; }
	.cl-footer__grid   { grid-template-columns: 1fr; }
	.cl-footer__legal  { flex-direction: column; gap: var(--space-3); }
}