/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/scss/blocks/image_aspect-toggle.scss ***!
  \*************************************************************************************************************************************************************************************************************************************/
/* ==========================================================================
   FEATURED IMAGE ASPECT RATIO TOGGLE ENGINE
   ========================================================================== */
/* 1. Layout & Positioning Context */
:is(.wp-block-image.is-style-aspect-toggle, .wp-block-image.is-style-toggle-aspect) {
  position: relative !important;
}
:is(.wp-block-image.is-style-aspect-toggle, .wp-block-image.is-style-toggle-aspect) img {
  transition: aspect-ratio var(--wp--custom--animation--duration--medium, 500ms) cubic-bezier(0.16, 1, 0.3, 1), object-fit var(--wp--custom--animation--duration--medium, 500ms) ease;
  transition: aspect-ratio var(--wp--custom--animation--duration--medium, 500ms) cubic-bezier(0.16, 1, 0.3, 1), object-fit var(--wp--custom--animation--duration--medium, 500ms) ease, -o-object-fit var(--wp--custom--animation--duration--medium, 500ms) ease;
}

/* 2. Suppress WP Core Lightbox Toggle Button on Aspect-Toggle Images */
:is(.wp-block-image.is-style-aspect-toggle, .wp-block-image.is-style-toggle-aspect):not(.wp-lightbox-overlay *) button.wp-block-image__lightbox-toggle {
  display: none !important;
}

/* 3. Badge Button Overrides (Strips Native Browser Border & Box-Shadow Anomalies) */
:is(.wp-block-image.is-style-aspect-toggle, .wp-block-image.is-style-toggle-aspect) > button.lumina-card-arrow-overlay.lumina-aspect-toggle {
  position: absolute !important;
  bottom: var(--wp--preset--spacing--30, 12px) !important;
  right: var(--wp--preset--spacing--30, 12px) !important;
  top: auto !important;
  left: auto !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Reset button styles */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--wp--preset--color--contrast, #000000) 80%, transparent) !important;
  color: var(--wp--preset--color--base, #ffffff) !important;
  cursor: pointer !important;
  z-index: 10 !important;
  /* Flex centering for ::after icon mask */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Hidden at rest */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.75);
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1), visibility 200ms;
}

/* 4. Icon Mask & Tooltip Assignments (Relative Asset Path) */
.lumina-card-arrow-overlay.lumina-aspect-toggle {
  /* SVG Mask Layer */
}
.lumina-card-arrow-overlay.lumina-aspect-toggle::after {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background-color: currentColor !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-position: center !important;
  -webkit-mask-position: center !important;
  transition: transform 200ms ease !important;
}
.lumina-card-arrow-overlay.lumina-aspect-toggle {
  /* Expand Action */
}
.lumina-card-arrow-overlay.lumina-aspect-toggle.lumina-action-aspect-expand::before {
  content: "Expand View";
}
.lumina-card-arrow-overlay.lumina-aspect-toggle.lumina-action-aspect-expand::after {
  -webkit-mask-image: url("../../icons/engine/aspect-toggle.svg");
          mask-image: url("../../icons/engine/aspect-toggle.svg");
  transform: rotate(90deg) !important;
}
.lumina-card-arrow-overlay.lumina-aspect-toggle {
  /* Collapse Action */
}
.lumina-card-arrow-overlay.lumina-aspect-toggle.lumina-action-aspect-collapse::before {
  content: "Collapse View";
}
.lumina-card-arrow-overlay.lumina-aspect-toggle.lumina-action-aspect-collapse::after {
  -webkit-mask-image: url("../../icons/engine/aspect-toggle.svg");
          mask-image: url("../../icons/engine/aspect-toggle.svg");
  transform: rotate(0deg) !important;
}

/* 5. Hover Gatekeeper: Reveal badge on container hover / touch active */
:is(.wp-block-image.is-style-aspect-toggle, .wp-block-image.is-style-toggle-aspect):hover > .lumina-aspect-toggle,
:is(.wp-block-image.is-style-aspect-toggle, .wp-block-image.is-style-toggle-aspect).is-active > .lumina-aspect-toggle,
:is(.wp-block-image.is-style-aspect-toggle, .wp-block-image.is-style-toggle-aspect):has(:focus-visible) > .lumina-aspect-toggle {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

/* 6. Aspect State Modifiers (Supports Global Body Class OR Per-Image Container Class) */
/* RESTING STATE: Defaults to 16:4.5 Slim Crop */
:is(.wp-block-image.is-style-aspect-toggle, .wp-block-image.is-style-toggle-aspect):not(.is-expanded) img {
  aspect-ratio: 16/4.5 !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

/* EXPANDED STATE: Triggers via individual .is-expanded OR global body.aspect-pref-full */
:is(.wp-block-image.is-style-aspect-toggle, .wp-block-image.is-style-toggle-aspect).is-expanded img,
body.aspect-pref-full :is(.wp-block-image.is-style-aspect-toggle, .wp-block-image.is-style-toggle-aspect) img {
  aspect-ratio: 21/9 !important; /* Expands to 21:9 Ultrawide */
  -o-object-fit: cover !important;
     object-fit: cover !important;
}