/*============================================================================
  Project gallery  (project-gallery.html)

  A filterable image grid backed by the theme's existing Magnific Popup
  lightbox. Everything is namespaced .rp-* so it cannot leak into the
  card-based .project-section on project.html, which shares the same
  stylesheet chain.
============================================================================*/

.recent-projects-section {
    background-color: #fff;
}

/* Intro paragraph under the section heading */
.rp-intro {
    max-width: 760px;
    margin: 18px auto 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.75;
}


/*---------------------------[ Breadcrumb trail ]---------------------------*/

/* The theme's trail is a single non-wrapping inline-flex row. This page's last
   crumb is long, so on narrow screens the items were squeezed until their
   labels broke mid-phrase and the separators no longer lined up. Let whole
   crumbs wrap onto the next line instead, centred and vertically aligned. */
.breadcrumb-wrapper .page-heading .breadcrumb-items-area .breadcrumb-items {
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    row-gap: 6px;
    text-align: center;
}

/* Keep each crumb whole - the row wraps between items, never inside one. */
.breadcrumb-wrapper .page-heading .breadcrumb-items-area .breadcrumb-items li {
    white-space: nowrap;
}

@media (max-width: 575px) {
    .breadcrumb-wrapper .page-heading .breadcrumb-items-area .breadcrumb-items {
        padding: 12px 16px;
    }

    .breadcrumb-wrapper .page-heading .breadcrumb-items-area .breadcrumb-items li {
        font-size: 13px;
    }
}


/*----------------------------[ Masonry grid ]------------------------------*/

/* Masonry: tiles keep each photo's own aspect ratio, so nothing is cropped -
   the set runs from phone portraits to wide signboard panoramas.

   Multi-column here is the no-JS fallback. The page script replaces it with
   real columns (.rp-ready) that it fills itself, because the browser's own
   column balancing overfills the first column and leaves a tall gap under
   another one. */
.rp-grid {
    margin-top: 42px;
    column-count: 3;
    column-gap: 26px;
}

.rp-grid.rp-ready {
    display: flex;
    align-items: flex-start;
}

.rp-col {
    flex: 1 1 0;
    min-width: 0;
}

.rp-col .rp-item {
    display: block;    /* no inline-block descender gap inside a real column */
}

.rp-col .rp-item:last-child {
    margin-bottom: 0;
}

.rp-item {
    position: relative;
    display: inline-block;    /* with width:100%, stops Safari splitting tiles */
    vertical-align: top;
    width: 100%;
    margin: 0 0 26px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    background-color: #f2f5f7;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(32, 64, 102, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.rp-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(32, 64, 102, 0.18);
}

.rp-item .rp-lightbox {
    display: block;
    position: relative;
    cursor: zoom-in;
}

.rp-thumb {
    display: block;
    overflow: hidden;
    line-height: 0;
}

/* Natural height - the intrinsic width/height on each <img> reserves the
   correct box before the file loads, so the columns do not re-pack. */
.rp-thumb img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}

.rp-item:hover .rp-thumb img {
    transform: scale(1.06);
}

/* Permanent scrim so the overlaid caption stays legible over bright photos.
   It eases back slightly on hover, letting more of the image through. */
.rp-item .rp-lightbox::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(13, 30, 51, 0) 48%,
                rgba(13, 30, 51, 0.42) 70%,
                rgba(13, 30, 51, 0.88) 100%);
    transition: opacity 0.35s ease;
}

.rp-item:hover .rp-lightbox::after {
    opacity: 0.88;
}

.rp-zoom {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
    color: var(--theme-color);
    font-size: 14px;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.35s ease;
}

.rp-item:hover .rp-zoom {
    opacity: 1;
    transform: translateY(0);
}


/*-------------------------[ Caption on the image ]-------------------------*/

/* Sits over the bottom of the photo. pointer-events:none so the whole tile,
   caption included, still opens the lightbox on click. */
.rp-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 22px 22px 20px;
    pointer-events: none;
}

.rp-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 55px;
    background-color: var(--theme-color);
    color: #fff;
    font-family: "Satoshi", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rp-item figcaption h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
    text-shadow: 0 1px 12px rgba(9, 20, 35, 0.55);
}

.rp-back {
    margin-top: 50px;
    text-align: center;
}


/*--------------------------[ Lightbox styling ]----------------------------*/

/* .mfp-fade is a Magnific Popup demo class, not part of the shipped CSS. */
.mfp-fade.mfp-bg {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.92;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

.rp-mfp .mfp-img {
    border-radius: 8px;
}

/* Caption is disabled in the popup config; collapse the empty title slot so
   it leaves no gap under the image. */
.rp-mfp .mfp-title {
    display: none;
}

.rp-mfp .mfp-counter {
    color: #b8c1cc;
    font-size: 13px;
}


/*-----------------------------[ Responsive ]-------------------------------*/

@media (max-width: 1199px) {
    .rp-grid {
        column-gap: 22px;
    }

    .rp-item {
        margin-bottom: 22px;
    }
}

@media (max-width: 991px) {
    .rp-grid {
        margin-top: 34px;
        column-count: 2;
    }

    /* Tiles never get a hover state on touch, so show the overlay affordances
       permanently at a lower strength instead of hiding them entirely. */
    .rp-zoom {
        opacity: 1;
        transform: none;
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

/* Phones keep two columns rather than dropping to one, so the gallery reads
   as a grid instead of a long single-file scroll. Tiles are roughly half the
   screen wide here, so the overlay text and controls scale down with them. */
@media (max-width: 575px) {
    .rp-grid {
        column-count: 2;
        column-gap: 14px;
    }

    .rp-item {
        margin-bottom: 14px;
        border-radius: 10px;
    }

    .rp-item figcaption {
        padding: 12px 12px 11px;
    }

    .rp-tag {
        margin-bottom: 6px;
        padding: 3px 8px;
        font-size: 9px;
        letter-spacing: 0.03em;
    }

    .rp-item figcaption h3 {
        font-size: 14px;
        line-height: 1.25;
    }

    .rp-zoom {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
}