/* Home page additions (hand-written).
   Logos uploaded in WordPress (the static site's own logos keep their
   hand-tuned styles in home.css). Grey at rest, original colours on hover, like the others. */
.partner-cell .partner-upload { height: 68px; width: auto; max-width: 170px; display: block; transition: transform 0.4s ease, filter 0.3s ease; }
.partner-cell:not(:hover) svg.partner-upload [fill]:not([fill="none"]) { fill: var(--gray-400); }
.partner-cell:not(:hover) svg.partner-upload [stroke]:not([stroke="none"]) { stroke: var(--gray-400); }
.partner-cell img.partner-upload { filter: grayscale(1) opacity(0.5); }
.partner-cell:hover img.partner-upload { filter: none; }
.vt-logo .vt-upload { height: 28px; width: auto; max-width: 120px; display: block; }

/* Hero video: never show Safari's own play button over the background video
   (it is not clickable there; the hero has its own play / pause control). */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Hero video loading, the same in every browser:
   - the video stays visible underneath (Safari does not autoplay a video it considers
     invisible, which is why it only started after unmute or pause/play);
   - the animated network background, on the hero's own colour, covers it until the video is
     actually playing, then fades out (home-hero.js sets its opacity to 0). */
.hero .hero-video { opacity: 1; }
.hero .hero-canvas { background: var(--iso-25); }

/* Hero play button: only shown when the browser blocks autoplay (home-hero-start.js).
   Same look as the podcast play buttons. */
.hero-start {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: #003CA4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 30, 85, 0.25);
  transition: transform 0.25s ease, background 0.25s ease;
}
.hero-start:hover { transform: translate(-50%, -50%) scale(1.08); background: #002B74; }
.hero-start:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-start svg { width: 28px; height: 28px; margin-left: 4px; }
.hero-start[hidden] { display: none; }

/* Unplugged podcast: "All episodes" is centred on the title (not on the bottom of the heading
   area), and the episode cards start at the top, so thumbnails line up whatever the title length. */
.unplugged-section .section-header { display: grid !important; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--sp-6); }
.unplugged-section .section-header > div { display: contents; }
.unplugged-section .section-header .eyebrow { grid-column: 1 / -1; justify-self: start; }
.unplugged-section .section-header h2 { grid-column: 1; justify-self: start; margin: 0; text-align: left; }
.unplugged-section .section-header > .btn { grid-column: 2; grid-row: 2; align-self: center; margin: 0; }
.unplugged-grid { align-items: start; }
.unplugged-card { justify-content: flex-start; }
@media (max-width: 720px) {
  .unplugged-section .section-header { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .unplugged-section .section-header > .btn { grid-column: 1; grid-row: 3; justify-self: start; }
}

/* Optional small landscape image beside the title (Edit website → Home → Hero slides) */
.hero-figure {
  flex: 0 0 auto;
  width: clamp(87px, 9.9vw, 137px);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  background: var(--gray-100);
}
@media (max-width: 680px) {
  .hero-slide .hero-figure { flex: 0 0 auto; width: clamp(84px, 26vw, 116px); }
}