/* 
 * Dossier Card Styles
 * Used by: Daily Updates, Events, Groups, Likes, Travels, Notes tabs
 */

/* Unified dossier card styles */
.dossier-card {
    position: relative;
    width: 280px;
    height: 240px;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.dossier-card:hover {
    transform: scale(1.03);
}

/* Image styles */
.dossier-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay for cards with images (shows on hover) */
.dossier-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    color: white;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    pointer-events: none;
}

.dossier-card:hover .dossier-card-overlay {
    opacity: 1;
}

/* Text-only cards (always visible) */
.dossier-card-text-only {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: white;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Card text content */
.dossier-card-text {
    font-size: 0.9rem;
    line-height: 1.4;
}

.dossier-card-text strong {
    font-weight: 600;
}

/* Description with text truncation */
.dossier-card-text .desc {
    margin-top: 8px;
    font-size: 0.85rem;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Edit button */
.dossier-card-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    pointer-events: auto;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.dossier-card:hover .dossier-card-edit {
    opacity: 1;
}

/* Legacy card classes (for backwards compatibility) */
.like-card,
.note-card,
.travel-card,
.group-card {
    position: relative;
    width: 280px;
    height: 240px;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.like-card:hover,
.note-card:hover,
.travel-card:hover,
.group-card:hover {
    transform: scale(1.03);
}

.like-card-img,
.note-card-img,
.travel-card-img,
.group-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.like-card-overlay,
.note-card-overlay,
.travel-card-overlay,
.group-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    color: white;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    pointer-events: none;
}

.like-card:hover .like-card-overlay,
.note-card:hover .note-card-overlay,
.travel-card:hover .travel-card-overlay,
.group-card:hover .group-card-overlay {
    opacity: 1;
}

.like-card-text .desc,
.note-card-text .desc,
.travel-card-text .desc,
.group-card-text .desc {
    margin-top: 8px;
    font-size: 0.85rem;
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.like-card-edit,
.note-card-edit,
.travel-card-edit,
.group-card-edit {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    pointer-events: auto;
}