/**
 * Card Clickable CSS
 * Maintains flex layouts when anchor tags are added to clickable cards
 */

/* Preserve flex display on cards with clickable functionality */
[data-card-clickable] {
    display: flex !important;
}

/* Ensure the anchor tag inherits flex properties */
[data-card-clickable] > a {
    display: flex !important;
    flex: 1;
    flex-direction: inherit;
    align-items: inherit;
    justify-content: inherit;
    gap: inherit;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Preserve flex properties for nested flex containers */
[data-card-clickable] > a > * {
    flex: inherit;
    align-self: inherit;
}

/* Hover effects for clickable cards */
.card-clickable-hover {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.card-clickable-hover:hover {
    transform: translateY(-2px);
}

/* Ensure flex gap is preserved */
[data-card-clickable][style*="gap"] > a {
    gap: inherit;
}

/* Handle specific flex directions */
[data-card-clickable][style*="flex-direction: column"] > a,
[data-card-clickable].flex-col > a {
    flex-direction: column;
}

[data-card-clickable][style*="flex-direction: row"] > a,
[data-card-clickable].flex-row > a {
    flex-direction: row;
}

/* Handle justify-content inheritance */
[data-card-clickable][style*="justify-content"] > a {
    justify-content: inherit;
}

/* Handle align-items inheritance */
[data-card-clickable][style*="align-items"] > a {
    align-items: inherit;
}