/* ============================================================
   project-media.css  –  Unified media-frame component
   Aurea Greece · Luxury Real Estate
   ============================================================
   A single, consistent image container used across all page
   contexts: card grids, gallery lookbooks, editorial content,
   and floorplans. Orientation-aware classes (added by
   project-media.js) let each image breathe at its natural
   aspect-ratio instead of being force-cropped.

   Design tokens reference style-v10.css:
     --radius-sm   (8 px)
     --shadow-1, --shadow-2
     --stone       (border colour)
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */

.media-frame {
  overflow: hidden;
  border-radius: var(--radius-sm, 8px);
  background: #f3efe7;               /* neutral placeholder while loading */
}

.media-frame img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;   /* match style-v10 timing */
}

/* ── Card context (homepage project grid) ─────────────────── */

.media-frame--card {
  aspect-ratio: 16 / 10;
}

.media-frame--card img {
  height: 100%;
  object-position: center 30%;       /* bias slightly above centre */
}

/* ── Gallery context (project-page lookbook) ──────────────── */
/* Desktop: uniform 16:10 crop for clean grid rows.
   Mobile:  orientation-aware — portrait images go full-width
            with max-height to prevent dominating the viewport. */

.media-frame--gallery {
  aspect-ratio: 16 / 10;
}

.media-frame--gallery img {
  height: 100%;
}

/* Figures that contain a .media-frame div should not
   themselves act as a visual container */
figure.has-media-frame {
  background: transparent;
  overflow: visible;
  border-radius: 0;
}

/* ── Editorial context (inline content images) ────────────── */

.media-frame--editorial {
  aspect-ratio: auto;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.media-frame--editorial img {
  height: auto;
  object-fit: contain;
}

/* ── Floorplan context ────────────────────────────────────── */

.media-frame--floorplan {
  aspect-ratio: auto;
  background: #fff;
}

.media-frame--floorplan img {
  height: auto;
  object-fit: contain;
}

/* ── Hover ────────────────────────────────────────────────── */

.media-frame img { will-change: transform; }
.media-frame:hover img { transform: scale(1.02); }

.media-frame--editorial:hover img,
.media-frame--floorplan:hover img { transform: none; }

/* ── Mobile ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .media-frame--card { aspect-ratio: 4 / 3; }

  /* Single-column: crop all orientations to a uniform ratio.
     Portrait/square get a 4:3 landscape crop so they don't
     dominate the viewport; object-fit:cover handles the rest. */
  .media-frame--gallery.is-landscape { aspect-ratio: 16 / 10; }
  .media-frame--gallery.is-portrait  { aspect-ratio: 4 / 3; }
  .media-frame--gallery.is-square    { aspect-ratio: 4 / 3; }

  /* Cap floorplan height on mobile */
  .media-frame--floorplan { max-height: 70vh; }
  .media-frame--floorplan img { max-height: 70vh; }

  /* Disable hover zoom on touch devices */
  .media-frame:hover img { transform: none; }
}

/* ── Print ────────────────────────────────────────────────── */

@media print {
  .media-frame img { object-fit: contain; }
  .media-frame     { aspect-ratio: auto;  }
}