/* assets/hero-media.css — styles for the property hero section + lightbox. */

/* ── Shared tile primitives ───────────────────────────────────────────────── */
.hm-tile {
  position: relative;
  background: linear-gradient(135deg, #6B8A82, #4D7972) center/cover no-repeat;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .15s, box-shadow .15s;
}
.hm-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 53, 48, .15); }
.hm-tile.hm-empty { background: #e0e5eb; cursor: default; }
.hm-tile.hm-empty:hover { transform: none; box-shadow: none; }
.hm-tile.hm-video { cursor: default; background: #000; }
.hm-tile.hm-video iframe, .hm-tile.hm-video video { display: block; }

.hm-verified {
  position: absolute; top: 12px; left: 12px;
  background: #006A54; color: #fff;
  font: 700 11px/1 'Sora', system-ui, sans-serif;
  padding: 6px 12px; border-radius: 8px; z-index: 2;
  pointer-events: none;
}
.hm-more {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(0, 0, 0, .65); color: #fff;
  font: 600 11px/1 'Sora', system-ui, sans-serif;
  padding: 6px 12px; border-radius: 10px; z-index: 2;
}
.hm-video-tag {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(0, 53, 48, .82); color: #facc15;
  font: 700 11px/1 'Sora', system-ui, sans-serif;
  padding: 6px 12px; border-radius: 99px; z-index: 2;
  letter-spacing: .04em;
}

/* ── Photos-only layout (matches existing .gallery-grid spec) ─────────────── */
.hm-grid--photos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 8px;
  margin-bottom: 24px;
}
.hm-grid--photos .hm-main { grid-row: 1 / 3; }

/* ── Vertical video + photos ──────────────────────────────────────────────── */
/* 9:16 video on left (~228×408), 2×2 photo grid on right. */
.hm-grid--v-video {
  display: grid;
  grid-template-columns: minmax(220px, 230px) 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 8px;
  margin-bottom: 24px;
}
.hm-grid--v-video .hm-video--vertical { grid-row: 1 / 3; }

/* ── Horizontal video + photo strip ───────────────────────────────────────── */
.hm-stack--h-video { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.hm-video--horizontal { aspect-ratio: 16 / 9; max-height: 408px; }
.hm-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 110px;
  gap: 8px;
  position: relative;
}
.hm-strip .hm-tile { aspect-ratio: 4 / 3; }

/* ── NEW · Variant 9: horizontal video + 2 right + strip below ────────────── */
.hm-stack--h-2right { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.hm-grid--h-2right {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 8px;
}
.hm-grid--h-2right .hm-video--horizontal { grid-row: 1 / 3; grid-column: 1; aspect-ratio: auto; max-height: none; height: 100%; }

/* ── NEW · Variant 10: dual video (vertical + horizontal both) ────────────── */
.hm-stack--dual { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.hm-grid--dual {
  display: grid;
  grid-template-columns: minmax(220px, 230px) 1fr 1fr;
  grid-template-rows: 200px 110px 90px;
  gap: 8px;
}
.hm-grid--dual .hm-video--vertical { grid-row: 1 / 4; grid-column: 1; }
.hm-grid--dual .hm-video--top      { grid-row: 1 / 2; grid-column: 2 / 4; aspect-ratio: auto; max-height: none; height: 100%; }
/* The 4 photo tiles fall into rows 2-3 across cols 2-3 — 2×2 grid. */

/* ── NEW · Variant 11: horizontal video centred, 2 photos each side ───────── */
.hm-grid--h-symmetric {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 8px;
  margin-bottom: 8px;
}
.hm-grid--h-symmetric .hm-video--centred {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  aspect-ratio: auto;
  max-height: none;
  height: 100%;
}

/* Mobile collapse for the new layouts. */
@media (max-width: 760px) {
  .hm-grid--h-2right,
  .hm-grid--dual,
  .hm-grid--h-symmetric {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hm-grid--h-2right .hm-video--horizontal,
  .hm-grid--dual .hm-video--vertical,
  .hm-grid--dual .hm-video--top,
  .hm-grid--h-symmetric .hm-video--centred {
    grid-row: auto; grid-column: auto;
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .hm-grid--dual .hm-video--vertical { aspect-ratio: 9 / 16; max-height: 70vh; }
  .hm-grid--h-2right .hm-tile:not(.hm-video),
  .hm-grid--dual .hm-tile:not(.hm-video),
  .hm-grid--h-symmetric .hm-tile:not(.hm-video) { height: 140px; }
}

/* ── Video-only layouts ───────────────────────────────────────────────────── */
.hm-stack--video-only { display: flex; justify-content: center; margin-bottom: 24px; }
.hm-video--vertical-solo {
  aspect-ratio: 9 / 16;
  height: 480px;
  max-width: 100%;
}
.hm-video--horizontal-solo {
  aspect-ratio: 16 / 9;
  max-height: 480px;
  width: 100%;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hm-grid--photos,
  .hm-grid--v-video {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hm-grid--photos .hm-main,
  .hm-grid--v-video .hm-video--vertical { grid-row: auto; height: 280px; }
  .hm-grid--v-video .hm-video--vertical { aspect-ratio: 9 / 16; height: auto; max-height: 70vh; }
  .hm-grid--photos .hm-tile,
  .hm-grid--v-video .hm-tile:not(.hm-video) { height: 140px; }
  .hm-video--horizontal { aspect-ratio: 16 / 9; max-height: none; }
  .hm-strip { grid-template-columns: repeat(3, 1fr); }
  .hm-video--vertical-solo { height: auto; max-height: 80vh; }
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.hm-lb {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .92);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.hm-lb.hm-lb-open { display: flex; }
.hm-lb-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  max-height: calc(100vh - 96px); max-width: 100%;
}
.hm-lb-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.hm-lb-x, .hm-lb-prev, .hm-lb-next {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, .12);
  color: #fff; border: 0;
  width: 44px; height: 44px; border-radius: 50%;
  font: 700 24px/1 'Sora', system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s;
}
.hm-lb-x:hover, .hm-lb-prev:hover, .hm-lb-next:hover { background: rgba(255, 255, 255, .22); }
.hm-lb-x    { top: 18px; right: 24px; transform: none; }
.hm-lb-prev { left: 24px; }
.hm-lb-next { right: 24px; }
.hm-lb-tools {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  background: rgba(0, 0, 0, .55);
  padding: 8px 18px; border-radius: 99px;
  color: #fff; font: 600 12px/1 'Sora', system-ui, sans-serif;
}
.hm-lb-count { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.7); }
.hm-lb-download {
  display: inline-flex; align-items: center;
  color: #fff; text-decoration: none;
  padding: 8px 18px; border-radius: 99px;
  background: #003530;
  border: 1px solid #003530;
  font-size: 12px; font-weight: 700;
  letter-spacing: .02em;
  transition: background .15s, transform .12s;
}
.hm-lb-download:hover { background: #00261f; transform: translateY(-1px); }