/*
 * Pet Movie template samples: the play button over a card poster and the
 * lightbox that plays the sample (static/js/pet_samples.js).
 * The home page and the create page both load this file. Each page sets
 * the position of .sample-play over its own poster. The page sets --a and
 * --b to the brand accents.
 */

.sample-play {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.sample-play:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }

.sample-badge {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(9, 11, 19, .72);
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  transition: background-color .15s ease, transform .15s ease;
}
.sample-badge svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.sample-play:hover .sample-badge,
.sample-play:focus-visible .sample-badge { background: var(--a); transform: scale(1.06); }

/* Lightbox */

.sample-lightbox {
  width: min(420px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 16px;
  overflow: auto;
  border: 1px solid #2b3041;
  border-radius: 20px;
  background: #121622;
  color: #fff;
}
.sample-lightbox::backdrop { background: rgba(4, 6, 12, .8); }
.sample-lightbox [hidden] { display: none !important; }

.sample-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sample-lightbox-title { margin: 0; font-size: 18px; line-height: 1.3; }

.sample-lightbox-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #303649;
  border-radius: 50%;
  background: #151925;
  color: #fff;
  cursor: pointer;
}
.sample-lightbox-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sample-lightbox-close:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }

.sample-lightbox-video {
  display: block;
  width: 100%;
  max-height: min(64vh, 640px);
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: 14px;
  background: #000;
}

.sample-lightbox-note { margin: 10px 0 0; color: #aeb6ca; font-size: 13px; line-height: 1.5; }

.sample-lightbox-make {
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--a), var(--b));
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.sample-lightbox-make:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sample-badge { transition: none; }
  .sample-play:hover .sample-badge, .sample-play:focus-visible .sample-badge { transform: none; }
}