/* Flippable Box Styles */

.flippable-box-container {
    display: flex;
    width: 100%;
}

/* Auto layout mode - all boxes in one row */
.flippable-box-container[data-layout-mode="auto"] {
    flex-wrap: nowrap;
    overflow-x: auto; /* Allow horizontal scroll if needed */
}

/* Fixed layout mode - allow wrapping */
.flippable-box-container[data-layout-mode="fixed"] {
    flex-wrap: wrap;
}

.flippable-box-item {
    perspective: 1000px;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
}

/* Dynamic boxes per row - calculating width based on actual number of boxes */
.flippable-box-container[data-boxes-per-row="1"] .flippable-box-item {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.flippable-box-container[data-boxes-per-row="2"] .flippable-box-item {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    width: calc(50% - 20px);
}

.flippable-box-container[data-boxes-per-row="3"] .flippable-box-item {
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    width: calc(33.333% - 20px);
}

.flippable-box-container[data-boxes-per-row="4"] .flippable-box-item {
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px);
    width: calc(25% - 20px);
}

.flippable-box-container[data-boxes-per-row="5"] .flippable-box-item {
    flex: 0 0 calc(20% - 20px);
    max-width: calc(20% - 20px);
    width: calc(20% - 20px);
}

.flippable-box-container[data-boxes-per-row="6"] .flippable-box-item {
    flex: 0 0 calc(16.666% - 20px);
    max-width: calc(16.666% - 20px);
    width: calc(16.666% - 20px);
}

.flippable-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Flip animation enabled */
.flippable-box-container[data-flip="yes"] .flippable-box-item:hover .flippable-box-inner {
    transform: rotateY(180deg);
}

.flippable-box-container[data-flip="yes"][data-flip-direction="vertical"] .flippable-box-item:hover .flippable-box-inner {
    transform: rotateX(180deg);
}

/* No flip animation */
.flippable-box-container[data-flip=""] .flippable-box-inner,
.flippable-box-container[data-flip="no"] .flippable-box-inner {
    transition: none;
}

.flippable-box-container[data-flip=""] .flippable-box-item:hover .flippable-box-front,
.flippable-box-container[data-flip="no"] .flippable-box-item:hover .flippable-box-front {
    opacity: 0;
    visibility: hidden;
}

.flippable-box-container[data-flip=""] .flippable-box-item:hover .flippable-box-back,
.flippable-box-container[data-flip="no"] .flippable-box-item:hover .flippable-box-back {
    opacity: 1;
    visibility: visible;
}

.flippable-box-front,
.flippable-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Front side */
.flippable-box-front {
    z-index: 2;
}

/* Back side */
.flippable-box-back {
    transform: rotateY(180deg);
}

.flippable-box-container[data-flip-direction="vertical"] .flippable-box-back {
    transform: rotateX(180deg);
}

/* No flip styles */
.flippable-box-container[data-flip=""] .flippable-box-back,
.flippable-box-container[data-flip="no"] .flippable-box-back {
    transform: none;
    opacity: 0;
    visibility: hidden;
}

/* Icon styles */
.flippable-box-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s, transform 0.3s;
}

.flippable-box-icon i {
    display: block;
}

.flippable-box-icon svg {
    display: block;
}

.flippable-box-icon img {
    display: block;
    object-fit: contain;
}

/* Icon behavior on hover */
.flippable-box-container[data-icon-behavior="hide"] .flippable-box-icon-back {
    display: none;
}

.flippable-box-container[data-icon-behavior="fade"] .flippable-box-icon-back {
    opacity: 0.3;
}

/* Title styles */
.flippable-box-title {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Subtext styles */
.flippable-box-subtext {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Auto-sizing for dynamic number of boxes */
.flippable-box-container[data-actual-boxes="1"] .flippable-box-item {
    flex: 0 0 calc(100% - 20px);
    max-width: calc(100% - 20px);
    width: calc(100% - 20px);
}

.flippable-box-container[data-actual-boxes="2"] .flippable-box-item {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    width: calc(50% - 20px);
}

.flippable-box-container[data-actual-boxes="3"] .flippable-box-item {
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    width: calc(33.333% - 20px);
}

.flippable-box-container[data-actual-boxes="4"] .flippable-box-item {
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px);
    width: calc(25% - 20px);
}

.flippable-box-container[data-actual-boxes="5"] .flippable-box-item {
    flex: 0 0 calc(20% - 20px);
    max-width: calc(20% - 20px);
    width: calc(20% - 20px);
}

.flippable-box-container[data-actual-boxes="6"] .flippable-box-item {
    flex: 0 0 calc(16.666% - 20px);
    max-width: calc(16.666% - 20px);
    width: calc(16.666% - 20px);
}

.flippable-box-container[data-actual-boxes="7"] .flippable-box-item {
    flex: 0 0 calc(14.285% - 20px);
    max-width: calc(14.285% - 20px);
    width: calc(14.285% - 20px);
}

.flippable-box-container[data-actual-boxes="8"] .flippable-box-item {
    flex: 0 0 calc(12.5% - 20px);
    max-width: calc(12.5% - 20px);
    width: calc(12.5% - 20px);
}

.flippable-box-container[data-actual-boxes="9"] .flippable-box-item {
    flex: 0 0 calc(11.111% - 20px);
    max-width: calc(11.111% - 20px);
    width: calc(11.111% - 20px);
}

.flippable-box-container[data-actual-boxes="10"] .flippable-box-item {
    flex: 0 0 calc(10% - 20px);
    max-width: calc(10% - 20px);
    width: calc(10% - 20px);
}

.flippable-box-container[data-actual-boxes="11"] .flippable-box-item {
    flex: 0 0 calc(9.09% - 20px);
    max-width: calc(9.09% - 20px);
    width: calc(9.09% - 20px);
}

.flippable-box-container[data-actual-boxes="12"] .flippable-box-item {
    flex: 0 0 calc(8.333% - 20px);
    max-width: calc(8.333% - 20px);
    width: calc(8.333% - 20px);
}

/* Responsive styles - allow wrapping on smaller screens */
@media (max-width: 1024px) {
    /* Only allow wrapping in auto mode on smaller screens */
    .flippable-box-container[data-layout-mode="auto"] {
        flex-wrap: wrap;
    }
    
    .flippable-box-container[data-boxes-per-row="4"] .flippable-box-item,
    .flippable-box-container[data-boxes-per-row="5"] .flippable-box-item,
    .flippable-box-container[data-boxes-per-row="6"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="5"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="6"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="7"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="8"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="9"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="10"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="11"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="12"] .flippable-box-item {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
        width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .flippable-box-container[data-boxes-per-row="3"] .flippable-box-item,
    .flippable-box-container[data-boxes-per-row="4"] .flippable-box-item,
    .flippable-box-container[data-boxes-per-row="5"] .flippable-box-item,
    .flippable-box-container[data-boxes-per-row="6"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="3"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="4"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="5"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="6"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="7"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="8"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="9"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="10"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="11"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="12"] .flippable-box-item {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
        width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .flippable-box-container[data-boxes-per-row="2"] .flippable-box-item,
    .flippable-box-container[data-boxes-per-row="3"] .flippable-box-item,
    .flippable-box-container[data-boxes-per-row="4"] .flippable-box-item,
    .flippable-box-container[data-boxes-per-row="5"] .flippable-box-item,
    .flippable-box-container[data-boxes-per-row="6"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="2"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="3"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="4"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="5"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="6"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="7"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="8"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="9"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="10"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="11"] .flippable-box-item,
    .flippable-box-container[data-actual-boxes="12"] .flippable-box-item {
        flex: 0 0 calc(100% - 20px);
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
    }
}

/* Smooth transitions */
.flippable-box-front,
.flippable-box-back {
    transition: all 0.3s ease;
}

/* Hover effects for non-flip mode */
.flippable-box-container[data-flip=""] .flippable-box-item:hover .flippable-box-inner,
.flippable-box-container[data-flip="no"] .flippable-box-item:hover .flippable-box-inner {
    transform: none;
}

/* Animation timing */
.flippable-box-inner {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fix for Safari */
.flippable-box-item {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* Ensure text doesn't overflow */
.flippable-box-title,
.flippable-box-subtext {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Default cursor on hover */
.flippable-box-item {
    cursor: default;
}

/* Cursor for linked boxes */
.flippable-box-item[data-link-area="box"] .flippable-box-link-wrapper,
.flippable-box-title-link,
.flippable-box-button {
    cursor: pointer;
}

/* Link wrapper styles */
.flippable-box-link-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Prevent text selection on flip */
.flippable-box-item[data-link-area="box"] {
    user-select: none;
}

/* Title link styles */
.flippable-box-title-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.flippable-box-title-link:hover {
    text-decoration: none;
}

/* Button styles */
.flippable-box-button-wrapper {
    width: 100%;
    text-align: center;
}

.flippable-box-button {
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 1;
}

.flippable-box-button:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

/* Prevent link from affecting flip animation */
.flippable-box-link-wrapper .flippable-box-inner {
    pointer-events: none;
}

.flippable-box-item[data-link-area="box"]:hover .flippable-box-inner {
    pointer-events: none;
}

/* Re-enable pointer events for buttons and title links */
.flippable-box-title-link,
.flippable-box-button {
    pointer-events: auto;
}

/* Z-index management for proper click handling */
.flippable-box-button-wrapper {
    position: relative;
    z-index: 10;
}