/*
 * Portfolio Home
 *
 * The page content lives in Gutenberg/database. This stylesheet only controls
 * the Portfolio Home layout and deliberately reuses the global component styles.
 */

.portfolio-home {
	overflow: hidden;
	--nk-portfolio-max: var(--wp--custom--layout--page, 1200px);
	--nk-portfolio-gutter: var(--wp--custom--spacing--site-gutter, clamp(1rem, 2.5vw, 2rem));
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--section-gap, clamp(3rem, 5vw, 5rem));
	padding-block: var(--wp--custom--spacing--section-gap, clamp(3rem, 5vw, 5rem));
}

/* Keep the editorial Home calmer/narrower than the full-width landing page. */
.portfolio-home .portfolio-intro,
.portfolio-home .portfolio-section,
.portfolio-home .portfolio-cta__inner {
	width: min(
		calc(100% - (2 * var(--nk-portfolio-gutter))),
		var(--nk-portfolio-max)
	);
	max-width: var(--nk-portfolio-max);
	margin-inline: auto;
}

.portfolio-home > * {
	margin-block: 0 !important;
}

/* Top-level section rhythm is controlled by .portfolio-home gap. */
.portfolio-section,
.portfolio-intro {
	padding-block: 0;
}

/* Full-width bands keep internal breathing room without changing section rhythm. */
.portfolio-current > .portfolio-section,
.portfolio-cta {
	padding-block: var(--wp--custom--spacing--section-padding-block, clamp(2rem, 3.5vw, 3.5rem));
}

.portfolio-intro__grid {
	gap: var(--wp--custom--spacing--component-gap, clamp(1.25rem, 2.5vw, 2rem));
	align-items: center;
}

.portfolio-intro__content {
	max-width: 34rem;
}

.portfolio-intro__media-placeholder {
	min-height: clamp(20rem, 38vw, 34rem);
	position: relative;
	overflow: hidden;
	background: transparent;
}

/*
 * This container started life as an empty layout placeholder. Once an image is
 * inserted it must behave like normal media, not keep the old development
 * guide/border treatment around the image.
 */
.portfolio-intro__media-placeholder::after {
	content: none;
}

.nk-eyebrow {
	margin: 0 0 .75rem;
	color: var(--wp--preset--color--accent, #ff8a00);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.portfolio-intro__title {
	max-width: 12ch;
	font-size: clamp(2.35rem, 4vw, 4.25rem);
	line-height: .98;
}

.portfolio-section__header {
	align-items: end;
	margin-bottom: 2rem;
}

.portfolio-project-grid,
.portfolio-current-grid,
.portfolio-journal-grid {
	gap: 1rem;
}

.portfolio-project-card,
.portfolio-current-card,
.portfolio-journal-card,
.portfolio-discipline {
	border: 1px solid rgba(255, 255, 255, .12);
	background: #181b1e;
	padding: 1rem;
}

.portfolio-project-card .wp-block-post-featured-image,
.portfolio-current-card .wp-block-post-featured-image,
.portfolio-journal-card .wp-block-post-featured-image {
	margin: -1rem -1rem 1rem;
}

.portfolio-current {
	background: #0d0f10;
	border-block: 1px solid rgba(255, 255, 255, .08);
}

.portfolio-discipline-grid {
	gap: 0;
}

.portfolio-discipline {
	min-height: 12rem;
}

.portfolio-cta {
	padding-block: var(--wp--custom--spacing--section-padding-block, clamp(2rem, 3.5vw, 3.5rem));
	border-top: 1px solid rgba(255, 138, 0, .35);
	background: linear-gradient(180deg, rgba(255, 138, 0, .04), transparent);
}

.portfolio-cta__inner {
	gap: 2rem;
}

.portfolio-cta__inner h2 {
	max-width: 20ch;
}

/* Canonical cards: stretch every Query Loop item to the same row height. */
.portfolio-project-grid > li,
.portfolio-current-grid > li {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.portfolio-project-grid > li > .wp-block-netkravler-project-card,
.portfolio-project-grid > li > .netkravler-project-card,
.portfolio-current-grid > li > .wp-block-netkravler-project-card,
.portfolio-current-grid > li > .netkravler-project-card {
	flex: 1 1 auto;
	width: 100%;
}


/*
 * Keep user-added Gutenberg content inside the same editorial measure as the
 * seeded Portfolio sections. Full-width bands (.alignfull) stay full width,
 * but their inner content remains constrained separately.
 */
.portfolio-home > :where(
	.wp-block-group:not(.alignfull),
	.wp-block-columns,
	.wp-block-query,
	.wp-block-netkravler-content-card,
	.wp-block-netkravler-project-card,
	.wp-block-netkravler-content-feature,
	.netkravler-content-card,
	.nk-content-feature
) {
	box-sizing: border-box;
	width: min(
		calc(100% - (2 * var(--nk-portfolio-gutter))),
		var(--nk-portfolio-max)
	) !important;
	max-width: var(--nk-portfolio-max) !important;
	margin-inline: auto !important;
}

/* Content Feature follows the same editorial measure when used as a top-level section. */
.portfolio-home > :where(.wp-block-netkravler-content-feature, .nk-content-feature) {
	width: min(
		calc(100% - (2 * var(--nk-portfolio-gutter))),
		var(--nk-portfolio-max)
	) !important;
	max-width: var(--nk-portfolio-max) !important;
	margin-inline: auto !important;
}


/*
 * Standalone Content Cards use the same responsive footprint as cards in a grid.
 * This prevents a single manually inserted card from stretching across the full
 * editorial width on tablet/landscape screens. Content Feature remains full width.
 */
.portfolio-home > :where(
	.wp-block-netkravler-content-card,
	.wp-block-netkravler-project-card,
	.netkravler-content-card
) {
	width: calc((min(100% - (2 * var(--nk-portfolio-gutter)), var(--nk-portfolio-max)) - (3 * var(--wp--custom--spacing--component-gap, 1rem))) / 4) !important;
	max-width: none !important;
	margin-inline: var(--nk-portfolio-gutter) auto !important;
}

@media (max-width: 1050px) {
	.portfolio-home > :where(
		.wp-block-netkravler-content-card,
		.wp-block-netkravler-project-card,
		.netkravler-content-card
	) {
		width: calc((100% - (2 * var(--nk-portfolio-gutter)) - var(--wp--custom--spacing--component-gap, 1rem)) / 2) !important;
	}
}

@media (max-width: 640px) {
	.portfolio-home > :where(
		.wp-block-netkravler-content-card,
		.wp-block-netkravler-project-card,
		.netkravler-content-card
	) {
		width: calc(100% - (2 * var(--nk-portfolio-gutter))) !important;
		margin-inline: auto !important;
	}
}

/*
 * Selected Work is an explicit four-card grid, not a Query Loop. Gutenberg's
 * grid layout writes a four-column rule of its own, so the responsive column
 * count is intentionally overridden here.
 */
.portfolio-project-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	align-items: stretch;
}

.portfolio-project-grid > :where(
	.wp-block-netkravler-content-card,
	.wp-block-netkravler-project-card,
	.netkravler-content-card
) {
	width: 100%;
	min-width: 0;
	height: 100%;
	max-width: none;
}

.portfolio-project-grid > :where(
	.wp-block-netkravler-content-card,
	.wp-block-netkravler-project-card,
	.netkravler-content-card
) > .card {
	height: 100%;
}

@media (max-width: 1050px) {
	.portfolio-project-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.portfolio-project-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (max-width: 781px) {
	.portfolio-intro__content {
		max-width: none;
	}

	.portfolio-intro__title {
		max-width: none;
		font-size: clamp(2.25rem, 11vw, 3.5rem);
	}

	.portfolio-intro__media-placeholder {
		min-height: 18rem;
	}

	.portfolio-discipline-grid {
		gap: 1rem;
	}
}

/*
 * Gutenberg Columns that are used as a Content Card container must follow the
 * same responsive rules as Netkravler's own card grids. Core Columns normally
 * stack all columns on narrow viewports; for cards we intentionally keep two
 * columns on a phone in landscape and only stack to one in portrait.
 */
.portfolio-home .wp-block-columns:has(
	.wp-block-netkravler-content-card,
	.wp-block-netkravler-project-card,
	.netkravler-content-card
) {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--custom--spacing--component-gap, 1rem);
	align-items: stretch;
}

.portfolio-home .wp-block-columns:has(
	.wp-block-netkravler-content-card,
	.wp-block-netkravler-project-card,
	.netkravler-content-card
) > .wp-block-column {
	min-width: 0;
	width: auto !important;
	flex-basis: auto !important;
	margin: 0 !important;
}

.portfolio-home .wp-block-columns:has(
	.wp-block-netkravler-content-card,
	.wp-block-netkravler-project-card,
	.netkravler-content-card
) :where(
	.wp-block-netkravler-content-card,
	.wp-block-netkravler-project-card,
	.netkravler-content-card
) {
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	margin: 0 !important;
}

.portfolio-home .wp-block-columns:has(
	.wp-block-netkravler-content-card,
	.wp-block-netkravler-project-card,
	.netkravler-content-card
) :where(
	.wp-block-netkravler-content-card,
	.wp-block-netkravler-project-card,
	.netkravler-content-card
) > .card {
	height: 100%;
}

@media (max-width: 1050px) {
	.portfolio-home .wp-block-columns:has(
		.wp-block-netkravler-content-card,
		.wp-block-netkravler-project-card,
		.netkravler-content-card
	) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile portrait: one card across. */
@media (max-width: 700px) and (orientation: portrait) {
	.portfolio-home .wp-block-columns:has(
		.wp-block-netkravler-content-card,
		.wp-block-netkravler-project-card,
		.netkravler-content-card
	),
	.portfolio-project-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Mobile landscape: preserve two useful cards side by side. */
@media (max-width: 950px) and (orientation: landscape) {
	.portfolio-home .wp-block-columns:has(
		.wp-block-netkravler-content-card,
		.wp-block-netkravler-project-card,
		.netkravler-content-card
	),
	.portfolio-project-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}