/* ─────────────────────────────────────────────────────────────────────────
   gallery.css  —  styles for gallery.html
   Relies on the base style.css (typekit font, colour vars, nav, logo etc.)
   All gallery selectors are prefixed .rm- to avoid clashing with style.css
───────────────────────────────────────────────────────────────────────── */

/* ── GRID ─────────────────────────────────────────────────────────────── */

.rm-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 15px;
  padding: 15px;
  /* push content below the fixed nav (matches logo top ~105px) */
  padding-top: 15px;
  padding-bottom: 15px;
  align-items: start;
}

/* ── CARD ─────────────────────────────────────────────────────────────── */

.rm-card {
  position: relative;
  cursor: pointer;
}

.rm-card.rm-large {
  grid-column: span 2;
  grid-row: span 2;
}

/* image wrapper — clips zoom but not tooltip */
.rm-card-img {
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #c8c5c0;
}

.rm-card.rm-large .rm-card-img {
  height: calc(240px * 2 + 15px);
}

.rm-card img,
.rm-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0, 0, 1), box-shadow 0.2s ease;
}

.rm-card:hover img,
.rm-card:hover video {
  transform: scale(1.05);
  box-shadow: inset 0 0 0 3px #000;
}

/* ── FULL-WIDTH CARD (project pages) ─────────────────────────────────── */

.rm-card.rm-full {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

.rm-card.rm-full .rm-card-img {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #c8c5c0;
}

.rm-card.rm-full img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* No zoom on hover for full-width project page cards */
.rm-card.rm-full:hover img {
  transform: none;
}

/* Tooltip centred below image */
.rm-card.rm-full .rm-tooltip {
  left: 50%;
  max-width: 360px;
}

/* ── TOOLTIP ──────────────────────────────────────────────────────────── */
/* Uses h3 + h6 from style.css for title / body typography */

.rm-tooltip {
  position: absolute;
  top: calc(100% + 14px); /* floats below the image */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: max-content;
  max-width: 260px;
  background: #ffffff;
  border: 3px solid #000;
  padding: 10px 14px 13px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
  z-index: 20;
}

/* Arrow pointing up */
.rm-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: #000;
}

.rm-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #fff;
  z-index: 1;
  margin-bottom: -1px;
}

.rm-card:hover .rm-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Override style.css colour defaults so tooltip h3/h6 look right here */
.rm-tooltip h3 {
  color: #000;
  margin-bottom: 3px;
  font-size: 17px;
  line-height: 20px;
}

.rm-tooltip h6 {
  color: #323232;
  font-size: 14px;
  line-height: 22px;
}

/* ── LIGHTBOX ─────────────────────────────────────────────────────────── */

.rm-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
}

.rm-lightbox.open {
  display: flex;
}

.rm-lightbox-media {
  max-width: 88vw;
  max-height: 72vh;
  object-fit: contain;
  display: block;
  border: 3px solid #000;   /* matches cv2 border weight */
  border-bottom: none;
}

.rm-lightbox-caption {
  background: #ffffff;
  border: 3px solid #000;
  border-top: none;
  padding: 12px 18px 14px;
  width: min(88vw, 960px);
}

.rm-lightbox-caption h3 {
  color: #000;
  margin-bottom: 4px;
  font-size: 17px;
  line-height: 20px;
}

.rm-lightbox-caption h6 {
  color: #323232;
  font-size: 15px;
  line-height: 24px;
}

.rm-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  line-height: 1;
  z-index: 1001;
  opacity: 0.7;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 300;
  transition: opacity 0.15s;
}

.rm-lightbox-close:hover {
  opacity: 1;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .rm-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    padding-top: 10px;
  }

  .rm-card-img              { height: 220px; }
  .rm-card.rm-large .rm-card-img { height: calc(220px * 2 + 8px); }
}

@media (max-width: 520px) {
  .rm-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
    padding-top: 10px;
  }

  .rm-card-img                   { height: 260px; }
  .rm-card.rm-large              { grid-column: span 1; grid-row: span 1; }
  .rm-card.rm-large .rm-card-img { height: 260px; }
  .rm-tooltip                    { display: none; }

  /* tap to reveal on mobile */
  .rm-card.tapped .rm-tooltip {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}