/*
 * Photo lightbox as a card (13 Nov 2026): the photo and its caption / "Return to…" button in one white, rounded box,
 * fairly tight, over the page dimmed with Vale navy at 70%. Used by every lightGallery lightbox on the site: the
 * Gallery block (blocks/gallery/view.js) and the landing page Photos block (assets/js/landing.js). Both switch it
 * on with the lightGallery options addClass: 'vale-lg-card', appendSubHtmlTo: '.lg-item' (the caption goes inside
 * each slide, next to the photo, instead of in a bar along the bottom of the screen) and zoomFromOrigin: false.
 * Loaded after lightgallery-bundle.css (functions.php), so these rules win over the old white-screen styling there.
 *
 * To roll back: remove those three options from the two scripts (or restore backups/lightbox-card-before/). This
 * file then matches nothing.
 *
 * How the card works without extra markup: each slide (.lg-item) becomes a one-column grid centred on the screen,
 * holding the photo's wrapper (.lg-img-wrap) and the caption (.lg-sub-html). The column is as wide as the photo;
 * the caption is told it has no width of its own (width:0; min-width:100%), so it wraps to the photo's width
 * instead of widening the card. Both are white: the photo's wrapper is the top of the card, the caption the bottom.
 */

/* The dimmed page. (addClass goes on the outermost .lg-container, so everything here is "inside" .vale-lg-card.) */
.vale-lg-card .lg-backdrop{background:rgba(23,43,58,.7)}

/* Each slide: a centred one-column grid. lightGallery shows the current and neighbouring slides with
   display:inline-block !important, so the same selectors (one class more specific) are needed to override it. */
.vale-lg-card .lg-outer.lg-css3 .lg-prev-slide,
.vale-lg-card .lg-outer.lg-css3 .lg-current,
.vale-lg-card .lg-outer.lg-css3 .lg-next-slide{display:grid !important}
.vale-lg-card .lg-outer .lg-item{grid-template-columns:auto;align-content:center;justify-content:center;padding:56px 80px 24px;box-sizing:border-box}
/* lightGallery's vertical-centring trick (an empty inline-block before the photo) would become a grid cell. */
.vale-lg-card .lg-outer .lg-item:before,
.vale-lg-card .lg-outer .lg-img-wrap:before{display:none}

/* Top of the card: the photo. */
.vale-lg-card .lg-outer .lg-img-wrap{position:relative;inset:auto;width:auto;height:auto;padding:12px 12px 0;background:#fff;border-radius:14px 14px 0 0;box-sizing:border-box}
.vale-lg-card .lg-outer .lg-object{display:block;border-radius:8px;
	/* Room for the toolbar above, the caption and button below (about 150px), some breathing space, and the arrows either side. */
	max-width:calc(100vw - 160px);max-height:calc(100vh - 260px);max-height:calc(100dvh - 260px)}

/* Bottom of the card: the caption and the "Return to…" button. Always there (the button is in every caption). */
.vale-lg-card .lg-outer .lg-item .lg-sub-html{position:static;width:0;min-width:100%;box-sizing:border-box;padding:12px 16px 14px;background:#fff;border-radius:0 0 14px 14px;color:#172b3a;white-space:normal;opacity:1;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.vale-lg-card .lg-outer .lg-img-wrap{box-shadow:0 0 60px rgba(0,0,0,.18)}
/* The old styling's 35px grey caption (with !important), sized for a white screen: smaller and navy in the card. */
.vale-lg-card .lg-outer.lg-components-open:not(.lg-zoomed) .lg-item .lg-sub-html p{margin:2px 0 4px;font-size:24px !important;line-height:1.3;color:#172b3a !important}
.vale-lg-card .lg-outer .lg-item .lg-sub-html a.btn.dark{margin:8px 6px 0}

/* Until the photo has loaded, the card stays hidden (lightGallery's loading spinner shows instead). */
.vale-lg-card .lg-outer .lg-item:not(.lg-complete) .lg-img-wrap,
.vale-lg-card .lg-outer .lg-item:not(.lg-complete) .lg-sub-html{visibility:hidden}

/* Zoomed in: just the photo, free of the card, so it can be dragged around. */
.vale-lg-card .lg-outer.lg-zoomed .lg-img-wrap{background:transparent;box-shadow:none}
.vale-lg-card .lg-outer.lg-zoomed .lg-item .lg-sub-html{visibility:hidden}

/* Arrows and toolbar icons: white on the navy (they were grey on white, turning navy when hovered). */
.vale-lg-card .lg-outer .lg-next,
.vale-lg-card .lg-outer .lg-prev,
.vale-lg-card .lg-outer .lg-toolbar .lg-icon{color:rgba(255,255,255,.8)}
.vale-lg-card .lg-outer .lg-next:hover,
.vale-lg-card .lg-outer .lg-prev:hover,
.vale-lg-card .lg-outer .lg-toolbar .lg-icon:hover,
.vale-lg-card .lg-outer .lg-share:hover{color:#fff !important}

/* Phones: the card nearly fills the width; the arrows sit over the photo's edges, on a dark disc so they show. */
@media (max-width:767px){
	.vale-lg-card .lg-outer .lg-item{padding:52px 12px 16px}
	.vale-lg-card .lg-outer .lg-img-wrap{padding:8px 8px 0;border-radius:12px 12px 0 0}
	.vale-lg-card .lg-outer .lg-object{max-width:calc(100vw - 40px);max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px);border-radius:6px}
	.vale-lg-card .lg-outer .lg-item .lg-sub-html{padding:10px 12px 12px;border-radius:0 0 12px 12px}
	.vale-lg-card .lg-outer.lg-components-open:not(.lg-zoomed) .lg-item .lg-sub-html p{font-size:19px !important}
	.vale-lg-card .lg-outer .lg-next,
	.vale-lg-card .lg-outer .lg-prev{width:40px;height:40px;padding:0;border-radius:50%;background:rgba(23,43,58,.55);font-size:22px;line-height:40px;text-align:center}
	.vale-lg-card .lg-outer .lg-next{right:16px}
	.vale-lg-card .lg-outer .lg-prev{left:16px}
}