/* --- Text Color Hover Effects --- */

/* Sets hover text color to gold, white, or black */
.overlay-gold:hover {
  color: var(--color-gold);
}

.overlay-white:hover {
  color: white;
}

.overlay-black:hover {
  color: black;
}

/* Icon color on hover */
.overlay-i-gold:hover i {
  color: var(--color-gold);
}

.overlay-i-gold-tint:hover i {
  color: var(--color-gold-tint);
}

.overlay-i-white:hover i {
  color: white;
}

.overlay-i-black:hover i {
  color: black;
}

/* --- Background Color Hover Effects --- */

/* Gold background on hover with black text */
.overlay-bg-gold:hover {
  background-color: var(--color-gold);
  color: #000;
}

/* Gold tint background for black elements */
.bg-black .overlay-bg-gold-tint:hover {
  background-color: var(--color-gold-tint) !important;
}

/* Gold tint overlay with a quiet surface colour change */
.overlay-bg-gold-tint:hover {
  background: rgba(245, 237, 222, 0.7) !important;
  color: #000;
}

/* Preserve media clipping without moving the card itself. */
.overlay-bg-gold-tint .media {
  overflow: hidden !important;
  overflow: clip !important;
}

.overlay-bg-gold-tint:hover i,
.overlay-bg-gold-tint:hover .material-icons-outlined {
  color: var(--color-gold);
}

/* --- White Background Hover Effects --- */

/* White overlay background with a quiet surface colour change */
.overlay-bg-white:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #000;
}

.bg-black .overlay-bg-white:hover {
  background-color: white !important;
}

/* Preserve the existing media clipping. */
.overlay-bg-white .media {
  overflow: hidden !important;
  overflow: clip !important;
}

.overlay-bg-white:hover i,
.overlay-bg-white:hover .material-icons-outlined {
  color: var(--color-gold);
}

/* --- Additional Hover Effects --- */

/* Underline text on hover */
.hover-underline:hover {
  text-decoration: underline;
}

/*
 * Refined card motion: restrained photographic zoom.
 *
 * A full 1% scale was perceptible on smaller card derivatives because the
 * browser has to resample the raster continuously during the transition.
 * Keep the movement deliberately below half a percent instead. The result is
 * enough to register as a quiet photographic push without introducing a
 * visible frame, crop or large interpolation step.
 */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:not(.path-admin):not([data-acton-refresh="off"]) #main:not([data-acton-refresh="off"]) {
    --acton-card-surface-duration: 520ms;
    --acton-card-shadow-duration: 620ms;
    --acton-card-colour-duration: 400ms;
    --acton-card-image-duration: 1150ms;
    --acton-card-surface-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --acton-card-image-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --acton-card-image-scale: 1.004;
  }

  .overlay-gold,
  .overlay-white,
  .overlay-black,
  .overlay-bg-gold,
  .overlay-bg-gold-tint,
  .overlay-bg-white {
    transition:
      background-color var(--acton-card-surface-duration, 520ms) var(--acton-card-surface-ease, ease-out),
      color var(--acton-card-colour-duration, 400ms) var(--acton-card-surface-ease, ease-out),
      box-shadow var(--acton-card-shadow-duration, 620ms) var(--acton-card-surface-ease, ease-out);
  }

  .overlay-i-gold i,
  .overlay-i-gold-tint i,
  .overlay-i-white i,
  .overlay-i-black i,
  .overlay-bg-gold-tint i,
  .overlay-bg-gold-tint .material-icons-outlined,
  .overlay-bg-white i,
  .overlay-bg-white .material-icons-outlined {
    transition: color var(--acton-card-colour-duration, 400ms) var(--acton-card-surface-ease, ease-out);
  }

  /* Override the faster generic card shadow timing from cards.css. */
  body:not(.path-admin):not([data-acton-refresh="off"]) #main:not([data-acton-refresh="off"])
  .card.shadow-sm:has(a[href]):not(:where(.hero *, .slick-slider *)) {
    transition:
      box-shadow var(--acton-card-shadow-duration, 620ms) var(--acton-card-surface-ease, ease-out),
      background-color var(--acton-card-surface-duration, 520ms) var(--acton-card-surface-ease, ease-out);
  }

  /* Clip only the tiny zoom outside the existing image frame. */
  body:not(.path-admin):not([data-acton-refresh="off"]) #main:not([data-acton-refresh="off"])
  .card:has(a[href]):not(.hero, .slick, .slick-slider, .glightbox-container, #layout-builder, .ck-editor, .node-form, .xibo-wall, #rsb-kiosk-search, [data-acton-refresh="off"], .hero *, .slick *, .slick-slider *, .glightbox-container *, #layout-builder *, .ck-editor *, .node-form *, .xibo-wall *, #rsb-kiosk-search *, [data-acton-refresh="off"] *) .media.media--image:not(.media--player) {
    overflow: hidden;
    overflow: clip;
  }

  /*
   * Use the individual scale property rather than a transform stack. Do not
   * force a compositor layer with translateZ() or will-change: transform;
   * those can make photographic rasterisation look softer on some browsers.
   */
  body:not(.path-admin):not([data-acton-refresh="off"]) #main:not([data-acton-refresh="off"])
  .card:has(a[href]):not(.hero, .slick, .slick-slider, .glightbox-container, #layout-builder, .ck-editor, .node-form, .xibo-wall, #rsb-kiosk-search, [data-acton-refresh="off"], .hero *, .slick *, .slick-slider *, .glightbox-container *, #layout-builder *, .ck-editor *, .node-form *, .xibo-wall *, #rsb-kiosk-search *, [data-acton-refresh="off"] *) .media.media--image:not(.media--player) img {
    display: block;
    scale: 1;
    transform-origin: 50% 50%;
    image-rendering: auto;
    transition:
      scale var(--acton-card-image-duration, 1150ms) var(--acton-card-image-ease, ease-out),
      opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Never animate the blank Blazy placeholder or a failed image. */
  body:not(.path-admin):not([data-acton-refresh="off"]) #main:not([data-acton-refresh="off"])
  .card:has(a[href]):not(.hero, .slick, .slick-slider, .glightbox-container, #layout-builder, .ck-editor, .node-form, .xibo-wall, #rsb-kiosk-search, [data-acton-refresh="off"], .hero *, .slick *, .slick-slider *, .glightbox-container *, #layout-builder *, .ck-editor *, .node-form *, .xibo-wall *, #rsb-kiosk-search *, [data-acton-refresh="off"] *):hover .media.media--image:not(.media--player):not(.is-b-loading):not(.is-b-error) img.b-loaded,
  body:not(.path-admin):not([data-acton-refresh="off"]) #main:not([data-acton-refresh="off"])
  .card:has(a[href]):not(.hero, .slick, .slick-slider, .glightbox-container, #layout-builder, .ck-editor, .node-form, .xibo-wall, #rsb-kiosk-search, [data-acton-refresh="off"], .hero *, .slick *, .slick-slider *, .glightbox-container *, #layout-builder *, .ck-editor *, .node-form *, .xibo-wall *, #rsb-kiosk-search *, [data-acton-refresh="off"] *):hover .media.media--image:not(.media--player):not(.is-b-loading):not(.is-b-error) img:not(.b-lazy) {
    scale: var(--acton-card-image-scale, 1.004);
  }


}

@media (prefers-reduced-motion: reduce) {
  .overlay-gold,
  .overlay-white,
  .overlay-black,
  .overlay-bg-gold,
  .overlay-bg-gold-tint,
  .overlay-bg-white,
  .overlay-i-gold i,
  .overlay-i-gold-tint i,
  .overlay-i-white i,
  .overlay-i-black i,
  .overlay-bg-gold-tint i,
  .overlay-bg-gold-tint .material-icons-outlined,
  .overlay-bg-white i,
  .overlay-bg-white .material-icons-outlined {
    transition: none;
  }

  body:not(.path-admin):not([data-acton-refresh="off"]) #main:not([data-acton-refresh="off"])
  .card:not(.hero, .slick, .slick-slider, .glightbox-container, #layout-builder, .ck-editor, .node-form, .xibo-wall, #rsb-kiosk-search, [data-acton-refresh="off"], .hero *, .slick *, .slick-slider *, .glightbox-container *, #layout-builder *, .ck-editor *, .node-form *, .xibo-wall *, #rsb-kiosk-search *, [data-acton-refresh="off"] *) .media.media--image img {
    scale: 1;
  }
}