/*
 * Interaction layer: light hover and transition states for links, buttons, cards,
 * category tiles and lightbox images. Lifts and zooms only on devices that hover and
 * never with prefers-reduced-motion (site-design.css also shortens all transitions).
 */

/* Buttons: darken on hover/focus whatever the button colour. */
.dino-button,
.bricks-button,
.woocommerce :is(a.button, button.button, input.button) {
  transition: var(--dino-transition), transform 0.2s ease;
}
.dino-button:is(:hover, :focus-visible),
.brxe-button.bricks-button:is(:hover, :focus-visible) {
  background-image: linear-gradient(rgb(0 0 0 / 16%), rgb(0 0 0 / 16%));
  box-shadow: 0 6px 16px rgb(8 9 9 / 18%);
}

/* Text links in cards and the footer. */
.dino-card-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--dino-tap, 44px);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.dino-card-link:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-thickness: 2px; }
#brx-footer a { transition: color 0.2s ease, opacity 0.2s ease; text-underline-offset: 3px; }
#brx-footer a:hover { text-decoration: underline; }

/* Cards: shadow + lift on cards that lead somewhere. */
.dino-card,
.dino-product-card,
.dino-cat-tile {
  transition: box-shadow var(--dino-card-speed) ease, transform var(--dino-card-speed) ease, border-color var(--dino-card-speed) ease;
}
.dino-card img,
.dino-product-card img,
.dino-cat-tile-media img,
.dino-gallery-tile img,
a.bricks-lightbox img {
  transition: transform 0.4s ease, filter 0.3s ease;
}
.dino-card:has(a) { overflow: hidden; }
a.bricks-lightbox { display: block; overflow: hidden; cursor: zoom-in; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dino-card:has(a):hover,
  .dino-product-card:hover,
  .dino-cat-tile:hover {
    transform: var(--dino-card-lift);
    box-shadow: var(--dino-card-shadow-hover);
  }
  .dino-card:has(a):hover img,
  .dino-product-card:hover img,
  .dino-cat-tile:hover .dino-cat-tile-media img,
  a.bricks-lightbox:hover img { transform: scale(1.04); }
}
.dino-card:has(a):focus-within,
.dino-product-card:focus-within { box-shadow: var(--dino-card-shadow-hover); }

/* Category tiles (shop/category archives) and category cards (spare-parts pages). */
.dino-cat-tiles ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dino-cat-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--dino-card-border);
  border-radius: var(--dino-card-radius);
  background: var(--dino-white, #fff);
  color: var(--dino-ink, #080909);
  text-decoration: none;
  overflow: hidden;
}
.dino-cat-tile-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--dino-surface, #f3f4f4);
  overflow: hidden;
}
.dino-cat-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.dino-cat-tile-fallback {
  background:
    repeating-linear-gradient(135deg, rgb(8 9 9 / 3%) 0 12px, transparent 12px 24px),
    var(--dino-surface, #f3f4f4);
}
.dino-cat-tile-fallback img { width: 45%; height: auto; opacity: 0.35; mix-blend-mode: normal; }
.dino-cat-tile-name {
  padding: 12px 14px 2px;
  font-size: var(--dino-body);
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.2s ease;
}
.dino-cat-tile-count { padding: 0 14px 12px; color: var(--dino-muted, #555b60); font-size: var(--dino-small); }
.dino-cat-tile:is(:hover, :focus-visible) { border-color: var(--dino-ink, #080909); }
.dino-cat-tile:is(:hover, :focus-visible) .dino-cat-tile-name { color: var(--dino-red, #c00); }
.dino-cat-tile:is(:hover, :focus-visible) .dino-cat-tile-media img { filter: brightness(0.92); }

.dino-cat-card-media {
  display: block;
  align-self: stretch;
  width: calc(100% + 56px);
  max-width: none;
  margin: -28px -28px 4px;
}
.dino-cat-card-media .dino-cat-tile-media { width: 100%; aspect-ratio: 16 / 9; background: var(--dino-white, #fff); }
@media (max-width: 767px) {
  .dino-cat-card-media { width: calc(100% + 40px); margin: -20px -20px 4px; }
}
.dino-card:hover .dino-cat-card-media img { filter: brightness(0.92); }
.dino-card:has(.dino-cat-card-media):hover .dino-card-title { color: var(--dino-red, #c00); }
.dino-card-title { transition: color var(--dino-speed) ease; }

/* Lightbox gallery tiles: zoom cue. */
.dino-gallery-tile { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .dino-card:hover,
  .dino-product-card:hover,
  .dino-cat-tile:hover,
  .dino-card:hover img,
  .dino-cat-tile:hover img,
  a.bricks-lightbox:hover img { transform: none; }
}