/* Responsive focal card sizing
 * Mobile: square card, max-height 285px
 * Desktop (>=768px): portrait 1:2 aspect ratio
 */
.image-bg{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--bg-pos-x,50%) var(--bg-pos-y,50%);
  transition: background-position .25s ease, background-image .25s ease;
  width: 100%;
  display: block;
  /* default to square for narrow screens */
  aspect-ratio: 1 / 1;
  max-height: 285px;
}

/* Larger screens: enforce 2:3 portrait ratio */
@media (min-width: 768px){
  .image-bg{
    aspect-ratio: 2 / 3; /* width : height = 2 : 3 (portrait, less tall than 1:2) */
    max-height: none;
    height: auto;
  }
}

/* If you need an explicit fixed fallback for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1){
  .image-bg{
    height: 285px; /* reasonable fallback on older browsers */
  }
  @media (min-width: 768px){
    .image-bg{
      /* approximate 2:3 using padding trick (height = 150% * width) */
      height: auto;
      position: relative;
    }
    .image-bg:before{
      content: "";
      display: block;
      width: 100%;
      padding-top: 150%; /* 2:3 (w:h -> padding-top = 150%) */
    }
    .image-bg > *{ position: absolute; left:0; top:0; right:0; bottom:0; }
  }
}

/* Visually hidden but accessible for screen-readers and SEO.
   Keeps an <img> in the DOM without affecting layout. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Make .image links block-level so they cover the entire .image-bg */
a.image { display: block; }