/* === CONTAINER === */
.showcase-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 40px;
padding: 0;
margin: 40px 0;
list-style: none;
}

/* === CARD === */
.showcase-item {
display: flex;
flex-direction: column;
color: #444;
font-size: 13px;
line-height: 1.6;
transition: transform 0.25s ease;
}

.showcase-item h3 {
font-weight:550;
text-decoration: none;
}

.showcase-item h3:hover {
text-decoration: underline;
color: #15456b;
}

.showcase-item:hover {
transform: translateY(-5px);
}

/* === LINK WRAPPER === */
.showcase-item > a {
position: relative;
display: block;
text-decoration: none;
color: inherit;
overflow: hidden;
border-radius: 6px;
}

/* === OVERLAY TEXT === */
.hover-title {
position: absolute;
inset: 0;

display: flex;
align-items: center;
justify-content: center;

color: #fff;
font-size: 12px;
letter-spacing: 6px;
font-weight: 600;

opacity: 0;
transition: opacity 0.35s ease;

z-index: 2;
pointer-events: none;
}

/* show on hover */
.showcase-item:hover .hover-title {
opacity: 1;
}

/* === IMAGE (ADD FILTER TRANSITION) === */
.showcase-item img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}

/* === HOVER EFFECTS (UNIFIED TRIGGER) === */
.showcase-item:hover img {
transform: scale(1.05);
filter: brightness(0.75);
}

/* === OVERLAY === */
.showcase-item:hover > a::after {
opacity: 1;
}

/* === DESCRIPTION TEXT === */
.showcase-item {
margin-top: 6px;
}

/* === INLINE LINKS (UNCHANGED) === */
.showcase-item a:not(:first-child) {
color: #15456b;
text-decoration: none;
}

.showcase-item a:not(:first-child):hover {
text-decoration: underline;
}

/* === SPACING === */
.showcase-item > *:not(a:first-child) {
padding-left: 4px;
padding-right: 4px;
}

/* === MOBILE: RESTORE NATURAL IMAGE RATIO === */
@media (max-width: 640px) {
.showcase-item img {
height: auto;
aspect-ratio: auto;
}
.showcase-item:hover img {
	transform: none;
	filter: none;
}
}