/**
 * City Pillar Page Styles
 * Large venue cards with 2/3-1/3 layout, green background
 */

:root {
    --matcha-green: #7cb342;
    --matcha-light: #f1f8e9;
    --matcha-pale: #f9fdf7;
}

/* Green background for city pillar pages */
body {
    background-color: var(--matcha-light);
}

/* Make header and other sections transparent to show green background */
.minimal-header,
.minimal-hero,
.quick-stats,
.main-content,
.main-footer {
    background-color: transparent !important;
}

/* Main content wrapper */
.main-content {
    padding: 40px 0 !important;
}

/* Listings grid - stack vertically with spacing */
.listings-grid {
    display: flex !important;
    flex-direction: column;
    gap: 40px !important;
    max-width: 100%;
    width: 100%;
    margin: 0 !important;
}

/* Large venue cards with border */
.listing-card {
    background: var(--matcha-pale) !important;
    border: 1px solid #000000 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Responsive - adjust width and stack on mobile */
@media (max-width: 968px) {
    .listings-grid {
        width: 95%;
        max-width: 95%;
    }
}

/* Hero section adjustments */
.minimal-hero {
    padding: 40px 0 20px !important;
}

/* Stats section - minimal, left-aligned */
.quick-stats {
    padding: 30px 0 !important;
    background-color: transparent !important;
    margin-bottom: 0;
}

/* Override centered stats from styles.css */
.quick-stats .container .stats-row {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 80px !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.quick-stats .stat-item {
    text-align: left !important;
}

.quick-stats .stat-number {
    color: var(--matcha-green) !important;
    font-weight: 300 !important;
}