/* =====================================================================
   Papaya HR — photo watermarks
   ---------------------------------------------------------------------
   Shared by every page: index, about, subscribe and the 404. Edit the
   values here once and the whole site follows. Markup pattern:

     <section class="bg-photo photo-2" style="--photo-pos: right 30%;">
     <section class="hero-dark bg-photo bg-photo-dark photo-1">

   bg-photo       turns a section into a watermarked panel
   bg-photo-dark  variant for the dark ink panels
   bg-photo-flip  mirrors the scrim, so the clear side alternates
   photo-N        which photograph the slot gets (dealt by watermarks.js)

   Per-section tuning is done inline with --photo-pos and --photo-opacity.
   ===================================================================== */
.bg-photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

    /* The photograph itself */
    .bg-photo::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -2;
        background-image: var(--photo);
        background-size: cover;
        background-position: var(--photo-pos, center);
        background-repeat: no-repeat;
        opacity: var(--photo-opacity, 0.10);
        filter: grayscale(100%) contrast(115%);
        pointer-events: none;
    }

    /* The scrim that keeps the copy legible */
    .bg-photo::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--photo-scrim, linear-gradient(100deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0.15) 100%));
        pointer-events: none;
    }

/* Dark panels: the photo reads as texture, warmed by the brand colour */
.bg-photo-dark::before {
    opacity: var(--photo-opacity, 0.42);
    filter: grayscale(100%) contrast(125%) brightness(115%);
}

.bg-photo-dark::after {
    background: var(--photo-scrim, linear-gradient(100deg, rgba(65,63,64,0.93) 0%, rgba(65,63,64,0.74) 50%, rgba(65,63,64,0.52) 100%));
}

/* Mirror the scrim so the clear side alternates down the page */
.bg-photo-flip::after {
    background: var(--photo-scrim, linear-gradient(260deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0.15) 100%));
}

.bg-photo-dark.bg-photo-flip::after {
    background: var(--photo-scrim, linear-gradient(260deg, rgba(65,63,64,0.93) 0%, rgba(65,63,64,0.74) 50%, rgba(65,63,64,0.52) 100%));
}

/* Narrow screens: the copy fills the width, so wash the whole panel evenly */
@media (max-width: 767px) {
    .bg-photo::after {
        background: rgba(255,255,255,0.88);
    }

    .bg-photo-dark::after {
        background: rgba(65,63,64,0.88);
    }

    .bg-photo::before {
        opacity: 0.08;
    }

    .bg-photo-dark::before {
        opacity: 0.18;
    }
}