/**
 * Portfolio lookbook singles (Batch D).
 * Scoped to body.filia-page-portfolio.
 */

.filia-page-portfolio {
	--filia-pf-bg: #f3f1ed;
	--filia-pf-ink: #1a1917;
	--filia-pf-ink-soft: #5c5852;
	--filia-pf-champagne: #c4a882;
	--filia-pf-white: #faf9f7;
	--filia-pf-font-display: "Bodoni Moda", Georgia, serif;
	--filia-pf-font-ui: "Outfit", sans-serif;
	font-family: var(--filia-pf-font-ui);
	font-weight: 300;
	color: var(--filia-pf-ink);
	background:
		radial-gradient(ellipse 70% 40% at 50% 0%, rgba(196, 168, 130, 0.1), transparent 55%),
		linear-gradient(180deg, var(--filia-pf-bg) 0%, #ebe8e2 50%, var(--filia-pf-bg) 100%);
}

.filia-page-portfolio .filia-site,
.filia-page-portfolio .filia-main {
	background: transparent;
}

.filia-page-portfolio .filia-main {
	padding-top: 0;
}

/* Opaque: sticky header, so a transparent fill lets gallery images scroll under the nav. */
.filia-page-portfolio .filia-header {
	background: var(--filia-pf-bg);
	color: var(--filia-pf-ink);
}

.filia-page-portfolio .filia-header__inner {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.filia-page-portfolio .filia-header__left a,
.filia-page-portfolio .filia-header__right a,
.filia-page-portfolio .filia-drop-down > .filia-menu > li > a {
	color: var(--filia-pf-ink) !important;
	font-family: var(--filia-pf-font-ui);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

.filia-page-portfolio .filia-logo img,
.filia-page-portfolio .filia-logo .custom-logo {
	filter: none;
	max-height: 36px;
}

.filia-page-portfolio .filia-mobile-toggle__bar {
	background: var(--filia-pf-ink) !important;
}

.filia-page-portfolio .filia-mobile-nav {
	background: var(--filia-pf-bg);
}

.filia-page-portfolio .filia-mobile-nav .filia-menu > li > a {
	color: var(--filia-pf-ink) !important;
	font-family: var(--filia-pf-font-ui);
}

.filia-page-portfolio .filia-footer {
	background: #1a1917;
	color: var(--filia-pf-white);
	margin-top: 4rem;
}

.filia-page-portfolio .filia-footer,
.filia-page-portfolio .filia-footer a,
.filia-page-portfolio .filia-footer .filia-widget-title,
.filia-page-portfolio .filia-footer h6 {
	color: var(--filia-pf-white);
	font-family: var(--filia-pf-font-ui);
}

.filia-page-portfolio .filia-pf-section {
	width: min(1280px, calc(100% - 2.5rem));
	margin: 0 auto;
	padding: 7rem 0 3.5rem;
}

.filia-page-portfolio .filia-pf-header {
	text-align: center;
	margin-bottom: 2.75rem;
}

.filia-page-portfolio .filia-pf-kicker {
	margin: 0 0 0.75rem;
	font-family: var(--filia-pf-font-ui);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--filia-pf-champagne);
}

.filia-page-portfolio .filia-pf-title {
	margin: 0;
	font-family: var(--filia-pf-font-display);
	font-weight: 500;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	letter-spacing: 0.02em;
	line-height: 1.1;
	color: var(--filia-pf-ink);
}

.filia-page-portfolio .filia-pf-credits {
	width: min(42rem, 100%);
	margin: 1.25rem auto 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--filia-pf-ink-soft);
}

.filia-page-portfolio .filia-pf-credits p {
	margin: 0.35rem 0;
}

.filia-page-portfolio .filia-pf-gallery {
	column-count: 2;
	column-gap: 0.65rem;
}

.filia-page-portfolio .filia-pf-shot {
	break-inside: avoid;
	margin: 0 0 0.65rem;
	overflow: hidden;
	background: #e4e0d8;
}

.filia-page-portfolio .filia-pf-shot img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: top;
}

.filia-page-portfolio .filia-pf-empty {
	text-align: center;
	color: var(--filia-pf-ink-soft);
}

@media (min-width: 900px) {
	.filia-page-portfolio .filia-pf-gallery {
		column-count: 3;
		column-gap: 0.75rem;
	}

	.filia-page-portfolio .filia-pf-shot {
		margin-bottom: 0.75rem;
	}

	/* Winter (10 shots): slightly roomier 2-col feel via wider page already handled */
	.filia-page-portfolio .filia-pf-gallery[data-count="10"] {
		column-count: 2;
		width: min(980px, 100%);
		margin-inline: auto;
	}
}

@media (max-width: 599px) {
	.filia-page-portfolio .filia-pf-section {
		width: calc(100% - 1.5rem);
		padding-top: 6rem;
		padding-bottom: 2.5rem;
	}

	.filia-page-portfolio .filia-pf-gallery {
		column-count: 1;
		column-gap: 0;
	}

	.filia-page-portfolio .filia-pf-shot {
		margin-bottom: 0.5rem;
	}

	.filia-page-portfolio .filia-footer {
		margin-top: 2.5rem;
	}
}