/* Collection Grid Layouts */
.collection-grid {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: #f8f9fa;
}

/* Small collection grid for modal thumbnails */
.collection-grid.collection-grid-small {
    height: 60px;
    width: 60px;
}

.collection-grid-item {
    position: absolute;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.collection-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 1 item layout - full width */
.collection-grid.items-1 .collection-grid-item:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 2 items layout - primary + secondary */
.collection-grid.items-2 .collection-grid-item:nth-child(1) {
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
}

.collection-grid.items-2 .collection-grid-item:nth-child(2) {
    top: 0;
    left: 67%;
    width: 33%;
    height: 100%;
}

/* 3 items layout - one large, two small stacked with gaps */
.collection-grid.items-3 .collection-grid-item:nth-child(1) {
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
}

.collection-grid.items-3 .collection-grid-item:nth-child(2) {
    top: 0;
    left: 67%;
    width: 33%;
    height: 49%;
}

.collection-grid.items-3 .collection-grid-item:nth-child(3) {
    top: 51%;
    left: 67%;
    width: 33%;
    height: 49%;
}

/* 4 items layout - 1 large left, 3 small right stacked */
.collection-grid.items-4 .collection-grid-item:nth-child(1) {
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
}

.collection-grid.items-4 .collection-grid-item:nth-child(2) {
    top: 0;
    left: 67%;
    width: 33%;
    height: 32%;
}

.collection-grid.items-4 .collection-grid-item:nth-child(3) {
    top: 34%;
    left: 67%;
    width: 33%;
    height: 32%;
}

.collection-grid.items-4 .collection-grid-item:nth-child(4) {
    top: 68%;
    left: 67%;
    width: 33%;
    height: 32%;
}

/* 5 items layout - 1 large left, 4 small right stacked */
.collection-grid.items-5 .collection-grid-item:nth-child(1) {
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
}

.collection-grid.items-5 .collection-grid-item:nth-child(2) {
    top: 0;
    left: 67%;
    width: 33%;
    height: 24%;
}

.collection-grid.items-5 .collection-grid-item:nth-child(3) {
    top: 25.33%;
    left: 67%;
    width: 33%;
    height: 24%;
}

.collection-grid.items-5 .collection-grid-item:nth-child(4) {
    top: 50.67%;
    left: 67%;
    width: 33%;
    height: 24%;
}

.collection-grid.items-5 .collection-grid-item:nth-child(5) {
    top: 76%;
    left: 67%;
    width: 33%;
    height: 24%;
}

/* 6+ items layout - 1 large left, 5 small right stacked */
.collection-grid.items-6 .collection-grid-item:nth-child(1) {
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
}

.collection-grid.items-6 .collection-grid-item:nth-child(2) {
    top: 0;
    left: 67%;
    width: 33%;
    height: 19.2%;
}

.collection-grid.items-6 .collection-grid-item:nth-child(3) {
    top: 20.2%;
    left: 67%;
    width: 33%;
    height: 19.2%;
}

.collection-grid.items-6 .collection-grid-item:nth-child(4) {
    top: 40.4%;
    left: 67%;
    width: 33%;
    height: 19.2%;
}

.collection-grid.items-6 .collection-grid-item:nth-child(5) {
    top: 60.6%;
    left: 67%;
    width: 33%;
    height: 19.2%;
}

.collection-grid.items-6 .collection-grid-item:nth-child(6) {
    top: 80.8%;
    left: 67%;
    width: 33%;
    height: 19.2%;
}

/* Collections count overlay - positioned on the large left item */
.collection-grid-overlay {
    position: absolute;
    bottom: 8px;
    right: calc(35% - 8px);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Collection card enhancements */
.collection-card .card-body {
    padding: 1rem;
}

.collection-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #dee2e6;
}

.collection-stats .stat-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #6c757d;
}

.collection-stats .stat-item i {
    margin-right: 0.25rem;
}

.follow-button {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}