/* ==========================================================================
   Heritage Crest Build — Project Showcase mosaic (polished)
   ========================================================================== */

:root {
    --pm-gold: #ac8d56;
    --pm-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.project-mosaic-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.project-mosaic-block {
    margin-bottom: 60px;
}
.project-mosaic-block:last-child { margin-bottom: 0; }

/* Screen-reader only heading — visual title now lives in the lead tile */
.pm-sr-title {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.pm-grid {
    display: grid;
    gap: 8px;
    aspect-ratio: 5 / 3;
}

/* 4-item layout — 1 large left, 3 stacked right */
.pm-grid--4 {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    aspect-ratio: 16 / 9;
}
.pm-grid--4 .pm-item:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; }
.pm-grid--4 .pm-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.pm-grid--4 .pm-item:nth-child(3) { grid-column: 2; grid-row: 2; }
.pm-grid--4 .pm-item:nth-child(4) { grid-column: 2; grid-row: 3; }

.pm-grid--3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 3 / 2;
}
.pm-grid--3 .pm-item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }

/* ---------- Tile base ---------- */
.pm-item {
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
    background: #1a1a1a;
    border-radius: 2px;
    transition: box-shadow 0.4s var(--pm-ease);
}

.pm-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--pm-ease),
                filter 0.5s var(--pm-ease);
    will-change: transform;
}

.pm-item:hover img {
    transform: scale(1.06);
}
.pm-item:hover { box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.45); }

/* Non-lead tiles get a darkening on hover so the magnifier glyph reads */
.pm-item:not(.pm-item--lead):hover img {
    filter: brightness(0.78);
}

/* ---------- Magnifier glyph on non-lead tiles ---------- */
.pm-zoom-glyph {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 54px; height: 54px;
    line-height: 54px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.85);
    border-radius: 50%;
    background: rgba(172, 141, 86, 0.35);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 22px;
    opacity: 0;
    transition: opacity 0.35s var(--pm-ease),
                transform 0.45s var(--pm-ease);
    pointer-events: none;
    z-index: 3;
}
.pm-item:not(.pm-item--lead):hover .pm-zoom-glyph {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ---------- Lead tile (project title overlay) ---------- */
.pm-item--lead {
    /* lead tile shouldn't darken its image, the gradient handles legibility */
}

.pm-lead-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0.35) 70%,
        rgba(0, 0, 0, 0.78) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: 28px 28px 26px;
    transition: background 0.4s var(--pm-ease);
    z-index: 2;
    pointer-events: none;
}

.pm-item--lead:hover .pm-lead-overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0) 25%,
        rgba(0, 0, 0, 0.45) 60%,
        rgba(0, 0, 0, 0.88) 100%
    );
}

.pm-lead-text { color: #fff; }

.pm-lead-eyebrow {
    display: inline-block;
    color: var(--pm-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 8px;
    position: relative;
    padding-left: 26px;
}
.pm-lead-eyebrow::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 1px;
    background: var(--pm-gold);
}

.pm-lead-title {
    display: block;
    color: #fff;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0;
    transform: translateY(0);
    transition: transform 0.4s var(--pm-ease);
}

.pm-item--lead:hover .pm-lead-title {
    transform: translateY(-4px);
}

.pm-lead-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 9px 16px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.55);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s var(--pm-ease) 0.05s,
                transform 0.35s var(--pm-ease) 0.05s,
                background 0.25s ease,
                border-color 0.25s ease;
}

.pm-item--lead:hover .pm-lead-cta {
    opacity: 1;
    transform: translateY(0);
    background: var(--pm-gold);
    border-color: var(--pm-gold);
}

.pm-lead-arrow {
    display: inline-block;
    transition: transform 0.3s var(--pm-ease);
}
.pm-item--lead:hover .pm-lead-arrow { transform: translateX(4px); }

/* ---------- "+N more" overlay (last visible tile) ---------- */
.pm-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.3s ease;
    z-index: 3;
    gap: 2px;
}
.pm-more-count {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.pm-more-label {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pm-gold);
    font-weight: 600;
}
.pm-item--more:hover .pm-more-overlay {
    background: rgba(10, 10, 10, 0.72);
}

/* Hide the small magnifier glyph on the "+N" tile (it's already a clear CTA) */
.pm-item--more .pm-zoom-glyph { display: none; }

/* Hidden anchors for gallery navigation only */
.pm-hidden { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .pm-grid--4 { aspect-ratio: 4 / 3; }

    .pm-lead-title { font-size: 22px; }
    .pm-lead-cta { font-size: 10px; padding: 7px 12px; }
    .pm-more-count { font-size: 22px; }
    .pm-zoom-glyph { width: 40px; height: 40px; line-height: 40px; font-size: 18px; }
    .project-mosaic-block { margin-bottom: 36px; }
}

/* ---------- Magnific-popup tweaks ---------- */
.mfp-bg { background: #050505; opacity: 0.96; }
.mfp-arrow { opacity: 0.65; transition: opacity 0.2s ease; }
.mfp-arrow:hover { opacity: 1; }
.mfp-counter { color: var(--pm-gold); font-size: 12px; letter-spacing: 0.1em; }
.mfp-image-holder .mfp-content { max-width: 1400px; }
.mfp-fade.mfp-bg.mfp-ready { opacity: 0.96; }

@media (prefers-reduced-motion: reduce) {
    .pm-item, .pm-item img,
    .pm-zoom-glyph,
    .pm-lead-overlay,
    .pm-lead-title,
    .pm-lead-cta,
    .pm-lead-arrow,
    .pm-more-overlay {
        transition: none !important;
    }
}