/* Water Tower Music — cover hover
 *
 * Applies to every `.releases` grid: the release listings and their category
 * pages, New Releases at the foot of a release page, news and artists.
 *
 * Structure the rules rely on, which every one of those templates shares:
 *   .releases > .col-* > div[position:relative] > a > img.wp-post-image
 * Targeting the shared grid class means no template is edited.
 *
 * What it replaces: `.wp-post-image:hover { opacity: .7 }`, which faded the
 * artwork *down* on hover and turned its border black on a black page. These
 * rules out-specify it rather than editing eight templates.
 */

/* The frame clips the zoom and carries the border, so the artwork can scale
   inside a crisp, still edge instead of dragging a scaling border with it. */
.releases > [class*="col-"] > div:first-child {
  position: relative;
  overflow: hidden;
  line-height: 0;                 /* kill the inline-image baseline gap */
  border: 1px solid #fff;
  box-sizing: border-box;
  transform: translateZ(0);       /* own layer: no repaint fringing on zoom */
  transition: transform .4s cubic-bezier(.2, .7, .3, 1),
              box-shadow .4s ease;
}

.releases > [class*="col-"] > div:first-child:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .55);
}

/* Border lives on the frame now, so take it off the image. */
.releases a > img.wp-post-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 0;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.2, .7, .3, 1),
              filter .4s ease;
}

.releases > [class*="col-"] > div:first-child:hover img.wp-post-image {
  transform: scale(1.07);
  filter: brightness(1.05);
}

/* News thumbnails bring their own look: an inline rule sets
   `.size-wtm-feature-small { border-radius: 10px !important; border: 1px solid
   #000 !important }`. Clipping a rounded image inside a square frame left the
   frame's corners showing, and on the white news page those read as gaps in
   the artwork. Move that radius and border onto the frame, the same way the
   square covers work, so the clip follows the rounding. */
.releases > [class*="col-"] > div:first-child:has(> a > img.size-wtm-feature-small) {
  border: 1px solid #000;
  border-radius: 10px;
}
.releases a > img.size-wtm-feature-small {
  border: 0 !important;
  border-radius: 0 !important;
}

/* Undo the old fade-down wherever it still applies. */
.releases .wp-post-image:hover {
  opacity: 1;
  border: 0;
}

/* A slow sheen crossing the art. Sits above the image, below nothing else,
   and never eats the click because it is not a pointer target. */
.releases > [class*="col-"] > div:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 65%
  );
  background-size: 250% 100%;
  background-position: 120% 0;
  transition: opacity .25s ease, background-position .75s cubic-bezier(.2,.7,.3,1);
}

.releases > [class*="col-"] > div:first-child:hover::after {
  opacity: 1;
  background-position: -40% 0;
}

/* Keyboard users get the same treatment as the mouse. */
.releases > [class*="col-"] > div:first-child:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .55);
}
.releases > [class*="col-"] > div:first-child:focus-within img.wp-post-image {
  transform: scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
  .releases > [class*="col-"] > div:first-child,
  .releases a > img.wp-post-image,
  .releases > [class*="col-"] > div:first-child::after {
    transition: none;
  }
  .releases > [class*="col-"] > div:first-child:hover { transform: none; }
  .releases > [class*="col-"] > div:first-child:hover img.wp-post-image { transform: none; }
}

/* Touch screens have no hover: a tap would otherwise leave a card stuck in
   the hovered state until something else is tapped. */
@media (hover: none) {
  .releases > [class*="col-"] > div:first-child:hover { transform: none; box-shadow: none; }
  .releases > [class*="col-"] > div:first-child:hover img.wp-post-image { transform: none; filter: none; }
  .releases > [class*="col-"] > div:first-child::after { display: none; }
}