/*
  Wojo Framework 4.0 — Images
  Namespace prefix: .wf-img, .wf-figure
  Requires: wf-layout.css, wf-colors.css
*/
.wf-img-frame,
.wf-figure {
    --_img-radius: var(--wf-radius-6, .875rem);
    --_img-border-color: var(--wf-border, #d8dfec);
    --_img-shadow-sm: 0 1px 4px rgba(15, 32, 69, .08), 0 4px 16px rgba(15, 32, 69, .06);
    --_img-shadow-lg: 0 4px 12px rgba(15, 32, 69, .1), 0 12px 40px rgba(15, 32, 69, .14);
    --_img-transition: .35s ease;
    --_img-overlay-bg: rgba(20, 99, 255, .45);
    --_img-caption-color: var(--wf-text-muted, #5b6474);
    --_img-caption-size: .875rem;
}
.wf-img {
    display: block;
    max-width: 100%;
    height: auto;
}
.wf-img-fit-cover {
    object-fit: cover;
}
.wf-img-fit-contain {
    object-fit: contain;
}
.wf-img-fit-fill {
    object-fit: fill;
}
.wf-img-fit-scale {
    object-fit: scale-down;
}
.wf-img-fit-none {
    object-fit: none;
}
.wf-img-pos-top {
    object-position: top;
}
.wf-img-pos-bottom {
    object-position: bottom;
}
.wf-img-pos-left {
    object-position: left;
}
.wf-img-pos-right {
    object-position: right;
}
.wf-img-pos-center {
    object-position: center;
}
.wf-img-bg-size-cover {
    background-size: cover;
}
.wf-img-bg-size-contain {
    background-size: contain;
}
.wf-img-bg-size-auto {
    background-size: auto;
}
.wf-img-bg-pos-center {
    background-position: center;
}
.wf-img-bg-pos-bottom {
    background-position: bottom;
}
.wf-img-bg-pos-left {
    background-position: left;
}
.wf-img-bg-pos-right {
    background-position: right;
}
.wf-img-bg-pos-tc {
    background-position: top center;
}
.wf-img-bg-pos-bc {
    background-position: bottom center;
}
.wf-img-bg-repeat-none {
    background-repeat: no-repeat;
}
.wf-img-bg-repeat {
    background-repeat: repeat;
}
.wf-img-frame {
    display: inline-block;
    position: relative;
    overflow: hidden;
    max-width: 100%;
}
/* Aspect-ratio frames must fill their parent width to create a meaningful height */
.wf-img-square,
.wf-img-photo,
.wf-img-classic,
.wf-img-video,
.wf-img-wide,
.wf-img-portrait,
.wf-img-tall,
.wf-img-banner,
.wf-img-frame[class*=wf-img-reveal-],
.wf-img-frame[class*=wf-img-hover-] {
    display: block;
    width: 100%;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* When an aspect-ratio modifier is present, img must fill the constrained frame */
.wf-img-square > img,
.wf-img-photo > img,
.wf-img-classic > img,
.wf-img-video > img,
.wf-img-wide > img,
.wf-img-portrait > img,
.wf-img-tall > img,
.wf-img-banner > img,
.wf-img-frame[class*=wf-img-reveal-] > img,
.wf-img-frame[class*=wf-img-hover-] > img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}
.wf-img-mask {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    overflow: hidden;
}
/* Image masks */
.wf-mask-blob {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 648 489'%3E%3Cpath fill='%23fff' d='M336.91 45.661c238.709 29.952 272.5 139 272.5 208.5s-70.359 147.561-272.5 208.5c-124.444 37.516-200.371-100.424-253.5-202.5-94.551-181.659 28.415-242.742 253.5-214.5'/%3E%3Cpath fill='%23fff' fill-opacity='.25' d='M564.5 134C798.944 187.992 837 273 837 342.5S772.511 514.862 564.5 551C453.433 570.296 365.703 447.276 311 348.5 194.006 137.245 328.613 79.676 564.5 134' transform='matrix(1.13796 0 0 1.11398 -305.064 -127.863)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 648 489'%3E%3Cpath fill='%23fff' d='M336.91 45.661c238.709 29.952 272.5 139 272.5 208.5s-70.359 147.561-272.5 208.5c-124.444 37.516-200.371-100.424-253.5-202.5-94.551-181.659 28.415-242.742 253.5-214.5'/%3E%3Cpath fill='%23fff' fill-opacity='.25' d='M564.5 134C798.944 187.992 837 273 837 342.5S772.511 514.862 564.5 551C453.433 570.296 365.703 447.276 311 348.5 194.006 137.245 328.613 79.676 564.5 134' transform='matrix(1.13796 0 0 1.11398 -305.064 -127.863)'/%3E%3C/svg%3E");
}
.wf-mask-squircle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200H100C155.228%200%20200%2044.7715%20200%20100V200H100C44.7715%20200%200%20155.228%200%20100V0Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%200H100C155.228%200%20200%2044.7715%20200%20100V200H100C44.7715%20200%200%20155.228%200%20100V0Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.wf-mask-wave-bottom {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath fill='white' d='M0 0H1200V650Q1000 800 800 700Q600 600 400 700Q200 800 0 650Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath fill='white' d='M0 0H1200V650Q1000 800 800 700Q600 600 400 700Q200 800 0 650Z'/%3E%3C/svg%3E");
}
.wf-mask-arch {
    overflow: hidden;
    border-radius: 9999px 9999px 0 0;
}
.wf-mask-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.wf-mask-ink {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath fill='white' d='M85 290Q120 180 220 150Q320 120 420 160Q520 200 510 310Q500 420 390 470Q280 520 180 470Q80 420 85 290Z'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath fill='white' d='M85 290Q120 180 220 150Q320 120 420 160Q520 200 510 310Q500 420 390 470Q280 520 180 470Q80 420 85 290Z'/%3E%3C/svg%3E");
}
.wf-mask-petal {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20173.738C24.3644%20236.944%20-36.9438%20175.636%2026.2621%20100C-36.9438%2024.3644%2024.3644%20-36.9438%20100%2026.2621C175.621%20-36.9438%20236.944%2024.3644%20173.738%20100C236.944%20175.578%20175.621%20236.944%20100%20173.738Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20173.738C24.3644%20236.944%20-36.9438%20175.636%2026.2621%20100C-36.9438%2024.3644%2024.3644%20-36.9438%20100%2026.2621C175.621%20-36.9438%20236.944%2024.3644%20173.738%20100C236.944%20175.578%20175.621%20236.944%20100%20173.738Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.wf-mask-clover {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M139.997%20139.994C220.001%20220.002%20-20.0011%20220.002%2060.0033%20139.994C-20.0011%20220.002%20-20.0011%20-19.9992%2060.0033%2059.9975C-20.0011%20-19.9992%20220.001%20-19.9992%20139.997%2059.9975C220.001%20-19.9992%20220.001%20220.002%20139.997%20139.994Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M139.997%20139.994C220.001%20220.002%20-20.0011%20220.002%2060.0033%20139.994C-20.0011%20220.002%20-20.0011%20-19.9992%2060.0033%2059.9975C-20.0011%20-19.9992%20220.001%20-19.9992%20139.997%2059.9975C220.001%20-19.9992%20220.001%20220.002%20139.997%20139.994Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.wf-mask-flower {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22198%22%20height%3D%22198%22%20viewBox%3D%220%200%20198%20198%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M177.501%2065.1861C184.538%2033.7046%20161.945%2012.5935%20129.723%2021.4824C111.945%20-7.03612%2081.575%20-7.03612%2064.9083%2020.7417C33.4268%2014.075%2012.6861%2036.2972%2021.2046%2068.1491C-6.94352%2085.5565%20-6.94352%20115.927%2020.4639%20132.594C13.4269%20164.075%2036.0194%20185.186%2068.2417%20176.297C86.0194%20204.816%20116.39%20204.816%20133.056%20177.038C164.538%20183.705%20185.279%20161.482%20176.76%20129.631C204.908%20112.223%20204.538%2081.8528%20177.501%2065.1861Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22198%22%20height%3D%22198%22%20viewBox%3D%220%200%20198%20198%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M177.501%2065.1861C184.538%2033.7046%20161.945%2012.5935%20129.723%2021.4824C111.945%20-7.03612%2081.575%20-7.03612%2064.9083%2020.7417C33.4268%2014.075%2012.6861%2036.2972%2021.2046%2068.1491C-6.94352%2085.5565%20-6.94352%20115.927%2020.4639%20132.594C13.4269%20164.075%2036.0194%20185.186%2068.2417%20176.297C86.0194%20204.816%20116.39%20204.816%20133.056%20177.038C164.538%20183.705%20185.279%20161.482%20176.76%20129.631C204.908%20112.223%20204.538%2081.8528%20177.501%2065.1861Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.wf-mask-layered {
   isolation: isolate;
   position: relative;
}
.wf-mask-layered::before {
   content: "";
   position: absolute;
   inset: -10px;
   z-index: -1;
   background: linear-gradient(135deg,
         var(--primary-color),
         var(--secondary-color));

   border-radius: 42% 58% 70% 30% / 30% 30% 70% 70%;
}
.wf-mask-ticket {
   clip-path: polygon(0 12%,12% 0, 88% 0, 100% 12%,100% 88%,88% 100%,12% 100%,0 88%);
}
.wf-img-xs {
    width: 3rem;
}
.wf-img-sm {
    width: 6rem;
}
.wf-img-md {
    width: 10rem;
}
.wf-img-lg {
    width: 16rem;
}
.wf-img-xl {
    width: 24rem;
}
.wf-img-2xl {
    width: 36rem;
}
.wf-img-full {
    width: 100%;
}
.wf-img-square {
    aspect-ratio: 1;
}
.wf-img-banner {
    aspect-ratio: 5/1;
}
.wf-img-video {
    aspect-ratio: 16/9;
}
.wf-img-wide {
    aspect-ratio: 21/9;
}
.wf-img-classic {
    aspect-ratio: 4/3;
}
.wf-img-photo {
    aspect-ratio: 3/2;
}
.wf-img-portrait {
    aspect-ratio: 2/3;
}
.wf-img-tall {
    aspect-ratio: 3/4;
}
.wf-img-taller {
    aspect-ratio: 3/5;
}
.wf-img-rounded {
    border-radius: var(--_img-radius, .875rem);
}
.wf-img-circle {
    border-radius: 100%;
}
.wf-img-pill {
    border-radius: 9999px;
}
.wf-img-bg {
    --img-bg: none;
    background-image: var(--img-bg, none);
}
.wf-img-bg-greyscale {
    background-blend-mode: luminosity;
    background-color: var(--grey-color, #808080);
}
img.wf-img-rounded,
img.wf-img-circle,
img.wf-img-pill {
    overflow: hidden;
}
.wf-img-bordered {
    border: 1px solid var(--_img-border-color);
}
.wf-img-shadow {
    box-shadow: var(--_img-shadow-sm);
}
.wf-img-elevated {
    box-shadow: var(--_img-shadow-lg);
}
.wf-img-thumbnail {
    box-shadow: var(--_img-shadow-sm);
    padding: .25rem;
    background: var(--wf-surface, #fff);
    border: 1px solid var(--_img-border-color);
    border-radius: var(--wf-radius-4, .5rem);
}
.wf-img-frame[class*=wf-img-hover-] > img {
    transition: transform var(--_img-transition), filter var(--_img-transition), opacity var(--_img-transition);
}
.wf-img-frame[class*=wf-img-hover-] {
    cursor: pointer;
}
.wf-img-hover-zoom:hover > img {
    transform: scale(1.08);
}
.wf-img-hover-lift {
    transition: transform var(--_img-transition), box-shadow var(--_img-transition);
}
.wf-img-hover-lift:hover {
    box-shadow: var(--_img-shadow-lg);
    transform: translateY(-5px);
}
.wf-img-hover-float {
    transition: transform var(--_img-transition), box-shadow var(--_img-transition);
}
.wf-img-hover-float:hover {
    box-shadow: var(--_img-shadow-lg);
    transform: translateY(-5px);
}
.wf-img-hover-float:hover > img {
    transform: scale(1.05);
}
.wf-img-hover-dim > img {
    filter: brightness();
}
.wf-img-hover-dim:hover > img {
    filter: brightness(.65);
}
.wf-img-hover-brighten > img {
    filter: brightness(.88) saturate(.9);
}
.wf-img-hover-brighten:hover > img {
    filter: brightness(1.08) saturate(1.1);
}
.wf-img-hover-colorize > img {
    filter: grayscale();
}
.wf-img-hover-colorize:hover > img,
.wf-img-hover-grayscale > img {
    filter: grayscale(0);
}
.wf-img-hover-grayscale:hover > img {
    filter: grayscale();
}
.wf-img-hover-blur:hover > img {
    filter: blur(3px);
    transform: scale(1.04);
}
.wf-img-hover-overlay:after {
    pointer-events: none;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    content: "";
    position: absolute;
    opacity: 0;
    transition: opacity var(--_img-transition);
    background-color: var(--_img-overlay-bg);
}
.wf-img-hover-overlay:hover:after {
    opacity: 1;
}
.wf-img-overlay-dark {
    --_img-overlay-bg: rgba(15, 20, 40, .55);
}
.wf-img-overlay-light {
    --_img-overlay-bg: rgba(255, 255, 255, .45);
}
/* Bottom Slide-Up */
.wf-img-reveal-bottom img {
    transition: transform .4s ease;
}
.wf-img-reveal-bottom:hover img {
    transform: scale(1.08);
}
.wf-img-reveal-bottom-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    padding: 1.25rem;
    background: linear-gradient(transparent, var(--wf-surface));
    transform: translateY(100%);
    transition: transform .3s ease;
}
.wf-img-reveal-bottom:hover .wf-img-reveal-bottom-content {
    transform: translateY(0);
}
/* Center Fade */
.wf-img-reveal-center::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity .3s ease;
}
.wf-img-reveal-center-content {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .3s ease, transform .3s ease;
    z-index: 1;
}
.wf-img-reveal-center:hover::after {
    opacity: 1;
}
.wf-img-reveal-center:hover .wf-img-reveal-center-content {
    opacity: 1;
    transform: translateY(0);
}
/* Glass Panel */
.wf-img-reveal-glass img {
    transition: transform .4s ease;
}
.wf-img-reveal-glass-content {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 1rem;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: .75rem;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .3s ease, transform .3s ease;
}
.wf-img-reveal-glass:hover img {
    transform: scale(1.08);
}
.wf-img-reveal-glass:hover .wf-img-reveal-glass-content {
    opacity: 1;
    transform: translateY(0);
}
/* Split Reveal */
.wf-img-reveal-split::before,
.wf-img-reveal-split::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    background: rgba(0, 0, 0, .85);
    transition: transform .35s ease;
}
.wf-img-reveal-split::before {
    top: 0;
    transform: translateY(-100%);
}
.wf-img-reveal-split::after {
    bottom: 0;
    transform: translateY(100%);
}
.wf-img-reveal-split-content {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    opacity: 0;
    z-index: 1;
    transition: opacity .2s ease .15s;
}
.wf-img-reveal-split:hover::before {
    transform: translateY(0);
}
.wf-img-reveal-split:hover::after {
    transform: translateY(0);
}
.wf-img-reveal-split:hover .wf-img-reveal-split-content {
    opacity: 1;
}
.wf-figure {
    display: block;
    margin: 0;
}
.wf-figure-caption {
    margin-block-start: .5rem;
    display: block;
    font-size: var(--_img-caption-size);
    line-height: 1.45;
    color: var(--_img-caption-color);
}
.wf-figure-caption-center {
    text-align: center;
}
.wf-img-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}
.wf-img-group > .wf-img-frame,
.wf-img-group > .wf-figure {
    flex: 12rem;
    min-width: 0;
}
.wf-img-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
@media (max-width: 39.999em) {
    .wf-img-2xl {
        width: 100%;
    }
}
/* ── Video frame ─────────────────────────────────────────────────────────── */
.wf-video-frame {
    display: block;
    width: 100%;
}
.wf-video-frame > iframe,
.wf-video-frame > video {
    aspect-ratio: 16 / 9;
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: var(--_img-radius, .875rem);
}
.wf-video-frame > figcaption {
    margin-block-start: .5rem;
    font-size: var(--_img-caption-size, .875rem);
    line-height: 1.45;
    color: var(--_img-caption-color, var(--wf-text-muted, #5b6474));
    text-align: center;
}