/* Shared species-card media — aligns river / lake / ocean / commercial explorers */
.hth-fish-card,
.hth-ocean-card,
.hth-species-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.hth-fish-card__media,
.hth-ocean-card__media.has-photo,
.hth-species-card__media,
.hth-fish-card-media{
  position:relative;
  isolation:isolate;
  aspect-ratio:3/2;
  overflow:hidden;
  background:linear-gradient(145deg,var(--hth-navy-bg, #071827),var(--hth-teal-bg, #176f78));
  flex:0 0 auto;
}
.hth-fish-card__media img,
.hth-ocean-card__media.has-photo img,
.hth-species-card__media img,
.hth-fish-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 46%;
  filter:saturate(.94) contrast(1.06) brightness(.98);
  transform:scale(1.01);
  transform-origin:center;
}
.hth-fish-card__media::after,
.hth-ocean-card__media.has-photo::after,
.hth-species-card__media::after,
.hth-fish-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgb(var(--hth-navy-bg-rgb, 7 24 39) / .03) 0%,rgb(var(--hth-navy-bg-rgb, 7 24 39) / 0) 48%,rgb(var(--hth-navy-bg-rgb, 7 24 39) / .30) 100%),
    linear-gradient(90deg,rgb(var(--hth-teal-bg-rgb, 23 111 120) / .08) 0%,transparent 38%,rgb(var(--hth-gold-bg-rgb, 199 162 87) / .04) 100%);
  box-shadow:inset 0 0 0 1px rgb(var(--hth-pearl-line-rgb, 227 225 217) / .10);
}
.hth-fish-image-credit{
  position:absolute;
  right:.45rem;
  bottom:.4rem;
  z-index:2;
  max-width:calc(100% - .9rem);
  margin:0;
  padding:.28rem .42rem;
  background:rgb(var(--hth-navy-panel-rgb, 7 24 39) / .72);
  color:var(--hth-pearl-fg, #E3E1D9);
  font-size:.58rem;
  line-height:1.25;
  letter-spacing:.025em;
  backdrop-filter:blur(3px);
}
@media (prefers-reduced-motion:no-preference){
  .hth-fish-card__media img,
  .hth-ocean-card__media.has-photo img,
  .hth-species-card__media img,
  .hth-fish-card-media img{transition:transform .24s ease,filter .24s ease}
  .hth-fish-card:hover .hth-fish-card__media img,
  .hth-fish-card:focus-within .hth-fish-card__media img,
  .hth-fish-card:hover .hth-fish-card-media img,
  .hth-fish-card:focus-within .hth-fish-card-media img,
  .hth-ocean-card:hover .hth-ocean-card__media.has-photo img,
  .hth-ocean-card:focus-within .hth-ocean-card__media.has-photo img,
  .hth-species-card:hover .hth-species-card__media img,
  .hth-species-card:focus-within .hth-species-card__media img{
    transform:scale(1.035);
    filter:saturate(.98) contrast(1.07) brightness(1);
  }
}
/* Scientific illustrations/reference plates need contain + light plate, not cinematic photo treatment. */
.hth-fish-card__media.is-illustration img,
.hth-fish-card__media img[src*="species-illustration"],
.hth-fish-card__media img[src*="species-reference"],
.hth-fish-card__media img[src*="identification-reference"],
.hth-ocean-card__media.has-photo img[src*="species-illustration"],
.hth-ocean-card__media.has-photo img[src*="species-reference"],
.hth-ocean-card__media.has-photo img[src*="identification-reference"],
.hth-species-card__media.is-illustration img{
  object-fit:contain;
  object-position:center;
  background:var(--hth-pearl-bg, #E3E1D9);
  padding:.35rem;
  filter:none;
  transform:none;
}
.hth-fish-card__media.is-illustration::after,
.hth-fish-card__media:has(img[src*="species-illustration"])::after,
.hth-fish-card__media:has(img[src*="species-reference"])::after,
.hth-fish-card__media:has(img[src*="identification-reference"])::after,
.hth-ocean-card__media.has-photo:has(img[src*="species-illustration"])::after,
.hth-ocean-card__media.has-photo:has(img[src*="species-reference"])::after,
.hth-ocean-card__media.has-photo:has(img[src*="identification-reference"])::after,
.hth-species-card__media.is-illustration::after{
  background:linear-gradient(180deg,transparent 72%,rgb(var(--hth-navy-bg-rgb, 7 24 39) / .08));
  box-shadow:inset 0 0 0 1px rgb(var(--hth-navy-line-rgb, 7 24 39) / .08);
}
.hth-fish-card__media + .hth-fish-card__meta,
.hth-fish-card__media ~ .hth-fish-card__meta{
  margin-top:.85rem;
}
/* When media is injected first, keep body padding consistent */
.hth-fish-card:has(> .hth-fish-card__media){
  padding-top:0;
}
.hth-fish-card:has(> .hth-fish-card__media) > .hth-fish-card__meta,
.hth-fish-card:has(> .hth-fish-card__media) > h4,
.hth-fish-card:has(> .hth-fish-card__media) > p{
  padding-left:1rem;
  padding-right:1rem;
}
.hth-fish-card:has(> .hth-fish-card__media) > .hth-fish-card__meta{
  padding-top:1rem;
}
.hth-fish-card:has(> .hth-fish-card__media) > p:last-child{
  padding-bottom:1rem;
}
.hth-ocean-card__media.has-photo span{
  display:none;
}
.hth-ocean-card__media.has-photo:before{
  display:none;
}
/* Lake explorer cards */
.hth-species-card{
  border:1px solid rgb(var(--hth-navy-line-rgb, 7 24 39) / .13);
  background:var(--hth-pearl-bg, #E3E1D9);
  box-shadow:0 8px 22px rgb(var(--hth-navy-line-rgb, 7 24 39) / .05);
}
.hth-species-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:1.05rem 1rem 1.15rem;
}
.hth-species-card h3{
  margin:.15rem 0 .35rem;
  font-family:var(--wp--preset--font-family--display,"Instrument Serif",sans-serif);
  font-size:clamp(1.55rem,2.2vw,1.95rem);
  font-weight:400;
  line-height:.95;
  text-transform:uppercase;
  color:var(--hth-navy-fg, #071827);text-transform:none;letter-spacing:normal;font-weight:400}
.hth-species-card__clue{
  margin:0 0 .75rem;
  color:var(--hth-charcoal-fg, #424546);
  font-size:.9rem;
  line-height:1.5;
}
.hth-species-card__link{
  margin-top:auto;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--hth-navy-fg, #071827);
  text-decoration:underline;
  text-decoration-color:var(--hth-lake-line, #2E6F95);
  text-decoration-thickness:.15em;
}
.hth-species-card__link:hover,
.hth-species-card__link:focus-visible{
  color:var(--hth-navy-fg, #071827);
  text-decoration-color:var(--hth-coral-line, #D55C3E);
}
.hth-species-card__group{
  margin:0;
  color:var(--hth-navy-fg, #071827);
  text-decoration:underline;
  text-decoration-color:var(--hth-teal-line, #176F78);
  text-decoration-thickness:.15em;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
@media (prefers-reduced-motion:no-preference){
  .hth-species-card{transition:transform .18s ease,box-shadow .18s ease}
  .hth-species-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgb(var(--hth-navy-line-rgb, 7 24 39) / .1)}
}