/**
 * SEB Theme — Page Layouts & Templates Stylesheet
 * -----------------------------------------------------------------------------
 * Clean, responsive layouts for Default, Full Width, No Sidebar, Left Sidebar,
 * and Right Sidebar page templates. Scoped to avoid interfering with Elementor.
 *
 * @package SEB_Theme
 */

/* =============================================================================
   1. PAGE WRAPPER & SPACING
   ============================================================================= */

.seb-page-wrapper {
	padding-top: var(--seb-space-12, 48px);
	padding-bottom: var(--seb-space-16, 64px);
	width: 100%;
	box-sizing: border-box;
}

/* =============================================================================
   2. PAGE HEADER & TYPOGRAPHY
   ============================================================================= */

.seb-page-header {
	margin-bottom: var(--seb-space-8, 32px);
}

.seb-page-title {
	font-family: var(--seb-font-heading, "Fraunces", Georgia, serif);
	font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--seb-dark, #0e2136);
	margin: 0 0 var(--seb-space-4, 16px) 0;
	letter-spacing: -0.015em;
}

.seb-page-thumbnail {
	margin-top: var(--seb-space-6, 24px);
	margin-bottom: var(--seb-space-8, 32px);
	border-radius: var(--seb-radius-lg, 16px);
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(14, 33, 54, 0.06);
}

.seb-page-featured-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	max-height: 520px;
}

/* =============================================================================
   3. CONTENT AREA & CONSTRAINTS
   ============================================================================= */

.seb-page-content-area {
	min-width: 0; /* Prevent CSS Grid blowout from large images/code */
}

.seb-page-content-constrained {
	max-width: var(--seb-content-width, 820px);
	margin-inline: auto;
}

.seb-page-content {
	font-family: var(--seb-font-body, "Manrope", sans-serif);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--seb-dark, #0e2136);
}

.seb-page-content > *:first-child {
	margin-top: 0;
}

.seb-page-content > *:last-child {
	margin-bottom: 0;
}

.seb-page-content p {
	margin-bottom: 1.5em;
	color: var(--seb-text, #5b6b7c);
}

.seb-page-content h1,
.seb-page-content h2,
.seb-page-content h3,
.seb-page-content h4,
.seb-page-content h5,
.seb-page-content h6 {
	font-family: var(--seb-font-heading, "Fraunces", Georgia, serif);
	color: var(--seb-dark, #0e2136);
	margin-top: 1.8em;
	margin-bottom: 0.6em;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.seb-page-content h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.seb-page-content h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }
.seb-page-content h4 { font-size: 1.25rem; }
.seb-page-content h5 { font-size: 1.125rem; }
.seb-page-content h6 { font-size: 1rem; }

.seb-page-content ul,
.seb-page-content ol {
	margin: 1.2em 0 1.5em 1.5em;
	color: var(--seb-text, #5b6b7c);
}

.seb-page-content ul {
	list-style: disc;
}

.seb-page-content ol {
	list-style: decimal;
}

.seb-page-content li {
	margin-bottom: 0.5em;
}

.seb-page-content blockquote {
	margin: 2em 0;
	padding: var(--seb-space-6, 24px) var(--seb-space-8, 32px);
	background-color: var(--seb-bg-light, #f6f8fb);
	border-left: 4px solid var(--seb-accent, #f8753a);
	border-radius: 0 var(--seb-radius-md, 12px) var(--seb-radius-md, 12px) 0;
	font-family: var(--seb-font-heading, "Fraunces", Georgia, serif);
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--seb-dark, #0e2136);
}

.seb-page-content blockquote p {
	color: inherit;
	margin-bottom: 0.5em;
}

.seb-page-content blockquote p:last-child {
	margin-bottom: 0;
}

.seb-page-links {
	margin-top: var(--seb-space-8, 32px);
	padding-top: var(--seb-space-4, 16px);
	border-top: 1px solid var(--seb-border, #e4e9f0);
}

/* =============================================================================
   4. SIDEBAR GRID LAYOUT (CSS GRID)
   ============================================================================= */

.seb-page-layout-grid {
	display: block;
	width: 100%;
}

.seb-page-wrapper.has-sidebar .seb-page-layout-grid {
	display: grid;
	gap: var(--seb-space-12, 48px);
	align-items: start;
}

/* Right Sidebar Layout (Content ~70% / Sidebar ~30%) */
.seb-page-wrapper.has-sidebar.sidebar-right .seb-page-layout-grid {
	grid-template-columns: 1fr 320px;
}

.seb-page-wrapper.has-sidebar.sidebar-right .seb-page-content-area {
	grid-column: 1;
	grid-row: 1;
}

.seb-page-wrapper.has-sidebar.sidebar-right .widget-area {
	grid-column: 2;
	grid-row: 1;
}

/* Left Sidebar Layout (Sidebar ~30% / Content ~70%) */
.seb-page-wrapper.has-sidebar.sidebar-left .seb-page-layout-grid {
	grid-template-columns: 320px 1fr;
}

.seb-page-wrapper.has-sidebar.sidebar-left .widget-area {
	grid-column: 1;
	grid-row: 1;
}

.seb-page-wrapper.has-sidebar.sidebar-left .seb-page-content-area {
	grid-column: 2;
	grid-row: 1;
}

/* When sidebar has no active widgets, content takes full width */
.seb-page-wrapper.no-sidebar .seb-page-layout-grid {
	display: block;
}

/* =============================================================================
   5. RESPONSIVE BREAKPOINTS
   ============================================================================= */

@media (max-width: 1024px) {
	.seb-page-wrapper.has-sidebar.sidebar-right .seb-page-layout-grid {
		grid-template-columns: 1fr 280px;
		gap: var(--seb-space-8, 32px);
	}

	.seb-page-wrapper.has-sidebar.sidebar-left .seb-page-layout-grid {
		grid-template-columns: 280px 1fr;
		gap: var(--seb-space-8, 32px);
	}
}

@media (max-width: 860px) {
	.seb-page-wrapper.has-sidebar .seb-page-layout-grid {
		grid-template-columns: 1fr;
		gap: var(--seb-space-8, 32px);
	}

	/* Main content always appears first on mobile */
	.seb-page-wrapper.has-sidebar.sidebar-left .seb-page-content-area,
	.seb-page-wrapper.has-sidebar.sidebar-right .seb-page-content-area {
		grid-column: 1;
		grid-row: 1;
	}

	/* Sidebar always appears second on mobile */
	.seb-page-wrapper.has-sidebar.sidebar-left .widget-area,
	.seb-page-wrapper.has-sidebar.sidebar-right .widget-area {
		grid-column: 1;
		grid-row: 2;
	}
}

@media (max-width: 768px) {
	.seb-page-wrapper {
		padding-top: var(--seb-space-8, 32px);
		padding-bottom: var(--seb-space-12, 48px);
	}

	.seb-page-title {
		font-size: clamp(1.625rem, 1.25rem + 2vw, 2.25rem);
	}
}

/* =============================================================================
   6. ELEMENTOR SAFETY & FULL WIDTH
   ============================================================================= */

/* Ensure theme layout wrappers do not restrict Elementor Full Width */
.page-template-elementor-full-width #primary,
.page-template-elementor-full-width .entry-content,
.seb-page-elementor-full-width #primary {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}