/* ---- PORTFOLIO (homepage section + /portfolio/ page) ---- */
/* Namespaced .blq-portfolio-* so nothing collides with .blq-gallery-* in components.css */

.blq-portfolio { position: relative; overflow: hidden; }

.blq-portfolio-ghost {
	position: absolute;
	top: -0.2em;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--blq-font-display);
	font-size: clamp(4rem, 14vw, 10rem);
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1px var(--blq-rule);
	white-space: nowrap;
	pointer-events: none;
	z-index: 0;
	line-height: 1;
}

.blq-portfolio .blq-container { position: relative; z-index: 1; }

.blq-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin-top: 2.5rem;
}

.blq-portfolio--page .blq-portfolio-grid { margin-top: 0; }

.blq-portfolio-tile {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 9 / 7;
	background: var(--blq-sand);
	box-shadow: 0 1px 2px rgba(58, 45, 38, 0.08);
	transition: transform var(--blq-dur) var(--blq-ease), box-shadow var(--blq-dur) var(--blq-ease);
}

.blq-portfolio-tile:hover,
.blq-portfolio-tile:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(58, 45, 38, 0.18);
}

.blq-portfolio-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--blq-dur) var(--blq-ease);
}

.blq-portfolio-tile:hover img,
.blq-portfolio-tile:focus-visible img { transform: scale(1.04); }

.blq-portfolio-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(46, 34, 28, 0.62) 0%, rgba(46, 34, 28, 0) 45%);
	pointer-events: none;
}

.blq-portfolio-caption {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 1;
	color: var(--blq-ink-invert);
	font-family: var(--blq-font-display);
	font-style: italic;
	font-size: clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight: 600;
	max-width: calc(100% - 4.5rem);
	line-height: 1.25;
}

.blq-portfolio-arrow {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--blq-gold);
	color: var(--blq-gold-deep);
	flex-shrink: 0;
	transition: background var(--blq-dur) var(--blq-ease), transform var(--blq-dur) var(--blq-ease);
}

.blq-portfolio-tile:hover .blq-portfolio-arrow,
.blq-portfolio-tile:focus-visible .blq-portfolio-arrow {
	background: var(--blq-coral);
	transform: scale(1.08);
}

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