/*
Theme Name: albrecht-portfolio
Text Domain: albrecht-portfolio
Description: Human-centric editorial revision of the Albrecht portfolio theme.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

html { scroll-behavior: smooth; }

:root {
	--editorial-max: 78rem;
	--editorial-gap: clamp(1.25rem, 2.5vw, 2.75rem);
}

*,
*::before,
*::after {
	border-radius: 0 !important;
	box-shadow: none !important;
}

body {
	font-family: "Open Sans", "Archivo", ui-sans-serif, "Segoe UI", sans-serif !important;
	font-weight: 300 !important;
	letter-spacing: 0 !important;
}

h1, h2, h3, h4, h5, h6,
header .site-container > a > span:last-child {
	font-family: "Open Sans", "Archivo", ui-sans-serif, "Segoe UI", sans-serif !important;
	font-weight: 400 !important;
	letter-spacing: -0.035em !important;
	line-height: .98 !important;
	text-transform: none !important;
}

h1,
main > section h1,
main > header h1,
article > header h1 {
	font-size: clamp(2.5rem, 6.2vw, 6.75rem) !important;
	max-width: 13ch;
}

main h2:not(.card h2) {
	font-size: clamp(1.8rem, 3.5vw, 3.4rem) !important;
	font-weight: 400 !important;
}

.site-container {
	max-width: var(--editorial-max) !important;
	padding-left: clamp(1.25rem, 3vw, 3.5rem) !important;
	padding-right: clamp(1.25rem, 3vw, 3.5rem) !important;
}

header {
	border-bottom: 0 !important;
}

header .site-container {
	padding-top: clamp(1.5rem, 3vw, 2.75rem) !important;
	padding-bottom: clamp(1.25rem, 2vw, 2rem) !important;
}

header .site-container > a {
	gap: 1rem !important;
}

header .site-container > a > span:last-child {
	font-size: clamp(1.45rem, 2.1vw, 2rem) !important;
}

.menu-main-navigation-container > ul {
	gap: .25rem 1.65rem !important;
}

.menu-main-navigation-container > ul > li > a,
.menu-main-navigation-container > ul > li > a .nav-link {
	background: transparent !important;
	color: var(--color-muted) !important;
	font-weight: 300 !important;
	padding: .15rem 0 !important;
	text-decoration: none !important;
}

.menu-main-navigation-container > ul > li > a:hover,
.menu-main-navigation-container > ul > li > a:focus,
.menu-main-navigation-container > ul > li > a:hover .nav-link,
.menu-main-navigation-container > ul > li > a:focus .nav-link {
	background: transparent !important;
	color: var(--color-foreground) !important;
}

.menu-main-navigation-container > ul > li > a .nav-link::after {
	display: none !important;
}

@media (min-width: 768px) {
	.menu-main-navigation-container .sub-menu {
		top: calc(100% + .7rem) !important;
		min-width: 14rem !important;
		padding: .7rem 0 !important;
		background: #111 !important;
		border: 0 !important;
	}

	.menu-main-navigation-container .sub-menu .menu-item-has-children > .sub-menu {
		top: -.7rem !important;
		left: 100% !important;
	}

	.menu-main-navigation-container .sub-menu a,
	.menu-main-navigation-container .sub-menu .nav-link {
		color: #aaa !important;
		font-weight: 300 !important;
		background: transparent !important;
	}

	.menu-main-navigation-container .sub-menu a {
		padding: .55rem 1rem !important;
	}

	.menu-main-navigation-container .sub-menu a:hover,
	.menu-main-navigation-container .sub-menu a:focus,
	.menu-main-navigation-container .sub-menu a:hover .nav-link,
	.menu-main-navigation-container .sub-menu a:focus .nav-link {
		background: transparent !important;
		color: #fff !important;
	}
}

.btn,
.social-links a {
	border: 0 !important;
	background: transparent !important;
	color: var(--color-muted) !important;
	font-weight: 300 !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
}

.btn:hover,
.social-links a:hover {
	background: transparent !important;
	color: var(--color-foreground) !important;
}

.card {
	background: transparent !important;
	border: 0 !important;
	overflow: visible !important;
	transform: none !important;
}

.card:hover {
	border: 0 !important;
	transform: none !important;
}

.card img {
	transition: opacity .2s ease;
}

.card:hover img {
	opacity: .82;
}

.card h2,
.card h3 {
	font-family: "Open Sans", "Archivo", ui-sans-serif, "Segoe UI", sans-serif !important;
	font-size: clamp(1.15rem, 1.9vw, 1.65rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	letter-spacing: -.02em !important;
}

.pill {
	display: inline !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--color-muted) !important;
	font-size: .78rem !important;
	font-weight: 300 !important;
	padding: 0 !important;
}

.prose {
	font-size: clamp(1rem, 1.25vw, 1.12rem);
	line-height: 1.72;
}

.prose img,
.prose figure {
	margin-top: clamp(1rem, 2vw, 2rem) !important;
	margin-bottom: clamp(1rem, 2vw, 2rem) !important;
}

/* Keep project text close to the preceding artwork. */
.prose figure + p,
.prose figure + .wp-block-block,
.prose .wp-block-image + p {
	margin-top: 1rem !important;
}

.editorial-project-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(2.5rem, 6vw, 6rem) var(--editorial-gap);
	align-items: start;
}

.editorial-project {
	grid-column: span 6;
}

.editorial-project:nth-child(5n + 1) {
	grid-column: span 8;
}

.editorial-project:nth-child(5n + 2) {
	grid-column: 9 / span 4;
	margin-top: clamp(4rem, 9vw, 9rem);
}

.editorial-project:nth-child(5n + 3) {
	grid-column: 1 / span 5;
}

.editorial-project:nth-child(5n + 4) {
	grid-column: 7 / span 6;
	margin-top: clamp(2rem, 5vw, 5rem);
}

.editorial-project:nth-child(5n) {
	grid-column: 3 / span 8;
}

.editorial-project .project-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #111;
}

.editorial-project:nth-child(5n + 1) .project-image,
.editorial-project:nth-child(5n) .project-image {
	aspect-ratio: 16 / 10;
}

.editorial-project img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.editorial-project .project-meta {
	padding-top: .85rem;
}

.editorial-project .project-cats {
	margin-top: .35rem;
	color: var(--color-muted);
	font-size: .75rem;
	font-weight: 300;
}

@media (max-width: 767px) {
	.editorial-project-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.editorial-project,
	.editorial-project:nth-child(n) {
		grid-column: 1 !important;
		margin-top: 0 !important;
	}

	h1,
	main > section h1,
	main > header h1,
	article > header h1 {
		max-width: 100%;
	}

	.mobile-menu-details summary {
		border: 0 !important;
		padding: .85rem 0 !important;
		font-weight: 300 !important;
	}
}

footer {
	border-top: 0 !important;
	margin-top: clamp(5rem, 10vw, 10rem) !important;
}

/* Legacy auto-AI-status output is not used in the editorial revision.
   Project-specific disclosure is handled by the reusable content block. */
body.single-post article > .mt-6 {
	display: none !important;
}

/* Keep the familiar project grid while retaining the human-centric revision. */
.portfolio-grid {
	display: grid;
	gap: clamp(1.75rem, 3vw, 3rem);
	align-items: start;
}

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

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

.portfolio-grid__item {
	min-width: 0;
}

.portfolio-grid__item .project-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #111;
}

.portfolio-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portfolio-grid__item .project-meta {
	padding-top: 0;
	padding-bottom: .85rem;
}

.portfolio-grid__item .project-cats {
	margin-top: .35rem;
	color: var(--color-muted);
	font-size: .75rem;
	font-weight: 300;
}

@media (max-width: 1023px) {
	.portfolio-grid--home,
	.portfolio-grid--archive {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.portfolio-grid--home,
	.portfolio-grid--archive {
		grid-template-columns: 1fr;
	}
}

/* Increase vertical rhythm between portfolio rows without loosening columns. */
.portfolio-grid {
	row-gap: clamp(3.5rem, 7vw, 7rem);
	column-gap: clamp(1.75rem, 3vw, 3rem);
}

@media (max-width: 639px) {
	.portfolio-grid {
		row-gap: 4rem;
	}
}

/* Homepage name: quieter than project/page titles. */
.hero-name {
	font-size: clamp(2rem, 4vw, 4.25rem) !important;
	max-width: none !important;
}

/* Stronger vertical separation between project rows on every grid/archive. */
.portfolio-grid {
	row-gap: clamp(5rem, 9vw, 9rem) !important;
}

.portfolio-grid__item {
	margin-bottom: 0 !important;
}

@media (max-width: 639px) {
	.portfolio-grid {
		row-gap: 5.5rem !important;
	}
}

/* Archive/category page titles: smaller than single-project titles. */
body.archive main > header h1 {
	font-size: clamp(2rem, 4vw, 4.25rem) !important;
	max-width: none !important;
}

/* Single project titles: restrained scale for portfolio case studies. */
body.single-post article > header h1 {
	font-size: clamp(2rem, 4.2vw, 4.5rem) !important;
	max-width: 16ch !important;
}

/* Unified page-title scale across all non-home views. */
body:not(.home) main h1 {
	font-size: clamp(2rem, 4vw, 4.25rem) !important;
	max-width: 16ch !important;
}

/* Homepage section heading: slightly quieter than page titles. */
.home main h2 {
	font-size: clamp(1.55rem, 2.8vw, 2.7rem) !important;
}

/* Tighten project-row spacing after visual review. */
.portfolio-grid {
	row-gap: clamp(3rem, 5vw, 5rem) !important;
}

@media (max-width: 639px) {
	.portfolio-grid {
		row-gap: 3.5rem !important;
	}
}

/* Give selected projects more visual weight in the grid. */
@media (min-width: 1024px) {
	.portfolio-grid--home .portfolio-grid__item:nth-child(6n + 1),
	.portfolio-grid--home .portfolio-grid__item:nth-child(6n + 5) {
		grid-column: span 2;
	}

	.portfolio-grid--archive .portfolio-grid__item:nth-child(5n + 1) {
		grid-column: span 2;
	}
}

/* Widen the featured projects further for a stronger editorial rhythm. */
@media (min-width: 1024px) {
	.portfolio-grid--home .portfolio-grid__item:nth-child(6n + 1) {
		grid-column: span 3;
	}

	.portfolio-grid--home .portfolio-grid__item:nth-child(6n + 5) {
		grid-column: span 2;
	}

	.portfolio-grid--archive .portfolio-grid__item:nth-child(5n + 1) {
		grid-column: span 2;
	}
}

/* Homepage section heading: smaller, quieter scale. */
.home main h2 {
	font-size: clamp(1.35rem, 2.2vw, 2.15rem) !important;
}

/* Keep images aligned when project titles wrap to multiple lines. */
.portfolio-grid__item .project-meta {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.portfolio-grid--home .portfolio-grid__item .project-meta {
	min-height: 5.25rem;
}

.portfolio-grid--archive .portfolio-grid__item .project-meta {
	min-height: 3.9rem;
}

@media (max-width: 639px) {
	.portfolio-grid--home .portfolio-grid__item .project-meta,
	.portfolio-grid--archive .portfolio-grid__item .project-meta {
		min-height: 0;
	}
}

/* Prevent a single narrow card hanging beside a dominant feature.
   Primary featured projects now take a full desktop row. */
@media (min-width: 1024px) {
	.portfolio-grid--home .portfolio-grid__item:nth-child(6n + 1) {
		grid-column: 1 / -1 !important;
	}

	.portfolio-grid--home {
		grid-auto-flow: row;
	}
}

/* Homepage hierarchy refinement. */
.home main h2 {
	font-size: clamp(1.15rem, 1.8vw, 1.8rem) !important;
}

.home .hero-name + p {
	margin-top: .55rem !important;
}

/* Homepage rhythm: featured row, then exactly four small cards.
   Pattern: 1 feature + 4 small cards, repeated. */
@media (min-width: 1024px) {
	.portfolio-grid--home .portfolio-grid__item {
		grid-column: span 1 !important;
	}

	.portfolio-grid--home .portfolio-grid__item:nth-child(5n + 1) {
		grid-column: 1 / -1 !important;
	}
}

/* Homepage rhythm: either two half-width feature blocks or four small blocks.
   Repeating pattern: 2 big + 4 small. */
@media (min-width: 1024px) {
	.portfolio-grid--home .portfolio-grid__item {
		grid-column: span 1 !important;
	}

	.portfolio-grid--home .portfolio-grid__item:nth-child(6n + 1),
	.portfolio-grid--home .portfolio-grid__item:nth-child(6n + 2) {
		grid-column: span 2 !important;
	}
}

/* Homepage portfolio heading: smaller label with more separation from the intro. */
.home .home-portfolio-heading {
	font-size: clamp(1rem, 1.5vw, 1.45rem) !important;
	margin-top: clamp(2rem, 5vw, 4.5rem) !important;
}

/* Keep all project photos aligned on one horizontal line within each desktop row. */
@media (min-width: 640px) {
	.portfolio-grid__item .project-meta {
		min-height: 5.75rem !important;
	}

	.portfolio-grid__item .project-cats {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Never leave one small homepage card hanging on its own row.
   If a 2-big + 1-small remainder occurs, rebalance the last three as 2 + 1 + 1. */
@media (min-width: 1024px) {
	.portfolio-grid--home:has(> .portfolio-grid__item:last-child:nth-child(6n + 3))
	> .portfolio-grid__item:nth-last-child(2) {
		grid-column: span 1 !important;
	}

	.portfolio-grid--home:has(> .portfolio-grid__item:last-child:nth-child(6n + 3))
	> .portfolio-grid__item:last-child {
		grid-column: span 1 !important;
	}
}

/* Homepage Portfolio label: slightly larger. */
.home .home-portfolio-heading {
	font-size: clamp(1.1rem, 1.7vw, 1.6rem) !important;
}

/* If the final desktop row contains exactly two small cards, let them fill it. */
@media (min-width: 1024px) {
	.portfolio-grid--home:has(> .portfolio-grid__item:last-child:nth-child(6n + 4))
	> .portfolio-grid__item:nth-last-child(2),
	.portfolio-grid--home:has(> .portfolio-grid__item:last-child:nth-child(6n + 4))
	> .portfolio-grid__item:last-child {
		grid-column: span 2 !important;
	}
}

/* Medium-width layouts: when the grid is two columns, make both cards fully occupy
   the available row width and let the images stretch with their columns. */
@media (min-width: 640px) and (max-width: 1023px) {
	.portfolio-grid--home,
	.portfolio-grid--archive {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		width: 100% !important;
	}

	.portfolio-grid--home .portfolio-grid__item,
	.portfolio-grid--archive .portfolio-grid__item {
		grid-column: span 1 !important;
		width: 100% !important;
	}

	.portfolio-grid__item .project-image,
	.portfolio-grid__item .project-image img {
		width: 100% !important;
	}
}


/* Portfolio index: editorial grid for category and project links. */
.portfolio-index > .wp-block-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2.5rem, 5vw, 5rem) var(--editorial-gap);
	margin: clamp(2.5rem, 5vw, 4.5rem) 0;
	padding: 0;
	list-style: none;
}

.portfolio-index > .wp-block-list > li {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.portfolio-index > .wp-block-list > li:has(> ul) {
	grid-column: 1 / -1;
}

.portfolio-index > .wp-block-list > li > a {
	display: inline-block;
	color: var(--color-foreground);
	font-size: clamp(1.3rem, 2.2vw, 2rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.025em;
	text-decoration: none;
}

.portfolio-index > .wp-block-list > li > a:hover,
.portfolio-index > .wp-block-list > li > a:focus-visible {
	color: var(--color-muted);
}

.portfolio-index > .wp-block-list > li > ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 var(--editorial-gap);
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.portfolio-index > .wp-block-list > li > ul > li {
	min-width: 0;
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid color-mix(in srgb, var(--color-muted) 35%, transparent);
	list-style: none;
}

.portfolio-index > .wp-block-list > li > ul a {
	display: block;
	color: var(--color-foreground);
	line-height: 1.35;
	text-decoration: none;
}

.portfolio-index > .wp-block-list > li > ul a:hover,
.portfolio-index > .wp-block-list > li > ul a:focus-visible {
	color: var(--color-muted);
}

.portfolio-index a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media (max-width: 767px) {
	.portfolio-index > .wp-block-list,
	.portfolio-index > .wp-block-list > li > ul {
		grid-template-columns: 1fr;
	}

	.portfolio-index > .wp-block-list {
		gap: 2.25rem;
	}
}


/* Portfolio preview cards: featured images resolved from the linked projects. */
.portfolio-index > .wp-block-list > li > ul {
	align-items: start;
	row-gap: clamp(2.25rem, 4vw, 4rem);
}

.portfolio-index > .wp-block-list > li > ul > li.portfolio-index__project {
	padding: 0;
	border-top: 0;
}

.portfolio-index__project > a {
	display: block;
	color: var(--color-foreground);
	text-decoration: none;
}

.portfolio-index__preview {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #111;
}

.portfolio-index__preview .portfolio-index__image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	object-fit: cover;
	transition: opacity .2s ease;
}

.portfolio-index__title {
	display: block;
	padding-top: .8rem;
	font-size: clamp(.95rem, 1.25vw, 1.1rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -.015em;
}

.portfolio-index__project > a:hover .portfolio-index__image,
.portfolio-index__project > a:focus-visible .portfolio-index__image {
	opacity: .8;
}

@media (max-width: 767px) {
	.portfolio-index__preview {
		aspect-ratio: 16 / 10;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-index__preview .portfolio-index__image {
		transition: none;
	}
}


/* Complete portfolio category grids. */
.portfolio-intro {
	max-width: 62ch;
	margin-bottom: clamp(4rem, 8vw, 8rem);
}

.portfolio-categories {
	display: grid;
	gap: clamp(6rem, 11vw, 11rem);
}

.portfolio-category__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: 1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--color-muted) 35%, transparent);
}

.portfolio-category__header h2 {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 3rem) !important;
}

.portfolio-category__header h2 a {
	color: var(--color-foreground);
	text-decoration: none;
}

.portfolio-category__header p {
	flex: 0 0 auto;
	margin: 0;
	color: var(--color-muted);
	font-size: .9rem;
}

.portfolio-preview-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2.5rem, 5vw, 5rem) var(--editorial-gap);
	align-items: start;
}

.portfolio-preview-card {
	display: block;
	min-width: 0;
	color: var(--color-foreground);
	text-decoration: none;
}

.portfolio-preview-card:hover .portfolio-index__image,
.portfolio-preview-card:focus-visible .portfolio-index__image {
	opacity: .8;
}

.portfolio-preview-card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media (min-width: 640px) and (max-width: 1023px) {
	.portfolio-preview-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.portfolio-category__header {
		display: block;
	}

	.portfolio-category__header p {
		margin-top: .6rem;
	}

	.portfolio-preview-grid {
		grid-template-columns: 1fr;
	}
}

.portfolio-category__more {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.portfolio-category__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	font-weight: 500;
	color: var(--color-foreground);
	text-decoration: none;
	letter-spacing: -0.01em;
	transition: opacity 0.15s ease;
}

.portfolio-category__more-link:hover,
.portfolio-category__more-link:focus-visible {
	opacity: 0.7;
	text-decoration: underline;
	text-underline-offset: 4px;
}