/* === Hero Rollover (matches home hero behavior) === */
.hero-roller{
  /* inherit home styles on the same element: .author-hero.hero-roller */
  background:#000;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;

  /* same height model as home */
  height: clamp(200px, 30vh, 380px);
}

/* stack two images centered; swap via opacity */
.hero-roller .banner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  height:100%;        /* scale by height */
  width:auto;         /* preserve aspect ratio */
  max-width:none;     /* allow wider than container */
  object-fit:contain; /* same as home */
  display:block;
  filter:brightness(.95) contrast(1.02);
  transition: opacity .45s ease;
}

.hero-roller .banner.secondary{
  opacity:0;
  pointer-events:none;
}

/* button overlays entire hero for a11y/tap */
.hero-roller .roller-toggle{
  all:unset;
  position:absolute;
  inset:0;
  cursor:pointer;
}

/* Hover/focus/toggle shows secondary */
.hero-roller:hover .banner.secondary,
.hero-roller:focus-within .banner.secondary,
.hero-roller.is-swapped .banner.secondary { opacity:1; }

.hero-roller:hover .banner.primary,
.hero-roller:focus-within .banner.primary,
.hero-roller.is-swapped .banner.primary { opacity:0; }

/* Responsive height clamps — exactly like home */
@media (min-width:1280px){
  .hero-roller{ height: clamp(240px, 32vh, 420px); }
}
@media (min-width:1600px){
  .hero-roller{ height: clamp(260px, 34vh, 440px); }
}
@media (min-width:2000px){
  .hero-roller{ height: clamp(280px, 36vh, 460px); }
}
@media (max-width:820px){
  .hero-roller{ height: clamp(190px, 38vh, 360px); }
}

/* Reduce-motion users */
@media (prefers-reduced-motion: reduce){
  .hero-roller .banner{ transition:none; }
}