/* 08 — photography */
.photo__tools { margin-bottom: 18px; }

.photo__gallery { container-type: inline-size; }
.photo__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 3.8cqw; gap: 10px; }
.photo__tile { position: relative; padding: 0; border: 0; background: var(--sand-deep); border-radius: var(--r-m); overflow: hidden; cursor: pointer; display: block; min-width: 0; }
.photo__tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .2s var(--ease); }
.photo__tile:hover img, .photo__tile:focus-visible img { transform: scale(1.03); }
.photo__tile:focus-visible { outline-offset: 3px; }
.photo__hint { align-self: end; opacity: .65; grid-column: 11 / span 2; grid-row: 19 / span 3; }

.photo__tile--tower { grid-column: 1 / span 4; grid-row: 1 / span 3; }
.photo__tile--materials { grid-column: 1 / span 4; grid-row: 4 / span 4; }
.photo__tile--man { grid-column: 5 / span 5; grid-row: 1 / span 7; }
.photo__tile--man img { object-position: 55% 50%; }
.photo__tile--wall { grid-column: 10 / span 3; grid-row: 1 / span 7; }
.photo__tile--office { grid-column: 1 / span 6; grid-row: 8 / span 7; }
.photo__tile--sofa { grid-column: 7 / span 6; grid-row: 8 / span 7; }
.photo__tile--skyline { grid-column: 1 / span 5; grid-row: 15 / span 7; }
.photo__tile--villa { grid-column: 6 / span 3; grid-row: 15 / span 7; }
.photo__tile--villatall { grid-column: 9 / span 2; grid-row: 15 / span 7; }
.photo__tile--meeting { grid-column: 11 / span 2; grid-row: 15 / span 4; }

/* filtered view: a plain even grid, no gaps to fill */
.photo__grid.is-filtered { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 210px; }
.photo__grid.is-filtered .photo__tile { grid-column: auto; grid-row: auto; }
.photo__grid.is-filtered .photo__tile--wall,
.photo__grid.is-filtered .photo__tile--villatall { grid-row: span 2; }
.photo__grid.is-filtered .photo__tile--meeting { max-width: 260px; }

/* principles */
.photo__thumb { border-radius: var(--r-s); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand-deep); }
.photo__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.photo__note { margin-top: 18px; max-width: 760px; }

/* avoid cards */
.photo__avoid { align-items: stretch; }
.photo__av { display: flex; align-items: center; gap: 14px; min-height: 120px; font-size: var(--fs-body); }
.photo__x { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--alert); color: var(--white); display: grid; place-items: center; font-size: 14px; font-weight: 700; line-height: 1; }

/* page layout */
.photo__intro { max-width: 52em; margin-bottom: 22px; }
.photo__split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.photo__main { min-width: 0; }
.photo__aside { min-width: 0; position: sticky; top: calc(var(--bar) + 16px); }
.photo__aside .sub { margin-top: 0; }
.photo__aside .sub__head { margin-bottom: 14px; }
.photo__trait { display: grid; gap: 14px; align-content: start; }
.photo__trait p { font-size: var(--fs-body); }
.photo__link { margin-top: 22px; }
.photo__ph--ill { aspect-ratio: 4 / 3; }
.photo__banners { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 28px var(--gap); margin-top: 18px; }
.photo__banner { margin: 0; display: grid; gap: 8px; width: min-content; }
.photo__banner img { display: block; height: clamp(170px, 20vw, 280px); width: auto; max-width: none; }

/* lightbox */
.photo__lb { position: fixed; inset: 0; z-index: 80; background: rgba(16, 49, 66, .95); color: var(--sand); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 18px clamp(16px, 3vw, 40px) 22px; gap: 14px; }
.photo__lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.photo__lb-count { font-size: var(--fs-micro); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.photo__lb-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 2vw, 24px); min-height: 0; }
.photo__lb-fig { display: grid; place-items: center; min-height: 0; height: 100%; }
.photo__lb-fig img { max-width: 100%; max-height: calc(100vh - 190px); width: auto; height: auto; border-radius: var(--r-m); object-fit: contain; }
.photo__lb-cap { font-size: var(--fs-small); text-align: center; max-width: 52em; margin: 0 auto; }
.photo__lb .icon-btn { color: var(--sand); }

@media (max-width: 1000px) {
  .photo__split { grid-template-columns: minmax(0, 1fr); }
  .photo__aside { position: static; }
  .photo__traits { max-width: 520px; }
}
@media (max-width: 720px) {
  .photo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 30cqw; }
  .photo__grid .photo__tile { grid-column: auto; grid-row: auto; }
  .photo__grid .photo__tile.photo__wide { grid-column: 1 / -1; grid-row: span 2; }
  .photo__grid .photo__tile.photo__wide.photo__short { grid-row: span 1; }
  .photo__grid .photo__tile.photo__tall { grid-row: span 2; }
  .photo__grid .photo__tile--meeting { grid-row: span 1; }
  .photo__hint { grid-column: 1 / -1; grid-row: auto; align-self: center; }
  .photo__grid.is-filtered { grid-auto-rows: 52cqw; }
  .photo__grid.is-filtered .photo__tile.photo__wide { grid-row: auto; }
  .photo__grid.is-filtered .photo__tile.photo__wide { grid-column: auto; }
  .photo__lb-main { grid-template-columns: minmax(0, 1fr); }
  .photo__lb-main .icon-btn { display: none; }
}