/* =================================================================
   CARD COMPONENT
   Skill cards with image and description
   ================================================================= */

.card {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    background: var(--card-bg);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    height: 100%;
    min-width: 0;
    overflow: hidden;
    /* Ensure content stays within border radius */
}

/* Wide card variant */
.card--wide {
    grid-column: span 2;
}

/* Image Container */
.card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.236;
    background: var(--bg-card-image);
    border-radius: var(--card-image-radius);
    overflow: hidden;
}

/* Wide card image ratio */
.card--wide .card__image {
    aspect-ratio: 16 / 9;
    /* Default fallback before JS loads */
}

.card--wide.card--project .card__image {
    aspect-ratio: 16 / 9 !important;
}

.card__image img,
.card__image video,
.card__image .carousel__track {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Key: ensure fills the stretched space */
}

/* Wide project cards should show full image (thumbnail) without cropping */
/* Note: Users requested matching proportions, so we might need 'cover' even for wide? 
   But "contain" was specific for project cards. 
   If we want "Same Height" AND "Contain", we might have empty bars. 
   User said: "long card always saved its proportions like small".
   This implies cover. 
   I will switch project cards to 'cover' for better visual block alignment, or keep 'contain' but within the filled box.
   Let's keep 'contain' for project cards if user previously wanted it, but 'cover' is safer for "Alignment".
   User said "long card always preserved its proportions".
   Actually, "preserved proportions" might mean aspect ratio?
   "saved its proportions, like the small one".
   Small one has fixed aspect ratio.
   
   If I change to flex-grow, the aspect ratio is dynamic.
   
   Let's stick to flex-grow for alignment, but use object-fit: cover.
*/
.card--wide.card--project .card__image img,
.card--wide.card--project .card__image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keep cover for consistency, or revert to contain if user prefers */
    object-position: center;
}

/* Placeholder for animation/video */
.card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Content */
.card__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.card__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
}

.card__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.card__tag {
    display: inline-flex;
    align-items: center;
    height: fit-content;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    padding: 4px 6px 3px;
    border-radius: 4px;
    background: var(--tag-bg);
    color: var(--tag-text);
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.2s ease, background 0.2s ease;
    cursor: pointer;
    min-width: 24px;
    outline: none;
}

.card__tag:not(:empty) {
    opacity: 0;
}

.card:hover .card__tag:not(:empty) {
    opacity: 1;
}

/* Always show placeholder when empty */
.card__tag:empty,
.card__tag--empty {
    opacity: 0.5;
    background: var(--tag-empty-bg);
    color: var(--tag-empty-text);
}

.card__tag:empty::before {
    content: 'TAG';
}

/* Tag color variants */
.card__tag--skill {
    background: var(--tag-bg);
    color: var(--tag-text);
}

.card__tag--project {
    background: var(--tag-project-bg);
    color: var(--tag-project-text);
}

.card__tag--personal {
    background: var(--tag-personal-bg);
    color: var(--tag-personal-text);
}

.card__tag--experience {
    background: var(--tag-experience-bg);
    color: var(--tag-experience-text);
}

.card__tag--experiment {
    background: var(--tag-experiment-bg);
    color: var(--tag-experiment-text);
}

/* Focus state for editing */
.card__tag:focus {
    opacity: 1;
    outline: none;
}

.card__tag:focus:empty::before {
    content: 'TAG';
    opacity: 0.5;
}

.card__description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--text-secondary);
    line-height: var(--line-height-normal);
}

.card__description a {
    color: var(--link-color);
    text-decoration-color: var(--link-color);
}

.card__description a:hover {
    color: var(--link-hover);

}

.card__link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--link-color);
    text-decoration: none;
    align-self: flex-start;
    /* Don't stretch */
    cursor: pointer;
    transition: color 0.2s ease;
}

.card__link:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Sortable drag states */
.card--ghost {
    opacity: 0.4;
}

.card--chosen {
    cursor: grabbing;
}

.card--dragging {
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .card--wide {
        grid-column: auto;
    }

    /* Ensure tags are always visible on mobile/tablet */
    .card__tag:not(:empty) {
        opacity: 1 !important;
    }

    .card__tag {
        font-size: 14px;
    }
}

/* =================================================================
   ADD CARD PLACEHOLDER
   ================================================================= */

.card--add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: transparent;
    border: 2px dashed var(--color-neutral-200);
    border-radius: var(--card-radius);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.card--add:hover {
    border-color: var(--color-neutral-400);
    background: var(--bg-card-image);
}

.card-add__options {
    display: flex;
    gap: var(--space-4);
}

.card-add__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: transparent;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-add__btn:hover {
    background: var(--bg-card);
    border-color: var(--color-neutral-400);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-add__btn svg {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.card-add__btn:hover svg {
    opacity: 1;
}

[data-theme="dark"] .card--add {
    border-color: var(--color-neutral-800);
}

[data-theme="dark"] .card--add:hover {
    border-color: var(--color-neutral-600);
}

[data-theme="dark"] .card-add__btn {
    border-color: var(--color-neutral-800);
}

[data-theme="dark"] .card-add__btn:hover {
    border-color: var(--color-neutral-600);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Invisible card variant */
/* Invisible card variant */
.card--invisible {
    background: transparent;
    box-shadow: none;
    border: 1px dashed transparent;
    /* Hidden by default */
    transition: border-color 0.2s ease;
}

.card--invisible:hover {
    border-color: var(--color-neutral-300);
}

/* Hide media container background */
.card--invisible .card__image {
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Hide media elements specifically */
.card--invisible .card__image img,
.card--invisible .card__image video,
.card--invisible .card__image .carousel__track {
    opacity: 0;
    visibility: hidden;
}

/* Hide text content */
.card--invisible .card__content {
    opacity: 0;
    visibility: hidden;
}

/* On hover, don't show background, just the dashed border from parent */
.card--invisible:hover .card__image {
    background: transparent;
}

/* Hide dropzone text */
.card--invisible .card__image--dropzone::after {
    display: none;
}

/* =================================================================
   ADD BETWEEN CARDS
   ================================================================= */

.card {
    position: relative;
    /* Ensure card is relative for absolute positioning of zone */
}

.card__add-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -50px;
    /* Center in 60px gap (30px center + 20px half-width) */
    width: 40px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Adjust for the gap. If gap is var(--card-gap), we ideally want to center in that gap.
   Let's assume the zone is attached to the right side.
   Note: This might overlap somewhat with the next card, but z-index should handle hovering.
*/

.card__add-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-blue-500);
    /* Primary action color */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: scale(0.8);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card__add-zone:hover {
    opacity: 1;
}

.card__add-zone:hover .card__add-btn {
    transform: scale(1);
}

.card__add-btn svg {
    width: 16px;
    height: 16px;

    /* Filtered Out State */
    .card.is-filtered-out {
        display: none !important;
    }