/* DiaCircle Motion 1.3.1 — base: image sizing, stack fallback, keyboard focus ring. Always loaded. */

/* Fixed aspect ratios (Image widget). Space is reserved before load, so no layout shift. */
.dc-img-16x9 img,.dc-img-3x2 img,.dc-img-4x3 img,.dc-img-4x5 img,.dc-img-1x1 img,
.dc-img-m-4x5 img,.dc-img-m-1x1 img{display:block;width:100%;height:auto;object-fit:cover;object-position:50% 50%}
.dc-img-16x9 img{aspect-ratio:16/9}
.dc-img-3x2 img{aspect-ratio:3/2}
.dc-img-4x3 img{aspect-ratio:4/3}
.dc-img-4x5 img{aspect-ratio:4/5}
.dc-img-1x1 img{aspect-ratio:1/1}
@media (max-width:767px){
  .dc-img-m-4x5 img{aspect-ratio:4/5}
  .dc-img-m-1x1 img{aspect-ratio:1/1}
}

/* Crop focus */
.dc-focus-top img{object-position:50% 0}
.dc-focus-center img{object-position:50% 50%}
.dc-focus-left img{object-position:0 50%}
.dc-focus-right img{object-position:100% 50%}

/* Logos and diagrams: never cropped */
.dc-img-contain img{object-fit:contain}

/* Keyboard focus ring (approved exception). Teal Deep ring with a white halo so it shows on white and on navy.
   Specificity is raised (html :is(...)) so it wins over Hello Elementor's reset.css focus style. */
html :is(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"]),[role="button"]):focus-visible{
  outline:2px solid #0A5F67;outline-offset:2px;box-shadow:0 0 0 4px #FFFFFF}

/* dc-stack fallback: without the pinned effect (motion off, reduced motion, phones, no JS/CSS support)
   the stack shows as a plain list, with no tall scroll spacing. */
.dc-stack .dc-stack-item,.dc-stack .dc-stack-end{min-height:0!important}