/*
Theme Name: MPD
Description: Personal Portfolio
Version: 1.0.0
Author: Matthew Perry
Author URI: 
Theme URI: matthewperry.design
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: Divi
*/

/* ========== Custom CSS from Generator ========== */

/* Baseball Card Portfolio Styles */

.baseball-card-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    padding: 40px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.baseball-card,
.baseball-card-horizontal {
    perspective: 1000px;
    cursor: pointer;
}

/* Vertical Cards (standard baseball card 2.5 x 3.5 inches) */
.baseball-card img {
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;
    position: relative;
    transform-style: preserve-3d;
}

/* Horizontal Cards (landscape - 3.5 x 2.5 inches) */
.baseball-card-horizontal {
    grid-column: span 2;
}

.baseball-card-horizontal img {
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;
    position: relative;
    transform-style: preserve-3d;
}

.baseball-card:hover img,
.baseball-card-horizontal:hover img {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Shimmer Effect - Works on both */
.baseball-card::after,
.baseball-card-horizontal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.1) 40%,
        transparent 70%
    );
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.baseball-card:hover::after,
.baseball-card-horizontal:hover::after {
    opacity: 1;
}

/* Responsive - Adjust for tablets */
@media (max-width: 980px) {
    .baseball-card-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .baseball-card-horizontal {
        grid-column: span 2;
    }
}

/* Responsive - 1 column on mobile */
@media (max-width: 767px) {
    .baseball-card-gallery {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 20px;
    }
    
    .baseball-card-horizontal {
        grid-column: span 1;
    }
}