/* Image frame — i2t3 component styles
 * Single image with a frame style (square/rounded/circle/bordered/shadow), a hover
 * effect (transforms/filters + a curated set of caption overlays faithfully ported
 * from Karma's thumb-info skins), optional side-by-side text layout, and a
 * multi-image gallery grid (solid / dashed dividers). Pure CSS; no script.
 *
 * Accent colour: set --i2t3-if-accent on the section (see TS), fall back to Bootstrap primary.
 */

.i2t3-imageframe { --i2t3-if-accent: var(--bs-primary, #0d6efd); }

.i2t3-imageframe__figure { margin: 0; display: inline-block; max-width: 100%; }
.i2t3-imageframe__media { position: relative; display: block; overflow: hidden; }
.i2t3-imageframe__img { display: block; width: 100%; height: auto; transition: transform .4s ease; }

/* ---------------------------------------------------------------- Frame styles */
.i2t3-imageframe--rounded .i2t3-imageframe__media,
.i2t3-imageframe--rounded .i2t3-imageframe__img { border-radius: .75rem; }
.i2t3-imageframe--circle .i2t3-imageframe__media { border-radius: 50%; }
.i2t3-imageframe--circle .i2t3-imageframe__img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
/* bordered: thumbnail look — border on the image itself, not on the overlay area */
.i2t3-imageframe--bordered .i2t3-imageframe__media { padding: .25rem; background: #fff; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .35rem; }
.i2t3-imageframe--bordered .i2t3-imageframe__img { border-radius: .25rem; }
.i2t3-imageframe--shadow .i2t3-imageframe__media,
.i2t3-imageframe--shadow .i2t3-imageframe__img { border-radius: .5rem; }
.i2t3-imageframe--shadow .i2t3-imageframe__media { box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .25); }

/* sharp-border override (Karma rounded-0) */
.i2t3-imageframe.is-sharp .i2t3-imageframe__media,
.i2t3-imageframe.is-sharp .i2t3-imageframe__img { border-radius: 0; }

/* ---------------------------------------------------------------- Hover: transforms/filters */
.i2t3-imageframe--hover-zoom .i2t3-imageframe__media:hover .i2t3-imageframe__img { transform: scale(1.08); }
.i2t3-imageframe--hover-lift .i2t3-imageframe__media { transition: transform .25s ease, box-shadow .25s ease; }
/* Bugfix: lift must keep (and deepen) the shadow-frame box-shadow instead of replacing it */
.i2t3-imageframe--hover-lift .i2t3-imageframe__media:hover { transform: translateY(-.4rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); }
.i2t3-imageframe--shadow.i2t3-imageframe--hover-lift .i2t3-imageframe__media { box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .25); }
.i2t3-imageframe--shadow.i2t3-imageframe--hover-lift .i2t3-imageframe__media:hover { box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .3); }

.i2t3-imageframe--hover-grayscale .i2t3-imageframe__img { filter: grayscale(1); transition: filter .4s ease; }
.i2t3-imageframe--hover-grayscale .i2t3-imageframe__media:hover .i2t3-imageframe__img { filter: grayscale(0); }
.i2t3-imageframe--hover-blur .i2t3-imageframe__media:hover .i2t3-imageframe__img { filter: blur(3px); }
.i2t3-imageframe--hover-rotate .i2t3-imageframe__media:hover .i2t3-imageframe__img { transform: scale(1.1) rotate(3deg); }
.i2t3-imageframe--hover-zoom-rotate .i2t3-imageframe__media:hover .i2t3-imageframe__img { transform: scale(1.15) rotate(-4deg); }
.i2t3-imageframe--hover-colorize .i2t3-imageframe__media::after {
    content: ""; position: absolute; inset: 0;
    background: var(--i2t3-if-accent); opacity: 0;
    transition: opacity .3s ease; mix-blend-mode: multiply; pointer-events: none;
}
.i2t3-imageframe--hover-colorize .i2t3-imageframe__media:hover::after { opacity: .5; }

/* ---------------------------------------------------------------- Caption (static, below image) */
.i2t3-imageframe__caption { margin-top: .5rem; display: block; }
.i2t3-imageframe__caption .i2t3-imageframe__title { display: block; font-weight: 600; }
.i2t3-imageframe__caption .i2t3-imageframe__subtitle { display: block; font-size: .9rem; color: var(--bs-secondary-color, #6c757d); }
.i2t3-imageframe__body { margin-top: .5rem; font-size: .95rem; }
.i2t3-imageframe__body :last-child { margin-bottom: 0; }

/* Shared scaffold for the in-media overlay caption variants */
.i2t3-imageframe--hover-overlay .i2t3-imageframe__caption,
.i2t3-imageframe--hover-slide-caption .i2t3-imageframe__caption,
.i2t3-imageframe--hover-centered-info .i2t3-imageframe__caption,
.i2t3-imageframe--hover-bottom-light .i2t3-imageframe__caption,
.i2t3-imageframe--hover-bottom-dark .i2t3-imageframe__caption,
.i2t3-imageframe--hover-bottom-light-linear .i2t3-imageframe__caption,
.i2t3-imageframe--hover-bottom-dark-linear .i2t3-imageframe__caption,
.i2t3-imageframe--hover-block-light .i2t3-imageframe__caption,
.i2t3-imageframe--hover-block-dark .i2t3-imageframe__caption,
.i2t3-imageframe--hover-block-color .i2t3-imageframe__caption,
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__caption,
.i2t3-imageframe--hover-show-button .i2t3-imageframe__caption {
    position: absolute; margin: 0; inset: 0; display: flex; pointer-events: none;
}
.i2t3-imageframe--hover-overlay .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-slide-caption .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-centered-info .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-bottom-light .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-bottom-dark .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-bottom-light-linear .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-bottom-dark-linear .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-block-light .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-block-dark .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-block-color .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-show-button .i2t3-imageframe__caption-inner {
    display: flex; flex-direction: column; gap: .25rem;
}
.i2t3-imageframe--hover-overlay .i2t3-imageframe__title,
.i2t3-imageframe--hover-slide-caption .i2t3-imageframe__title,
.i2t3-imageframe--hover-centered-info .i2t3-imageframe__title,
.i2t3-imageframe--hover-bottom-light .i2t3-imageframe__title,
.i2t3-imageframe--hover-bottom-dark .i2t3-imageframe__title,
.i2t3-imageframe--hover-bottom-light-linear .i2t3-imageframe__title,
.i2t3-imageframe--hover-bottom-dark-linear .i2t3-imageframe__title,
.i2t3-imageframe--hover-block-light .i2t3-imageframe__title,
.i2t3-imageframe--hover-block-dark .i2t3-imageframe__title,
.i2t3-imageframe--hover-block-color .i2t3-imageframe__title,
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__title,
.i2t3-imageframe--hover-show-button .i2t3-imageframe__title { font-weight: 700; }
.i2t3-imageframe--hover-overlay .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-slide-caption .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-centered-info .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-bottom-light .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-bottom-dark .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-bottom-light-linear .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-bottom-dark-linear .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-block-light .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-block-dark .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-block-color .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__subtitle,
.i2t3-imageframe--hover-show-button .i2t3-imageframe__subtitle { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }

/* overlay: full dark veil, centred, fade in (original behaviour) */
.i2t3-imageframe--hover-overlay .i2t3-imageframe__caption-inner {
    width: 100%; align-items: center; justify-content: center; text-align: center;
    color: #fff; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .3s ease;
}
.i2t3-imageframe--hover-overlay .i2t3-imageframe__media:hover .i2t3-imageframe__caption-inner { opacity: 1; }

/* slide-caption: dark bar slides up from the bottom edge */
.i2t3-imageframe--hover-slide-caption .i2t3-imageframe__caption { align-items: flex-end; }
.i2t3-imageframe--hover-slide-caption .i2t3-imageframe__caption-inner {
    width: 100%; padding: .75rem; color: #fff; background: rgba(0, 0, 0, .6);
    transform: translateY(100%); transition: transform .3s ease;
}
.i2t3-imageframe--hover-slide-caption .i2t3-imageframe__media:hover .i2t3-imageframe__caption-inner { transform: translateY(0); }

/* centered-info: text centred, fades + scales in over a dark veil */
.i2t3-imageframe--hover-centered-info .i2t3-imageframe__caption { align-items: center; justify-content: center; }
.i2t3-imageframe--hover-centered-info .i2t3-imageframe__caption::before {
    content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s ease;
}
.i2t3-imageframe--hover-centered-info .i2t3-imageframe__caption-inner {
    position: relative; align-items: center; text-align: center; color: #fff;
    opacity: 0; transform: scale(.9); transition: opacity .3s ease, transform .3s ease;
}
.i2t3-imageframe--hover-centered-info .i2t3-imageframe__media:hover .i2t3-imageframe__caption::before { opacity: 1; }
.i2t3-imageframe--hover-centered-info .i2t3-imageframe__media:hover .i2t3-imageframe__caption-inner { opacity: 1; transform: scale(1); }

/* bottom-info family: bar fixed at the bottom, slides/fades up on hover */
.i2t3-imageframe--hover-bottom-light .i2t3-imageframe__caption,
.i2t3-imageframe--hover-bottom-dark .i2t3-imageframe__caption,
.i2t3-imageframe--hover-bottom-light-linear .i2t3-imageframe__caption,
.i2t3-imageframe--hover-bottom-dark-linear .i2t3-imageframe__caption { align-items: flex-end; }
.i2t3-imageframe--hover-bottom-light .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-bottom-dark .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-bottom-light-linear .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-bottom-dark-linear .i2t3-imageframe__caption-inner {
    width: 100%; padding: 1rem; opacity: 0; transform: translateY(100%);
    transition: transform .25s ease-out, opacity .25s ease-out;
}
.i2t3-imageframe--hover-bottom-light .i2t3-imageframe__caption-inner { background: #fff; color: #212529; }
.i2t3-imageframe--hover-bottom-dark .i2t3-imageframe__caption-inner { background: #212529; color: #fff; }
.i2t3-imageframe--hover-bottom-light-linear .i2t3-imageframe__caption-inner { background: linear-gradient(to top, rgba(255, 255, 255, .8) 0, transparent 100%); color: #212529; }
.i2t3-imageframe--hover-bottom-dark-linear .i2t3-imageframe__caption-inner { background: linear-gradient(to top, rgba(0, 0, 0, .8) 0, transparent 100%); color: #fff; }
.i2t3-imageframe--hover-bottom-light .i2t3-imageframe__media:hover .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-bottom-dark .i2t3-imageframe__media:hover .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-bottom-light-linear .i2t3-imageframe__media:hover .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-bottom-dark-linear .i2t3-imageframe__media:hover .i2t3-imageframe__caption-inner { opacity: 1; transform: translateY(0); }
.i2t3-imageframe--hover-bottom-light .i2t3-imageframe__media:hover .i2t3-imageframe__img,
.i2t3-imageframe--hover-bottom-dark .i2t3-imageframe__media:hover .i2t3-imageframe__img,
.i2t3-imageframe--hover-bottom-light-linear .i2t3-imageframe__media:hover .i2t3-imageframe__img,
.i2t3-imageframe--hover-bottom-dark-linear .i2t3-imageframe__media:hover .i2t3-imageframe__img { transform: scale(1.1); }

/* block family: inset bordered block reveals over a veil, centred text */
.i2t3-imageframe--hover-block-light .i2t3-imageframe__caption,
.i2t3-imageframe--hover-block-dark .i2t3-imageframe__caption,
.i2t3-imageframe--hover-block-color .i2t3-imageframe__caption { align-items: center; justify-content: center; padding: 1rem; }
.i2t3-imageframe--hover-block-light .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-block-dark .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-block-color .i2t3-imageframe__caption-inner {
    width: 100%; height: 100%; align-items: center; justify-content: center; text-align: center;
    padding: 1rem; opacity: 0; transition: opacity .3s ease;
}
.i2t3-imageframe--hover-block-light .i2t3-imageframe__caption-inner { background: rgba(255, 255, 255, .9); color: #212529; }
.i2t3-imageframe--hover-block-dark .i2t3-imageframe__caption-inner { background: rgba(0, 0, 0, .8); color: #fff; }
.i2t3-imageframe--hover-block-color .i2t3-imageframe__caption-inner { background: var(--i2t3-if-accent); color: #fff; }
.i2t3-imageframe--hover-block-light .i2t3-imageframe__media:hover .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-block-dark .i2t3-imageframe__media:hover .i2t3-imageframe__caption-inner,
.i2t3-imageframe--hover-block-color .i2t3-imageframe__media:hover .i2t3-imageframe__caption-inner { opacity: 1; }

/* slide-up: title slides off, subtitle slides into the centre (Karma slide-info-hover) */
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__caption { align-items: center; justify-content: center; overflow: hidden; }
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__caption::before {
    content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: .55; transition: opacity .3s ease;
}
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__caption-inner { position: relative; align-items: center; text-align: center; color: #fff; }
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__title { transition: transform .5s cubic-bezier(.55, 0, .1, 1); }
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__subtitle { transform: translateY(2.5rem); opacity: 0; transition: transform .5s cubic-bezier(.55, 0, .1, 1), opacity .4s ease; }
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__media:hover .i2t3-imageframe__title { transform: translateY(-2rem); opacity: 0; }
.i2t3-imageframe--hover-slide-up .i2t3-imageframe__media:hover .i2t3-imageframe__subtitle { transform: translateY(0); opacity: 1; }

/* show-button: button fades in on hover (Karma show-button-hover) */
.i2t3-imageframe--hover-show-button .i2t3-imageframe__caption { align-items: center; justify-content: center; }
.i2t3-imageframe--hover-show-button .i2t3-imageframe__caption::before {
    content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .3s ease;
}
.i2t3-imageframe--hover-show-button .i2t3-imageframe__caption-inner { position: relative; align-items: center; text-align: center; color: #fff; pointer-events: auto; }
.i2t3-imageframe--hover-show-button .i2t3-imageframe__btn {
    display: inline-block; margin-top: .5rem; padding: .4rem 1rem; border-radius: .25rem;
    background: #fff; color: #212529; text-decoration: none; font-size: .85rem; font-weight: 600;
    opacity: 0; transform: translateY(.75rem); transition: opacity .3s ease, transform .3s ease;
}
.i2t3-imageframe--hover-show-button .i2t3-imageframe__media:hover .i2t3-imageframe__caption::before { opacity: 1; }
.i2t3-imageframe--hover-show-button .i2t3-imageframe__media:hover .i2t3-imageframe__btn { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------- Side-image layouts */
.i2t3-imageframe--layout-side-left .i2t3-imageframe__figure,
.i2t3-imageframe--layout-side-right .i2t3-imageframe__figure {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; width: 100%;
}
.i2t3-imageframe--layout-side-left .i2t3-imageframe__media,
.i2t3-imageframe--layout-side-right .i2t3-imageframe__media { flex: 0 0 auto; max-width: 45%; }
.i2t3-imageframe--layout-side-right .i2t3-imageframe__figure { flex-direction: row-reverse; }
.i2t3-imageframe__side-text { flex: 1 1 220px; }
.i2t3-imageframe__side-text .i2t3-imageframe__title { display: block; text-transform: uppercase; font-weight: 700; margin-bottom: .25rem; }
.i2t3-imageframe__side-text .i2t3-imageframe__subtitle { display: block; color: var(--bs-secondary-color, #6c757d); margin-bottom: .5rem; }
.i2t3-imageframe__side-text .i2t3-imageframe__body :last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .i2t3-imageframe--layout-side-left .i2t3-imageframe__media,
    .i2t3-imageframe--layout-side-right .i2t3-imageframe__media { max-width: 100%; }
}

/* ---------------------------------------------------------------- Gallery grid */
.i2t3-imageframe--grid .i2t3-imageframe__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; overflow: hidden;
}
@media (min-width: 992px) {
    .i2t3-imageframe--grid .i2t3-imageframe__grid { grid-template-columns: repeat(4, 1fr); }
}
.i2t3-imageframe--grid .i2t3-imageframe__grid-item {
    position: relative; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
/* dividers between cells (solid / dashed) */
.i2t3-imageframe--grid .i2t3-imageframe__grid-item::before,
.i2t3-imageframe--grid .i2t3-imageframe__grid-item::after { content: ""; position: absolute; }
.i2t3-imageframe--grid .i2t3-imageframe__grid-item::before { top: 0; bottom: 0; left: -1px; border-left: 1px solid var(--bs-border-color, #dee2e6); }
.i2t3-imageframe--grid .i2t3-imageframe__grid-item::after { left: 0; right: 0; bottom: -1px; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.i2t3-imageframe--grid-dashed .i2t3-imageframe__grid-item::before { border-left-style: dashed; }
.i2t3-imageframe--grid-dashed .i2t3-imageframe__grid-item::after { border-bottom-style: dashed; }
.i2t3-imageframe--grid .i2t3-imageframe__grid-item .i2t3-imageframe__img { width: auto; max-width: 100%; transition: transform .3s ease; }
.i2t3-imageframe--grid .i2t3-imageframe__grid-item:hover .i2t3-imageframe__img { transform: scale(1.05); }