/**
 * Flip Showcase Frontend Styles
 */

/* Container & Perspective */
.flip-showcase-wrapper {
    perspective: 1000px;
    margin: 0;
    display: inline-block;
    /* Allow multiple on a line if needed, or change to block */
    max-width: 100%;
}

/* Aspect Ratios per Device */
/* Aspect Ratios per Device - Width calculates from Height */
.flip-showcase-wrapper.is-iphone {
    height: var(--flip-card-height, 600px);
    width: auto;
    aspect-ratio: 9 / 19.5;
}

.flip-showcase-wrapper.is-ipad {
    height: var(--flip-card-height, 800px);
    width: auto;
    aspect-ratio: 3 / 4;
}

.flip-showcase-wrapper.is-ipad-landscape {
    height: var(--flip-card-height, 600px);
    width: auto;
    aspect-ratio: 4 / 3;
}

.flip-showcase-wrapper.is-imac {
    height: var(--flip-card-height, 500px);
    width: auto;
    aspect-ratio: 16 / 9;
}

.flip-showcase-wrapper.is-macbook {
    height: var(--flip-card-height, 500px);
    width: auto;
    aspect-ratio: 16 / 10;
}

/* Responsive adjustments */
@media (max-width: 850px) {

    .flip-showcase-wrapper.is-iphone,
    .flip-showcase-wrapper.is-ipad,
    .flip-showcase-wrapper.is-ipad-landscape,
    .flip-showcase-wrapper.is-imac,
    .flip-showcase-wrapper.is-macbook {
        width: 100%;
        height: auto;
        /* aspect-ratio inherited from above */
    }
}

/* Card Container within Wrapper */
.flip-showcase-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

/* Main Container */
.flip-showcase-gallery-container {
    padding: 20px;
}

/* Grid Layout (Now using Flex Wrap for better spacing control) */
/* Grid Layout (Now using Flex Wrap for better spacing control) */
.flip-showcase-gallery-container.flip-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--flip-columns, 3), 1fr);
    gap: var(--flip-card-gap, 30px);
    justify-content: center;
}

/* Infinite Scroll Layout */
.flip-showcase-gallery-container.flip-layout-infinite {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    /* Flex is better for horizontal scroll */
    gap: var(--flip-card-gap, 30px);
    padding-bottom: 20px;
    /* Scrollbar space */

    /* Hide scrollbar */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.flip-showcase-gallery-container.flip-layout-infinite::-webkit-scrollbar {
    display: none;
}

.flip-infinite-scroll-track {
    display: flex;
    gap: var(--flip-card-gap, 30px);
}

/* Masonry Layout (Basic CSS Columns approach) */
/* Masonry Layout (Basic CSS Columns approach) */
.flip-showcase-gallery-container.flip-layout-masonry {
    column-count: var(--flip-columns, 3);
    column-gap: var(--flip-card-gap, 30px);
}

.flip-showcase-gallery-container.flip-layout-masonry .flip-showcase-wrapper {
    display: inline-block;
    width: 100%;
    /* Fix for oversized cards */
    margin-bottom: var(--flip-card-gap, 30px);
    height: auto;
    /* Let aspect-ratio determine height */
    break-inside: avoid;
    /* Prevent breaking inside cards */
}

/* Mobile Responsive Fixes */
@media (max-width: 768px) {

    /* Force 1 column on mobile for Grid and Masonry */
    .flip-showcase-gallery-container {
        --flip-columns: 1 !important;
    }

    /* Fix Infinite Scroll Visibility on Mobile */
    .flip-showcase-gallery-container.flip-layout-infinite {
        overflow-x: scroll !important;
        /* Force scroll on mobile */
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on iOS */
        padding-bottom: 40px;
        /* Ensure space for scrollbar or touch area */
        display: flex;
        /* Ensure flex context */
        flex-wrap: nowrap;
        /* Prevent wrapping */
        justify-content: flex-start;
        /* Align start */
    }

    .flip-showcase-gallery-container.flip-layout-infinite .flip-showcase-wrapper {
        flex: 0 0 85vw;
        /* Show 85% of card width to hint scrolling */
        width: 85vw;
        max-width: 300px;
        /* Cap width */
    }
}

.flip-showcase-gallery-container.flip-layout-masonry {
    column-count: var(--flip-columns, 3);
    column-gap: var(--flip-card-gap, 30px);
    width: 100%;
    /* Ensure container width */
}

.flip-showcase-gallery-container.flip-layout-masonry .flip-showcase-wrapper {
    display: inline-block;
    width: 100%;
    /* Fill column width */
    margin-bottom: var(--flip-card-gap, 30px);
    height: auto;
    break-inside: avoid;
}

.flip-showcase-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Apple-like bouncy spring */
    transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, var(--flip-card-shadow-intensity, 0.2));
    border-radius: var(--flip-card-radius, 20px);
    /* Smooth corners */
}

/* Hover Effects (Desktop) */
@media (hover: hover) {

    /* DEFAULT HOVER TRIGGER */
    .flip-showcase-gallery-container.flip-trigger-hover .flip-showcase-card.effect-flip-left:hover .flip-showcase-inner {
        transform: rotateY(-180deg);
    }

    .flip-showcase-gallery-container.flip-trigger-hover .flip-showcase-card.effect-flip-right:hover .flip-showcase-inner {
        transform: rotateY(180deg);
    }

    /* Global effect override if set on container specific for shortcode params passed down */
    .flip-showcase-gallery-container.flip-trigger-hover.effect-flip-left .flip-showcase-card:hover .flip-showcase-inner {
        transform: rotateY(-180deg);
    }

    .flip-showcase-gallery-container.flip-trigger-hover.effect-flip-right .flip-showcase-card:hover .flip-showcase-inner {
        transform: rotateY(180deg);
    }

    .flip-showcase-gallery-container.flip-trigger-hover.effect-tilt-3d .flip-showcase-card:hover .flip-showcase-inner {
        transform: rotateX(10deg) rotateY(10deg);
    }

    /* CLICK TRIGGER - HOVER STATE (Tilt only) */
    .flip-showcase-gallery-container.flip-trigger-click .flip-showcase-card:hover .flip-showcase-inner {
        transform: rotateX(10deg) rotateY(10deg);
        /* Tilt on hover when click is active */
    }
}

/* CLICK TRIGGER - FLIPPED STATE (Active) */
/* Turn Left */
.flip-showcase-gallery-container.effect-flip-left .flip-showcase-card.flipped .flip-showcase-inner,
.flip-showcase-gallery-container:not(.effect-flip-right):not(.effect-tilt-3d) .flip-showcase-card.flipped .flip-showcase-inner {
    transform: rotateY(-180deg);
}

/* Turn Right */
.flip-showcase-gallery-container.effect-flip-right .flip-showcase-card.flipped .flip-showcase-inner {
    transform: rotateY(180deg);
}

/* Tilt 3D - Click doesn't really 'flip' but maybe intensifies? Or just stays tilted? 
   Request says: "Click triggers turn-left".
   "Wenn Flip Trigger click gewählt ist, dann darf die Karte beim Maus-over nur tilt 3d machen, erst ein click auf die Karte dreht sie (turn-left)"
   So Click ALWAYS turns left (or selected effect)? 
   Let's assume selected effect.
*/
.flip-showcase-gallery-container.effect-tilt-3d .flip-showcase-card.flipped .flip-showcase-inner {
    /* If effect is tilt, maybe click does nothing extra or just bigger tilt? 
       But user said "turn-left" on click. So maybe Tilt is ONLY for hover?
       Let's support turn-left as the 'flip' action if selected effect is otherwise 'tilt'? 
       Or maybe 'Tilt 3D' is an effect option for HOVER, but they want CLICK to always FLIP?
       User said: "Effect options: Turn Left, Turn Right, Tilt 3D".
       And: "If Trigger Click: Hover=Tilt, Click=Flip(Turn Left)".
       This suggests Tilt 3D is a hover effect. 
       If I select "Tilt 3D" as effect, does it ever flip? 
       Let's stick to: Click always Flips (Rotate Y). Hover reflects the 'preview' or 'tilt'.
       If "Turn Left" is selected + Click Trigger: Hover=Tilt, Click=Turn Left.
       If "Turn Right" is selected + Click Trigger: Hover=Tilt, Click=Turn Right.
       If "Tilt 3D" is selected + Click Trigger: Hover=Tilt, Click=??? (Maybe Turn Left default?)
       Let's make .flipped always rotateY(-180deg) unless .effect-flip-right is set.
    */
    transform: rotateX(20deg) rotateY(20deg);
    /* Increased tilt? Or standard flip? */
}

/* Manual override: If Tilt 3D selected, maybe we shouldn't flip? 
   But user wants to read back content. So it MUST flip to show back.
   So Tilt 3D applies to hover.
*/

/* Mobile Interaction */
.flip-showcase-card.hover .flip-showcase-inner {
    transform: rotateY(-180deg);
}

/* Mobile Interaction (Class toggled via JS) */
.flip-showcase-card.hover .flip-showcase-inner {
    transform: rotateY(-180deg);
}

/* Front & Back Common */
.flip-showcase-front,
.flip-showcase-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: var(--flip-card-radius, 20px);
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, var(--flip-card-shadow-intensity, 0.1)), 0 5px 15px rgba(0, 0, 0, calc(var(--flip-card-shadow-intensity, 0.07) * 0.7));
    /* Deep, soft shadow */
}

/* Front Styling */
.flip-showcase-front {
    background: var(--flip-card-front-bg, #fff);
    color: var(--flip-card-front-text, black);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    /* Title at bottom */
}

.flip-showcase-front-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    width: 100%;
    padding: 20px;
    text-align: left;
}

.flip-showcase-title {
    color: var(--flip-title-color, var(--flip-card-front-text, #fff));
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 600;
    font-size: var(--flip-title-font-size, 1.5rem);
    text-align: var(--flip-title-align, center);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Back Styling */
.flip-showcase-back {
    color: var(--flip-card-back-text, #333);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10%;
    /* 10% padding as requested */
    box-sizing: border-box;
    white-space: normal;
    /* Force text wrap */
}

.flip-showcase-back-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
    word-wrap: break-word;
    /* Handle long words */
    overflow-wrap: break-word;
}

.flip-showcase-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 24px;
    background-color: var(--flip-btn-bg, #007aff);
    /* Apple Blue */
    color: var(--flip-btn-color, white);
    text-decoration: none;
    border-radius: var(--flip-btn-radius, 20px);
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.flip-showcase-btn:hover {
    filter: brightness(90%);
    transform: scale(1.05);
}

/* Apply Custom Colors from Variables */
.flip-showcase-gallery-container {
    /* Vars defined inline in HTML per gallery */
}

.flip-showcase-gallery-container .flip-showcase-front {
    background: var(--flip-card-front-bg, #fff);
    background-size: cover;
    background-position: center;
    /* Default fallback */
}

.flip-showcase-gallery-container .flip-showcase-back {
    background: var(--flip-card-back-bg, #fff);
    /* Default fallback */
}