/* =========================================================================
   Boat Promote Portfolio
   Design system: deep marine ink + muted brass. Fraunces display / Inter body.
   ========================================================================= */

.bpp {
	--bpp-ink:        #0B1E2D;
	--bpp-ink-2:      #0E2536;
	--bpp-panel:      #12293B;
	--bpp-panel-2:    #173347;
	--bpp-line:       rgba(200, 162, 87, 0.24);
	--bpp-line-soft:  rgba(224, 235, 240, 0.10);
	--bpp-brass:      #C8A257;
	--bpp-brass-lit:  #E0B15E;
	--bpp-foam:       #F3F6F7;
	--bpp-text:       #D6E1E7;
	--bpp-muted:      #8AA0AD;

	/* Element colours (overridable from Settings → Appearance) */
	--bpp-cat:            var(--bpp-brass);   /* category / eyebrow */
	--bpp-tag:            var(--bpp-muted);   /* tag chips */
	--bpp-tab-active-bg:  var(--bpp-brass);   /* active filter tab */
	--bpp-tab-active-tx:  var(--bpp-ink);
	--bpp-hover:          var(--bpp-foam);    /* filter/link hover */

	--bpp-radius:     14px;
	--bpp-shadow:     0 24px 60px -30px rgba(0, 0, 0, 0.75);
	--bpp-maxw:       1180px;
	--bpp-single-w:   var(--bpp-maxw);   /* centred content width on single pages */
	--bpp-card-title-size: 1.28em;       /* card title size */

	/* Button (overridable from Settings → Appearance) */
	--bpp-btn-bg:            transparent;
	--bpp-btn-text:          var(--bpp-foam);
	--bpp-btn-border:        var(--bpp-line);
	--bpp-btn-bg-hover:      rgba(200, 162, 87, 0.12);
	--bpp-btn-text-hover:    var(--bpp-brass-lit);
	--bpp-btn-border-hover:  var(--bpp-brass);

	/* Card surface — transparent/seamless by default; set a colour in
	   Settings → Appearance to give cards a solid background again. */
	--bpp-card-bg:  transparent;
	--bpp-card-pad: 0px;

	/* Base font size (overridable from Settings → Appearance) */
	--bpp-fs-base: 16px;

	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: var(--bpp-fs-base);
	color: var(--bpp-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.bpp *,
.bpp *::before,
.bpp *::after { box-sizing: border-box; }

.bpp-hide { display: none !important; }

/* --- Shared bits -------------------------------------------------------- */
.bpp .bpp-eyebrow {
	margin: 0 0 .9rem;
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--bpp-cat);
}
.bpp .bpp-eyebrow-light { color: var(--bpp-cat); }

.bpp .bpp-waterline {
	display: inline-block;
	width: 54px;
	height: 2px;
	background: linear-gradient(90deg, var(--bpp-brass), transparent);
}

/* Brass outline button + arrow */
.bpp .bpp-btn {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .72em 1.35em;
	font-family: "Inter", sans-serif;
	font-size: .82em;
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--bpp-btn-text);
	background: var(--bpp-btn-bg);
	border: 1px solid var(--bpp-btn-border);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.bpp .bpp-btn svg { transition: transform .25s ease; }
.bpp .bpp-btn:hover {
	border-color: var(--bpp-btn-border-hover);
	background: var(--bpp-btn-bg-hover);
	color: var(--bpp-btn-text-hover);
}
.bpp .bpp-btn:hover svg { transform: translateX(3px); }
.bpp .bpp-btn:focus-visible {
	outline: 2px solid var(--bpp-brass-lit);
	outline-offset: 3px;
}
.bpp .bpp-btn-disabled,
.bpp .bpp-btn-disabled:hover {
	color: var(--bpp-muted);
	border-color: var(--bpp-line-soft);
	background: transparent;
	cursor: not-allowed;
}

/* Responsive 16:9 media frame (videos) */
.bpp .bpp-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--bpp-radius);
	overflow: hidden;
	background: #000;
	border: 1px solid var(--bpp-line-soft);
}
.bpp .bpp-video-frame iframe,
.bpp .bpp-video-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* Feature chips */
.bpp .bpp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}
.bpp .bpp-tags li {
	font-size: .68em;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bpp-tag);
	padding: .28rem .6rem;
	border: 1px solid var(--bpp-line-soft);
	border-radius: 999px;
}
.bpp .bpp-tags-light li {
	color: var(--bpp-foam);
	border-color: rgba(255, 255, 255, 0.24);
	background: rgba(11, 30, 45, 0.28);
	backdrop-filter: blur(4px);
}

/* =========================================================================
   GRID PAGE (shortcode)
   ========================================================================= */
.bpp.bpp-grid-wrap {
	max-width: var(--bpp-maxw);
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 4vw, 2rem);
	background: transparent;   /* only painted if a colour is set in Settings */
	border-radius: 22px;
}

.bpp .bpp-masthead { text-align: center; max-width: 660px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.bpp .bpp-masthead-title {
	font-family: "Fraunces", Georgia, serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-size: clamp(2.2rem, 6vw, 3.4rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: var(--bpp-foam);
	margin: 0 0 .35rem;
}
.bpp .bpp-masthead-sub {
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.05rem, 2.6vw, 1.4rem);
	color: var(--bpp-brass-lit);
	margin: 0 0 1.1rem;
}
.bpp .bpp-masthead .bpp-waterline { margin: 0 auto 1.1rem; display: block; width: 60px; }
.bpp .bpp-masthead-lede { color: var(--bpp-muted); font-size: .98em; margin: 0; }

.bpp .bpp-header-video { max-width: 900px; margin: 0 auto clamp(2.2rem, 5vw, 3rem); }

/* --- Filter bar --------------------------------------------------------- */
.bpp .bpp-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 0 auto clamp(1.6rem, 3.5vw, 2.4rem);
}
.bpp .bpp-filter-btn {
	font-family: "Inter", sans-serif;
	font-size: .74em;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bpp-muted);
	background: transparent;
	border: 1px solid var(--bpp-line-soft);
	border-radius: 999px;
	padding: .5rem 1rem;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.bpp .bpp-filter-btn:hover { color: var(--bpp-hover); border-color: var(--bpp-line); }
.bpp .bpp-filter-btn.is-active {
	color: var(--bpp-tab-active-tx);
	background: var(--bpp-tab-active-bg);
	border-color: var(--bpp-tab-active-bg);
}
.bpp .bpp-filter-btn:focus-visible { outline: 2px solid var(--bpp-brass-lit); outline-offset: 3px; }

/* --- Grid --------------------------------------------------------------- */
.bpp .bpp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.4vw, 1.6rem);
}
@media (max-width: 900px) { .bpp .bpp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bpp .bpp-grid { grid-template-columns: 1fr; } }

/* --- Card --------------------------------------------------------------- */
.bpp .bpp-card {
	display: flex;
	flex-direction: column;
	background: var(--bpp-card-bg);
	border-radius: var(--bpp-radius);
	overflow: hidden;
	transition: transform .3s ease;
}
.bpp .bpp-card:hover { transform: translateY(-4px); }

.bpp .bpp-card-media {
	position: relative;
	height: var(--bpp-card-img-h, auto);
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bpp-ink);
}
.bpp .bpp-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(.16,.68,.28,1);
}
.bpp .bpp-card-noimg {
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px),
		linear-gradient(180deg, var(--bpp-panel-2), var(--bpp-ink));
}
.bpp .bpp-card:hover .bpp-card-media img { transform: scale(1.06); }
.bpp .bpp-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(11, 30, 45, 0.55));
	pointer-events: none;
}
.bpp .bpp-card-index {
	position: absolute;
	top: .7rem;
	left: .85rem;
	z-index: 2;
	font-family: "Fraunces", serif;
	font-size: .95rem;
	font-weight: 600;
	color: var(--bpp-foam);
	opacity: .85;
	text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.bpp .bpp-soon-flag {
	position: absolute;
	top: .7rem;
	right: .7rem;
	z-index: 2;
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bpp-ink);
	background: var(--bpp-brass);
	padding: .3rem .6rem;
	border-radius: 999px;
}

.bpp .bpp-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.15rem var(--bpp-card-pad) 1.4rem;
}
.bpp .bpp-card-cat {
	margin: 0 0 .5rem;
	font-size: .66em;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bpp-cat);
}
.bpp .bpp-card-title {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
	font-size: var(--bpp-card-title-size);
	line-height: 1.15;
	color: var(--bpp-foam);
	margin: 0 0 .2rem;
}
.bpp .bpp-card-vessel {
	margin: 0 0 .9rem;
	font-style: italic;
	font-size: .92em;
	color: var(--bpp-brass-lit);
}
.bpp .bpp-card-pitch {
	margin: 0 0 1.3rem;
	font-size: .9em;
	color: var(--bpp-muted);
}
.bpp .bpp-card-foot { margin-top: auto; }
.bpp .bpp-card-foot .bpp-btn { width: 100%; justify-content: center; }

/* Coming-soon card treatment */
.bpp .bpp-card.is-soon { opacity: .72; }
.bpp .bpp-card.is-soon .bpp-card-media img { filter: grayscale(0.7) brightness(0.8); }
.bpp .bpp-card.is-soon:hover { transform: none; }
.bpp .bpp-card.is-soon:hover .bpp-card-media img { transform: none; }

/* --- Load more + states ------------------------------------------------- */
.bpp .bpp-loadmore-wrap { text-align: center; margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.bpp .bpp-loadmore,
.bpp .bpp-loadmore-gallery { padding-left: 2rem; padding-right: 2rem; }
.bpp .bpp-noresults { color: var(--bpp-muted); font-style: italic; }
.bpp .bpp-empty {
	text-align: center;
	color: var(--bpp-muted);
	padding: 2rem 1rem;
	border: 1px dashed var(--bpp-line-soft);
	border-radius: var(--bpp-radius);
}

/* =========================================================================
   SINGLE PORTFOLIO PAGE (standalone document)
   ========================================================================= */
.bpp.bpp-single {
	background: transparent;   /* only painted if a colour is set in Settings */
	color: var(--bpp-text);
}

/* Full-width break-out (CSS fallback; JS refines it precisely to avoid the
   scrollbar gap and to work inside centred theme containers). */
.bpp.bpp-single--full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: hidden;
}

/* Back-to-portfolio (bottom) */
.bpp .bpp-single-bottomnav {
	text-align: center;
	padding: clamp(1rem, 3vw, 2rem) 1.5rem clamp(2.6rem, 6vw, 4rem);
}
.bpp .bpp-back {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: .82em;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bpp-brass-lit);
}
.bpp .bpp-back svg { transition: transform .25s ease; }
.bpp .bpp-single-bottomnav .bpp-back:hover svg { transform: translateX(-3px); }

/* --- Banner ------------------------------------------------------------- */
.bpp .bpp-banner {
	position: relative;
	min-height: min(88vh, 760px);
	display: flex;
	align-items: flex-end;
	background-image: var(--bpp-banner-img);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.bpp .bpp-banner-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 20, 30, 0.30) 0%, rgba(8, 20, 30, 0.15) 40%, rgba(8, 20, 30, 0.88) 100%);
}
.bpp .bpp-banner-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--bpp-single-w);
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 4.5rem) clamp(1.2rem, 5vw, 2.5rem);
}
.bpp .bpp-banner-title {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
	font-size: clamp(2.4rem, 7vw, 5rem);
	line-height: 1.0;
	letter-spacing: -0.015em;
	color: var(--bpp-foam);
	margin: 0 0 .6rem;
	text-shadow: 0 2px 30px rgba(0,0,0,.4);
	max-width: 16ch;
}
.bpp .bpp-banner-date {
	font-size: .95em;
	letter-spacing: .04em;
	color: var(--bpp-foam);
	opacity: .9;
	margin: 0 0 1.1rem;
}
.bpp .bpp-banner .bpp-tags { margin-bottom: 1.6rem; }
.bpp .bpp-scrollcue {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bpp-foam);
	border: 1px solid rgba(255,255,255,.28);
	padding: .7rem 1.2rem;
	border-radius: 999px;
	transition: background .25s ease, border-color .25s ease;
}
.bpp .bpp-scrollcue:hover { background: rgba(200,162,87,.14); border-color: var(--bpp-brass); }
.bpp .bpp-scrollcue svg { animation: bpp-bob 1.8s ease-in-out infinite; }
@keyframes bpp-bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(3px);} }

/* --- Section heads ------------------------------------------------------ */
.bpp .bpp-section-head { text-align: center; margin: 0 auto clamp(1.4rem, 3vw, 2rem); }
.bpp .bpp-section-head .bpp-waterline { display: block; margin: 0 auto .8rem; width: 46px; }
.bpp .bpp-section-head h2 {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 500;
	font-style: italic;
	font-size: clamp(1.5rem, 4vw, 2.2rem);
	color: var(--bpp-foam);
	margin: 0;
}

/* --- Video section ------------------------------------------------------ */
.bpp .bpp-single-video {
	max-width: var(--bpp-single-w);
	margin: 0 auto;
	padding: clamp(2.8rem, 6vw, 4.5rem) clamp(1.2rem, 5vw, 2rem) 0;
}

/* --- Gallery ------------------------------------------------------------ */
.bpp .bpp-single-gallery {
	max-width: var(--bpp-single-w);
	margin: 0 auto;
	padding: clamp(2.8rem, 6vw, 4.5rem) clamp(1.2rem, 5vw, 2rem);
	scroll-margin-top: 20px;
}
.bpp .bpp-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(.5rem, 1.4vw, 1rem);
}
@media (max-width: 820px) { .bpp .bpp-photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bpp .bpp-photo-grid { grid-template-columns: 1fr; } }

.bpp .bpp-photo {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 10px;
	background: var(--bpp-panel);
	border: 1px solid var(--bpp-line-soft);
}
.bpp .bpp-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s cubic-bezier(.16,.68,.28,1);
}
.bpp .bpp-photo:hover img { transform: scale(1.05); }
.bpp .bpp-photo.is-hidden { display: none; }

/* Masonry layout — images shown at their natural aspect ratio */
.bpp .bpp-photo-grid.is-masonry {
	display: block;
	column-count: 3;
	column-gap: clamp(.5rem, 1.4vw, 1rem);
}
@media (max-width: 820px) { .bpp .bpp-photo-grid.is-masonry { column-count: 2; } }
@media (max-width: 520px) { .bpp .bpp-photo-grid.is-masonry { column-count: 1; } }
.bpp .bpp-photo-grid.is-masonry .bpp-photo {
	display: block;
	width: 100%;
	aspect-ratio: auto;
	height: auto;
	margin: 0 0 clamp(.5rem, 1.4vw, 1rem);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}
.bpp .bpp-photo-grid.is-masonry .bpp-photo img { height: auto; }

/* --- Footer ------------------------------------------------------------- */
.bpp .bpp-single-footer {
	text-align: center;
	padding: 3rem 1.5rem 3.5rem;
	border-top: 1px solid var(--bpp-line-soft);
	color: var(--bpp-muted);
	font-size: .82rem;
}
.bpp .bpp-backtotop {
	display: inline-block;
	margin-bottom: .8rem;
	color: var(--bpp-brass-lit);
	text-decoration: none;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .74rem;
	font-weight: 600;
}
.bpp .bpp-backtotop:hover { color: var(--bpp-foam); }

/* --- Not found ---------------------------------------------------------- */
.bpp .bpp-notfound { max-width: 560px; margin: 0 auto; padding: 22vh 1.5rem; text-align: center; }
.bpp .bpp-notfound h1 {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 500;
	color: var(--bpp-foam);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	margin: 0 0 1.5rem;
}

/* --- Accessibility / motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.bpp *,
	.bpp *::before,
	.bpp *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}