/* Mira Image Editor — PUBLIC rendering styles. Must load in CKEditor contentsCss AND published pages. */
img.miraimg-responsive { max-width: 100%; }
img.miraimg-rounded { border-radius: var(--miraimg-radius, 20px); }
img.miraimg-circle { border-radius: 50%; aspect-ratio: 1 / 1; height: auto !important; object-fit: cover; }
img.miraimg-opacity { opacity: var(--miraimg-opacity, 1); }

/* One shared, opt-in wrapper. Never wraps ordinary images unless frame/overlay is chosen. */
.miraimg-wrap {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
    isolation: isolate;
    box-sizing: border-box;
    max-width: 100%;
    line-height: 0;
}
.miraimg-wrap > img { max-width: 100%; }
.miraimg-wrap.miraimg-frame {
    width: var(--miraimg-frame-size, 90px);
    height: var(--miraimg-frame-size, 90px);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    padding: var(--miraimg-frame-padding, 12px);
    background: var(--miraimg-frame-bg, transparent);
    border-radius: 50%;
}
.miraimg-frame > img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    border-radius: 0;
}
.miraimg-wrap.miraimg-overlay { overflow: hidden; }
.miraimg-wrap.miraimg-wrap-circle { border-radius: 50%; }
.miraimg-wrap.miraimg-wrap-rounded { border-radius: var(--miraimg-radius, 20px); }
.miraimg-wrap.miraimg-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: var(--miraimg-overlay-color, #173c72);
    opacity: var(--miraimg-overlay-opacity, 0.30);
    border-radius: inherit;
}

/* Sided borders. Native border-width is controlled using four Boolean custom properties. */
.miraimg-bordered {
    box-sizing: border-box;
    border-style: var(--miraimg-border-style, solid);
    border-color: var(--miraimg-border-color, #cc3485);
    border-top-width: calc(var(--miraimg-border-width, 2px) * var(--miraimg-border-top, 1));
    border-right-width: calc(var(--miraimg-border-width, 2px) * var(--miraimg-border-right, 1));
    border-bottom-width: calc(var(--miraimg-border-width, 2px) * var(--miraimg-border-bottom, 1));
    border-left-width: calc(var(--miraimg-border-width, 2px) * var(--miraimg-border-left, 1));
}
.miraimg-shadow-soft { box-shadow: 0 4px 12px var(--miraimg-shadow-color, rgba(0,0,0,.12)); }
.miraimg-shadow-medium { box-shadow: 0 7px 20px var(--miraimg-shadow-color, rgba(0,0,0,.22)); }
.miraimg-shadow-strong { box-shadow: 0 12px 32px var(--miraimg-shadow-color, rgba(0,0,0,.34)); }
img.miraimg-gray { filter: grayscale(1); }

/* Effects work without per-image JS; parent triggers support linked content. */
.miraimg-effect-lift,
.miraimg-effect-grow,
.miraimg-effect-glow,
.miraimg-effect-border,
.miraimg-effect-tilt,
.miraimg-effect-fade,
.miraimg-hover-color {
    transition: transform var(--miraimg-speed, 280ms) ease,
        box-shadow var(--miraimg-speed, 280ms) ease,
        outline-color var(--miraimg-speed, 280ms) ease,
        filter var(--miraimg-speed, 280ms) ease,
        opacity var(--miraimg-speed, 280ms) ease;
    will-change: auto;
}
/* Border highlight is an outline, not a box-model border: it cannot
   resize an image/card or alter its alignment when the pointer enters. */
.miraimg-effect-border:not(.miraimg-border-motion) {
    outline: var(--miraimg-hover-border-width, 3px) solid transparent;
    outline-offset: calc(-1 * var(--miraimg-hover-border-width, 3px));
}
.miraimg-effect-border:not(.miraimg-border-motion):not(.miraimg-trigger-parent):hover,
a:hover .miraimg-effect-border:not(.miraimg-border-motion).miraimg-trigger-parent,
a:focus-within .miraimg-effect-border:not(.miraimg-border-motion).miraimg-trigger-parent {
    outline-color: var(--miraimg-hover-border-color, #cc3485);
}
/* Border reveal variations.  The classic all-sides highlight retains its
   original outline on <img>.  Directional/animated styles use the existing
   .miraimg-wrap element because replaced images have no ::before element.
   Its absolutely positioned lines never change image size or layout. */
.miraimg-effect-border.miraimg-border-motion {
    outline: none;
    isolation: isolate;
    position: relative;
}
.miraimg-effect-border.miraimg-border-motion::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        linear-gradient(var(--miraimg-hover-border-color, #cc3485), var(--miraimg-hover-border-color, #cc3485)),
        linear-gradient(var(--miraimg-hover-border-color, #cc3485), var(--miraimg-hover-border-color, #cc3485)),
        linear-gradient(var(--miraimg-hover-border-color, #cc3485), var(--miraimg-hover-border-color, #cc3485)),
        linear-gradient(var(--miraimg-hover-border-color, #cc3485), var(--miraimg-hover-border-color, #cc3485));
    background-repeat: no-repeat;
    background-position: top left, top right, bottom right, bottom left;
    background-size:
        0% var(--miraimg-hover-border-width, 3px),
        var(--miraimg-hover-border-width, 3px) 0%,
        0% var(--miraimg-hover-border-width, 3px),
        var(--miraimg-hover-border-width, 3px) 0%;
    transition: background-size var(--miraimg-speed, 280ms) ease;
}
/* Slide: top left->right, right top->bottom, bottom right->left,
   left bottom->top. Centre: each line expands outward from its midpoint. */
.miraimg-border-mode-center::before {
    background-position: top center, right center, bottom center, left center !important;
}
.miraimg-border-mode-highlight::before { transition-duration: 0s !important; }
/* Keep the old four-sided outline separate; pseudo-border only applies when
   the wrapper has opted into miraimg-border-motion. */
.miraimg-effect-border.miraimg-border-motion.miraimg-border-side-all:not(.miraimg-trigger-parent):hover::before,
a:hover .miraimg-effect-border.miraimg-border-motion.miraimg-border-side-all.miraimg-trigger-parent::before,
a:focus-within .miraimg-effect-border.miraimg-border-motion.miraimg-border-side-all.miraimg-trigger-parent::before {
    background-size:
        100% var(--miraimg-hover-border-width, 3px),
        var(--miraimg-hover-border-width, 3px) 100%,
        100% var(--miraimg-hover-border-width, 3px),
        var(--miraimg-hover-border-width, 3px) 100%;
}
/* One-edge mode never lights up the other three edges. */
.miraimg-border-side-top:not(.miraimg-trigger-parent):hover::before,
a:hover .miraimg-border-side-top.miraimg-trigger-parent::before,
a:focus-within .miraimg-border-side-top.miraimg-trigger-parent::before {
    background-size:100% var(--miraimg-hover-border-width, 3px),0 0,0 0,0 0;
}
.miraimg-border-side-right:not(.miraimg-trigger-parent):hover::before,
a:hover .miraimg-border-side-right.miraimg-trigger-parent::before,
a:focus-within .miraimg-border-side-right.miraimg-trigger-parent::before {
    background-size:0 0,var(--miraimg-hover-border-width, 3px) 100%,0 0,0 0;
}
.miraimg-border-side-bottom:not(.miraimg-trigger-parent):hover::before,
a:hover .miraimg-border-side-bottom.miraimg-trigger-parent::before,
a:focus-within .miraimg-border-side-bottom.miraimg-trigger-parent::before {
    background-size:0 0,0 0,100% var(--miraimg-hover-border-width, 3px),0 0;
}
.miraimg-border-side-left:not(.miraimg-trigger-parent):hover::before,
a:hover .miraimg-border-side-left.miraimg-trigger-parent::before,
a:focus-within .miraimg-border-side-left.miraimg-trigger-parent::before {
    background-size:0 0,0 0,0 0,var(--miraimg-hover-border-width, 3px) 100%;
}
/* Draw the perimeter clockwise in four stages. An all-edges-only preset. */
@keyframes miraimg-border-trace {
    0%   { background-size:0% var(--miraimg-hover-border-width, 3px),var(--miraimg-hover-border-width, 3px) 0%,0% var(--miraimg-hover-border-width, 3px),var(--miraimg-hover-border-width, 3px) 0%; }
    25%  { background-size:100% var(--miraimg-hover-border-width, 3px),var(--miraimg-hover-border-width, 3px) 0%,0% var(--miraimg-hover-border-width, 3px),var(--miraimg-hover-border-width, 3px) 0%; }
    50%  { background-size:100% var(--miraimg-hover-border-width, 3px),var(--miraimg-hover-border-width, 3px) 100%,0% var(--miraimg-hover-border-width, 3px),var(--miraimg-hover-border-width, 3px) 0%; }
    75%  { background-size:100% var(--miraimg-hover-border-width, 3px),var(--miraimg-hover-border-width, 3px) 100%,100% var(--miraimg-hover-border-width, 3px),var(--miraimg-hover-border-width, 3px) 0%; }
    100% { background-size:100% var(--miraimg-hover-border-width, 3px),var(--miraimg-hover-border-width, 3px) 100%,100% var(--miraimg-hover-border-width, 3px),var(--miraimg-hover-border-width, 3px) 100%; }
}
.miraimg-border-mode-trace.miraimg-border-side-all:not(.miraimg-trigger-parent):hover::before,
a:hover .miraimg-border-mode-trace.miraimg-border-side-all.miraimg-trigger-parent::before,
a:focus-within .miraimg-border-mode-trace.miraimg-border-side-all.miraimg-trigger-parent::before {
    animation: miraimg-border-trace var(--miraimg-speed, 280ms) linear both;
}
@media (prefers-reduced-motion: reduce) {
    .miraimg-effect-border.miraimg-border-motion::before {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Direct hover only when parent triggering is not selected. */
.miraimg-effect-lift:not(.miraimg-trigger-parent):hover { transform: translateY(calc(-1 * var(--miraimg-motion, 6px))); }
.miraimg-effect-grow:not(.miraimg-trigger-parent):hover { transform: scale(var(--miraimg-scale, 1.06)); }
.miraimg-effect-tilt:not(.miraimg-trigger-parent):hover { transform: rotate(3deg); }
.miraimg-effect-fade:not(.miraimg-trigger-parent):hover { opacity: .75; }
.miraimg-effect-glow:not(.miraimg-trigger-parent):hover { box-shadow: 0 0 16px rgba(53,125,210,.55); }

/* The link may contain a wrapper or img as a direct or deeper descendant. */
a:hover .miraimg-effect-lift.miraimg-trigger-parent,
a:focus-visible .miraimg-effect-lift.miraimg-trigger-parent,
a:focus-within .miraimg-effect-lift.miraimg-trigger-parent { transform: translateY(calc(-1 * var(--miraimg-motion, 6px))); }
a:hover .miraimg-effect-grow.miraimg-trigger-parent,
a:focus-visible .miraimg-effect-grow.miraimg-trigger-parent,
a:focus-within .miraimg-effect-grow.miraimg-trigger-parent { transform: scale(var(--miraimg-scale, 1.06)); }
a:hover .miraimg-effect-tilt.miraimg-trigger-parent,
a:focus-visible .miraimg-effect-tilt.miraimg-trigger-parent,
a:focus-within .miraimg-effect-tilt.miraimg-trigger-parent { transform: rotate(3deg); }
a:hover .miraimg-effect-fade.miraimg-trigger-parent,
a:focus-visible .miraimg-effect-fade.miraimg-trigger-parent,
a:focus-within .miraimg-effect-fade.miraimg-trigger-parent { opacity: .75; }
a:hover .miraimg-effect-glow.miraimg-trigger-parent,
a:focus-visible .miraimg-effect-glow.miraimg-trigger-parent,
a:focus-within .miraimg-effect-glow.miraimg-trigger-parent { box-shadow: 0 0 16px rgba(53,125,210,.55); }
/* Handle a link directly containing the styled image (no intervening wrapper). */
a:hover > .miraimg-effect-lift.miraimg-trigger-parent,
a:focus-visible > .miraimg-effect-lift.miraimg-trigger-parent { transform: translateY(calc(-1 * var(--miraimg-motion, 6px))); }
a:hover > .miraimg-effect-grow.miraimg-trigger-parent,
a:focus-visible > .miraimg-effect-grow.miraimg-trigger-parent { transform: scale(var(--miraimg-scale, 1.06)); }
a:hover > .miraimg-effect-tilt.miraimg-trigger-parent,
a:focus-visible > .miraimg-effect-tilt.miraimg-trigger-parent { transform: rotate(3deg); }
a:hover > .miraimg-effect-fade.miraimg-trigger-parent,
a:focus-visible > .miraimg-effect-fade.miraimg-trigger-parent { opacity: .75; }
a:hover > .miraimg-effect-glow.miraimg-trigger-parent,
a:focus-visible > .miraimg-effect-glow.miraimg-trigger-parent { box-shadow: 0 0 16px rgba(53,125,210,.55); }

.miraimg-gray.miraimg-hover-color:not(.miraimg-trigger-parent):hover,
a:hover .miraimg-gray.miraimg-hover-color,
a:focus-within .miraimg-gray.miraimg-hover-color { filter: grayscale(0); }

@media (prefers-reduced-motion: reduce) {
    .miraimg-effect-lift, .miraimg-effect-grow, .miraimg-effect-tilt,
    .miraimg-effect-glow, .miraimg-effect-border, .miraimg-effect-fade, .miraimg-hover-color {
        transition-duration: 0.01ms !important;
        animation: none !important;
    }
    .miraimg-effect-lift:hover, .miraimg-effect-grow:hover, .miraimg-effect-tilt:hover,
    a:hover .miraimg-effect-lift, a:hover .miraimg-effect-grow, a:hover .miraimg-effect-tilt,
    a:focus-within .miraimg-effect-lift, a:focus-within .miraimg-effect-grow,
    a:focus-within .miraimg-effect-tilt { transform: none !important; }
}

/* Mira Image Editor v1.2: presentation settings belong to Image Editor;
   the entire .miraimg-caption-label subtree belongs to CKEditor. */
.miraimg-caption-figure {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    inline-size: max-content;
    max-inline-size: 100%;
    margin: 0;
    padding: 0;
    isolation: isolate;
    min-inline-size: 0;
    line-height: normal;
}
.miraimg-caption-figure > img,
.miraimg-caption-figure > a,
.miraimg-caption-figure > .miraimg-wrap,
.miraimg-caption-figure > .miraimg-preview-frame {
    display: block;
    box-sizing: border-box;
    flex: 0 1 auto;
    max-inline-size: 100%;
    min-inline-size: 0;
}
.miraimg-caption-figure > a > img,
.miraimg-caption-figure > a > .miraimg-wrap {
    display: block;
    max-inline-size: 100%;
}
.miraimg-caption-figure > img { block-size: auto; }
.miraimg-caption-figure .miraimg-caption {
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-inline-size: 0;
    max-inline-size: 100%;
    font: inherit;
    color: inherit;
    text-align: inherit;
    pointer-events: none;
}
.miraimg-caption-figure .miraimg-caption-label {
    box-sizing: border-box;
    position: relative;
    flex: 0 1 auto;
    display: block;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    padding: var(--miraimg-cap-pad-y, 6px) var(--miraimg-cap-pad-x, 12px);
    background: transparent;
    border: 0 solid transparent;
    pointer-events: auto;
}
.miraimg-caption-figure[data-mi-cap-x="left"] .miraimg-caption-label { align-self: flex-start; }
.miraimg-caption-figure[data-mi-cap-x="center"] .miraimg-caption-label { align-self: center; }
.miraimg-caption-figure[data-mi-cap-x="right"] .miraimg-caption-label { align-self: flex-end; }
.miraimg-caption-figure[data-mi-cap-width="fit"] .miraimg-caption-label { inline-size: max-content; }
.miraimg-caption-figure[data-mi-cap-width="full"] .miraimg-caption-label { inline-size: 100%; }
.miraimg-caption-figure[data-mi-cap-width="custom"] .miraimg-caption-label { inline-size: var(--miraimg-cap-width, 80%); }
.miraimg-caption-figure[data-mi-cap-text-align="left"] .miraimg-caption-label { text-align: left; }
.miraimg-caption-figure[data-mi-cap-text-align="center"] .miraimg-caption-label { text-align: center; }
.miraimg-caption-figure[data-mi-cap-text-align="right"] .miraimg-caption-label { text-align: right; }
.miraimg-caption-figure[data-mi-cap-font="small"] .miraimg-caption { font-size: 10px; }
.miraimg-caption-figure[data-mi-cap-font="normal"] .miraimg-caption { font-size: 12px; }
.miraimg-caption-figure[data-mi-cap-font="large"] .miraimg-caption { font-size: 16px; }
.miraimg-caption-figure[data-mi-cap-weight="bold"] .miraimg-caption-label { font-weight: 700; }
.miraimg-caption-figure[data-mi-cap-weight="italic"] .miraimg-caption-label { font-style: italic; }
.miraimg-caption-figure[data-mi-cap-bg="yes"] .miraimg-caption-label {
    background: color-mix(in srgb, var(--miraimg-cap-bg-color, #fff) var(--miraimg-cap-bg-opacity, 100%), transparent);
}
.miraimg-caption-figure[data-mi-cap-border="yes"] .miraimg-caption-label {
    border-width: var(--miraimg-cap-border-width, 1px);
    border-style: solid;
    border-color: var(--miraimg-cap-border-color, #d9dfe7);
}
.miraimg-caption-figure[data-mi-cap-corners="square"] .miraimg-caption-label { border-radius: 0; }
.miraimg-caption-figure[data-mi-cap-corners="rounded"] .miraimg-caption-label { border-radius: var(--miraimg-cap-radius, 12px); }
.miraimg-caption-figure[data-mi-cap-corners="pill"] .miraimg-caption-label { border-radius: 999px; }
.miraimg-caption-figure[data-mi-cap-corners="match"] .miraimg-caption-label { border-radius: var(--miraimg-cap-match-radius, 20px); }
.miraimg-caption-figure[data-mi-cap-pos="above"] > .miraimg-caption,
.miraimg-caption-figure[data-mi-cap-pos="below"] > .miraimg-caption { padding: var(--miraimg-cap-inset, 8px) 0; }
.miraimg-caption-figure[data-mi-cap-pos="above"] > .miraimg-caption { order: -1; }
.miraimg-caption-figure[data-mi-cap-pos="below"] > .miraimg-caption { order: 1; }
/* Overlap reserves the entire caption line in the figure's natural height,
   while translating the label halfway across the edge of the photograph. */
.miraimg-caption-figure[data-mi-cap-pos="overlap"] > .miraimg-caption { order: 1; padding-inline: var(--miraimg-cap-inset, 8px); transform: translateY(-50%); }
.miraimg-caption-figure[data-mi-cap-pos="overlap"][data-mi-cap-edge="top"] > .miraimg-caption { order: -1; transform: translateY(50%); }
/* Inside captions use a full-frame flex column. Flexible spacers above and
   below the label divide *remaining* height proportionally: at 0/100%,
   a tall/wrapped caption stays inside instead of being clipped offscreen. */
.miraimg-caption-figure[data-mi-cap-pos="inside"] > .miraimg-caption {
    position: absolute;
    inset: 0;
    padding: var(--miraimg-cap-inset, 8px);
    min-block-size: 0;
    max-block-size: 100%;
}
.miraimg-caption-figure[data-mi-cap-pos="inside"] > .miraimg-caption::before {
    content: '';
    flex: var(--miraimg-cap-y, 100) 1 0;
    min-height: 0;
}
.miraimg-caption-figure[data-mi-cap-pos="inside"] > .miraimg-caption::after {
    content: '';
    flex: var(--miraimg-cap-y-after, 0) 1 0;
    min-height: 0;
}
.miraimg-caption-figure[data-mi-cap-pos="inside"][data-mi-cap-width="full"] > .miraimg-caption { padding-inline: 0; }
.miraimg-caption-figure[data-mi-cap-pos="inside"][data-mi-cap-v="top"][data-mi-cap-width="full"] > .miraimg-caption { padding-block-start: 0; }
.miraimg-caption-figure[data-mi-cap-pos="inside"][data-mi-cap-v="bottom"][data-mi-cap-width="full"] > .miraimg-caption { padding-block-end: 0; }
.miraimg-caption-figure[data-mi-cap-pos="inside"][data-mi-cap-corners="match"][data-mi-cap-v="bottom"][data-mi-cap-width="full"] .miraimg-caption-label {
    border-radius: 0 0 var(--miraimg-cap-match-radius, 20px) var(--miraimg-cap-match-radius, 20px);
}
.miraimg-caption-figure[data-mi-cap-pos="inside"][data-mi-cap-corners="match"][data-mi-cap-v="top"][data-mi-cap-width="full"] .miraimg-caption-label {
    border-radius: var(--miraimg-cap-match-radius, 20px) var(--miraimg-cap-match-radius, 20px) 0 0;
}
/* Don't let a long caption increase the figure beyond the photograph width.
   The percentage min-width resolves after the media has established figure size. */
.miraimg-caption-figure[data-mi-cap-pos="above"] > .miraimg-caption,
.miraimg-caption-figure[data-mi-cap-pos="below"] > .miraimg-caption,
.miraimg-caption-figure[data-mi-cap-pos="overlap"] > .miraimg-caption {
    inline-size: 0;
    min-inline-size: 100%;
}
/* Labels displayed over an image must not intercept its existing link. */
.miraimg-caption-figure[data-mi-cap-pos="inside"] .miraimg-caption-label,
.miraimg-caption-figure[data-mi-cap-pos="overlap"] .miraimg-caption-label {
    pointer-events: none;
}
/* Keep old v1.1 typography when explicitly serialized on an old caption.
   New v1.2 captions inherit normal page typography; CKEditor controls it. */
.miraimg-caption-figure[data-mi-cap-font] .miraimg-caption {
    font: normal 12px/1.4 Arial, sans-serif;
    color: var(--miraimg-cap-text-color, #263a53);
}
.miraimg-caption-figure .miraimg-caption-label p,
.miraimg-caption-figure .miraimg-caption-label div {
    max-inline-size: 100%;
    margin-block: 0;
}
/* A brand-new caption has only an invisible caret anchor in the saved HTML.
   Do not render an empty pill, band or placeholder on public pages. */
.miraimg-caption-figure[data-mi-cap-empty="1"] > .miraimg-caption {
    display: none;
}
/* Existing left/right image alignment moves onto the caption as a unit. */
.miraimg-caption-figure[data-mi-cap-float="left"] { float: left; }
.miraimg-caption-figure[data-mi-cap-float="right"] { float: right; }
.miraimg-caption-figure[data-mi-cap-float] img { float: none !important; }