/* Foto gallery (fotos_main.php + js/gallery.js). Dark stage, trip colours as accents. */

body.fx { background: #111; color: #e8e8e8; font-family: "Montserrat", sans-serif; }
.fx a { text-decoration: none; }
.fx-wrap { max-width: 1400px; margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------------ hero */
.fx-hero { margin-top: 52px; padding: 48px 0 32px; background-size: cover; background-position: center; color: #fff; }
.fx-hero h1 { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: clamp(28px, 5vw, 52px); margin: 8px 0; line-height: 1.1; }
.fx-sub { font-size: 15px; letter-spacing: 1px; opacity: .9; margin: 0 0 8px; }
.fx-lead { max-width: 640px; font-size: 16px; line-height: 1.5; opacity: .85; }
.fx-note { display: inline-block; background: #C60523; padding: 6px 12px; border-radius: 4px; }
.fx-crumbs { font-size: 13px; opacity: .8; display: flex; flex-wrap: wrap; gap: 6px; }
.fx-crumbs a:hover { text-decoration: underline; }

.fx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.fx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.fx-btn:hover { background: rgba(255,255,255,.2); }
.fx-btn-hi { background: #1F88CE; border-color: #1F88CE; }
.fx-btn-hi:hover { background: #3CC8DD; border-color: #3CC8DD; }

/* -------------------------------------------------------------- filter bar */
.fx-filter { position: sticky; top: 52px; z-index: 4; background: rgba(17,17,17,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #2a2a2a; }
.fx-tabs, .fx-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 16px; max-width: 1400px; margin: 0 auto; }
.fx-tabs::-webkit-scrollbar, .fx-chips::-webkit-scrollbar { display: none; }
.fx-chips { padding-top: 0; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.fx-tab, .fx-chip { flex: 0 0 auto; white-space: nowrap; color: #ddd; border-radius: 999px; }
.fx-tab { padding: 7px 14px; font-weight: 600; font-size: 14px; border: 1px solid #333; border-bottom: 3px solid var(--c, #888); }
.fx-tab small { font-weight: 400; opacity: .7; margin-left: 4px; }
.fx-chip { padding: 5px 12px; font-size: 13px; background: #1d1d1d; border: 1px solid #333; }
.fx-chip small { opacity: .6; margin-left: 2px; }
.fx-tab:hover, .fx-chip:hover { background: #2a2a2a; color: #fff; }
.fx-tab.is-active, .fx-chip.is-active { background: var(--c, #EC45B7); border-color: var(--c, #EC45B7); color: #fff; }
@media (max-width: 600px) { .fx-tab small { display: none; } }

/* ------------------------------------------------------------- sections */
.fx-main { padding: 8px 0 64px; }
.fx-sec, .fx-trip { margin-top: 32px; }
.fx-sec-head, .fx-trip-head { border-left: 4px solid var(--c, #1F88CE); padding: 2px 0 2px 12px; margin-bottom: 12px; }
.fx-sec-head h2, .fx-sec-head h3, .fx-trip-head h2 { font-family: "Montserrat", sans-serif; font-weight: 600; margin: 0; color: #fff; }
.fx-sec-head h2, .fx-trip-head h2 { font-size: 22px; }
.fx-sec-head h3 { font-size: 17px; }
.fx-sec-head p, .fx-trip-head p { margin: 2px 0 0; font-size: 13px; color: #aaa; }
.fx-sec-head a:hover, .fx-trip-head a:hover { color: #3CC8DD; }
.fx-trip-band { font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 600; margin: 40px 0 0; padding: 10px 14px; border-radius: 6px; background: var(--c); color: #fff; }

/* ------------------------------------------------------------- albums */
.fx-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
@media (max-width: 420px) { .fx-albums { grid-template-columns: repeat(2, 1fr); gap: 6px; } }
.fx-album { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: #222; display: block; }
.fx-album img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fx-album:hover img, .fx-album:focus-visible img { transform: scale(1.06); }
.fx-album-txt { position: absolute; inset: auto 0 0 0; padding: 28px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.85)); color: #fff; }
.fx-album-txt b { display: block; font-size: 15px; }
.fx-album-txt small { font-size: 12px; opacity: .85; }

/* ------------------------------------------- justified grid (keeps ratios) */
.jg { display: flex; flex-wrap: wrap; gap: 4px; --h: 210px; }
.jg::after { content: ""; flex-grow: 999999; }
.jg-small { --h: 150px; }
@media (max-width: 600px) { .jg { --h: 120px; gap: 3px; } .jg-small { --h: 100px; } }
.jg-item { position: relative; display: block; flex-grow: calc(var(--r) * 100); width: calc(var(--r) * var(--h)); background: #222; overflow: hidden; border-radius: 3px; }
.jg-item > i { display: block; padding-bottom: calc(100% / var(--r)); }
.jg-item > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.jg-cap { position: absolute; inset: auto 0 0 0; padding: 24px 8px 6px; font-size: 12px; line-height: 1.3; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.8)); opacity: 0; transition: opacity .25s; pointer-events: none; }
@media (hover: hover) {
  .jg-item:hover > img { transform: scale(1.04); }
  .jg-item:hover .jg-cap { opacity: 1; }
}
.jg-item:focus-visible { outline: 3px solid #3CC8DD; outline-offset: 2px; }

/* ------------------------------------------------------------ stories */
.fx-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fx-story { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 8px; background: #1b1b1b; border-top: 3px solid var(--c); color: #ddd; }
.fx-story:hover { background: #242424; }
.fx-story small { color: #999; font-size: 12px; }
.fx-story abbr { text-decoration: none; border: 1px solid #555; border-radius: 3px; padding: 0 4px; }
.fx-story b { color: #fff; font-size: 16px; }
.fx-story span { font-size: 14px; line-height: 1.45; }

/* -------------------------------------------------------------- pager */
.fx-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 48px; }
.fx-pager a { flex: 1; max-width: 48%; padding: 16px; border-radius: 8px; background: #1b1b1b; color: #fff; }
.fx-pager a:hover { background: #262626; }
.fx-pager small { display: block; color: #999; }
.fx-pager b { font-size: 18px; }
.fx-pager-next { text-align: right; margin-left: auto; }

/* ------------------------------------------------------ single foto page */
.fx-filter-top { margin-top: 52px; }
.fx-stage { padding: 16px 0 8px; background: #0a0a0a; }
.fx-foto figure { margin: 12px 0 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .fx-foto figure { grid-template-columns: 1fr; } }
.fx-foto-img { position: relative; display: flex; justify-content: center; background: #000; border-radius: 6px; overflow: hidden; }
.fx-foto-img img { display: block; width: 100%; max-width: 900px; height: auto; max-height: 78vh; object-fit: contain; }
.fx-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 20px; z-index: 1; }
.fx-nav:hover { background: rgba(31,136,206,.85); }
.fx-prev { left: 0; border-radius: 0 6px 6px 0; }
.fx-next { right: 0; border-radius: 6px 0 0 6px; }
.fx-foto h1 { font-family: "Montserrat", sans-serif; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.3; margin: 0 0 12px; }
.fx-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.fx-facts dt { color: #888; }
.fx-facts dd { margin: 0; }
.fx-facts a { color: #3CC8DD; }
.fx-license { font-size: 12px; color: #777; margin-top: 16px; }
.fx-license a { text-decoration: underline; }

/* ------------------------------------------------------------ lightbox */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.96); display: none; flex-direction: column; color: #eee; touch-action: pan-y; }
.lb.is-open { display: flex; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: 13px; color: #aaa; }
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 56px; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .2s; user-select: none; -webkit-user-drag: none; }
.lb-stage img.is-loading { opacity: .3; }
.lb-btn { background: rgba(255,255,255,.08); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255,255,255,.25); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 6px; }
.lb-next { right: 6px; }
.lb-cap { padding: 12px 16px 20px; max-width: 900px; margin: 0 auto; width: 100%; text-align: center; }
.lb-cap b { display: block; font-size: 16px; color: #fff; margin-bottom: 4px; }
.lb-cap small { color: #aaa; font-size: 13px; }
.lb-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
@media (max-width: 600px) {
  .lb-stage { padding: 0; }
  .lb-prev, .lb-next { display: none; }   /* swipe instead */
}
body.lb-lock { overflow: hidden; }