/*
 * [ub_photos]: the gallery site's front page inside a WordPress page. Scoped
 * to .ub-photos, and taking the theme's own fonts. The layout follows
 * photos.unityboulder.hu: 120 thumbnails 1px apart in 8, 10, 12, 15 or 20
 * columns, all of which divide 120, so every row is full; then the cards.
 */
.ub-photos { display: flex; flex-direction: column; gap: 40px; }
.ub-photos-section { display: flex; flex-direction: column; gap: 14px; }
/* Small section headings: the theme's h2 is a large display size. */
.ub-photos .ub-photos-title { margin: 0; font-size: 1.25rem !important; line-height: 1.3; font-weight: 700; letter-spacing: 0; }

.ub-photos ul { list-style: none; margin: 0; padding: 0; }

.ub-photos-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
@media (min-width: 640px) { .ub-photos-strip { grid-template-columns: repeat(10, 1fr); } }
@media (min-width: 768px) { .ub-photos-strip { grid-template-columns: repeat(12, 1fr); } }
@media (min-width: 1024px) { .ub-photos-strip { grid-template-columns: repeat(15, 1fr); } }
@media (min-width: 1280px) { .ub-photos-strip { grid-template-columns: repeat(20, 1fr); } }
.ub-photos-strip li { margin: 0; aspect-ratio: 1; overflow: hidden; background: #f1f5f9; }
.ub-photos-strip a { display: block; width: 100%; height: 100%; }
.ub-photos-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.ub-photos-strip a:hover img { transform: scale(1.05); }

.ub-photos-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .ub-photos-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ub-photos-cards { grid-template-columns: repeat(3, 1fr); } }
.ub-photos-cards li { margin: 0; }
.ub-photos-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); color: inherit; text-decoration: none; transition: box-shadow .2s ease; }
.ub-photos-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
/* The theme underlines every link with a rule that outranks a plain class
   selector; a card is one link and reads as a card, so it is overruled here,
   inside this shortcode only. */
.ub-photos a, .ub-photos a:hover, .ub-photos a:focus, .ub-photos a span { text-decoration: none !important; }
.ub-photos-cover { position: relative; display: block; aspect-ratio: 40 / 21; background: #f1f5f9; overflow: hidden; }
.ub-photos-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ub-photos-card-text { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.ub-photos-card-title { font-weight: 700; font-size: 1.1em; }
.ub-photos-card-meta { font-size: .9em; opacity: .75; }

/*
 * [ub_photos_strip], the row of thumbnails under the header: one line of
 * squares with no gap, across the full width; what does not fit is cut off.
 * The side is --ub-strip-size, set by the shortcode's size attribute.
 */
.ub-photos-headstrip { --ub-strip-size: 48px; display: flex; height: var(--ub-strip-size); overflow: hidden; background: #f1f5f9; }
.ub-photos-headstrip span { flex: 0 0 var(--ub-strip-size); width: var(--ub-strip-size); height: var(--ub-strip-size); display: block; }
.ub-photos-headstrip img { width: var(--ub-strip-size); height: var(--ub-strip-size); object-fit: cover; display: block; transition: opacity .2s ease; }
.ub-photos-headstrip span:hover img { opacity: .8; }

/* The large preview of a hovered thumbnail (assets/js/ub-photos-hover.js). */
.ub-photos-preview { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 32px; pointer-events: none; }
.ub-photos-preview figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 80vw; max-height: 80vh; }
.ub-photos-preview-frame { position: relative; display: block; overflow: hidden; border-radius: 10px; box-shadow: 0 24px 60px rgba(15, 23, 42, .45); }
.ub-photos-preview-frame img { display: block; max-width: 80vw; max-height: calc(80vh - 2rem); width: auto; height: auto; object-fit: contain; }
.ub-photos-preview-frame .ub-photos-preview-large { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; opacity: 0; transition: opacity .15s ease; }
.ub-photos-preview-frame .ub-photos-preview-large.is-loaded { opacity: 1; }
.ub-photos-preview figcaption { background: rgba(15, 23, 42, .8); color: #fff; font-size: 14px; font-weight: 500; border-radius: 6px; padding: 2px 8px; }