/*
 * Mobile fix for Sonora/Verse portfolio hover effects
 *
 * This stylesheet adds :focus-within rules that mirror the default
 * :hover behaviour defined by the Sonora theme for portfolio lists
 * using the “info‑on‑hover” layout with the “fade‑in” animation. On
 * touch devices a tap gives focus to the <article> element, which
 * triggers the same transforms and opacity changes as hover on
 * desktop, and ensures only one item is open at any time because
 * focus is unique.  The base hover rules live in the theme’s
 * main CSS (see sonora‑core.min.css for reference: the hover rule
 * applies a translateY and opacity change to the .qodef-e-content and
 * moves the image upward).  These styles were derived from the
 * following excerpt of the original stylesheet:
 *
 *   .qodef-item-layout--info-on-hover.qodef-hover-animation--fade-in
 *   .qodef-e-content { opacity: 0; transform: translateY(100%); … }
 *   .qodef-item-layout--info-on-hover.qodef-hover-animation--fade-in
 *   .qodef-e:hover .qodef-e-content { opacity: 1; transform: translateY(1%); … }
 *   .qodef-item-layout--info-on-hover.qodef-hover-animation--fade-in
 *   .qodef-e:hover .qodef-e-media-image img { transform: scale(1.1) translateY(calc(-1 * var(--qodef-y))); }
 *
 * To preserve accessibility, outlines are removed and tabindex is added via
 * JavaScript so that the articles are focusable.  If you use a
 * different hover animation, adjust the transforms accordingly.
 */

@media (max-width: 768px) {
  /* Explicitly override the fade‑in hover behaviour to always display the info content */
  .qodef-item-layout--info-on-hover.qodef-hover-animation--fade-in .qodef-e-content {
    opacity: 1 !important;
    transform: translateY(0) !important;
    z-index: 2 !important;
    pointer-events: all !important;
    will-change: auto !important;
  }

  /* Maintain the image zoom/translate used on hover */
  .qodef-item-layout--info-on-hover.qodef-hover-animation--fade-in .qodef-e-media-image img {
    transform: scale(1.1) translateY(calc(-1 * var(--qodef-y))) !important;
  }

  /* Ensure the overlay panel (left holder) is visible */
  .qodef-item-layout--info-on-hover.qodef-hover-animation--fade-in .qodef-e-left-holder {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Remove outline from article elements for cleaner tap behaviour */
  .qodef-portfolio-list article.qodef-e {
    outline: none;
  }
}