/* Explain: Responsive layout helpers and gallery item styling. */
/* Gallery + timeline layout helpers */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid var(--border-color);
}

.gallery-item img { transition: transform 600ms ease; }
.gallery-item:hover img { transform: scale(1.06); }

.gallery-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--surface-color);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--secondary-color) 90%, transparent));
}

.process-line {
    position: relative;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .process-line { grid-template-columns: repeat(4, 1fr); }
    .process-line::before {
        content: "";
        position: absolute;
        top: 2.1rem;
        inset-inline: 3rem;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    }
}