/* ============================================================
   H.HAUS — project.css
   Styles specific to project.html
   ============================================================ */

/* ---- Header: text left, cover right ---- */
.project-header {
    padding: clamp(48px, 7vw, 96px) var(--pad-x) clamp(40px, 5vw, 64px);
    max-width: var(--max-w);
    margin: var(--nav-h) auto 0;
    border-bottom: 1px solid var(--border);
}

.project-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}

.project-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.project-hero-cover {
    position: relative;
}

.project-cover-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.project-blurb {
    font-size: clamp(15px, 1.2vw, 17px);
    color: var(--dark-brown);
    line-height: 1.9;
    opacity: 0.85;
    margin-bottom: clamp(28px, 3vw, 40px);
}

.project-back {
    flex-direction: row-reverse;
}

/* ---- Gallery ---- */
.project-gallery-section {
    padding: clamp(48px, 6vw, 80px) var(--pad-x);
    max-width: var(--max-w);
    margin: 0 auto;
}

.project-gallery {
    columns: 2;
    column-gap: clamp(12px, 2vw, 24px);
}

.project-gallery-item {
    break-inside: avoid;
    margin-bottom: clamp(12px, 2vw, 24px);
    overflow: hidden;
}

.project-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s var(--ease-expo);
}

.project-gallery-item:hover img {
    transform: scale(1.02);
}

/* ---- Contact section ---- */
.project-contact {
    border-top: 1px solid var(--border);
}

.inline-link {
    color: var(--sand);
    border-bottom: 1px solid var(--border);
    padding-bottom: 1px;
    transition: border-color 0.3s, color 0.3s;
}

.inline-link:hover {
    color: var(--charcoal);
    border-color: var(--charcoal);
}

/* ---- Not found ---- */
.project-not-found {
    padding: clamp(80px, 15vw, 160px) var(--pad-x);
    max-width: var(--max-w);
    margin: var(--nav-h) auto 0;
    font-size: 16px;
    color: var(--mid-brown);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .project-hero {
        grid-template-columns: 1fr;
    }

    .project-hero-cover {
        order: -1;
    }

    .project-cover-img {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 640px) {
    .project-gallery {
        columns: 1;
    }
}