/* ==========================================================================
Portfolio Page Background
========================================================================== */
.portfolio-container {
    background-color: transparent;
}

body {
    background-color: #FBEADC;
    /* The same peachy background color */
    position: relative;
    /* Required for the aura effect */
    overflow-x: hidden;
    /* Prevents horizontal scroll from the auras */
}

/* Create the left side COLOR AURA */
body::before {
    content: '';
    position: fixed;
    /* Use fixed to keep it in view while scrolling */
    top: 0;
    left: -10%;
    width: 40%;
    height: 100%;
    z-index: -1;
    /* Place it behind the main content */
    pointer-events: none;
    background: radial-gradient(circle at center, #D90077, #FF2A00, transparent 60%);
    opacity: 0.15;
    filter: blur(80px);
    animation: slow-pan-left 25s infinite alternate ease-in-out;
}

/* Create the right side COLOR AURA */
body::after {
    content: '';
    position: fixed;
    /* Use fixed to keep it in view while scrolling */
    top: 0;
    right: -10%;
    width: 40%;
    height: 100%;
    z-index: -1;
    /* Place it behind the main content */
    pointer-events: none;
    background: radial-gradient(circle at center, #FF8C00, #FF2A00, transparent 60%);
    opacity: 0.2;
    filter: blur(80px);
    animation: slow-pan-right 25s infinite alternate ease-in-out;
}

/* Keyframes for the aura movement (add if not already in your main CSS) */
@keyframes slow-pan-left {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-10%);
    }
}

@keyframes slow-pan-right {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(10%);
    }
}

/* Texture overlay */
.texture-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0px, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 3px);
}

/* ==========================================================================
   13. Portfolio Page Styles
   ========================================================================== */

.portfolio-container {
    padding-top: calc(var(--header-height) + 4rem);
    /* Space below the fixed header */
}

.portfolio-section {
    margin-bottom: 6rem;
}

.portfolio-title {
    font-family: var(--font-secondary);
    font-size: 3rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.portfolio-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 2rem;
    /* Add space between mixed-layout rows */
}

/* --- Grid Column Styles --- */
.grid-4-col {
    grid-template-columns: repeat(4, 1fr);
}

.grid-2-col {
    grid-template-columns: repeat(2, 1fr);
}

/* --- Portfolio Item Styles --- */
.portfolio-item {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Aspect Ratios */
.portfolio-item.vertical {
    aspect-ratio: 9 / 16;
}

.portfolio-item.widescreen {
    aspect-ratio: 16 / 9;
}

.portfolio-item:hover {
    transform: translateY(-5px);
}

/* Glowing Border (no change needed here) */
.portfolio-item::before {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: -1;
    background: conic-gradient(from 90deg at 50% 50%, #FF2A00, #E000F5, #FF2A00);
    filter: blur(10px);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover::before {
    opacity: 1;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Responsive Grid Adjustments --- */
@media (max-width: 992px) {

    /* On tablets, both grids become 2 columns */
    .grid-4-col,
    .grid-2-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {

    /* On mobile, both grids become 1 column */
    .grid-4-col,
    .grid-2-col {
        grid-template-columns: 1fr;
    }
}

.portfolio-item:hover {
    transform: scale(1.03);
}

/* The Glowing Border Effect */
.portfolio-item::before {
    content: '';
    position: absolute;
    inset: -3px;
    /* Controls the thickness of the glow */
    z-index: -1;
    background: conic-gradient(from 90deg at 50% 50%, #FF2A00, #E000F5, #FF2A00);
    filter: blur(10px);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover::before {
    opacity: 1;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.view-overlay {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: bold;
    backdrop-filter: blur(5px);
}

/* ==========================================================================
   14. Lightbox (Video Player) Styles
   ========================================================================== */
.lightbox {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    position: relative;
    width: 90%;
    max-width: 960px;
    /* Max width of the video player */
}

.close-lightbox {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
}

#video-player-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
}

#video-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   15. Call-to-Action Section
   ========================================================================== */
.cta-section {
    padding: 6rem 2rem;
    margin-top: 4rem;
    background-color: transparent;
    /* A subtle, different background */
    text-align: center;
    border-radius: 20px;
    border-top: 3px solid #e0e0e0; /* Add this line */
}

.cta-section h2 {
    font-family: var(--font-secondary);
    font-size: 3rem;
    font-weight: normal;
    color: var(--color-text);
    max-width: 600px;
    margin: 0 auto 2rem auto;
}