.movie-grid { display: grid; grid-template-columns: repeat(2, minmax(40%, 1fr)); gap: 1rem; max-width: 100%; }
.movie-post { position: relative; transition: transform 0.3s ease; opacity: 0; animation: fadeInUp 0.6s ease forwards; }

.movie-grid a.ticket { color: var(--black); width: 100%; display: grid; grid-template-rows: 64px 1fr 112px; border: 4px solid var(--secondary-dark); position: relative; }

/* I can't remember who inspired this from CodePen. If it's you, let me know! I want to give you credit! */
.ticket::before, .ticket::after { content: ""; position: absolute; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background-color: var(--black); }
.ticket::before { left: 40%; top: -23px; border: 4px solid var(--secondary-dark); border-bottom-color: transparent; border-left-color: transparent; transform: rotate(135deg); }
.ticket::after { bottom: -23px; left: 40%; border: 4px solid var(--secondary-dark); border-bottom-color: transparent; border-left-color: transparent; transform: rotate(-45deg); }

.ticket .ticket-body { background-color: var(--black); background-blend-mode: multiply; display: grid; background-size: cover; }
.ticket .ticket-stub,
.ticket .ticket-bottom { font-family: var(--font-mono); text-transform: uppercase; align-items: center; justify-content: center; background-color: var(--white); background-image: url("https://www.transparenttextures.com/patterns/cardboard.png"); background-blend-mode: multiply; padding: 0.25rem; text-align: center; }
.ticket .ticket-stub { padding-top: 0.9rem; border-bottom: 2px dashed var(--black); }
.ticket .ticket-stub svg { height: 18px; margin: 0 auto; fill: var(--black); }
.ticket .ticket-stub small { font-size: 0.8rem; margin: 0; font-weight: 900; }
.ticket .ticket-bottom { line-height: 1; }
.ticket .ticket-bottom p { font-size: 1.2rem; }
.ticket .ticket-bottom p,
.ticket .ticket-bottom small { margin: 0.25rem 0; color: var(--black); }

/* Stagger animation for new items */
.movie-post:nth-child(1) { animation-delay: 0.1s; }
.movie-post:nth-child(2) { animation-delay: 0.2s; }
.movie-post:nth-child(3) { animation-delay: 0.3s; }
.movie-post:nth-child(4) { animation-delay: 0.4s; }
.movie-post:nth-child(5) { animation-delay: 0.5s; }
.movie-post:nth-child(6) { animation-delay: 0.6s; }
/* New items loaded via AJAX */
.movie-post.newly-loaded { animation: fadeInUp 0.6s ease forwards }
.movie-post.newly-loaded:nth-child(1) { animation-delay: 0.1s; }
.movie-post.newly-loaded:nth-child(2) { animation-delay: 0.2s; }
.movie-post.newly-loaded:nth-child(3) { animation-delay: 0.3s; }
.movie-post.newly-loaded:nth-child(4) { animation-delay: 0.4s; }
.movie-post.newly-loaded:nth-child(5) { animation-delay: 0.5s; }
.movie-post.newly-loaded:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.load-more-btn { line-height: var(--line-height-body); font-family: var(--font-flair); background: var(--black); color: var(--primary-color); border: 1px solid var(--secondary-color); padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; display: block; align-items: center; transition: all 0.3s ease; position: relative; overflow: hidden; text-transform: uppercase; }
.load-more-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }
.load-more-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.load-more-btn .btn-icon { transition: transform 0.3s ease; }
.load-more-btn:hover .btn-icon { transform: translateX(4px); }

.load-more-btn.loading .btn-text,
.load-more-btn.loading .btn-icon { opacity: 0; }
.loading-indicator { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; gap: 1rem; }

.loading-spinner { width: 5rem; height: 5rem; border: 0.5rem solid rgba(102, 126, 234, 0.3); border-top-color: var(--secondary-color); border-radius: 50%; animation: spin 1s linear infinite; }
.loading-indicator p { margin: 0; color: var(--mid-grey); }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
@media (min-width: 1024px) {
    .movie-grid { grid-template-columns: repeat(6, minmax(80px, 1fr)); gap: 1.25rem; }
}

/* Ensure grid works well in flex containers */
.movie-grid {
    width: 100%;
    min-width: 0; /* Important for flex children */
}