/* Kovac Property Command Center — property media layer.

   Companion to assets/property-media.js. Styles the photo that replaced the
   CSP-blocked Google Maps iframe at the top of every property card.

   The box itself keeps the classes the compiled card gave it
   (`w-full h-32 rounded-lg overflow-hidden`), so the corner radius, height and
   clipping stay whatever the design system says they are. Everything below
   only fills that box. Colours come from the app's own HSL tokens, so light
   and dark mode follow the app without a second definition. */

.pm-media {
  position: relative;
  isolation: isolate;
}

/* ── the photo, and the Zillow click target that wraps it ─────────────────── */

.pm-media-link {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: hsl(var(--muted));
  z-index: 1;
}

.pm-media-link:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: -2px;
}

/* Beats the preflight `img { height: auto }` on specificity, so the photo
   fills the fixed 8rem box instead of collapsing to its intrinsic ratio. */
.pm-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 0.35s ease;
}

.pm-media-link:hover .pm-media-img,
.pm-media-link:focus-visible .pm-media-img {
  transform: scale(1.04);
}

/* Keeps the two chips legible over a bright roofline or a pale sky. */
.pm-media-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgb(2 6 23 / 0.58) 0%,
    rgb(2 6 23 / 0.16) 44%,
    rgb(2 6 23 / 0) 72%
  );
  transition: opacity 0.2s ease;
}

.pm-media-link:hover .pm-media-scrim,
.pm-media-link:focus-visible .pm-media-scrim {
  opacity: 0.82;
}

/* ── affordances ──────────────────────────────────────────────────────────
   The Zillow chip is always visible: a link nobody can see is a link nobody
   clicks, and Jeff asked for this one by name. The Map chip is deliberately
   quieter — smaller, muted, on the opposite corner — because it is the
   secondary of the two. Both sit bottom-aligned to stay clear of the card's
   own action menu at top-right. */

.pm-media-cta,
.pm-media-map {
  position: absolute;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: calc(var(--radius) - 0.125rem);
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(2 6 23 / 0.28);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pm-media-cta {
  right: 0.5rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.6875rem;
  background: rgb(255 255 255 / 0.94);
  color: hsl(var(--primary));
  pointer-events: none; /* the whole photo is the click target */
}

.pm-media-link:hover .pm-media-cta,
.pm-media-link:focus-visible .pm-media-cta {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 2px 6px rgb(2 6 23 / 0.35);
}

.pm-media-map {
  left: 0.5rem;
  z-index: 2;
  padding: 0.15rem 0.4rem;
  font-size: 0.625rem;
  font-weight: 500;
  background: rgb(255 255 255 / 0.86);
  color: hsl(var(--muted-foreground));
}

.pm-media-map:hover,
.pm-media-map:focus-visible {
  background: rgb(255 255 255 / 1);
  color: hsl(var(--foreground));
}

.pm-media-map:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 1px;
}

/* ── missing photo ────────────────────────────────────────────────────────
   Reached when /prop-images/<id>.jpg 404s, or when the card carries no id we
   recognise. Says so plainly. Never a broken-image glyph. */

.pm-media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 0.75rem;
  text-align: center;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.pm-media-fallback svg {
  opacity: 0.45;
  margin-bottom: 0.15rem;
}

.pm-media-fallback-title {
  font-size: 0.6875rem;
  font-weight: 600;
}

.pm-media-fallback-sub {
  font-size: 0.625rem;
  opacity: 0.75;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The photo without a link — no address, so no honest Zillow search. */
.pm-media-static {
  cursor: default;
}

/* ── dark mode ────────────────────────────────────────────────────────────
   The app toggles a `.dark` class on the document element. */

.dark .pm-media-cta {
  background: rgb(15 23 42 / 0.92);
  color: hsl(var(--primary-foreground));
}

.dark .pm-media-link:hover .pm-media-cta,
.dark .pm-media-link:focus-visible .pm-media-cta {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.dark .pm-media-map {
  background: rgb(15 23 42 / 0.82);
  color: hsl(var(--muted-foreground));
}

.dark .pm-media-map:hover,
.dark .pm-media-map:focus-visible {
  background: rgb(15 23 42 / 0.96);
  color: hsl(var(--foreground));
}

@media (prefers-reduced-motion: reduce) {
  .pm-media-img,
  .pm-media-scrim,
  .pm-media-cta,
  .pm-media-map {
    transition: none;
  }
  .pm-media-link:hover .pm-media-img,
  .pm-media-link:focus-visible .pm-media-img {
    transform: none;
  }
}