/* Flip card — i2t3 component styles
 * CSS-only 3D flip (no JS). Flips on hover and on :focus-within (so tap on
 * touch devices and keyboard focus also reveal the back). Front is light,
 * back uses the theme accent colour and/or a background image.
 * Three styles (Karma ns-card): horizontal (rotateY), vertical (rotateX)
 * and 3d (rotateY with the content popped out towards the viewer).
 */

.i2t3-flipcard {
    display: block;
    perspective: 1200px;
    outline: none;
}

.i2t3-flipcard__inner {
    position: relative;
    width: 100%;
    min-height: 18rem;
    transition: transform .6s;
    transform-style: preserve-3d;
}

/* horizontal + 3d flip on the Y axis, vertical on the X axis */
.i2t3-flipcard:hover .i2t3-flipcard__inner,
.i2t3-flipcard:focus-within .i2t3-flipcard__inner {
    transform: rotateY(180deg);
}
.i2t3-flipcard--vertical:hover .i2t3-flipcard__inner,
.i2t3-flipcard--vertical:focus-within .i2t3-flipcard__inner {
    transform: rotateX(180deg);
}

.i2t3-flipcard__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* The face only sets the minimum height; the inner content can grow taller
 * than 18rem without producing a scrollbar inside the card. */
.i2t3-flipcard__content {
    width: 100%;
}
/* Bild auf der Vorderseite (z. B. Logo) — nicht ueberlaufen, zentriert. */
.i2t3-flipcard__img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.i2t3-flipcard__front {
    background: #fff;
    border: 1px solid var(--i2t3-border-color, #dee2e6);
}

.i2t3-flipcard__back {
    background: var(--i2t3-flipcard-back, var(--i2t3-primary, #0d6efd));
    color: #fff;
    transform: rotateY(180deg);
}
.i2t3-flipcard--vertical .i2t3-flipcard__back {
    transform: rotateX(180deg);
}

/* Back face with a background image: cover the face, keep the accent colour
 * as a fallback and lay a slight dark overlay so the white text stays legible. */
.i2t3-flipcard__back--image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.i2t3-flipcard__back--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    border-radius: inherit;
    z-index: 0;
}
.i2t3-flipcard__back--image .i2t3-flipcard__content {
    position: relative;
    z-index: 1;
}

/* 3D pop-out: same rotateY flip as horizontal, but the content is pushed
 * towards the viewer for a layered "pop" effect (Karma .flip-card-3d). */
.i2t3-flipcard--3d .i2t3-flipcard__content {
    transform: translate3d(0, 0, 60px);
}

/* Rounded vs. square corners (Karma enableBorderRadius) */
.i2t3-flipcard--rounded .i2t3-flipcard__face {
    border-radius: .5rem;
}
.i2t3-flipcard--square .i2t3-flipcard__face {
    border-radius: 0;
}

.i2t3-flipcard__icon {
    font-size: 2.5rem;
    color: var(--i2t3-flipcard-back, var(--i2t3-primary, #0d6efd));
    margin-bottom: 1rem;
    display: block;
}

/* Large prominent front title (Karma text-13, extra-bold) */
.i2t3-flipcard__bigtitle {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--i2t3-text-dark, #212529);
    margin-bottom: .75rem;
}

/* Coloured front sub-headline (Karma text-4 text-color-primary) */
.i2t3-flipcard__subtitle {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--i2t3-flipcard-back, var(--i2t3-primary, #0d6efd));
    margin-bottom: .5rem;
}

.i2t3-flipcard__title {
    margin-bottom: .5rem;
}

.i2t3-flipcard__backtext > :last-child {
    margin-bottom: 0;
}