/**
 * STANDARDIZED CARD STYLES v3.0.0
 * Universal CSS Variable System
 *
 * ALL templates must use these classes for restaurant cards.
 * Colors now use CSS variables from variables.css
 */

/* ===========================================
   GRID CONTAINER
.std-card-grid {
    background: transparent !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 1024px) {
    .std-card-grid {
        background: transparent !important;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .std-card-grid {
        background: transparent !important;
        grid-template-columns: 1fr;
        padding: 0 15px;
    }
}
        background: transparent !important;
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

/* ===========================================
   CARD BASE - High specificity to override Blocksy theme
   Multiple selectors to ensure these styles WIN
   =========================================== */
.std-card,
a.std-card,
.std-card-grid .std-card,
.std-card-grid a.std-card,
.city-hub .std-card,
.city-hub a.std-card,
body .std-card,
body a.std-card {
    background: #161616 !important;
    background: #161616 !important;
    background-color: #161616 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-card) !important;
    -webkit-box-shadow: var(--shadow-card) !important;
    -moz-box-shadow: var(--shadow-card) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--primary-accent) !important;
}

.std-card:hover,
a.std-card:hover,
.std-card-grid .std-card:hover,
.std-card-grid a.std-card:hover,
.city-hub .std-card:hover,
.city-hub a.std-card:hover,
body .std-card:hover,
body a.std-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 30px rgba(var(--primary-accent-rgb), 0.1) !important;
    border-color: var(--border-light) !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* ===========================================
   CARD IMAGE
   =========================================== */
.std-card-image {
    height: 220px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-elevated);
    position: relative;
}

/* Placeholder for cards without images */
.std-card-image.std-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
    font-size: 4rem;
}

/* Rating Badge - Top Right - Bright Yellow (IMDb style) */
.std-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--star-gold);
    color: #000;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ===========================================
   CARD CONTENT
   =========================================== */
.std-card-content,
body .std-card-content,
.std-card .std-card-content {
    padding: 16px;
    background: #161616 !important;
    background-color: #161616 !important;
}

/* Business Name */
.std-card-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text-main);
    line-height: 1.3;
}

.std-card-name:hover {
    color: var(--primary-accent);
}

/* Meta Line 1: Cuisine | Price | Rating */
.std-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.std-card-cuisine {
    color: var(--text-muted) !important;
    font-weight: 500;
}

.std-card-price {
    color: var(--success);
    font-weight: 600;
}

.std-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}

.std-card-star {
    color: var(--star-gold);
}

.std-card-reviews {
    color: var(--text-muted) !important;
    font-size: 0.95rem;
}

/* Meta Line 2: City */
.std-card-city {
    font-size: 0.9rem;
    color: var(--text-muted) !important;
    margin-bottom: 12px;
}

/* ===========================================
   LOCALS RECOMMEND SECTION
   =========================================== */
.std-card-recommend {
    margin-top: 12px;
    padding-top: 12px;
    border-top: none;
}

.std-card-recommend-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.std-card-recommend-label .heart {
    color: var(--primary-accent);
}

/* Recommendation Tags - Gold Accent Style */
.std-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.std-card-tag {
    background: rgba(var(--primary-accent-rgb), 0.15);
    border: 1px solid var(--primary-accent) !important;
    color: var(--primary-accent);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ===========================================
   CONTENT AREA WRAPPER
   =========================================== */
.std-content-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ===========================================
   SECTION HEADER
   =========================================== */
.std-section-header {
    text-align: center;
    margin-bottom: 30px;
}

.std-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-accent);
    margin: 0 0 10px 0;
}

.std-section-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0;
}

/* ===========================================
   FINAL OVERRIDE - HARDCODED COLORS
   These rules have maximum specificity and use
   hardcoded hex values to guarantee they win.
   ALL card text colors defined here.
   =========================================== */
body .std-card .std-card-cuisine,
body .std-card-grid .std-card .std-card-cuisine,
html body .std-card-cuisine,
.std-card-cuisine {
    color: #888888 !important;
}

body .std-card .std-card-reviews,
body .std-card-grid .std-card .std-card-reviews,
html body .std-card-reviews,
.std-card-reviews {
    color: #888888 !important;
}

body .std-card .std-card-city,
body .std-card-grid .std-card .std-card-city,
html body .std-card-city,
.std-card-city {
    color: #888888 !important;
}

/* ===========================================
   LAZY LOADED IMAGES (v3.1.0)
   =========================================== */
.std-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}