/* Joe Photography & Safaris Tours - Modern Design */
:root {
    --jps-primary: #2c5f2d;
    --jps-primary-dark: #1f4420;
    --jps-accent: #d4af37;
    --jps-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Package Cards */
.jps-packages-grid {display: grid; gap: 30px; margin: 40px 0;}
.jps-columns-3 {grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));}

.jps-package-card {
    background: white; border-radius: 16px; overflow: hidden;
    box-shadow: var(--jps-shadow); transition: 0.3s;
}
.jps-package-card:hover {transform: translateY(-8px); box-shadow: 0 12px 40px rgba(44,95,45,0.15);}

.jps-package-image {height: 280px; overflow: hidden; position: relative;}
.jps-package-image img {width: 100%; height: 100%; object-fit: cover; transition: 0.3s;}
.jps-package-card:hover .jps-package-image img {transform: scale(1.05);}

.jps-package-badge {
    position: absolute; top: 20px; right: 20px;
    background: var(--jps-primary); color: white;
    padding: 8px 16px; border-radius: 20px; font-size: 12px;
    font-weight: 600; text-transform: uppercase;
}

.jps-package-content {padding: 28px;}
.jps-package-title {font-size: 24px; font-weight: 700; margin: 0 0 16px;}
.jps-package-title a {color: #333; text-decoration: none;}
.jps-package-title a:hover {color: var(--jps-primary);}

.jps-package-meta {display: flex; gap: 20px; margin-bottom: 16px; color: #666; font-size: 14px;}
.jps-package-excerpt {color: #666; line-height: 1.7; margin-bottom: 20px;}

.jps-package-price {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px;
    padding-top: 20px; border-top: 1px solid #e0e0e0;
}
.jps-price-amount {font-size: 32px; font-weight: 700; color: var(--jps-primary);}
.jps-price-label {color: #666; font-size: 14px;}

.jps-package-button {
    display: block; text-align: center; background: var(--jps-primary);
    color: white; padding: 14px; border-radius: 8px; text-decoration: none;
    font-weight: 600; transition: 0.3s;
}
.jps-package-button:hover {background: var(--jps-primary-dark); transform: translateY(-2px);}

/* Gallery */
.jps-gallery {display: grid; gap: 16px; margin: 40px 0;}
.jps-gallery-columns-3 {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}
.jps-gallery-item {border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer;}
.jps-gallery-item img {width: 100%; height: 100%; object-fit: cover; transition: 0.3s;}
.jps-gallery-item:hover img {transform: scale(1.1);}

/* Map */
.jps-tour-map {margin: 40px 0; border-radius: 16px; overflow: hidden; box-shadow: var(--jps-shadow);}
.jps-map-title, .jps-gallery-title {font-size: 32px; font-weight: 700; margin: 0 0 24px; color: #333;}

/* Featured Tours */
.jps-featured-tours {display: grid; gap: 30px; margin: 40px 0;}
.jps-featured-tour {border-radius: 16px; overflow: hidden; height: 400px; position: relative;}
.jps-featured-image {height: 100%;}
.jps-featured-image img {width: 100%; height: 100%; object-fit: cover;}
.jps-featured-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 40px;
}
.jps-featured-overlay h3 {color: white; font-size: 32px; margin: 0 0 20px;}
.jps-featured-button {
    display: inline-block; background: white; color: var(--jps-primary);
    padding: 12px 32px; border-radius: 8px; text-decoration: none;
    font-weight: 600; align-self: flex-start;
}

@media (max-width: 768px) {
    .jps-packages-grid, .jps-gallery {grid-template-columns: 1fr !important;}
    .jps-package-image {height: 220px;}
}