/* ==========================================================================
   MD Focus Studio — gallery.css
   "Latest frames" (section#gallery): an editorial masonry rendered by js/gallery.js.
   Builds on the tokens and primitives in style.css (.wrap .label .line .shot .cap .btn-text .stars …);
   everything here is prefixed gallery__ / g-.
   ========================================================================== */

.gallery {
  --g-gap: clamp(26px, 4.2vw, 84px);   /* column gap */
  --g-row: clamp(52px, 6.4vw, 124px);  /* space under each frame */
  position: relative;
  padding-top: var(--section);
}
.gallery[hidden] { display: none; }

/* ---------- Head ---------- */
.gallery__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 28px; align-items: end;
}
.gallery__head .label { grid-column: 1 / -1; }
.gallery__title {
  grid-column: 1 / 9;
  font: 400 clamp(56px, 9.6vw, 184px)/.86 var(--serif); letter-spacing: -.03em; text-transform: uppercase;
  font-variation-settings: "opsz" 36;
}
.gallery__intro {
  grid-column: 9 / 13; max-width: 34ch; padding-bottom: .9vw;
  color: var(--fg-muted); transition: color .9s var(--ease);
}

.gallery__body { margin-top: clamp(56px, 7.5vw, 128px); }

/* ---------- Filters: thin underlined text buttons ---------- */
.gallery__filters {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(20px, 3vw, 56px);
  margin-bottom: clamp(32px, 3.6vw, 68px); padding-top: 6px;
  border-top: 1px solid var(--hair); transition: border-color .9s var(--ease);
}
.gallery__filters[hidden] { display: none; }
.gallery__filters-label {
  font: 500 10.5px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--fg-muted); transition: color .9s var(--ease);
}
.gallery__chips { display: flex; flex-wrap: wrap; column-gap: clamp(20px, 2.6vw, 46px); }
.g-filter {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 11px/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--fg-muted); transition: color .5s var(--ease);
}
.g-filter__label { position: relative; }
.g-filter__label::after {
  content: ""; position: absolute; left: 0; right: .24em; bottom: -7px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .7s var(--ease);
}
.g-filter__n {
  align-self: flex-start; margin: 11px 0 0 .55em;
  font: 500 9px/1 var(--sans); letter-spacing: .08em; font-variant-numeric: tabular-nums;
  color: var(--metal);
}
.g-filter:hover, .g-filter:focus-visible, .g-filter[aria-pressed="true"] { color: var(--fg); }
.g-filter:hover .g-filter__label::after,
.g-filter:focus-visible .g-filter__label::after { transform: scaleX(.4); transform-origin: left center; }
.g-filter[aria-pressed="true"] .g-filter__label::after { transform: scaleX(1); transform-origin: left center; }
.g-filter:focus-visible { outline-offset: 2px; }

/* ---------- Masonry ----------
   Phones: one column. 600px+: two CSS columns. 1680px+: three.
   js/gallery.js gives each visible frame a rhythm step (a–e) that varies its width,
   alignment and top offset, marks the first frame of every batch with [data-lead]
   (a deeper offset that staggers the columns), and closes each "Show more" batch
   with .gallery__break so earlier frames never move. */
.gallery__grid { position: relative; }
.g-item { display: block; break-inside: avoid; padding-bottom: var(--g-row); }
.g-item[hidden] { display: none; }
.g-item picture { display: contents; }
.g-item[data-broken] img { visibility: hidden; }
.g-item[data-broken] .shot__plx::after {
  content: "Сликата не е достапна"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 10px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--stone);
}
.g-item .cap { transition: color .6s var(--ease); }
.g-item .shot:focus-visible + .cap { color: var(--fg); }
@media (hover: hover) { .g-item .shot:hover + .cap { color: var(--fg); } }
.gallery__break { display: none; }

/* Rating line: photos with reviews or comments (published from the photo manager).
   Stars (.stars, style.css) + a count, set to the right of the caption, in its type. */
.g-item .cap { flex-wrap: wrap; align-items: baseline; row-gap: 6px; }
.g-item .cap .g-rating,
.g-item .cap .g-rating span { color: var(--fg-muted); transition: color .9s var(--ease); }
.g-rating { display: inline-flex; margin-left: auto; padding-left: 6px; }
.g-rating__vis { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.g-rating .g-rating__stars { --star: 9px; --star-gap: 2px; transform: translateY(-1px); }
.g-rating__n { font-variant-numeric: tabular-nums; }
/* style.css draws a hover hairline after caption spans (.cap span::after, meant for the frame
   number): keep it off the rating's spans, and give the star meter its own ::after back. */
.g-item .cap .g-rating::after,
.g-item .cap .g-rating__vis::after,
.g-item .cap .g-rating__n::after,
.g-item .cap .g-rating .sr-only::after { content: none; }
.g-item .cap .g-rating .stars::after {
  content: ""; height: auto; margin: 0; transition: none;
  width: calc((var(--star) * 5 + var(--star-gap) * 4) * var(--rating, 0) / 5);
  background: var(--metal-hi);
}
.theme-light .g-item .cap .g-rating .stars::after { background: var(--metal-ink); }
@media (forced-colors: active) { .g-item .cap .g-rating .stars::after { background: Highlight; } }

/* One column: large frames, alternating full width and inset */
.g-item[data-rhythm="b"] { width: 84%; margin-left: auto; }
.g-item[data-rhythm="d"] { width: 78%; }
.g-item[data-rhythm="e"] { width: 90%; margin-left: auto; }
.g-item[data-tall] { width: 80%; }

@media (min-width: 600px) {
  .gallery__grid { column-count: 2; column-gap: var(--g-gap); }
  .gallery__break { display: block; column-span: all; height: 0; }
  .g-item[data-rhythm="b"] { width: 72%; padding-top: clamp(0px, 4vw, 76px); }
  .g-item[data-rhythm="c"] { width: 88%; }
  .g-item[data-rhythm="d"] { width: 100%; padding-top: clamp(0px, 1.6vw, 30px); }
  .g-item[data-rhythm="e"] { width: 80%; padding-top: clamp(0px, 6vw, 116px); }
  .g-item[data-tall] { width: 62%; }
  .g-item[data-lead] { padding-top: clamp(0px, 9vw, 176px); }
}
@media (min-width: 1680px) {
  .gallery__grid { column-count: 3; }
  .g-item[data-rhythm="b"] { width: 78%; }
  .g-item[data-tall] { width: 70%; }
  .g-item[data-lead] { padding-top: clamp(0px, 6vw, 140px); }
}

/* Visible keyboard focus. Reveals leave an inline clip-path on .shot, which would clip
   a normal outline, so the ring is drawn inside the frame, above the image. */
.g-item .shot::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--metal-hi), inset 0 0 0 6px rgba(11, 11, 10, .45);
  opacity: 0; transition: opacity .3s var(--ease);
}
.g-item .shot:focus-visible { outline: none; }
.g-item .shot:focus-visible::before { opacity: 1; }

/* Frames shown by a filter or "Show more" open with the same mask reveal main.js gives the
   rest of the site (clip wipe, expo.inOut; inner zoom, expo.out), staggered. While running,
   these animations override the inline styles GSAP leaves on the frame. */
@keyframes g-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes g-zoom { from { transform: scale(1.3); } to { transform: none; } }
@keyframes g-cap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.g-item.is-entering { --g-d: calc(var(--g-i, 0) * 90ms); }
.g-item.is-entering .shot { animation: g-wipe 1.4s cubic-bezier(.87, 0, .13, 1) var(--g-d) both; }
.g-item.is-entering .shot__hover { animation: g-zoom 2s cubic-bezier(.16, 1, .3, 1) calc(var(--g-d) + .12s) both; }
.g-item.is-entering .cap { animation: g-cap .9s var(--ease) calc(var(--g-d) + .55s) both; }

/* ---------- Foot: tally + Show more ---------- */
.gallery__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  margin-top: calc(var(--g-row) * -.35); padding-top: 6px;
  border-top: 1px solid var(--hair); transition: border-color .9s var(--ease);
}
.gallery__foot[hidden] { display: none; }
.gallery__tally {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font: 500 11px/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--fg-muted); transition: color .9s var(--ease);
}
.gallery__tally-n { color: var(--fg); transition: color .9s var(--ease); }
.gallery__tally-bar {
  position: relative; width: clamp(48px, 8vw, 140px); height: 1px; margin-left: 6px;
  overflow: hidden; background: var(--hair);
}
.gallery__tally-bar i {
  position: absolute; inset: 0; background: var(--metal);
  transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 1.2s var(--ease);
}
.gallery__more { min-height: 44px; margin-left: auto; }
.gallery__more[hidden] { display: none; }

.gallery__noscript { max-width: 46ch; color: var(--fg-muted); }
.gallery__noscript a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .gallery__title { grid-column: 1 / -1; }
  .gallery__intro { grid-column: 1 / -1; max-width: 40ch; padding-bottom: 0; }
}
@media (max-width: 599px) {
  .gallery { --g-row: 56px; }
  .gallery__title { font-size: 18vw; }
  .gallery__body { margin-top: 48px; }
  .gallery__filters { flex-direction: column; align-items: flex-start; padding-top: 14px; }
  .gallery__filters-label { margin-bottom: 2px; }
  .gallery__foot { margin-top: -20px; column-gap: 16px; }
}
@media (max-width: 379px) {
  .gallery__tally-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .g-item.is-entering .shot, .g-item.is-entering .shot__hover, .g-item.is-entering .cap { animation: none; }
}

/* Windows High Contrast drops box-shadows and background fills: keep the ring and the marks */
@media (forced-colors: active) {
  .g-item .shot::before { box-shadow: none; border: 3px solid Highlight; }
  .g-filter__label::after, .gallery__tally-bar i { background: CanvasText; forced-color-adjust: none; }
}