/* ==========================================================================
   Katsura on West 18th — media.css
   Video cue + video modal (home, residences) and the gallery lightbox (home).

   Loaded AFTER styles.css, so anything here wins on equal specificity.
   Nothing in styles.css is modified.

   The four values below are the only colours used. Repoint them at your own
   tokens if you'd rather they inherit from styles.css.
   ========================================================================== */

:root {
  --media-green: #26392d;
  --media-ink: #1b1b18;
  --media-paper: #f4f2ed;
  --media-hairline: rgba(27, 27, 24, 0.14);
}

/* ==========================================================================
   1. VIDEO CUE — the clickable thumbnail that opens the modal
   ========================================================================== */

.video-cue {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  align-items: center;
  gap: 1.15rem;
  width: 100%;
  max-width: 440px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.video-cue__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--media-green);
  aspect-ratio: 16 / 9;
}

.video-cue__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);            /* avoids a hairline gap while scaling */
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 460ms ease;
}

.video-cue:hover .video-cue__media img,
.video-cue:focus-visible .video-cue__media img {
  transform: scale(1.06);
}

/* Play button ------------------------------------------------------------ */
.video-cue__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.video-cue__play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 18, 11, 0.06), rgba(14, 18, 11, 0.34));
  transition: opacity 460ms ease;
}

.video-cue__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--media-green);
  box-shadow: 0 8px 26px -10px rgba(14, 18, 11, 0.7);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 300ms ease;
}

.video-cue__disc svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;                   /* optically centres the triangle */
  fill: currentColor;
}

/* One ring that eases out on hover, rather than a constant pulse */
.video-cue__disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: scale(1);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.video-cue:hover .video-cue__disc,
.video-cue:focus-visible .video-cue__disc {
  transform: scale(1.1);
  background: #fff;
}

.video-cue:hover .video-cue__disc::after,
.video-cue:focus-visible .video-cue__disc::after {
  opacity: 1;
  transform: scale(1.75);
}

.video-cue:focus-visible {
  outline: 2px solid var(--media-green);
  outline-offset: 4px;
}

/* Text beside the thumbnail ---------------------------------------------- */
.video-cue__body {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.video-cue__title {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--media-ink);
  position: relative;
  display: inline-block;
  padding-bottom: 0.4rem;
}

.video-cue__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.32;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 460ms ease, transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.video-cue:hover .video-cue__title::after,
.video-cue:focus-visible .video-cue__title::after {
  opacity: 1;
}

.video-cue__meta {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.66;
}

/* Spacing when the cue follows the text link in The Vision */
.text-link + .video-cue { margin-top: 2rem; }

@media (max-width: 520px) {
  .video-cue {
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
    gap: 0.9rem;
  }
  .video-cue__disc { width: 38px; height: 38px; }
  .video-cue__disc svg { width: 13px; height: 13px; }
}

/* ==========================================================================
   2. FILM BAND — the "Chief Visionary Officer" section on residences.html
   ========================================================================== */

.film-band .film-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: center;
}

/* Feature variant: one large thumbnail, no text column inside the button */
.video-cue--feature {
  display: block;
  max-width: none;
  grid-template-columns: none;
}

.video-cue--feature .video-cue__media {
  aspect-ratio: 16 / 9;
}

.video-cue--feature .video-cue__disc {
  width: 78px;
  height: 78px;
}

.video-cue--feature .video-cue__disc svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.film-copy > * + * { margin-top: 1.15rem; }

.film-copy .film-role {
  font-size: 0.92rem;
  line-height: 1.6;
  opacity: 0.72;
}

.film-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 0.9rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

@media (max-width: 860px) {
  .film-band .film-layout { grid-template-columns: 1fr; }
  .video-cue--feature .video-cue__disc { width: 60px; height: 60px; }
  .video-cue--feature .video-cue__disc svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   3. VIDEO MODAL
   ========================================================================== */

.video-modal {
  width: min(1180px, 92vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: #0f120e;
  color: #fff;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

.video-modal::backdrop {
  background: rgba(12, 15, 10, 0.92);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.video-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0.9rem 0.9rem 1.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.video-modal__title {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}

.video-modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  transition: background-color 300ms ease, border-color 300ms ease;
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

.video-modal__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.video-modal__frame {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
  max-height: calc(92vh - 64px);
}

.video-modal__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Holds the YouTube / Vimeo iframe. media.js empties it on close, which is
   what actually stops playback. The poster sits behind as a backdrop so
   there's no black flash while the provider's player boots. */
.video-modal__embed {
  position: absolute;
  inset: 0;
  display: none;
  background-color: #000;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.video-modal__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal.is-embed .video-modal__embed { display: block; }
.video-modal.is-embed video { display: none; }

/* Shown only if the MP4 is missing or the browser refuses to play it */
.video-modal__error {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 2rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.video-modal.has-error .video-modal__error { display: grid; }
.video-modal.has-error video { visibility: hidden; }

@media (max-width: 640px) {
  .video-modal { width: 96vw; }
  .video-modal__head { padding-left: 1rem; }
  .video-modal__title { font-size: 0.68rem; letter-spacing: 0.16em; }
}

/* ==========================================================================
   4. GALLERY LIGHTBOX — home page, full-size carousel
   ========================================================================== */

/* The gallery links keep their original .gallery-trigger styling; this only
   adds the hover behaviour that replaced the removed plus badge. */
.gallery-open { cursor: zoom-in; }

.gallery-open img {
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-open:hover img,
.gallery-open:focus-visible img {
  transform: scale(1.04);
}

.media-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(12, 15, 10, 0.97);
  color: #fff;
  overflow: hidden;
}

.media-lightbox::backdrop {
  background: rgba(12, 15, 10, 0.97);
}

.media-lightbox__inner {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
}

/* Bar -------------------------------------------------------------------- */
.media-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(0.85rem, 2vw, 1.75rem);
}

.media-lightbox__count {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
}

.media-lightbox__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  transition: background-color 300ms ease, border-color 300ms ease;
}

.media-lightbox__close:hover,
.media-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

.media-lightbox__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* Stage ------------------------------------------------------------------ */
.media-lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding-inline: clamp(0.5rem, 5vw, 5.5rem);
}

.media-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  transition: opacity 320ms ease;
}

.media-lightbox.is-swapping .media-lightbox__img { opacity: 0; }

/* Arrows ----------------------------------------------------------------- */
.media-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  transition: background-color 300ms ease, border-color 300ms ease,
              transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.media-lightbox__nav:hover,
.media-lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
}

.media-lightbox__nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.media-lightbox__nav--prev { left: clamp(0.4rem, 1.6vw, 1.5rem); }
.media-lightbox__nav--next { right: clamp(0.4rem, 1.6vw, 1.5rem); }

.media-lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.media-lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); }

/* Caption ---------------------------------------------------------------- */
.media-lightbox__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding: 1rem clamp(0.85rem, 2vw, 1.75rem) 1.35rem;
}

.media-lightbox__caption {
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}

.media-lightbox__note {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 720px) {
  .media-lightbox__nav { width: 42px; height: 42px; }
  .media-lightbox__stage { padding-inline: 0.5rem; }
  .media-lightbox__foot { padding-bottom: 1.6rem; }
}

/* ==========================================================================
   5. SHARED
   ========================================================================== */

/* Native <dialog> leaves the page scrollable behind the modal on some
   browsers; media.js adds this to <html> while either dialog is open. */
.has-modal-open,
.has-modal-open body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .video-cue__media img,
  .video-cue__disc,
  .video-cue__disc::after,
  .video-cue__title::after,
  .gallery-open img,
  .media-lightbox__img,
  .media-lightbox__nav {
    transition-duration: 0.01ms !important;
  }
  .video-cue:hover .video-cue__media img,
  .gallery-open:hover img { transform: none; }
}

.video-modal__error a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}