/* ==========================================================================
   RM MEDIA CO — portfolio styles
   Used by photography.html (curated image wall) and videography.html
   (16:9 click-to-play video gallery). Loaded after css/style.css.
   ========================================================================== */

/* ---- Photography: curated image wall ------------------------------------
   6-column grid whose rows are square (row height = one column's width, via
   container units), so tile shapes are exact:
     .pf-xl  4×3  (4:3 feature)        .pf-l  3×2  (3:2 landscape)
     .pf-p   2×3  (2:3 portrait)       .pf-m  2×2  (square)
     .pf-w   2×1  (2:1 strip)
   grid-auto-flow: dense back-fills any holes. Thin gaps, subtle gold edge on hover. */
.pf-wall { container-type: inline-size; }
.pf-grid {
  --gap: 6px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: calc((100cqw - 5 * var(--gap)) / 6);
  grid-auto-flow: dense;
  gap: var(--gap);
}
.pf-grid .gallery-item { aspect-ratio: auto; border-radius: 0; background: var(--ink-soft); }
.pf-grid .gallery-item img { transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.pf-grid .gallery-item:hover img, .pf-grid .gallery-item:focus-visible img { transform: scale(1.04); }
.pf-grid .gallery-item::before {           /* hairline gold edge on hover */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(var(--glow-rgb), 0);
  transition: box-shadow .5s var(--ease);
}
.pf-grid .gallery-item:hover::before, .pf-grid .gallery-item:focus-visible::before { box-shadow: inset 0 0 0 1px rgba(var(--glow-rgb), .55); }
.pf-grid .gallery-item:focus-visible { outline: none; }
.pf-xl { grid-column: span 4; grid-row: span 3; }
.pf-l  { grid-column: span 3; grid-row: span 2; }
.pf-p  { grid-column: span 2; grid-row: span 3; }
.pf-m  { grid-column: span 2; grid-row: span 2; }
.pf-w  { grid-column: span 2; grid-row: span 1; }

/* Phones: 2 columns — features full width at 3:2, strips 2:1, the rest in 4:5 pairs */
@media (max-width: 760px) {
  .pf-grid { --gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .pf-grid .pf-xl, .pf-grid .pf-l { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
  .pf-grid .pf-p, .pf-grid .pf-m { grid-column: span 1; grid-row: auto; aspect-ratio: 4 / 5; }
  .pf-grid .pf-w { grid-column: span 2; grid-row: auto; aspect-ratio: 2 / 1; }  /* keeps the 1-column tiles in even pairs, so no holes */
  .pf-grid .pf-full-sm { grid-column: span 2; aspect-ratio: 3 / 2; }  /* add to a p/m tile when the p+m count is odd */
}

/* ---- Photography page: Drone + Floor Plans sections (below the wall) ------
   Kept out of the mixed-size wall on purpose: aerials keep their full 16:9 frame
   so labels aren't cropped, and floor plans sit uncropped on white "print" cards. */
.pf-extra .section-head p { margin-top: 1rem; }
.pf-drone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pf-drone .gallery-item { aspect-ratio: 16 / 9; border-radius: 0; background: var(--ink-soft); }
.pf-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.pf-plans .gallery-item { aspect-ratio: 4 / 3; border-radius: 2px; background: #fff; }
.pf-plans .gallery-item img { object-fit: contain; padding: clamp(.75rem, 2vw, 1.5rem); }
.pf-drone .gallery-item img, .pf-plans .gallery-item img { transition: transform 1.1s var(--ease); }
.pf-drone .gallery-item:hover img, .pf-drone .gallery-item:focus-visible img { transform: scale(1.03); }
.pf-plans .gallery-item:hover img, .pf-plans .gallery-item:focus-visible img { transform: scale(1.02); }
.pf-drone .gallery-item::before, .pf-plans .gallery-item::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(var(--glow-rgb), 0); transition: box-shadow .5s var(--ease);
}
.pf-drone .gallery-item:hover::before, .pf-drone .gallery-item:focus-visible::before,
.pf-plans .gallery-item:hover::before, .pf-plans .gallery-item:focus-visible::before { box-shadow: inset 0 0 0 2px rgba(var(--glow-rgb), .7); }
.pf-drone .gallery-item:focus-visible, .pf-plans .gallery-item:focus-visible { outline: none; }
@media (max-width: 760px) { .pf-drone, .pf-plans { grid-template-columns: 1fr; } .pf-drone { gap: 4px; } }

/* ---- Videography: 16:9 video gallery -------------------------------------- */
.vf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem); }
.vf-card {
  display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit;
  text-align: left; font: inherit; cursor: pointer;
}
.vf-card.is-featured { grid-column: 1 / -1; }
/* After the featured film the rest pair up; an odd one out at the end goes full width */
.vf-grid > .vf-card:not(.is-featured):last-child:nth-child(even) { grid-column: 1 / -1; }
.vf-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-soft); }
.vf-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.vf-thumb::after {                           /* soft vignette so the play button always reads */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(14,12,10,.05) 30%, rgba(14,12,10,.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--glow-rgb), 0);
  transition: box-shadow .5s var(--ease);
}
.vf-play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: clamp(56px, 6vw, 76px); aspect-ratio: 1;
  translate: -50% -50%;
  display: grid; place-items: center;
  border: 1px solid rgba(var(--glow-rgb), .8);
  border-radius: 50%;
  background: rgba(14, 12, 10, .45);
  color: var(--brass-bright);
  transition: scale .5s var(--ease), background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.vf-play svg { width: 32%; height: 32%; margin-left: 8%; }
.vf-card.is-featured .vf-play { width: clamp(64px, 7vw, 92px); }
/* .play-high: lift the play button into the upper third when the poster has a title/address in the middle */
.vf-card.play-high .vf-play { top: 30%; }
@media (max-width: 760px) { .vf-card.play-high .vf-play { top: 25%; } }  /* shorter thumbnail: lift a bit more */
.vf-card:hover .vf-thumb img, .vf-card:focus-visible .vf-thumb img { transform: scale(1.04); }
.vf-card:hover .vf-thumb::after, .vf-card:focus-visible .vf-thumb::after { box-shadow: inset 0 0 0 1px rgba(var(--glow-rgb), .55); }
.vf-card:hover .vf-play, .vf-card:focus-visible .vf-play { scale: 1.08; background: var(--brass); border-color: var(--brass); color: var(--ink); }
.vf-card:focus-visible { outline: none; }
.vf-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .95rem; }
.vf-cat { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-bright); margin-bottom: .3rem; }
.vf-title { display: block; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; letter-spacing: -.015em; color: var(--paper); }
.vf-card.is-featured .vf-title { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.vf-status { flex-shrink: 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-dim); }
@media (max-width: 760px) { .vf-grid { grid-template-columns: 1fr; } }

/* Video player overlay */
.vf-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 7, 6, .94);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.vf-modal.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.vf-stage { position: relative; width: min(1200px, 100%, calc((100svh - 9rem) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 1px rgba(var(--glow-rgb), .25); }
.vf-stage video, .vf-stage iframe, .vf-stage img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.vf-stage .vf-soon {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  background: rgba(8, 7, 6, .72); text-align: center; padding: 1.5rem;
}
.vf-soon strong { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; color: var(--paper); }
.vf-soon span { font-size: .9rem; color: var(--paper-dim); }
.vf-caption { text-align: center; }
.vf-close {
  position: absolute; top: clamp(.75rem, 2.5vw, 1.75rem); right: clamp(.75rem, 2.5vw, 1.75rem);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(14, 12, 10, .55); color: var(--paper);
  transition: border-color .4s var(--ease), color .4s var(--ease), scale .4s var(--ease);
}
.vf-close:hover, .vf-close:focus-visible { border-color: var(--brass); color: var(--brass-bright); scale: 1.08; }
.vf-close svg { width: 20px; height: 20px; }