/* ═══════════════════════════════════════════════
   MORPHOME — explore.css
   v6 — Overlay-style cards with 16:9 aspect ratio.

   v4 rewrote masonry to a regular CSS grid with .uc-card-style cards
   (text in a body block under the image, fixed-height 220px image).

   v6 changes for the new gallery:
     • image aspect ratio is now 16:9 (intrinsic via aspect-ratio:),
       no fixed-pixel heights at any breakpoint — width set by the
       grid track drives everything else.
     • .m-body is now absolutely positioned over the image bottom
       with a transparent-to-black gradient and white text, like the
       gallery cards on Pinterest / Behance / Dribbble. The whole
       card is still a single <a> link so click behaviour is the
       same as before.

   The filter row (All / Exterior / Interior / …) is hidden in
   explore.html via inline style="display:none" while we rebuild the
   gallery with new categories — to restore, remove that style and
   audit data-cat values vs the filter set.
   ═══════════════════════════════════════════════ */

/* ── GRID ── */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Explicit row-gap and column-gap rather than the `gap` shorthand,
     because previously `gap: 22px` followed by `column-gap: unset`
     (left over from an older masonry-cleanup attempt) reset the
     column gap and made vertical and horizontal spacing inconsistent.
     Using row-gap and column-gap by name leaves no room for ambiguity. */
  row-gap: 32px;
  column-gap: 22px;
}

/* ── CARD ── */
/* Modelled on .uc-card from index.css so the language reads as one site.
   The card is an <a> element so navigation works without JS, middle-click
   opens in new tab, and search engines follow it.

   v6: m-body is positioned absolute at the bottom of the card (over the
   image with a darkening gradient), so .m-item needs to be a positioning
   context. Display kept as flex-column for the implicit row-start
   alignment behaviour but now .m-body is taken out of flow. */
.m-item {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;          /* card-as-anchor: kill default link style */
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: transform .22s, box-shadow .22s;
}
.m-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(10,20,40,.14);
}

/* ── IMAGE ── */
/* 16:9 aspect ratio (width is fluid via the grid track). Card height now
   tracks the column width directly — no fixed-pixel height — so cards
   stay in the same shape across breakpoints. */
.m-item picture {
  display: block;
  aspect-ratio: 16 / 9;
}
.m-item .m-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.m-item:hover .m-img { transform: scale(1.04); }

/* ── BODY (overlay over image bottom) ── */
/* Sits on top of the image with a transparent-to-black gradient so the
   white text stays readable across any underlying render. Pointer-events
   none on the gradient is not needed because the parent <a> handles the
   click for the whole card. */
.m-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 36px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    0%,
    rgba(0, 0, 0, 0.15) 60%,
    rgba(0, 0, 0, 0.70) 100%
  );
  color: #fff;
  pointer-events: none;            /* let card-level <a> handle clicks */
}
.m-cat {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.m-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

/* ── RESPONSIVE ── */
/* Card aspect ratio is now intrinsic (16:9), so we don't need to set
   per-breakpoint heights — the grid columns set the width and the rest
   follows. */
@media (max-width: 1100px) {
  .explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
    column-gap: 16px;
  }
}
@media (max-width: 480px) {
  .explore-grid { grid-template-columns: 1fr; }
}