/* Related Projects — Grid of nearby project cards on detail pages
   Reuses proj-section--compact card markup from all-projects.css
   with heavy overrides to fit 6 uniform cards in a tight grid.
   Uses !important where needed to beat base project-gallery.css specificity. */

.related-projects {
    background: #fff;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.related-projects__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.4px;
    text-align: center;
    padding: clamp(40px, 5vw, 64px) var(--container-padding) clamp(24px, 3vw, 40px);
    margin: 0;
}

.related-projects__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(14px, 1.4vw, 22px);
    padding: 0 clamp(16px, 2vw, 32px) clamp(40px, 5vw, 64px);
}


/* ══════════════════════════════════════════════════
   CARD OVERRIDES — pill family (map popup, project cards, contact buttons,
   tracks cards, projects carousel): white bg, 0.5px hairline warm-gray border,
   18px radius, layered soft shadow, house motion curve on hover lift.
   ══════════════════════════════════════════════════ */

/* Card — switch from grid to flex column for reliable stretching */
.related-projects__grid .proj-section.proj-section--compact {
    display: flex !important;
    flex-direction: column !important;
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.related-projects__grid .proj-section.proj-section--compact:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Remove tick marks */
.related-projects__grid .proj-section.proj-section--compact::after {
    display: none;
}

/* ── Image — always on top, fixed uniform height ── */
.related-projects__grid .proj-section__images {
    order: -1 !important;
    flex-shrink: 0;
}

.related-projects__grid .proj-section__drawing {
    width: 100%;
    overflow: hidden;
}

.related-projects__grid .proj-section__drawing::before {
    display: none !important;
}

.related-projects__grid .proj-section__film-strip,
.related-projects__grid .proj-section__film-strip::before,
.related-projects__grid .proj-section__film-strip::after {
    min-width: 0 !important;
}

.related-projects__grid .proj-section__film-strip {
    width: 100%;
}

.related-projects__grid .proj-section__film-track {
    padding: 0 !important;
    gap: 0 !important;
    width: 100%;
}

.related-projects__grid .proj-section__thumb {
    display: none !important;
}

.related-projects__grid .proj-section__hero-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    border-radius: 0 !important;
    flex-shrink: 0;
}

.related-projects__grid .proj-section__hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}


/* ── Info area — stretches to fill remaining card height ── */
.related-projects__grid .proj-section__info {
    display: flex !important;
    flex: 1 !important;
    padding: 16px 20px clamp(48px, 6vw, 80px) !important;
    border-right: none !important;
    border-left: none !important;
    border-top: 0.5px solid #d0d0cc;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* Hide number badge */
.related-projects__grid .proj-section__number {
    display: none !important;
}

/* Text wrapper — flex column that fills full height, pushes CTA to bottom */
.related-projects__grid .proj-section__text {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100%;
    gap: clamp(20px, 2.5vw, 32px);
}

/* Sector tag — always present, use min-height for alignment even when empty */
.related-projects__grid .proj-section__sector {
    font-size: clamp(0.6rem, 0.5vw + 0.3rem, 0.7rem);
    margin-bottom: 4px;
    min-height: 14px;
    display: block;
}

/* Name + description — clamp to 3 lines for uniform height */
.related-projects__grid .proj-section__inline {
    font-size: clamp(1rem, 1vw + 0.5rem, 1.15rem);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hide meta row at 6-col */
.related-projects__grid .proj-section__meta {
    display: none !important;
}

/* CTA button — pinned to bottom with breathing room above */
.related-projects__grid .proj-section__cta {
    font-size: clamp(0.85rem, 0.6vw + 0.4rem, 0.95rem) !important;
    padding: 10px 20px !important;
    gap: 8px !important;
    margin-top: auto !important;
    flex-shrink: 0;
}


.related-projects__grid .proj-section__cta:hover {
    gap: 12px !important;
}

.related-projects__grid .proj-section__cta svg {
    width: 14px;
    height: 14px;
}

/* Flipped variant — same layout */
.related-projects__grid .proj-section--compact.proj-section--flipped .proj-section__info {
    border-left: none !important;
}


/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

/* 3 columns */
@media (max-width: 1400px) {
    .related-projects__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .related-projects__grid .proj-section__meta {
        display: flex !important;
    }

    .related-projects__grid .proj-section__inline {
        -webkit-line-clamp: 4;
    }
}

/* 2 columns */
@media (max-width: 900px) {
    .related-projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: horizontal marquee — cards lay out in a single scrollable
   flex row instead of stacking vertically. Touch-swipe carousel, each
   card snaps into view, and only one-and-a-bit cards are visible at
   once so the section stays compact regardless of how many projects
   are in the related list. */
@media (max-width: 768px) {
    .related-projects__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        gap: 12px;
        padding: 0 16px clamp(40px, 5vw, 64px);
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .related-projects__grid::-webkit-scrollbar {
        display: none;
    }

    .related-projects__grid .proj-section.proj-section--compact {
        flex: 0 0 78%;
        max-width: 78%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Tighten internal sizing so a card slot fits comfortably on phone */
    .related-projects__grid .proj-section__hero-wrap {
        aspect-ratio: 4 / 3;
    }

    .related-projects__heading {
        font-size: 2rem;
    }

    .related-projects__grid .proj-section__inline {
        font-size: 1rem;
        -webkit-line-clamp: 3;
    }

    .related-projects__grid .proj-section__sector {
        font-size: 0.7rem;
    }

    .related-projects__grid .proj-section__cta {
        margin-top: auto !important;
        font-size: 0.9rem !important;
    }

    .related-projects__grid .proj-section__meta {
        display: none !important;
    }

    .related-projects__grid .proj-section__number {
        display: none !important;
    }
}