/**
 * An Infinite Scroll Styles
 *
 * @package An_Infinite_Scroll
 */

:root {
	--an-infinite-scroll-grid-margin: 20px;
	--an-infinite-scroll-grid-padding: 10px;
	--an-infinite-scroll-grid-padding-desktop: 20px;
	--an-infinite-scroll-grid-width: 1440px;
	--an-infinite-scroll-grid-gap: 20px;
	--an-infinite-scroll-card-height: 200px;
	--an-infinite-scroll-text-color: #fff;
	--an-infinite-scroll-date-color: var(--an-infinite-scroll-text-color);
	--an-infinite-scroll-title-font: Arial, sans-serif;
	--an-infinite-scroll-title-font-weight: bold;
	--an-infinite-scroll-date-font: Arial, sans-serif;
}

/* Grid Container */
.an-infinite-scroll-grid {
    display: grid;
	grid-template-columns: 1fr;
    gap: var(--an-infinite-scroll-grid-gap);
    margin: var(--an-infinite-scroll-grid-margin) auto;
	max-width: var(--an-infinite-scroll-grid-width);
    padding: 0 var(--an-infinite-scroll-grid-padding);
	min-height: calc( var(--an-infinite-scroll-card-height) * 12 ); /* 12 stacked cards */
}

/* Desktop: 3 columns */
@media ( min-width: 769px ) {
    .an-infinite-scroll-grid {
		padding: 0 var(--an-infinite-scroll-grid-padding-desktop);
    }
}

/* Tablet: 3 columns */
@media ( min-width: 769px ) {
    .an-infinite-scroll-grid {
		grid-template-columns: repeat(3, 1fr);
        min-height: calc( var(--an-infinite-scroll-card-height) * 4 ); /* 4 rows of 3 cards */
    }
}

/* Card Styles */
.an-infinite-scroll-card {
	position: relative;
    background: rgba( 0, 0, 0, 0.6 );
	aspect-ratio: 16 / 9;
    overflow: hidden;

    /* Performance optimization */
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;
}

.an-infinite-scroll-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba(0,0,0,.3), rgba(0,0,0,.6) );
	z-index: 0;
	transition: opacity 0.3s ease;
}

/* Card Link */
.an-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Card Image */
.an-card-image {
    position: absolute;
    inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
    object-fit: cover;
}

/* Card Content */
.an-card-content {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 15px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.an-card-title {
	margin: 0 0 5px;
	padding: 0;
	font-family: var(--an-infinite-scroll-title-font);
    font-size: 1.25rem;
	font-weight: var(--an-infinite-scroll-title-font-weight);
    line-height: 1.3;
    color: var(--an-infinite-scroll-text-color);
}

.an-infinite-scroll-card:hover .an-card-title {
	text-decoration: underline;
}

.an-infinite-scroll-card:hover::before {
	opacity: 0.7;
}

.an-card-date {
    display: block;
	font-family: var(--an-infinite-scroll-date-font);
    font-size: 0.875rem;
    color: var(--an-infinite-scroll-date-color);
}

/* Sentinel (invisible trigger) */
.an-infinite-scroll-sentinel {
    height: 1px;
    margin-top: 40px;
}

/* Loader */
.an-infinite-scroll-loader {
	text-align: center;
	padding: 40px 0;
	margin-bottom: 110vh;
	min-height: 120px;
	transition: transform 0.3s ease;
}

.an-infinite-scroll-loader.an-is-hidden {
	visibility: hidden;
}

.an-infinite-scroll-loader .an-infinite-scroll-spinner {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: #333;
	border-radius: 50%;
	animation: an-spin 1s linear infinite;
	animation-play-state: paused;
}

.an-infinite-scroll-loader.an-is-animated .an-infinite-scroll-spinner {
	animation-play-state: running;
}

@keyframes an-spin {
    to {
        transform: rotate(360deg);
    }
}

/* More Button */
.an-infinite-scroll-more {
    text-align: center;
    margin: 40px 0;
}

/* Ensure compatibility with GeneratePress button styles */
.an-infinite-scroll-more .an-more-button {
    display: inline-block;
    padding: 15px 30px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
}

.an-infinite-scroll-more .an-more-button:hover {
    background: #555;
}

.an-infinite-scroll-more .an-more-button-text {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Utility */
.an-is-hidden {
	display: none;
}