/* ==========================================================
   cini-video.css
   Styles for video.php (video detail + listing page)
   Requires: cini-common.css loaded first
   ========================================================== */

/* ========================================
   Video Section Title Bar
======================================== */
.mvp-vid-wide-out h4.mvp-widget-home-title:before {
  background: #383838;
}


/* YouTube Layout Styles */
.youtube-layout-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px;
    background: #fff;
    color: #222;
    border-radius: 16px;
    margin-bottom: 20px;
    font-family: 'Roboto', 'Arial', sans-serif;
    box-sizing: border-box;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.youtube-main-col {
    flex: 1 1 calc(100% - 324px);
    max-width: calc(100% - 324px);
    min-width: 0;
}
.youtube-player-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.youtube-player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.youtube-info-wrapper {
    margin-top: 15px;
}

.video-comments-wrap {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
}

.video-comment-toggle-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.video-comment-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #aa092f;
    background: #f4f6f8;
    border-radius: 999px;
    padding: 12px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 100%;
}

.video-comment-toggle:hover {
    background: #fff2f5;
    border-color: #aa092f;
}

.video-comment-toggle[aria-expanded="true"] {
    background: #aa092f;
    color: #fff;
    border-color: #aa092f;
}

.video-comment-toggle[aria-expanded="true"] svg {
    color: #fff;
}

.video-comment-panel {
    width: 100%;
    margin-bottom: 0;
}

.video-comments-wrap .comment-compose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.youtube-video-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #222;
    line-height: 1.3;
}
.youtube-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 15px;
}
.youtube-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #aaaaaa;
    font-size: 14px;
}
.youtube-author-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.youtube-divider {
    font-size: 10px;
}
.youtube-actions {
    display: flex;
    gap: 10px;
}
.yt-action-btn {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease;
    font-weight: 600;
}
.yt-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
.youtube-description-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 12px;
    color: #ddd;
    font-size: 14px;
    line-height: 1.6;
    transition: background 0.2s ease;
}

.youtube-description-box:hover {
    background: rgba(255, 255, 255, 0.1);
}
.youtube-sidebar-col {
    flex: 0 0 300px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.yt-sidebar-header {
    margin-bottom: 5px;
}
.yt-sidebar-header .mvp-widget-home-title {
    color: #222;
}
.youtube-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.yt-suggest-item {
    display: flex;
    gap: 10px;
    text-decoration: none !important;
    border-radius: 8px;
    transition: background 0.2s ease;
    padding: 4px;
}
.yt-suggest-item:hover {
    background: rgba(0, 0, 0, 0.05);
}
.yt-suggest-img-wrap {
    flex: 0 0 160px;
    position: relative;
}
.yt-suggest-img-wrap img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 16/9;
}
.yt-suggest-duration {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.yt-suggest-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.yt-suggest-text h3 {
    font-size: 14px;
    font-weight: 600;
    color: #222 !important;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yt-suggest-meta {
    font-size: 12px;
    color: #aaaaaa;
    line-height: 1.3;
}

#video-top-ad,
#video-bottom-ad {
    width: 100%;
}

#mvp-vid-wide-wrap,
#video-more-section,
#video-more-section .mvp-main-box,
#video-more-section .mvp-main-blog-cont,
#video-more-section .mvp-main-blog-body,
#video-more-section .mvp-blog-story-list {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    #mvp-vid-wide-wrap .mvp-main-box,
    #video-more-section .mvp-main-box,
    .mvp-main-blog-wrap {
        width: 100%;
        max-width: 1240px;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    #mvp-vid-wide-wrap .mvp-vid-wide-cont,
    #video-more-section .mvp-main-blog-cont {
        margin-left: 0;
        margin-right: 0;
    }

    #video-more-section .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-out {
        display: flex;
        align-items: flex-start;
        gap: 18px;
        margin-left: 0;
        width: 100%;
        flex-wrap: nowrap;
    }

    #video-more-section .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-in {
        flex: 1;
        min-width: 0;
        margin-left: 0;
        width: auto;
    }

    #video-more-section .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-img {
        width: 280px;
        min-width: 280px;
        margin: 0;
        display: block;
        flex-shrink: 0;
    }

    #video-more-section .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    #video-more-section .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-text {
        margin: 0;
        width: auto;
    }

    #video-more-section .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-text h2 {
        font-size: 1.5rem;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    #video-more-section .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-text p {
        font-size: 1.1rem;
        line-height: 1.5;
    }
}

/* Mobile: ALL cards - uniform vertical layout like card 1 */
@media screen and (max-width: 768px) {
    /* Apply to ALL cards (standard and featured) */
    #video-more-section .mvp-blog-story-out {
        display: block !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    #video-more-section .mvp-blog-story-img {
        width: 100% !important;
        min-width: auto !important;
        margin: 0 !important;
        margin-bottom: 12px !important;
        flex-shrink: auto !important;
        display: block !important;
    }

    #video-more-section .mvp-blog-story-img img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        display: block !important;
    }

    #video-more-section .mvp-blog-story-in {
        width: 100% !important;
        flex: 1 !important;
        margin: 0 !important;
    }

    #video-more-section .mvp-blog-story-text {
        margin: 0 !important;
        width: auto !important;
    }

    #video-more-section .mvp-blog-story-text h2 {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
    }

    #video-more-section .mvp-blog-story-text p {
        margin-top: 8px !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    /* Featured cards (5th, 10th) - override ANY desktop styles */
    #video-more-section .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-out {
        display: block !important;
        flex-direction: column !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    #video-more-section .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-img {
        width: 100% !important;
        min-width: auto !important;
        margin-bottom: 12px !important;
        flex-shrink: auto !important;
    }

    #video-more-section .mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-in {
        width: 100% !important;
    }
}



/* ==========================================================
   cini-main.css
   Styles for main.php (news listing / kollywood page)
   Requires: cini-common.css loaded first
   ========================================================== */

/* ========================================
   Story List Cards
======================================== */
.mvp-blog-story-text span.mvp-cd-date:before {
    content: "" !important;
    margin-right: 0 !important;
}

ul.mvp-blog-story-list {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

.mvp-blog-story-img {
    background: none;
}

.mvp-blog-story-wrap {
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.mvp-blog-story-wrap:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.mvp-blog-story-img img {
    border-radius: 10px;
}

#video-more-section .mvp-blog-story-wrap {
    width: 100%;
    margin-right: 0;
    overflow: hidden;
}

#video-more-section .mvp-blog-story-out {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-left: 0;
    width: 100%;
    float: none;
}

#video-more-section .mvp-blog-story-in {
    margin-left: 0;
    flex: 1;
    min-width: 0;
}

#video-more-section .mvp-blog-story-img {
    width: 280px;
    min-width: 280px;
    margin-right: 0;
    flex-shrink: 0;
}

#video-more-section .mvp-blog-story-text {
    margin-top: 0;
}

#video-more-section .mvp-blog-story-text h2,
#video-more-section .mvp-blog-story-text p,
#video-more-section .mvp-cat-date-wrap {
    float: none;
}

/* ========================================
   "More Posts" Button
======================================== */
.mvp-inf-more-but {
    color: #fff !important;
    background: #111 !important;
}

/* ========================================
   Dark Mode
   Match detail.php dark treatment
======================================== */
.zox-dark .youtube-layout-container {
    background: #1a1a1a;
    color: #ddd;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}

.zox-dark .youtube-video-title,
.zox-dark .yt-sidebar-header .mvp-widget-home-title,
.zox-dark .yt-suggest-text h3,
.zox-dark #video-more-section .mvp-blog-story-text h2 {
    color: #f1f1f1 !important;
}

.zox-dark .youtube-action-row {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.zox-dark .youtube-stats,
.zox-dark .yt-suggest-meta,
.zox-dark #video-more-section .mvp-blog-story-text p,
.zox-dark #video-more-section .mvp-cd-date,
.zox-dark #video-more-section .mvp-cd-cmnt {
    color: #b8b8b8 !important;
}

.zox-dark .youtube-actions .hero-share-bar {
    background: #232323 !important;
    border-color: #383838 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
}

.zox-dark .youtube-actions .hero-share-bar .share-label {
    color: #b8b8b8 !important;
}

.zox-dark .video-comment-toggle {
    background: #232323;
    border-color: #383838;
    color: #aa092f;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.zox-dark .video-comment-toggle:hover {
    background: #2a1d21;
    border-color: #aa092f;
}

.zox-dark .video-comment-toggle[aria-expanded="true"] {
    background: #aa092f;
    color: #fff;
    border-color: #aa092f;
}

.zox-dark .yt-suggest-item {
    background: #202020;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.zox-dark .yt-suggest-item:hover {
    background: #262626;
}

.zox-dark .yt-suggest-duration {
    background: rgba(0, 0, 0, 0.82);
}

.zox-dark .mvp-blog-story-wrap {
    background: #1a1a1a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.zox-dark .mvp-blog-story-wrap:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}

.zox-dark #video-more-section .mvp-blog-story-text h2,
.zox-dark #video-more-section .mvp-blog-story-text p,
.zox-dark #video-more-section .mvp-cat-date-wrap {
    color: inherit;
}

.zox-dark .mvp-inf-more-but {
    background: #aa092f !important;
    color: #fff !important;
}

.zox-dark .bgfill.shadowinner,
.zox-dark #mvp-article-wrap,
.zox-dark #mvp-vid-wide-wrap {
    background: transparent !important;
}

.zox-dark #video-top-ad .mvp-main-box,
.zox-dark #video-bottom-ad .mvp-main-box {
    background: transparent !important;
}

.zox-dark #video-bottom-ad + div hr,
.zox-dark .clear hr {
    border-color: transparent !important;
}

.zox-dark #mvp-foot-wrap {
    margin-top: 0;
}

/* ========================================
   Mobile: Equal side spacing on card list
======================================== */
@media screen and (max-width: 767px) {
    .mvp-blog-story-wrap {
        margin-right: 0;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 900px) {
    .youtube-layout-container {
        padding: 18px;
        gap: 20px;
    }

    .youtube-main-col {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .youtube-sidebar-col {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 1024px) {
    .mvp-main-blog-wrap > .mvp-main-box,
    #video-top-ad .mvp-main-box,
    #video-bottom-ad .mvp-main-box,
    #mvp-article-wrap > .mvp-main-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    .youtube-layout-container {
        padding: 20px;
        gap: 20px;
    }

    #video-more-section .mvp-main-blog-out {
        flex-direction: column !important;
    }

    #video-more-section #mvp-side-wrap,
    .youtube-main-col,
    .youtube-sidebar-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    #video-more-section #mvp-side-wrap {
        margin-top: 24px !important;
    }
}

@media screen and (max-width: 767px) {
    #mvp-main-body-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mvp-main-blog-wrap,
    #video-top-ad,
    #video-bottom-ad,
    #mvp-article-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    #video-top-ad,
    #video-bottom-ad {
        margin: 0 auto 12px;
    }

    .mvp-main-blog-wrap > .mvp-main-box,
    #video-top-ad .mvp-main-box,
    #video-bottom-ad .mvp-main-box,
    #mvp-article-wrap > .mvp-main-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 6px !important;
        box-sizing: border-box;
    }

    #mvp-article-cont > .mvp-main-box {
        padding: 0 !important;
    }

    #video-top-ad .mvp-main-box,
    #video-bottom-ad .mvp-main-box {
        margin: 0 !important;
    }

    #video-top-ad .mvp-widget-ad,
    #video-top-ad .mvp-widget-ad a,
    #video-bottom-ad .mvp-widget-ad,
    #video-bottom-ad .mvp-widget-ad a {
        display: block;
        width: 100%;
    }

    #video-top-ad .mvp-leader2,
    #video-top-ad .mvp-leader3,
    #video-bottom-ad .mvp-leader2,
    #video-bottom-ad .mvp-leader3 {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px;
    }

    .bgfill.shadowinner,
    #mvp-article-wrap,
    #mvp-vid-wide-wrap {
        background: #fff !important;
        box-shadow: none !important;
    }

    #mvp-vid-wide-wrap .mvp-vid-wide-cont,
    #video-more-section .mvp-main-blog-cont,
    #video-more-section .mvp-main-blog-body,
    #video-more-section .mvp-main-blog-in,
    #video-more-section .mvp-blog-story-list {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .youtube-layout-container {
        width: 100%;
        padding: 14px;
        border-radius: 12px;
    }

    .youtube-player-wrapper {
        background: #fff;
        box-shadow: none;
    }

    .video-comments-wrap {
        margin-left: 20px;
        width: 80%;
        max-width: 100%;
    }

    .youtube-video-title {
        font-size: 19px;
        line-height: 1.4;
    }

    .youtube-action-row {
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .youtube-stats {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 13px;
    }

    .youtube-actions {
        width: 100%;
    }

    .youtube-actions .hero-share-bar {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        border-radius: 16px !important;
        padding: 10px 12px !important;
    }

    .yt-suggest-item {
        gap: 12px;
        padding: 10px;
        border: 1px solid #ececec;
        background: #fff;
    }

    .yt-suggest-img-wrap {
        flex: 0 0 132px;
    }

    .video-comment-toggle {
        width: 100%;
        border-radius: 14px;
        padding: 12px 16px;
    }

    #video-more-section {
        margin-top: 16px !important;
    }

    #video-more-section .mvp-main-blog-out {
        gap: 16px !important;
    }

    #video-more-section .mvp-blog-story-wrap {
        padding: 12px;
        margin-bottom: 14px;
    }

    #video-more-section .mvp-blog-story-out {
        flex-direction: column;
        gap: 12px;
    }

    #video-more-section .mvp-blog-story-img {
        width: 100%;
        min-width: 0;
    }

    #video-more-section .mvp-blog-story-text h2 {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 6px;
    }

    #video-more-section .mvp-blog-story-text p {
        margin-top: 8px;
        font-size: 0.95rem;
        line-height: 1.5;
    }
}

@media screen and (max-width: 480px) {
    .mvp-main-blog-wrap > .mvp-main-box,
    #video-top-ad .mvp-main-box,
    #video-bottom-ad .mvp-main-box,
    #mvp-article-wrap > .mvp-main-box {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .youtube-layout-container {
        padding: 12px;
        gap: 16px;
      
    }

    .youtube-video-title {
        font-size: 17px;
    }

    .youtube-player-wrapper {
        border-radius: 10px;
    }

    .youtube-author-img {
        width: 32px;
        height: 32px;
    }

    .yt-suggest-item {
        flex-direction: column;
        gap: 10px;
    }

    .yt-suggest-img-wrap {
        flex-basis: auto;
        width: 100%;
    }

    .yt-suggest-text h3 {
        font-size: 13px;
    }

    .video-comment-toggle {
        font-size: 15px;
    }

    .youtube-stats {
        font-size: 12px;
    }

    #video-more-section .mvp-blog-story-wrap {
        border-radius: 12px;
        padding: 10px;
    }

    #video-more-section .mvp-blog-story-text h2 {
        font-size: 0.95rem;
    }

    #video-more-section .mvp-blog-story-text p {
        font-size: 0.9rem;
    }
}

/* ========================================
   Layout Fix: More Videos Section & Sidebar
   Ensures the sidebar stays on the right.
   ======================================== */
#video-more-section .mvp-main-blog-out {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 30px !important;
    width: 100% !important;
    float: none !important;
}

#video-more-section .mvp-main-blog-in {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}

#video-more-section #mvp-side-wrap {
    flex: 0 0 300px !important;
    width: 300px !important;
    display: block !important;
    float: none !important;
}

#video-more-section #mvp-side-wrap img {
    max-width: 100% !important;
    height: auto !important;
}

@media screen and (max-width: 1000px) {
    #video-more-section .mvp-main-blog-out {
        gap: 20px !important;
    }
}

@media screen and (max-width: 768px) {
    #video-more-section .mvp-main-blog-out {
        flex-direction: column !important;
    }
    #video-more-section #mvp-side-wrap {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
    #video-more-section .mvp-main-blog-out {
        flex-direction: column !important;
    }

    #video-more-section #mvp-side-wrap {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #video-more-section #mvp-side-wrap img {
        max-width: 100% !important;
        height: auto !important;
    }
}