/* ==========================================================================
   Blog carousel thumbnails, site wide
   essentia WEB WORKS

   The problem
   -----------
   The thumbnail frame in the post carousel is a fixed 180px tall and takes
   its width from whatever column it sits in. That means the crop shape
   changes from page to page: a 1070px column gives a 238 x 180 frame
   (1.32:1), a wider column stretches it toward 2.3:1. The blog headers are
   all built at roughly 3:2, so a 1.32:1 frame shaves about 15% off the
   sides of every one of them. Headers that are graphics rather than photos,
   like the Career Prism and Divine Mercy University images, lose the ends
   of their wordmarks.

   The fix
   -------
   Tie the frame to the 3:2 shape the headers are actually made at, instead
   of a fixed height. Nothing else changes: same width, same cover crop,
   same hover. Cards come in about 21px shorter at the current column width.

   Applies only inside .owlpostslider, so other uses of .image.hoverlay on
   the site are untouched.
   ========================================================================== */

.owlpostslider .image.hoverlay {
  height: auto !important;
  aspect-ratio: 3 / 2;
}

.owlpostslider .image.hoverlay a {
  display: block;
  height: 100%;
}

.owlpostslider .image.hoverlay img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Carousel arrows
   They were sitting across the post titles, so on a phone you tapped an arrow
   when you meant to tap the headline. Raised into the thumbnail, where they
   belong, and the invisible strip around them no longer swallows clicks.
   -------------------------------------------------------------------------- */

.owlpostslider .owl-nav {
  top: 52px !important;
  bottom: auto !important;
  pointer-events: none;
}

.owlpostslider .owl-nav button,
.owlpostslider .owl-prev,
.owlpostslider .owl-next {
  pointer-events: auto;
}

/* At phone width each slide is the full screen, so the thumbnail is much
   taller and the desktop arrow offset left them stranded near the top edge.
   The shallower frame here also trims the white margin around logo-style
   headers, which at full width was leaving a large blank area. */
@media (max-width: 782px) {
  .owlpostslider .image.hoverlay { aspect-ratio: 16 / 9; }
  .owlpostslider .owl-nav { top: 80px !important; }
}