/* Vila Flamuri: the composed photo grid and the lightbox, loaded by every page that shows [data-gallery]. */

/* ---------- filters: native radios, one pill each ---------- */
.g-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 clamp(20px, 3vw, 32px); padding: 0; border: 0; min-width: 0; }
.g-filters legend { float: left; margin-right: 6px; color: var(--muted); font-weight: 700; }
.g-filter { position: relative; }
.g-filter input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.g-filter label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 1.5px solid var(--petrol); border-radius: var(--pill); color: var(--petrol); font-weight: 700; cursor: pointer; transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease); }
.g-filter input:checked + label { background: var(--petrol); color: var(--white); }
.g-filter input:focus-visible + label { outline: 3px solid var(--petrol); outline-offset: 3px; }
.g-filter__n { font-weight: 500; }
/* forced colours replace the fill that marks the checked pill, so the pill keeps a system Highlight fill;
   the outline stays reserved for focus, or the checked pill would look focused whether it is or not */
@media (forced-colors: active) {
  .g-filter input:checked + label { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .g-filter input:focus-visible + label { outline-color: CanvasText; }
}
/* without JavaScript every photograph shows in the first panel and the filters have nothing to switch */
html:not(.js) .g-filters { display: none; }
.g-panel[hidden] { display: none; }

/* ---------- the grid ----------
   Four columns, two below 860px. Row height is set from the panel's own width (container query units),
   never from the photographs, so a wide or a feature can never stretch its row: a tile is a square, a wide
   two columns by one row, a feature two by two. The layouts in data/gallery.json fill every row. */
.g-panel { container-type: inline-size; }
.g-grid { --g-gap: clamp(10px, 1.4vw, 16px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--g-gap); margin: 0; padding: 0; list-style: none; }
@supports (width: 1cqw) { .g-grid { grid-auto-rows: calc((100cqw - 3 * var(--g-gap)) / 4); } }
.g-item { position: relative; margin: 0; min-width: 0; }
.g-item--feature { grid-column: span 2; grid-row: span 2; }
.g-item--wide { grid-column: span 2; }
.g-link, .g-item picture { display: block; width: 100%; height: 100%; }
.g-item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.g-link { border-radius: var(--radius); }
.g-link:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
@media (hover: hover) { .g-link img { transition: filter var(--t-ui) var(--ease); } .g-link:hover img { filter: brightness(1.06); } }
/* before container query units: tiles and features keep their square from the photograph's own size */
@supports not (width: 1cqw) { .g-item--tile img, .g-item--feature img { height: auto; aspect-ratio: 1; } .g-item--wide img { height: auto; aspect-ratio: 2 / 1; } }
@media (max-width: 860px) {
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @supports (width: 1cqw) { .g-grid { grid-auto-rows: calc((100cqw - var(--g-gap)) / 2); } }
}
@media (max-width: 480px) { .g-item--tile .photo-cap { left: 6px; bottom: 6px; max-width: calc(100% - 12px); font-size: 0.74rem; } }
/* on a phone the three filters share one row: the legend is still read, not shown, and the pills are
   tighter. "Outside" alone on a second row read as a fourth, separate control. */
@media (max-width: 480px) {
  .g-filters { gap: 8px; }
  .g-filters legend { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .g-filter label { gap: 6px; padding: 8px 14px; }
}

/* ---------- the lightbox (gallery.js): one dialog per gallery, moved to <body> when the page loads ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; gap: 12px; padding: clamp(12px, 3vw, 40px); background: var(--lightbox-bg); opacity: 0; }
.lightbox.is-open { display: flex; opacity: 1; }
/* the phone's call bar steps aside while a photograph is open, as it does for the menu */
.lb-open .call-bar { display: none; }
.lightbox:focus { outline: none; }
.lightbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(1200px, 100%); }
.lightbox__img { width: auto; max-width: 94vw; max-height: 72vh; border-radius: var(--radius-sm); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); background: var(--petrol-deep); }
.lightbox__cap { color: var(--on-dark); font-size: 0.95rem; font-weight: 600; text-align: center; }
.lightbox__count { color: var(--on-dark-muted); font-weight: 500; }
.lb-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(240, 154, 120, 0.55); border-radius: var(--pill); background: rgba(14, 75, 87, 0.72); color: var(--on-dark); }
.lb-btn:hover { background: var(--petrol); }
.lb-btn .icon { width: 22px; height: 22px; }
.lb-close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
/* pinned to the edges, so the arrows stay put whatever the photograph's shape */
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: clamp(12px, 3vw, 40px); }
.lb-next { right: clamp(12px, 3vw, 40px); }
/* gallery.js (lightboxSize) sizes each photograph to exactly these limits, so change the two together: on a
   phone 94vw by 72vh, above 640px the width between the arrows by 80vh */
@media (min-width: 641px) { .lightbox__img { max-width: min(1200px, calc(100vw - 2 * (clamp(12px, 3vw, 40px) + 60px))); max-height: 80vh; } }
@media (max-width: 640px) {
  .lb-prev, .lb-next { top: auto; bottom: 20px; transform: none; }
  .lb-prev { left: calc(50% - 60px); }
  .lb-next { right: calc(50% - 60px); }
}