/* ACR Automobile - installation gallery component.
 *
 * WHY ITS OWN FILE
 * The .gal / .install-card grid is shared by the homepage "Recent
 * installations" section and the /our-work portfolio. Those two surfaces load
 * DIFFERENT base stylesheets - index.html loads home.css, every other page
 * loads site.css - and the two are parallel alternatives, not layers, so
 * neither can simply include the other. Putting the component here lets both
 * load it without duplicating the rules or pulling in a whole second base
 * stylesheet for one grid.
 *
 * The .ph child was a <photo-drop> when this lived in home.css. The generated
 * markup now uses a plain <img> so the cards can lazy-load and carry
 * dimensions; both selectors are kept so an authoring page using <photo-drop>
 * still renders identically.
 */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; gap: 16px; margin-top: clamp(48px, 6vw, 72px); }
.install-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-default); background: var(--surface-card); transition: border-color .3s, box-shadow .3s; }
.install-card.big { grid-column: span 2; grid-row: auto; }
.install-card:hover { border-color: var(--border-signal); box-shadow: var(--shadow-lg); }
.install-card .ph { position: relative; overflow: hidden; aspect-ratio: 16/9; background: var(--surface-deep, #0d1620); }
.install-card photo-drop, .install-card .ph img { --photo-fit: contain; }
.install-card.big .ph { aspect-ratio: 16/9; }
.install-card photo-drop, .install-card .ph img { width: 100%; height: 100%; display: block;
  /* photo-drop resolves this itself; a plain <img> has to read the same
     variable or the card crops where the original letterboxed. */
  object-fit: var(--photo-fit, cover); transition: transform .6s var(--ease-out); }
.install-card:hover photo-drop, .install-card:hover .ph img { transform: scale(1.05); }
.install-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px 18px; background: linear-gradient(0deg, rgba(15,23,32,.95) 8%, rgba(15,23,32,.4) 70%, transparent); z-index: 2; }
.install-card .cap .sys { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--signal-300); }
.install-card .cap h4 { font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 26px); letter-spacing: .02em; margin: 4px 0 0; color: #fff; }
.install-card .cap p { font-size: 12.5px; color: var(--platinum-300); line-height: 1.45; margin: 7px 0 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s var(--ease-out), opacity .35s var(--ease-out), margin .35s var(--ease-out); }
.install-card:hover .cap p { max-height: 80px; opacity: 1; }
.gal-more { text-align: center; margin-top: 44px; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(2, 1fr); } .install-card.big { grid-column: span 2; grid-row: auto; } .install-card.big .ph { aspect-ratio: 16/9; min-height: 0; } }
@media (max-width: 540px) { .gal { grid-template-columns: 1fr; } .install-card.big { grid-column: auto; } }