/*
* assets/css/pages/vlog.css
*/

/* 
  No specific styles are needed here for now.
  The new vlog card design is implemented directly with Tailwind CSS utility classes in the template file.
  This file is kept for any future custom styling needs for the main Vlogs page.
*/

.vlogs-filter-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.vlogs-filter-nav .filter-button {
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #475569; /* slate-600 */
    background-color: transparent;
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vlogs-filter-nav .filter-button:hover {
    background-color: #f8fafc; /* slate-50 */
    border-color: #cbd5e1; /* slate-300 */
}

.vlogs-filter-nav .filter-button.active {
    background-color: #fb923c; /* accent-orange */
    color: #fff;
    border-color: #fb923c;
    box-shadow: 0 4px 10px rgba(251, 146, 60, 0.3);
}

.vlogs-grid.loading .vlog-card {
    opacity: 0.5;
}

/* 
  Styles for the Modern Vlog Card.
  This CSS ensures the design works even if Tailwind classes are not processed.
*/
.vlog-card-modern {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.vlog-card-modern a {
    display: block;
    width: 100%;
    height: 14rem; /* default ~224px, more rectangular */
    color: white;
}

.vlog-card-modern .vlog-card-image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.vlog-card-modern:hover .vlog-card-image {
    transform: scale(1.05);
}

.vlog-card-modern .vlog-card-gradient {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.4), transparent);
}

.vlog-card-modern .vlog-card-play-button-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vlog-card-modern .vlog-card-play-button {
    width: 5rem; /* 20 * 0.25rem = 80px */
    height: 5rem;
    border: 2px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.vlog-card-modern:hover .vlog-card-play-button {
    transform: scale(1.1);
}

.vlog-card-modern .vlog-card-play-icon {
    width: 2.5rem; /* 10 * 0.25rem = 40px */
    height: 2.5rem;
    margin-left: 0.25rem;
    fill: currentColor;
}

.vlog-card-modern .vlog-card-watch-time {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
}

.vlog-card-modern .vlog-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1.5rem;
    width: 100%;
}

.vlog-card-modern .vlog-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}

.vlog-card-modern .vlog-card-excerpt {
    font-size: 0.875rem;
    opacity: 0.9;
    line-height: 1.6;
}

.relative .swiper-button-next,
.relative .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    /* New styles for high contrast */
    background-color: #002349; /* Primary Dark Blue */
    color: #FFFFFF; /* White */
    
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 0 4px 14px rgba(0, 35, 73, 0.15);
    transition: all 0.3s ease;
}

.relative .swiper-button-next:hover,
.relative .swiper-button-prev:hover {
    background-color: #001a35; /* Darker blue on hover */
    box-shadow: 0 6px 18px rgba(0, 35, 73, 0.2);
    transform: translateY(-50%) scale(1.05);
}

.relative .swiper-button-next {
    right: 0.5rem;
}

.relative .swiper-button-prev {
    left: 0.5rem;
}

.relative .swiper-button-next:after,
.relative .swiper-button-prev:after {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Pagination Styles */
.swiper-pagination {
    position: relative;
    bottom: -2rem;
}

/* Load More Button Styles */
.load-more-container {
    margin-top: 3rem;
    text-align: center;
}

#load-more-vlogs {
    background-color: #fb923c; /* accent-orange */
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(251, 146, 60, 0.3);
}

#load-more-vlogs:hover {
    background-color: #ea580c; /* orange-600 */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(251, 146, 60, 0.4);
}

#load-more-vlogs:disabled {
    background-color: #9ca3af; /* gray-400 */
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.load-more-container .text-sm {
    color: #6b7280; /* gray-500 */
    margin-bottom: 1rem;
}

.load-more-container .text-gray-500 {
    color: #9ca3af; /* gray-400 */
    margin-top: 0.5rem;
}

.swiper-pagination .swiper-pagination-bullet {
    background-color: #cbd5e1; /* slate-300 */
    opacity: 1;
    transition: background-color 0.3s;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background-color: #fb923c; /* accent-orange */
}

/* Pagination (theme styled) */
.pagination-container nav .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.25rem;
    padding: 0.5rem 0.875rem; /* px-4 py-2 approx */
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 0.5rem;
    color: #334155; /* slate-700 */
    background-color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination-container nav .page-numbers:hover {
    background-color: #fff7ed; /* orange-50 */
    border-color: #fdba74; /* orange-300 */
    color: #9a3412; /* orange-800 */
}

.pagination-container nav .page-numbers.current {
    background-color: #fb923c; /* accent-orange */
    border-color: #fb923c;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(251, 146, 60, 0.3);
}

.pagination-container nav .page-numbers.prev,
.pagination-container nav .page-numbers.next {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.pagination-container nav .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* Styles for video transcript section */
.video-transcript {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.video-transcript h2 {
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1f2937; /* gray-800 */
}

.video-transcript h3 {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #374151; /* gray-700 */
}

.video-transcript ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.video-transcript li {
    margin-bottom: 0.5rem;
    color: #4b5563; /* gray-600 */
    line-height: 1.5;
}