/* assets/css/pages/platform.css */




/* Page Header Styles moved to global.css */
/* Section Typography moved to global.css */


/* Branded Portal & Course Finder & AI Copilot & Counselor Dashboard Hover Effect */
.branded-portal-card,
.course-finder-card,
.ai-copilot-card,
.counselor-dashboard-card {
    position: relative;
    z-index: 1;
    overflow: visible;
    /* Allow pop-out */
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s linear 0.1s;
}

.branded-portal-card:hover,
.course-finder-card:hover,
.ai-copilot-card:hover,
.counselor-dashboard-card:hover {
    z-index: 10;
    transform: translateY(-5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s linear 0s;
}

.hover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    border-radius: var(--radius-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 20;
    padding: 0;
    overflow: hidden;
    /* Ensure slider tracks don't spill out */
}

/* Slider Logic */
.hover-image .slider-track {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Specific logic for AI Copilot slider - Static Single Image */
.ai-copilot-card .hover-image .slider-track {
    width: 100%;
    animation: none;
    display: flex;
}

.ai-copilot-card .hover-image img {
    width: 100%;
    object-fit: cover;
}

.ai-copilot-card .hover-image img:not(:first-child) {
    display: none;
}

@keyframes slide {

    0%,
    45% {
        transform: translateX(0);
    }

    55%,
    100% {
        transform: translateX(-50%);
    }
}

/* Readiness Toolkit & University Connect - Static Single Image */
.readiness-card .hover-image .slider-track,
.university-connect-card .hover-image .slider-track {
    width: 100%;
    display: flex;
}

.readiness-card .hover-image img,
.university-connect-card .hover-image img {
    width: 100%;
    object-fit: cover;
}

.readiness-card .hover-image img:not(:first-child),
.university-connect-card .hover-image img:not(:first-child) {
    display: none;
}

/* Value-Added SVCS - Static Single Image */
.value-added-card .hover-image .slider-track {
    width: 100%;
    display: flex;
}

.value-added-card .hover-image img {
    width: 100%;
    object-fit: cover;
}

.value-added-card .hover-image img:not(:first-child) {
    display: none;
}

@keyframes slide-3 {

    0%,
    25% {
        transform: translateX(0);
    }

    33%,
    58% {
        transform: translateX(-33.333%);
    }

    66%,
    91% {
        transform: translateX(-66.666%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Modal Manual Slider Override */
.modal-content.manual-slider .slider-track {
    animation: none;
    /* Disable auto-slide */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    /* Indicate interaction */
}

/* Common Modal Slider Styles */
.modal-content.has-slider .slider-track {
    display: flex;
    /* width is set dynamically or via specific class logic above, 
       but for the generic .has-slider we previously had 200%. 
       We need to be careful not to conflict. 
       The AI Copilot (2-image) sets width 200%.
       The Readiness (3-image) sets width 300%.
       We should let JS transfer the specific class or inline style needed, 
       OR just rely on the cloned content having the internal ratios.
       Wait, if we clone the track, it brings its class? 
       Yes. But the specific CSS for .readiness-card .slider-track targets it via parent.
       Inside modal, parent is .modal-content.
       So we need explicit styles for the modal context.
    */
}

/* Fix for AI Copilot in Modal - Side by Side */
.modal-content.has-slider:not(.manual-slider) .slider-track {
    display: flex;
    width: 100%;
    animation: none;
    justify-content: space-between;
}

.modal-content.has-slider:not(.manual-slider) .slider-track img {
    width: 50%;
    height: auto;
    object-fit: contain;
    display: block !important;
    /* Force visibility */
    flex: 0 0 50%;
}

/* Fix for Readiness in Modal (Manual Slider) */
.modal-content.has-slider.manual-slider .slider-track {
    width: 300%;
    /* 3 images */
    animation: none;
    /* No auto-slide */
    transition: transform 0.5s ease;
    /* Smooth slide */
}

.modal-content.has-slider.manual-slider .slider-track img {
    width: 33.333%;
    /* 1/3 of track */
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

/* Branded Portal & Course Finder & AI Copilot & Counselor Dashboard & Readiness Toolkit & Dedicated Partner & Value-Added SVCS & University Connect Hover Effect */
.branded-portal-card,
.course-finder-card,
.ai-copilot-card,
.counselor-dashboard-card,
.readiness-card,
.dedicated-partner-card,
.value-added-card,
.university-connect-card {
    position: relative;
    cursor: pointer;
    z-index: 1;
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s linear 0.1s;
}

.branded-portal-card:hover,
.course-finder-card:hover,
.ai-copilot-card:hover,
.counselor-dashboard-card:hover,
.readiness-card:hover,
.dedicated-partner-card:hover,
.value-added-card:hover,
.university-connect-card:hover {
    z-index: 10;
    transform: translateY(-5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s linear 0s;
}

.branded-portal-card:hover .hover-image,
.course-finder-card:hover .hover-image,
.ai-copilot-card:hover .hover-image,
.counselor-dashboard-card:hover .hover-image,
.readiness-card:hover .hover-image,
.dedicated-partner-card:hover .hover-image,
.value-added-card:hover .hover-image,
.university-connect-card:hover .hover-image {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal.active .modal-content {
    transform: scale(1);
}

/* Modal Slider Support */
.modal-content {
    /* Reset img specific styles if any */
    display: flex;
    /* Allow it to hold flex track */
    overflow: hidden;
    /* Hide sliding parts */
    background: transparent;
    box-shadow: none;
    max-width: 900px;
    /* Limit width */
    width: 90%;
    position: relative;
    /* Ensure absolute children (arrows) are positioned relative to this */
}

/* Slider Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--brand-primary);
    /* Teal background for high contrast */
    color: var(--white);
    border: 2px solid var(--white);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1002;
    /* Higher than modal close button (1001) just in case, or at least very high */
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    opacity: 1;
    pointer-events: auto;
}

.slider-arrow:hover {
    background: var(--brand-dark);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.slider-arrow.prev {
    left: 20px;
}

.slider-arrow.next {
    right: 20px;
}

.modal-content img {
    /* Standard single image inside modal */
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
}

/* If it has a slider */
.modal-content.has-slider .slider-track {
    display: flex;
    width: 200%;
    /* Two images */
    animation: slide 6s infinite ease-in-out;
}

.modal-content.has-slider .slider-track img {
    width: 50%;
    /* 50% of the 200% track = 100% of container */
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

/* Fix for Readiness in Modal (Manual Slider) */
/* CSS Logic handled by JS injection now for reliability */

.close-modal {
    position: absolute;
    top: 2rem;
    right: 2.5rem;
    color: var(--white);
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 1001;
    line-height: 1;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--brand-accent);
    text-decoration: none;
    cursor: pointer;
}

/* Fix for top bar overflow on hover - Ensure curves match card */
.branded-portal-card::after,
.course-finder-card::after,
.ai-copilot-card::after,
.counselor-dashboard-card::after,
.readiness-card::after,
.dedicated-partner-card::after,
.value-added-card::after,
.university-connect-card::after {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ========== MOBILE RESPONSIVE STYLES ========== */

/* Tablet Landscape */
@media (max-width: 992px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Tablet Portrait & Large Phones */
@media (max-width: 768px) {
    .grid-3 {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .card {
        padding: 1.5rem;
    }

    .card-icon {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 1rem;
    }

    .card-icon svg {
        width: 24px;
        height: 24px;
    }

    .card h3 {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }

    .card p {
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    /* Disable hover overlays on touch devices */
    .hover-image {
        display: none !important;
    }

    /* ========== MOBILE MODAL IMAGE OPTIMIZATION ========== */
    .modal {
        padding: 0;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
    }

    /* Single image modal */
    .modal-content img {
        width: 100%;
        height: auto;
        max-height: 85vh;
        object-fit: contain;
        border-radius: 0;
    }

    /* Slider track in modal */
    .modal-content .slider-track {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
    }

    .modal-content .slider-track img {
        width: 100%;
        min-width: 100%;
        height: auto;
        max-height: 80vh;
        object-fit: contain;
    }

    /* Touch-friendly slider arrows */
    .slider-arrow {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
        background: rgba(0, 119, 182, 0.9);
    }

    .slider-arrow.prev {
        left: 8px;
    }

    .slider-arrow.next {
        right: 8px;
    }

    /* Touch-friendly close button */
    .close-modal {
        position: fixed;
        top: env(safe-area-inset-top, 1rem);
        right: 1rem;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        font-size: 1.5rem;
        z-index: 1005;
    }

    .section-title h2 {
        font-size: 1.5rem;
    }

    .section-title p {
        font-size: 0.75rem;
    }
}

/* Small Phones */
@media (max-width: 576px) {
    .card {
        padding: 1.25rem;
    }

    .section {
        padding: 4rem 0;
    }
}

/* Disable hover effects on touch-only devices */
@media (hover: none) and (pointer: coarse) {
    .card:hover {
        transform: none;
    }

    .card::after {
        display: none;
    }

    .hover-image {
        display: none !important;
    }

    .branded-portal-card:hover,
    .course-finder-card:hover,
    .ai-copilot-card:hover,
    .counselor-dashboard-card:hover,
    .readiness-card:hover,
    .dedicated-partner-card:hover,
    .value-added-card:hover,
    .university-connect-card:hover {
        transform: none;
    }
}