/* ================================================================
   MOD: GALLERY — photo/video grid (no carousel)
   Requires: core.css tokens. Requires: gallery-grid.js (video
   play/pause only — the grid itself has no JS dependency).

   Used on BOTH roofing.html and remodeling.html — the CSS is
   identical; only which photos/videos go in the grid differs per
   page. This is the "slight mod for image display" version of the
   gallery, as opposed to n0idols' rolodex carousel — this project
   uses a plain responsive grid instead.

   CONSOLIDATION NOTE: the original roofing.html and remodeling.html
   each carried an identical page-level <style> block that fixed the
   row height for the featured photo + portrait video pairing at
   tablet/desktop widths. Since that block was byte-for-byte the same
   on both pages, it's folded into this shared file below instead of
   staying duplicated per page — no visual change, just de-duped.

   HTML needed: <section class="gallery" id="gallery">
     <div class="container">
       <header class="gallery-header reveal">
         <span class="eyebrow">Portfolio</span>
         <h2 class="section-heading" id="gallery-heading">Our Work</h2>
         <div class="accent-bar"></div>
       </header>

       <div class="gallery-grid">
         <!-- Item 1 — featured photo, spans 2 columns -->
         <div class="gallery-item reveal" tabindex="0" role="img" aria-label="...">
           <img src="assets/photo.jpg" alt="..." loading="lazy" />
         </div>

         <!-- Item 2 — portrait video, fills the same row height as
              the featured photo at 681px+ (see CONSOLIDATION NOTE) -->
         <div class="gallery-item gallery-item--video reveal" tabindex="0" role="img" aria-label="Project video">
           <video src="assets/clip.mp4" poster="assets/clip-poster.jpg" preload="metadata" muted loop playsinline
                  style="width:100%; height:100%; object-fit:cover;"></video>
           <span class="play-overlay" aria-hidden="true"></span>
         </div>

         <!-- Additional items — plain 4:3 photo tiles -->
         <div class="gallery-item reveal" tabindex="0" role="img" aria-label="...">
           <img src="assets/photo2.jpg" alt="..." loading="lazy" />
         </div>
       </div>
     </div>
   </section>

   GOTCHA: the featured-photo-spans-2-cols + fixed-row-height
   treatment below only applies at 681px and up. Below that, the
   grid collapses to 2 columns (then 1 at 460px) and every tile
   reverts to a plain 4:3 aspect-ratio square — see the responsive
   block at the bottom of this file.
================================================================ */

.gallery { background: var(--color-card-light); padding: var(--section-pad); scroll-margin-top: 32px; }
.gallery-header { margin-bottom: 48px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* First item spans 2 columns for a featured/hero feel */
.gallery-item:first-child { grid-column: span 2; }

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--color-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.gallery-item:focus { outline: none; }
.gallery-item:focus-visible { outline: 2px solid var(--accent1); outline-offset: 2px; }
.gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-hover); z-index: 2; }

.gallery-item img,
.gallery-item video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition), filter var(--transition);
}
.gallery-item:hover img,
.gallery-item:hover video { transform: scale(1.05); filter: brightness(0.85); }

/* Play icon overlay for video tiles */
.play-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.85); box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  opacity: 1; transition: opacity 0.25s ease; pointer-events: none;
}
.play-overlay::after {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--accent1);
}
.gallery-item--video.is-playing .play-overlay { opacity: 0; }

/* Placeholder tile (remove once real media is in every slot) */
.gallery-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; background: var(--color-card);
  color: rgba(var(--fg-rgb), 0.3); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.gallery-placeholder span { font-size: 2rem; }

/* Featured photo + portrait video row-height fix — folded in from
   the two pages' identical inline <style> blocks (see
   CONSOLIDATION NOTE above). clamp() lets the row scale fluidly
   with viewport width instead of a hard px value. Scoped to
   min-width:681px so it never fights the 2-col/1-col mobile layout
   below, where the default 4:3 aspect-ratio tiles take over instead. */
@media (min-width: 681px) {
  .gallery-grid { grid-template-rows: clamp(320px, 38vw, 500px) auto; }
  .gallery-item:first-child { aspect-ratio: unset; height: 100%; }
  .gallery-item.gallery-item--video { aspect-ratio: unset; }
}

/* Mobile — collapse to 2 columns, keep first item wide */
@media (max-width: 680px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item:first-child { grid-column: span 2; }
}

/* Small phones — single-column gallery */
@media (max-width: 460px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item:first-child { grid-column: span 1; }
}