/**
 * GKSUS Related Posts Hero Carousel Styles
 * Version: 2.3.3 - Strong Arrow Override for Theme Conflicts
 */

/* Main wrapper */
.gksus-related-posts-wrapper {
    margin: 2rem 0;
    padding: 0;
    position: relative;
    width: 100%;
}

/* Title styling */
.gksus-related-posts-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #333;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Carousel container */
.gksus-carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Swiper container */
.gksus-related-posts-wrapper .swiper {
    width: 100%;
    height: 700px;
    overflow: visible;
    position: relative;
}

.gksus-related-posts-wrapper .swiper-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Individual slide - hero style */
.gksus-related-posts-wrapper .swiper-slide {
    width: 96%;
    max-width: 1200px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease;
    opacity: 0.4;
    transform: scale(0.82);
}

.gksus-related-posts-wrapper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.gksus-related-posts-wrapper .swiper-slide-next,
.gksus-related-posts-wrapper .swiper-slide-prev {
    opacity: 0.6;
    transform: scale(0.9);
}

/* Hero slide container */
.gksus-hero-slide {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s ease;
    background: #fff;
}

.gksus-hero-slide:hover {
    transform: translateY(-5px);
}

/* Slide image */
.gksus-slide-image {
    position: relative;
    width: 100%;
    height: 570px;
    overflow: hidden;
}

.gksus-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gksus-hero-slide:hover .gksus-slide-image img {
    transform: scale(1.05);
}

.gksus-slide-image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Content section below image */
.gksus-slide-content {
    position: relative;
    background: #fff;
    padding: 1.25rem 1.5rem;
    z-index: 3;
    border-top: 1px solid #f0f0f0;
    min-height: 140px;
}

/* Device-specific breakpoints */

/* MacBook Pro 1440x900 */
@media (max-width: 1440px) and (max-height: 900px) {
    .gksus-slide-content {
        min-height: 130px;
        padding: 1.125rem 1.375rem;
    }
}

/* Surface Pro 7 912x1368 (landscape) */
@media (max-width: 1368px) and (max-height: 912px) {
    .gksus-slide-content {
        min-height: 125px;
        padding: 1rem 1.25rem;
    }

    .gksus-slide-image {
        height: 480px;
    }
}

/* Asus Zenbook Fold 853x1280 (landscape) */
@media (max-width: 1280px) and (max-height: 853px) {
    .gksus-slide-content {
        min-height: 120px;
        padding: 1rem 1.25rem;
    }
    .gksus-slide-image {
        height: 400px!important;
    }
}

/* laptopWithTouch 950x1280 (landscape) / laptopWithMDPIScreen 800x1280 (landscape) */
@media (max-width: 1280px) and (max-height: 950px) {
    .gksus-slide-content {
        min-height: 115px;
        padding: 0.875rem 1.125rem;
    }
    
    .gksus-slide-image {
        height: 400px!important;
    }
}

/* laptopWithHiDPIScreen 900x1440 (landscape) */
@media (max-width: 1440px) and (max-height: 900px) {
    .gksus-slide-content {
        min-height: 110px;
        padding: 0.875rem 1rem;
    }

    .gksus-slide-image {
        height: 485px;
    }
}

.gksus-slide-content-inner {
    width: 100%;
}

/* Tablet/iPad breakpoints - Normal responsive adjustments (no image cropping) */

/* Galaxy Tab S4 (712x1138) */
@media (max-width: 712px) and (max-height: 1138px) {
    .gksus-related-posts-wrapper .swiper {
        height: 580px;
    }
    
    .gksus-slide-image {
        height: 190px!important;
    }
    
    .gksus-slide-content {
        min-height: 120px;
        padding: 1rem 1.25rem;
    }
    
    .gksus-slide-title {
        font-size: 1.25rem;
    }
}

/* iPad Air (820x1180) */
@media (max-width: 820px) and (max-height: 1180px) {
    .gksus-related-posts-wrapper .swiper {
        height: 620px;
    }
    
    .gksus-slide-image {
        height: 310px!important;
    }
    
    .gksus-slide-content {
        min-height: 130px;
        padding: 1.125rem 1.375rem;
    }
    
    .gksus-slide-title {
        font-size: 1.3rem;
    }
}

/* iPad (768x1024) */
@media (max-width: 768px) and (max-height: 1024px) {
    .gksus-related-posts-wrapper .swiper {
        height: 600px;
    }
    
    .gksus-slide-image {
        height: 315px!important;
    }
    
    .gksus-slide-content {
        min-height: 125px;
        padding: 1.075rem 1.25rem;
    }
    
    .gksus-slide-title {
        font-size: 1.275rem;
    }
}

/* iPad Pro (1024x1366) */
@media (max-width: 1024px) and (max-height: 1366px) {
    .gksus-related-posts-wrapper .swiper {
        height: 660px;
    }
    
    .gksus-slide-image {
        height: 305px!important;
    }
    
    .gksus-slide-content {
        min-height: 135px;
        padding: 1.25rem 1.5rem;
    }
    
    .gksus-slide-title {
        font-size: 1.4rem;
    }
}

/* Mobile optimization - Clean containment */
@media (max-width: 768px) {
    /* Main wrapper - strict mobile containment */
    .gksus-related-posts-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        padding: 0 5px !important;
        margin: 1rem 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Carousel container */
    .gksus-carousel-container {
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Swiper container - mobile specific */
    .gksus-related-posts-wrapper .swiper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        height: auto !important;
    }
    
    /* Mobile slides - MAXIMUM WIDTH */
    .gksus-related-posts-wrapper .swiper-slide {
        width: 98% !important;
        max-width: 98% !important;
        flex-shrink: 0 !important;
        margin: 0 auto !important;
    }
    
    /* Hide arrows completely on mobile */
    .gksus-swiper-button-next,
    .gksus-swiper-button-prev {
        display: none !important;
    }
    
    /* Mobile slide content - MAXIMUM WIDTH */
    .gksus-hero-slide {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .gksus-slide-image {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .gksus-slide-image img {
        width: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important;
    }
    
    .gksus-slide-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
    }
}

/* Mobile phone breakpoints - Image cropping for phones only */

/* iPhone 14 Pro Max (430x932) */
@media (max-width: 430px) and (max-height: 932px) {
    .gksus-slide-image {
        height: 280px !important;
    }
    
    .gksus-slide-image img {
        object-fit: cover !important;
        object-position: center 25% !important; /* Crop from top, keep center-top area */
        width: 100% !important;
        height: 100% !important;
    }
    
    .gksus-slide-content {
        min-height: 100px;
        padding: 0.75rem 1rem;
    }
}

/* iPhone 14 Pro (393x852) */
@media (max-width: 393px) and (max-height: 852px) {
    .gksus-slide-image {
        height: 260px !important;
    }
    
    .gksus-slide-image img {
        object-fit: cover !important;
        object-position: center 30% !important; /* Focus on upper-center area */
        width: 100% !important;
        height: 100% !important;
    }
    
    .gksus-slide-content {
        min-height: 95px;
        padding: 0.75rem 0.875rem;
    }
}

/* iPhone 14 / 13 / 12 (390x844) */
@media (max-width: 390px) and (max-height: 844px) {
    .gksus-slide-image {
        height: 250px !important;
    }
    
    .gksus-slide-image img {
        object-fit: cover !important;
        object-position: center 35% !important; /* Crop to show upper portion */
        width: 100% !important;
        height: 100% !important;
    }
    
    .gksus-slide-content {
        min-height: 90px;
        padding: 0.625rem 0.875rem;
    }
}

/* iPhone SE (375x667) / iPhone 8 */
@media (max-width: 375px) and (max-height: 667px) {
    .gksus-slide-image {
        height: 220px !important;
    }
    
    .gksus-slide-image img {
        object-fit: cover !important;
        object-position: center 40% !important; /* More aggressive crop for smaller screen */
        width: 100% !important;
        height: 100% !important;
    }
    
    .gksus-slide-content {
        min-height: 85px;
        padding: 0.625rem 0.75rem;
    }
}

/* Samsung Galaxy S8+ (360x740) / Pixel 7 */
@media (max-width: 360px) and (max-height: 740px) {
    .gksus-slide-image {
        height: 240px !important;
    }
    
    .gksus-slide-image img {
        object-fit: cover !important;
        object-position: center 35% !important; /* Focus on upper area */
        width: 100% !important;
        height: 100% !important;
    }
    
    .gksus-slide-content {
        min-height: 85px;
        padding: 0.625rem 0.75rem;
    }
}

/* iPhone 12 Mini (360x780) */
@media (max-width: 360px) and (max-height: 780px) {
    .gksus-slide-image {
        height: 230px !important;
    }
    
    .gksus-slide-image img {
        object-fit: cover !important;
        object-position: center 30% !important; /* Portrait-style crop */
        width: 100% !important;
        height: 100% !important;
    }
    
    .gksus-slide-content {
        min-height: 80px;
        padding: 0.5rem 0.75rem;
    }
}

/* Slide title */
.gksus-slide-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
}

.gksus-slide-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.gksus-slide-title a:hover {
    color: #007cba;
}

/* Slide category */
.gksus-slide-category {
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
    color: #666;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

/* Read More link */
.gksus-slide-link {
    display: inline-block;
    color: #007cba;
    text-decoration: underline;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.gksus-slide-link:hover {
    color: #005a87;
    text-decoration: none;
}

/* Carousel container - override theme padding */
.gksus-carousel-container {
    position: relative;
    overflow: visible !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* Navigation arrows - RED with NO BACKGROUND */
.gksus-swiper-button-next,
.gksus-swiper-button-prev {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 60px !important;
    height: 60px !important;
    background: none !important;
    border: none !important;
    z-index: 1000 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    color: #e74c3c !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.gksus-swiper-button-next:hover,
.gksus-swiper-button-prev:hover {
    background: none !important;
    transform: translateY(-50%) scale(1.2) !important;
    color: #c0392b !important;
}

.gksus-swiper-button-next {
    right: -30px !important;
    left: auto !important;
}

.gksus-swiper-button-prev {
    left: -30px !important;
    right: auto !important;
}

.gksus-swiper-button-next::after,
.gksus-swiper-button-prev::after {
    font-size: 24px;
    font-weight: 900;
    color: #e74c3c !important;
    font-family: 'Font Awesome 5 Free', Arial, sans-serif;
}

.gksus-swiper-button-next::after {
    content: '❯';
}

.gksus-swiper-button-prev::after {
    content: '❮';
}

/* Hide default swiper button styles */
.gksus-related-posts-wrapper .swiper-button-next,
.gksus-related-posts-wrapper .swiper-button-prev {
    margin-top: 0;
    background-image: none !important;
}

/* Pagination disabled */
.gksus-swiper-pagination,
.gksus-related-posts-wrapper .swiper-pagination {
    display: none !important;
}



/* No related posts message */
.gksus-no-related {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 3rem 2rem;
    background: #f9f9f9;
    border-radius: 8px;
    margin: 2rem 0;
}

/* Responsive design */
@media (max-width: 1200px) {
    .gksus-related-posts-wrapper .swiper {
        height: 650px;
    }
    
    .gksus-related-posts-wrapper .swiper-slide {
        width: 96%;
    }
    
    .gksus-slide-image {
        height: 460px;
    }
    
    .gksus-slide-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 1024px) {
    .gksus-related-posts-wrapper .swiper {
        height: 580px;
    }
    
    .gksus-related-posts-wrapper .swiper-slide {
        width: 94%;
    }
    
    .gksus-slide-image {
        height: 400px;
    }
    
    .gksus-swiper-button-next,
    .gksus-swiper-button-prev {
        width: 50px;
        height: 50px;
    }
    
    .gksus-swiper-button-next {
        right: -20px !important;
        left: auto !important;
    }
    
    .gksus-swiper-button-prev {
        left: -20px !important;
        right: auto !important;
    }
    
    .gksus-swiper-button-next::after,
    .gksus-swiper-button-prev::after {
        font-size: 20px;
    }
    
    .gksus-slide-content {
        padding: 1.125rem 1.25rem;
        min-height: 110px;
    }
    
    .gksus-slide-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .gksus-related-posts-wrapper .swiper {
        height: 500px;
    }
    
    .gksus-related-posts-wrapper .swiper-slide {
        width: 96%;
        opacity: 1;
        transform: scale(1);
    }
    
    .gksus-slide-image {
        height: 340px;
    }
    
    .gksus-related-posts-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .gksus-slide-content {
        padding: 1rem 1.125rem;
        min-height: 100px;
    }
    
    .gksus-slide-title {
        font-size: 1.2rem;
    }
    
    .gksus-slide-category {
        font-size: 0.85rem;
    }
    
    .gksus-swiper-button-next,
    .gksus-swiper-button-prev {
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .gksus-swiper-button-next {
        right: -10px !important;
        left: auto !important;
    }
    
    .gksus-swiper-button-prev {
        left: -10px !important;
        right: auto !important;
    }
    
    .gksus-swiper-button-next::after,
    .gksus-swiper-button-prev::after {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    .gksus-related-posts-wrapper .swiper {
        height: 450px;
    }
    
    .gksus-related-posts-wrapper .swiper-slide {
        width: 98%;
    }
    
    .gksus-slide-image {
        height: 300px;
    }
    
    .gksus-slide-content {
        padding: 0.875rem 1rem;
        min-height: 90px;
    }
    
    .gksus-slide-title {
        font-size: 1.1rem;
    }
    
    .gksus-related-posts-title {
        font-size: 1.3rem;
    }
    
    .gksus-swiper-button-next,
    .gksus-swiper-button-prev {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .gksus-swiper-button-next {
        right: 5px !important;
        left: auto !important;
    }
    
    .gksus-swiper-button-prev {
        left: 5px !important;
        right: auto !important;
    }
    
    .gksus-swiper-button-next::after,
    .gksus-swiper-button-prev::after {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .gksus-related-posts-wrapper .swiper {
        height: 400px;
    }
    
    .gksus-related-posts-wrapper .swiper-slide {
        width: 100%;
    }
    
    .gksus-slide-image {
        height: 260px;
    }
    
    .gksus-slide-content {
        padding: 0.75rem 0.875rem;
        min-height: 80px;
    }
    
    .gksus-slide-title {
        font-size: 1rem;
    }
}

/* Elementor compatibility */
.elementor-widget-container .gksus-related-posts-wrapper {
    margin: 0;
}

.elementor-widget-container .gksus-related-posts-wrapper .swiper {
    overflow: visible;
}

/* Custom variations */
.gksus-related-posts-wrapper.compact .gksus-related-posts-wrapper .swiper {
    height: 450px;
}

.gksus-related-posts-wrapper.minimal .gksus-hero-slide {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.gksus-related-posts-wrapper.minimal .gksus-hero-slide:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .gksus-related-posts-wrapper {
        color: #e0e0e0;
    }
    
    .gksus-related-posts-title {
        color: #000;
    }
    
    .gksus-hero-slide {
        background: #2a2a2a;
    }
    
    .gksus-slide-content {
        background: #ece9e5;
        border-top-color: #ece9e5;
    }
    
    .gksus-slide-title a {
        color: #000;
    }
    
    .gksus-slide-title a:hover {
        color: red;
    }
    
    .gksus-slide-category {
        color: #000;
    }
    
    .gksus-slide-link {
        color: #000;
    }
    
    .gksus-slide-link:hover {
        color: red;
    }
    
    .gksus-no-related {
        background: #2a2a2a;
        color: #bbb;
    }
}

/* Ensure proper loading state */
.gksus-related-posts-wrapper .swiper:not(.swiper-initialized) {
    opacity: 0;
}

.gksus-related-posts-wrapper .swiper.swiper-initialized {
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Fix for potential conflicts */
.gksus-related-posts-wrapper * {
    box-sizing: border-box;
}

/* High-specificity overrides for theme conflicts */
.gksus-related-posts-wrapper .gksus-carousel-container .gksus-swiper-button-next,
.gksus-related-posts-wrapper .gksus-carousel-container .gksus-swiper-button-prev,
.gksus-related-posts-wrapper .swiper .gksus-swiper-button-next,
.gksus-related-posts-wrapper .swiper .gksus-swiper-button-prev {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 60px !important;
    height: 60px !important;
    z-index: 1000 !important;
}

.gksus-related-posts-wrapper .gksus-carousel-container .gksus-swiper-button-next,
.gksus-related-posts-wrapper .swiper .gksus-swiper-button-next {
    right: 0 !important;
    left: auto !important;
}

.gksus-related-posts-wrapper .gksus-carousel-container .gksus-swiper-button-prev,
.gksus-related-posts-wrapper .swiper .gksus-swiper-button-prev {
    left: 0 !important;
    right: auto !important;
}

/* Loading animation */
@keyframes gksusSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gksus-hero-slide {
    animation: gksusSlideIn 0.6s ease-out;
}

/* Force centering */
.gksus-related-posts-wrapper .swiper-container-centered > .swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999;
}

.gksus-related-posts-wrapper .swiper-centered {
    text-align: center;
}

.gksus-related-posts-wrapper .swiper-centered .swiper-slide {
    text-align: left;
}