/**
 * Knight Frank portal — layered styles on top of mcgrath-portal.css.
 * Handles the Knight Frank logo (white-on-dark) and video placeholders
 * used while real production footage is pending.
 */

/* Knight Frank crest renders white on the dark portal header, matching the
   way client logos are shown elsewhere on the site (.logos-img). */
.mcgrath-portal-brand--knight-frank img,
.bottom-fold-logo--knight-frank,
.kf-portal-logo {
  filter: brightness(0) invert(1);
}

.mcgrath-portal-brand--knight-frank {
  flex: 0 0 auto;
  min-width: 0;
}

.mcgrath-portal-brand--knight-frank img {
  display: block;
  height: clamp(1.6rem, 4.2vw, 2.1rem);
  width: auto;
  max-width: min(7.34rem, 49vw);
  object-fit: contain;
  object-position: center;
}

.mcgrath-portal-entry-page .mcgrath-portal-brand--knight-frank img {
  height: clamp(1.45rem, 3.8vw, 1.9rem);
}

/* Video placeholder — keeps the exact footprint a future video tile will use. */
.kf-media-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 12px,
      rgba(255, 255, 255, 0.06) 12px,
      rgba(255, 255, 255, 0.06) 24px
    ),
    linear-gradient(180deg, rgba(20, 22, 24, 0.92) 0%, rgba(8, 9, 10, 0.96) 100%);
  border: 1px solid rgba(201, 173, 136, 0.28);
  border-radius: inherit;
  overflow: hidden;
}

.kf-media-placeholder-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan, #c9ad88);
  opacity: 0.78;
  text-align: center;
  padding: 0 1rem;
}

/* Hero placeholder fills the same band the hero video would. */
.kf-hero-placeholder {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 16px,
      rgba(255, 255, 255, 0.045) 16px,
      rgba(255, 255, 255, 0.045) 32px
    ),
    linear-gradient(180deg, rgba(18, 20, 22, 0.85) 0%, rgba(6, 7, 8, 0.95) 100%);
}

/* Knight Frank gate background — overrides the McGrath gate photo with a
   clean, brand-neutral dark wash (drop in a Knight Frank gate photo here later).
   Loaded after styles.css so it wins at equal specificity. */
.vision-body--locked.knight-frank-clients-locked-page {
  background-color: #080808;
  background-image:
    radial-gradient(circle at 50% 16%, rgba(201, 173, 136, 0.12) 0%, rgba(201, 173, 136, 0) 54%),
    linear-gradient(180deg, rgba(16, 17, 19, 0.96) 0%, rgba(6, 6, 7, 1) 100%);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* The placeholder card is non-interactive (no preview modal yet). */
.kf-portal-card--placeholder {
  cursor: default;
}

/* Square aspect for landscape-oriented sections (hero/property feature). */
.kf-media-placeholder--wide {
  aspect-ratio: 16 / 9;
}