/* The "Photo Albums" section's cards, shared by the landing page and a conference's page (the section is a
   programmatic content type that either page may place): moved here from homePage.xhtml's inline block so
   both load the same rules. */
/*
    Each album is a CARD: the title is a header bar fused to its own carousel, and the card's edge is what
    binds them -- before this, both floated on the page background, the title read as unanchored (and the
    NEXT album's title could be mistaken for a caption of the pictures ABOVE it), and a letterboxed
    portrait sat on nothing. The card owns the 560px cap (the galleria inside is width:100%), so the
    header and the media block can never disagree about width. overflow:hidden clips the galleria's
    square corners to the card radius. The surface color follows the pilgrimage accordion headers'
    translucent-light idiom -- the landing page composes over its background image in both site themes.
*/
/*
    The cards share a row when the column is wide enough (photoAlbums.xhtml wraps them in .homeAlbums). The
    main column tops out near 1068px, short of two 560px cards plus a gap, so a card may shrink to 400px:
    two per row from about an 824px column, one centered card below that, and a phone's narrower column
    still shrinks the one card to fit (min-width:0). Flex rather than an auto-fill grid so a lone album
    stays centered instead of sitting in the left track of two.
*/
.homeAlbums {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 24px;
    margin-bottom: 32px;
}
.homeAlbum {
    flex: 1 1 400px;
    min-width: 0;
    max-width: 560px;
    background: #FFFFFFB8;
    border: 1px solid #D9D9EA;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px #3C3C6E1A;
}
.homeAlbum h4 {
    text-align: center;
    margin: 0;
    padding: 10px 14px 9px 14px;
    border-bottom: 1px solid #E5E5F1;
}
/*
    A fixed stage, and the photo letterboxed inside it.

    The display renditions are all 800px WIDE, so a phone-shot portrait arrives 800x1422: the slide was over
    1400px tall, and paging from a landscape shot to a portrait one moved everything below by nearly 1000px.
    Sizing the stage instead of the picture makes every slide identical, which is what stops the jumping; a
    cap on the picture alone would still leave each slide a different height.

    object-fit:contain rather than cover because most of these are photos OF PEOPLE and the album runs about
    3:1 portrait -- cover would fill the stage by cropping a 9:16 shot down to its middle quarter, heads and
    all. Letterboxing wastes width on those, but nothing is hidden, and the full-size image is one click away
    in the shared viewer. The stage is 4:3 (420px tall on a full 560px card): a landscape shot fills it
    exactly and a portrait one letterboxes to 236-315px rather than stranding 280px of background on each
    side, which is what an 800px stage did. It is an aspect-ratio rather than a fixed height because the
    card's width now varies with the side-by-side layout above; a fixed 420px on a 506px card letterboxed
    every landscape shot. The vh cap keeps the stage off a short window.

    Anchors the shared viewer's comment-count badges too (position).
*/
.homeAlbum .ui-galleria-item {
    position: relative;
    aspect-ratio: 4 / 3;
    max-height: 60vh;
    /* A defined stage: letterboxed portraits sit in a deliberate dark frame instead of floating on the
       page background, and the frame is cohesive with the thumbnail strip's own dark surface below. */
    background: #17171D;
}
.homeAlbum .ui-galleria-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* An untitled photo's caption is empty (photoCaption answers "" for generated-filename titles); hide the
   bar rather than showing an empty black strip. Depends on the facet being written TIGHT (no whitespace
   text nodes) in photoAlbums.xhtml. NB this PrimeFaces version renders per-photo captions as
   .ui-galleria-caption-item inside a .ui-galleria-caption-items wrapper -- there is no bare
   .ui-galleria-caption element (verified against the live DOM).
   visibility, NEVER display:none: the caption items are a flex ROW of 100%-wide slots, one per photo, that
   PrimeFaces slides by translate3d(-100% * activeIndex) in step with the photos. Removing an empty slot from
   the row shifted every later caption left onto the wrong photo, and the album ran out of captions early
   (2026-10-26). A hidden slot keeps its width, paints no bar, and takes no clicks. */
.homeAlbum .ui-galleria-caption-item:empty {
    visibility: hidden;
}
/*
    The thumbnail strip is a fixed-size window onto a row that is translated sideways: every thumbnail of the
    album lives in it, and the items are flex:1 0 20% (shrink 0) so exactly five show. That makes the row's
    min-content width the sum of ALL thumbnails - ~1140px for a 19-photo album - and the main column is a
    flex item with the default min-width:auto, so that number became the column's minimum. The sidebar then
    wrapped underneath at ~1170px of viewport instead of staying beside the content until site.css hides it
    at 714px, which is what every other page does. Containment tells the strip to take its width from its
    parent and never from its contents; it already clips with overflow:hidden, so nothing else changes.
*/
.homeAlbum .ui-galleria-thumbnail-items-container {
    contain: inline-size;
}