/* DEBUG: Force overlay visible 
.activity-feed .activity-card.grid .card-data {opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;}
*/

.activity-feed-grid,
.activity-feed-stream {}

.activity-feed-grid {}
.activity-feed-grid { display: flex; flex-wrap: wrap; gap:1rem; align-items: flex-start; padding:0;}

.activity-card { position: relative; border-radius: 1rem; overflow: hidden; transition: transform 0.3s ease; cursor: pointer; flex: 0 0 auto;}
.activity-card.grid:hover {transform: scale(1.03)}

/* Image inside the card */
.activity-card .activity-image-link {display: block; position: relative; z-index: 1;}
.activity-card .activity-image-link .activity-image {display: block; object-fit: contain; vertical-align: bottom; transition: transform 0.3s ease;}
.activity-card.stream:hover .activity-image-link .activity-image {transform: scale(1.1); transition: transform 0.3s ease;}
.activity-card.stream .activity-image-link .activity-image {height:auto; width: 100%}
.activity-card.grid:hover .activity-image-link .activity-image {transform: scale(1.5); transition: transform 0.3s ease;}
.activity-card.grid .activity-image-link .activity-image {height: 20rem; width: auto}

/* Reveal */
.activity-card.grid .card-data {position: absolute; inset: 0; opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; justify-content: flex-end; z-index: 2; background-color: rgba(0, 0, 0, 0.5); padding: 1rem;}
.activity-card.grid:hover .card-data {opacity: 1 !important; visibility: visible; pointer-events: auto;}

/* Text content */
.activity-card.stream .card-data {}
.activity-card.stream .card-data .activity-meta p {}
.activity-card.stream .card-data .activity-title {font-size:2rem}
.activity-card.stream .card-data .activity-reactions {font-size: 1.2rem}
.activity-card.stream .card-data .activity-reactions img.reaction-icon {}

.activity-card.grid .card-data {color:#fff}
.activity-card.grid .card-data .activity-meta p {font-size:0.9rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);}
.activity-card.grid .card-data .activity-title {font-size: 1.5rem; margin-bottom: 1rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);}
.activity-card.grid .card-data .activity-reactions {font-size: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; color:#222 }
.activity-card.grid .card-data .activity-reactions img.reaction-icon {}


/* Load more */
#load-more {text-align: center; margin-top:3rem}
#load-more button {}
/* Load more spinner */
#loading-spinner .spinner {width: 7rem; height: 7rem; border: 1rem solid #f2f5f3; border-top: 1rem solid #b2c2b4; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto}
@keyframes spin {to { transform: rotate(360deg)}}

/* Responsive */
@media (max-width: 768px) {
	.activity-card {width: 100%; }
	.activity-card .activity-image-link .activity-image {width: 100%; height: auto; object-fit: cover;}
}