/**
 * Main content layout — fluid width between expandable sidebars.
 * Container: #cf-app-content (cf-main) in cf-shell.css.
 *
 * @package Collective_Finity
 */

/* ---- Shell content roots ---- */
.cf-app-content > .cf-blog,
.cf-app-content > .cf-home,
.cf-app-content > .cf-home-redesign,
.cf-app-content > .site-main,
.cf-app-content > .content-area,
.cf-app-content > #primary,
.cf-app-content > .cf-single-track-page,
.cf-app-content > .music-library-wrapper,
.cf-app-content > main {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

.cf-contact-page,
.cf-community-page,
.cf-about-page.cf-page-shell,
.cf-legal-page.cf-page-shell {
	min-width: 0;
	max-width: 100%;
}

.cf-contact-page__inner,
.cf-community-page__inner {
	max-width: min(1100px, 100%);
}

/* ---- Generic page shell (page.php, single.php, search.php) ---- */
.cf-page-shell {
	padding: 2.5rem 5px 5px;
	box-sizing: border-box;
}

/* page.php only — account/auth and other generic WP pages */
.cf-page-shell.cf-page-template {
	padding: 2.5px 5px 0;
	box-sizing: border-box;
}

.cf-app-content:has(> .cf-page-shell.cf-page-template) + .cf-site-footer {
	margin-top: 5px !important;
}

.cf-page-shell .cf-page-container {
	max-width: min(1200px, 100%);
	margin: 0 auto;
	min-width: 0;
}

.cf-about-page .cf-page-container.cf-about {
	max-width: min(1100px, 100%);
}

.cf-page-shell .cf-page-container:has(.cf-profile-page) {
	max-width: min(1200px, 100%);
}

.cf-page-card {
	background: linear-gradient(180deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.95));
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 36px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.cf-page-header {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cf-page-kicker {
	margin: 0 0 8px;
	color: var(--primary-color, #ffb700);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.cf-page-header h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(26px, 2.5vw, 34px);
}

.cf-page-shell .entry-content p,
.cf-page-shell .entry-content li {
	line-height: 1.8;
	color: #cfcfcf;
}

.cf-page-shell .entry-content a {
	color: var(--primary-color, #ffb700);
}

.cf-post-meta {
	margin: 12px 0 0;
	color: #888;
	font-size: 0.85rem;
}

@media (max-width: 768px) {
	.cf-page-card {
		padding: 24px;
	}
}

.cf-home,
.cf-home.cf-home-redesign {
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	box-sizing: border-box;
}

/* ---- Blog Hub ---- */
.cf-blog.cf-bloghub {
	min-width: 0;
	max-width: 100%;
}

.cf-bh-featured {
	min-width: 0;
	max-width: 100%;
}

.cf-bh-featured-body {
	flex: 1 1 auto;
	min-width: 0;
}

.cf-bh-featured-title,
.cf-bh-featured-excerpt,
.cf-bh-featured-tag,
.cf-bh-featured-meta {
	overflow-wrap: anywhere;
}

.cf-bh-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	min-width: 0;
}

.cf-bh-card,
.cf-bh-card-body {
	min-width: 0;
}

/* ---- Single post ---- */
.cf-single-hero {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

.cf-post-body {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cf-post-body pre {
	overflow-x: auto;
	max-width: 100%;
}

.cf-post-body pre code {
	overflow-x: visible;
	white-space: pre;
}

.albums-grid,
.tracks-grid {
	min-width: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* ---- Music library shortcode ---- */
.music-library-wrapper {
	min-width: 0;
	max-width: 100%;
}

/* ---- Container breakpoints (sidebar-aware) ---- */
@container cf-main (max-width: 900px) {
	.cf-pillars {
		grid-template-columns: 1fr;
	}

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

	.cf-cta {
		flex-direction: column;
		align-items: flex-start;
	}

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

	.cf-about-pillars__grid {
		grid-template-columns: 1fr;
	}

	.cf-about-why__grid,
	.cf-about-founder__grid,
	.cf-about-closing__grid,
	.cf-about-story-grid {
		grid-template-columns: 1fr !important;
	}

	.cf-contact-together__grid {
		grid-template-columns: 1fr;
	}

	.cf-contact-methods {
		grid-template-columns: 1fr;
	}

	.cf-contact-method-card--full .cf-contact-method-card__body {
		flex-direction: column;
		align-items: flex-start;
	}

	.cf-single-widget-col {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-bottom: 24px !important;
	}

	.cf-single-read-layout {
		overflow: visible !important;
	}

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

	.split-layout {
		grid-template-columns: 1fr !important;
	}

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

@container cf-main (max-width: 720px) {
	.cf-bh-featured {
		flex-direction: column;
	}

	.cf-bh-featured .cf-bh-featured-art {
		width: 100% !important;
		max-width: none !important;
		align-self: auto !important;
	}

	.cf-bh-featured-body {
		padding: 20px;
	}

	.cf-bh-featured-title {
		font-size: 19px;
	}

	.cf-about-hero__copy {
		max-width: 100%;
	}

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

	.cf-footer-inner {
		flex-direction: column;
		gap: 28px;
	}

	.cf-footer-cols {
		gap: 28px;
	}
}

@container cf-main (max-width: 560px) {
	.cf-album-grid,
	.cf-home-redesign .cf-home-reviews-grid,
	.cf-bh-grid {
		grid-template-columns: 1fr;
	}

	.moods-grid,
	.releases-grid,
	.library-gallery {
		grid-template-columns: 1fr !important;
	}
}