/* ===========================================================
   UNAMIQ - Field Sense page
   Loaded last, after tokens -> base -> layout -> components.

   One thing is unique to this page: the pair of milestone
   photographs under ACHIEVED / Milestones. It lives here rather
   than in components.css because exactly one page uses it, which
   is the rule that file opens with. If a second project page
   ever wants a photo pair, move this block into components.css
   and add it to docs/templates/project-page.php.
=========================================================== */

/* ---------- two photographs at a shared height ----------
   The pair keeps each picture's own proportions and matches their
   heights, instead of forcing both into one frame: one is landscape
   and the other portrait, and cropping either to the other's shape
   cuts people out of the shot. Widths follow from the height, so
   the row lands at whatever total the two aspect ratios give. */

.project-photo-pair{
    display:flex;
    gap:18px;
    align-items:flex-start;

    margin-bottom:36px;
}

/* Border, glow, hover and scale all come from the shared framed-media
   block in components.css. Only the height is specific to this pair. */
.project-photo{
    height:clamp(190px, 26vw, 340px);
}

.project-photo picture{
    display:block;
    height:100%;
}

.project-photo img{
    height:100%;
    width:auto;
    display:block;
}

/* Below this width two photographs side by side are too small to
   read, so they stack and each takes the full measure. */
@media(max-width:700px){

    .project-photo-pair{
        flex-direction:column;
        gap:14px;
    }

    .project-photo{
        height:auto;
        width:100%;
    }

    .project-photo img{
        width:100%;
        height:auto;
    }

}