.elementor-kit-22909{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-22909 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:10px;--container-default-padding-bottom:0px;--container-default-padding-left:10px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:10px;--container-default-padding-bottom:0px;--container-default-padding-left:10px;}}/* Start custom CSS *//* Elementor Loop Grid: show ACF image; on hover crossfade to Featured Image
   + reveal title overlay; entire card links to ACF custom URL.
   Usage (Loop Item template):
   1) Outer Container → CSS Classes: card-swap-link
      - Advanced → Link = Dynamic → ACF URL (your meta key, e.g., custom_link)
      - (Optional) set aspect ratio via min-height or add class ratio-4x3 / ratio-1x1 below
   2) Inside add two Image widgets:
      - Image #1 (default): source = ACF Image field (e.g., display_image), CSS Classes: img-default
      - Image #2 (hover):   source = Featured Image (dynamic), CSS Classes: img-hover
   3) Add a Heading widget for the post title → CSS Classes: card-title-overlay
   4) Paste this CSS in Site Settings → Custom CSS or Customizer → Additional CSS.
*/

/* Card wrapper is the single clickable target */
.card-swap-link { position: relative; display: block; overflow: hidden; }
.card-swap-link .elementor-widget-image { margin: 0 !important; }

/* Normal/hover images occupy the same box */
.card-swap-link .img-default img,
.card-swap-link .img-hover   img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* avoid distortion */
  display: block;
}

/* Stack hover image on top */
.card-swap-link .img-hover { position: absolute; inset: 0; pointer-events: none; }

/* Crossfade */
.card-swap-link .img-default img { opacity: 1; transition: opacity .25s ease-in-out; }
.card-swap-link .img-hover   img { opacity: 0; transition: opacity .25s ease-in-out; }
.card-swap-link:hover .img-default img { opacity: 0; }
.card-swap-link:hover .img-hover   img { opacity: 1; }

/* Title overlay: hidden by default, fades in on hover */
.card-swap-link .card-title-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 14px; color: #fff; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none; /* keep whole card clickable */
}
.card-swap-link:hover .card-title-overlay { opacity: 1; transform: translateY(0); }

/* Optional: aspect ratio helpers (use one on the outer container) */
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-3x4 { aspect-ratio: 3 / 4; }

/* Mobile tweaks */
@media (max-width: 767px) {
  .card-swap-link .card-title-overlay { padding: 8px 10px; font-size: .95em; }
}/* End custom CSS */