/* Page-specific theme for the Inside the Adoption Event case file.
   Only overrides the CSS custom properties defined on .project-page
   in the shared /style.css, plus a link treatment and a responsive
   video-embed component this page needs for its two interviews and
   final documentary (none of the other case files embed YouTube). */

.project-page[data-theme="adoption"] {
  --proj-accent: #3E7C74;      /* deep teal — sampled from the ACC branding */
  --proj-accent-2: #E8A33D;    /* warm amber — sampled from the dogs' fur */
  --proj-accent-soft: #F3ECD9; /* pale cream tint */
  --proj-ink: #2C2420;         /* warm near-black ink */
}

.project-page[data-theme="adoption"] .project-main a {
  color: var(--proj-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.project-page[data-theme="adoption"] .project-main a:hover {
  color: var(--proj-ink);
}

/* ---- YouTube link-outs ----
   A live <iframe src="youtube.com/embed/..."> depends on the page
   being served over http(s) — YouTube's player can reject the embed
   (Error 153) when the parent document's origin is the opaque
   file:// origin, which is how this archive is actually viewed. A
   thumbnail + play-icon that opens the video in a new tab (same
   pattern as domino's .hero-video-link) works everywhere regardless
   of how the page is opened. Same card treatment as
   .project-hero-media (border/radius/shadow). */
.video-embed {
  margin: 26px 0;
  border: 1.5px solid var(--proj-ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--proj-accent-soft);
  box-shadow: 8px 8px 0px var(--proj-accent-2);
}

.video-embed-link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: none;
}

.video-embed-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.video-embed-link:hover img {
  transform: scale(1.035);
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  padding-left: 5px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.72);
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.6rem;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.video-embed-link:hover .video-play-icon {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--proj-accent);
}

.video-embed figcaption {
  padding: 14px 20px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  color: var(--proj-ink);
  opacity: 0.8;
}

/* Two interviews side by side on wide screens, stacked on small ones */
.video-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 26px 0;
}

.video-pair .video-embed {
  flex: 1 1 320px;
  margin: 0;
}

@media (max-width: 640px) {
  .video-pair {
    flex-direction: column;
  }
}