/* ============================================================
   AI OVERRIDE - St. Agnes Catholic Parish (Concord)
   File: /images/pub/css/ai-override.css

   Added 2026-09-22 by super_shannon (agent audit record 697).

   PURPOSE
   -------
   On narrow screens (<= 50.99rem) the "News & Upcoming Events"
   sidebar list (.ph-sidenews) becomes a horizontal scroller.
   /content/override.css hides that scrollbar:

       scrollbar-width: none;
       ::-webkit-scrollbar { display: none; }

   So on a DESKTOP browser with a mouse there is no scrollbar to
   drag, and the wheel scrolls the page instead of the row. The row
   looks stuck even though it is scrollable.

   This file only makes that scrollbar visible again on pointer
   devices. Touch devices keep the clean, scrollbar-free row.

   LOAD ORDER / SPECIFICITY
   ------------------------
   Registered as a Gantry CSS asset row on the Base Outline with
   priority "0", so it renders AFTER the Override row (priority 1).
   Selectors use "html body" to beat the .ph-sidenews rules in
   override.css on specificity as well.

   SAFE TO DELETE - nothing else depends on this file.
   ============================================================ */

@media only screen and (max-width: 50.99rem) and (hover: hover) {
  html body .ph-sidenews .g-content-array {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .35) transparent;
  }

  html body .ph-sidenews .g-content-array::-webkit-scrollbar {
    display: block;
    height: 6px;
  }

  html body .ph-sidenews .g-content-array::-webkit-scrollbar-track {
    background: transparent;
  }

  html body .ph-sidenews .g-content-array::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .35);
    border-radius: 999px;
  }

  html body .ph-sidenews .g-content-array::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .55);
  }
}

/* ============================================================
   AI OVERRIDE - PART 2  (added 2026-09-22, audit record 698)
   Click-and-drag panning cue for the horizontal news rows.

   The behaviour lives in /images/pub/js/ai-drag-scroll.js, which adds
   .ai-drag-scroll-ready to a row only while that row is actually
   horizontally scrollable, and .ai-drag-scroll-active while a drag is
   in progress. Nothing here does anything without that script.
   ============================================================ */

@media only screen and (hover: hover) {
  html body .ph-sidenews .g-content-array.ai-drag-scroll-ready,
  html body .grid-articles.grid-mobile-horizontal-scroll .g-content-array.ai-drag-scroll-ready {
    cursor: grab;
  }

  html body .ph-sidenews .g-content-array.ai-drag-scroll-active,
  html body .grid-articles.grid-mobile-horizontal-scroll .g-content-array.ai-drag-scroll-active {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
    scroll-snap-type: none;
  }
}