/*
Theme Name: Wowtube
Theme URI: https://ex-coders.com/wp/wowtube/
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme/portfolio
Description: WowTube - OTT Platform and Video Streaming WordPress Theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wowtube
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Tested up to: 6.0
Requires PHP: 7.1

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Wowtube is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

.category-parent {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 25px 20px;
}

.category-section { margin-bottom: 60px; }

.category-parent .post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

@media (max-width:350px){
    .category-parent .post-grid{
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .section-title {
        margin-bottom: 20px;
        font-size: 24px;
    }
}

.category-parent .post-grid .post-card{
    width: 100%;
    height: 100%;
    display: contents;
}

.category-parent .post-grid .post-card a{
    display: flex;
    flex-direction: column;
    /*gap: 20px;*/
    background-color: #1a1a1a;
    border-radius: 20px;
    overflow: hidden;
}

.category-parent .post-grid .post-card a img {
    width: 100%;
    border-radius: 6px;
    /*max-width: 150px;*/
    height: 100%;
    object-fit: cover;
}

.category-parent .post-grid .post-card a h3 {
    /*font-size: 14px;*/
    line-height: 1.4;
    width: 100%;
    height: 100%;
    padding: 20px;
    transition: all 0.4s ease-in-out;
}

.category-parent .post-grid .post-card a:hover h3 {
    background: linear-gradient(90deg, #A80D65 0%, #871ABB 82.95%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.category-parent .btn-container{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;
}

.category-parent .btn-container .explore-more {
    width: auto;
    white-space: nowrap;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #000;
    cursor: pointer;
}

.category-parent .btn-container .explore-more.disabled {
    background: #444;
    color: #aaa;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
}

.category-parent .btn-container hr{
    border: 1px solid #9b9b9b;
    width: 100%;
}



/*For home page swiper*/
.category-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
}

.category-track {
    display: flex;
    gap: 24px;
    animation: scrollLeft 40s linear infinite;
    width: max-content;
}

.category-item {
    width: 260px;
    height: 150px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
}

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

.category-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.2));
}

.category-info {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 2;
    color: #fff;
}

.category-info span {
    display: block;
    font-size: 18px;
    font-weight: 600;
}

.category-info small {
    font-size: 13px;
    color: #c77dff;
}

/* Infinite animation */
@keyframes scrollLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.parent-category-slider {
    display: flex;
    gap: 20px;
    overflow-x: hidden; /* 🔴 REQUIRED */
    white-space: nowrap;
    padding: 20px 0;
    position: relative;
}


.parent-category-slider::-webkit-scrollbar {
    display: none;
}

.category-card {
    max-width: 420px;
    height: auto;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    flex-shrink: 0;
}

.category-card a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.1));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.category-card h3 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 6px;
}

.category-card span {
    color: #f1c40f;
    font-size: 14px;
}


/**/
.swiper-slide.swiper-slide-height .frame-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    height: 100%;
}

.swiper-slide.swiper-slide-height .frame-thumb img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Dark overlay */
.frame-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(168, 13, 101, 0.64) 0%, var(--Sedentary, rgba(135, 26, 187, 0.64)) 82.95%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Button */
.frame-thumb .link-button {
    width: max-content;
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    padding: 10px 15px;
    border-radius: 30px;
    background: #fff;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.4s ease;
    z-index: 3;
}

.swiper-slide.swiper-slide-height:nth-child(odd){
    height: 336px;
}

.swiper-slide.swiper-slide-height:nth-child(even){
    height: 262px;
}

/* Hover effects */
.frame-thumb:hover img {
    transform: scale(1.08);
}

.frame-thumb:hover::after {
    opacity: 1;
}

.frame-thumb:hover .link-button {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Button hover */
.frame-thumb .link-button:hover {
    background: #871ABB;
    color: #fff;
}


/*latest posts*/
/* ===============================
   MOVIES DIAGONAL SHOWCASE
================================ */

.movies-diagonal-wrapper {
    width: 100%;
    padding: 80px 0;
}

.movies-diagonal-wrapper .swiper-slide {
    width: 100%;
}

.movie-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: radial-gradient(circle at top left, #0f2a2a, #081414);
    border-radius: 22px;
    padding: 60px;
    min-height: 420px;
    overflow: hidden;
}

.movie-content {
    max-width: 45%;
    z-index: 99;
}

.movie-cat {
    color: #b455ff;
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
}

.movie-content h2 {
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    margin: 20px 0 30px;
}

.movie-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    background: linear-gradient(135deg,#a855f7,#ec4899);
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

/* Diagonal image stack */
.movie-images {
    position: relative;
    width: 45%;
    height: 320px;
    position: absolute;
    right: -100px;
    height: 130%;
    width: 65%;
    transform: rotate(-12deg);
}

.movie-images img {
    position: absolute;
    width: 220px;
    height: 300px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0,0,0,.5);
    right: 0;
    height: 100% !important;
    width: 100%;
}

/* Limit slide width */
.moviesDiagonalSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
    gap: 40px;
}

.moviesDiagonalSwiper .swiper-slide {
    max-width: 675px;
}
/**/

/* Keep slides content normal */
.moviesDiagonalSwiper .swiper-slide {
    direction: ltr;
    max-width: 675px;
}

/* Smooth infinite motion */
.moviesDiagonalSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
}
/**/


/* Hover effect */
/*.movie-card:hover .movie-images img {*/
/*    transform: rotate(-8deg) translateY(-10px);*/
/*    transition: .4s ease;*/
/*}*/

/* Responsive */
@media (max-width: 991px) {
    .movie-card {
        flex-direction: column;
        text-align: center;
    }
    .movie-content,
    .movie-images {
        width: 100%;
        max-width: 100%;
    }
    .movie-images{
        transform: rotate(0deg);
        height: 100%;
        top: 0;
        right: 0;
    }
    .movie-images img{
        opacity: 0.2;
    }
}