/* Me Media — Luxury per-site themes */

.site-page::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--demo-glow), transparent 70%);
}

/* ── Team: initials only (no photos) ── */
.site-team-avatar {
    width: 88px; height: 88px; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--demo-primary), var(--demo-accent));
    color: #fff; font-size: 1.75rem; font-weight: 600;
    box-shadow: 0 8px 32px var(--demo-glow);
    border: 2px solid rgba(255,255,255,0.15);
}
.site-team-photo { display: none; }

/* ── Luxury product cards ── */
.site-card {
    border: 1px solid var(--demo-border);
    background: linear-gradient(180deg, var(--demo-surface) 0%, color-mix(in srgb, var(--demo-surface) 92%, var(--demo-bg)) 100%);
}
.site-card-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%);
    opacity: 0; transition: opacity 0.4s ease;
    pointer-events: none;
}
.site-card:hover .site-card-image::after { opacity: 1; }
.site-card-tag {
    font-weight: 600; letter-spacing: 0.04em;
}
.site-card-price {
    font-size: 1rem; letter-spacing: -0.02em;
}

/* ── Stats luxury bar ── */
.site-stats-bar {
    background: linear-gradient(90deg, var(--demo-surface), color-mix(in srgb, var(--demo-surface) 80%, var(--demo-primary)), var(--demo-surface));
}

/* ── Section headers ── */
.site-section .section-header h2 {
    background: linear-gradient(135deg, var(--demo-text), color-mix(in srgb, var(--demo-text) 70%, var(--demo-muted)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Footer luxury ── */
.site-footer {
    background: linear-gradient(180deg, var(--demo-primary) 0%, color-mix(in srgb, var(--demo-primary) 85%, #000) 100%);
}

/* ═══ AUTOMOTIVE — Noir cinematic ═══ */
.site-automotive {
    --demo-glow: rgba(220, 38, 38, 0.25);
}
.site-automotive .site-hero-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.92) 100%);
}
.site-automotive .site-card-tag { background: rgba(220,38,38,0.9) !important; color: #fff; }
.site-automotive .site-header-cta { background: #dc2626; }
.site-automotive.layout-bold .site-catalog-grid { grid-template-columns: repeat(3, 1fr); }
.site-automotive .site-card-image { aspect-ratio: 16/10; }

/* ═══ JEWELRY — Gold black ═══ */
.site-jewelry {
    --demo-glow: rgba(212, 175, 55, 0.3);
}
.site-jewelry .site-hero-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.88) 100%);
}
.site-jewelry .site-brand-name { color: #d4af37; }
.site-jewelry .site-header-cta { background: linear-gradient(135deg, #d4af37, #f5e6b8); color: #0a0a0a; }
.site-jewelry .site-card { border-color: rgba(212,175,55,0.2); }
.site-jewelry .site-card:hover { box-shadow: 0 24px 60px rgba(212,175,55,0.15); }
.site-jewelry.layout-luxury .site-catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* ═══ RESTAURANT — Warm fine dining ═══ */
.site-restaurant {
    --demo-glow: rgba(255, 149, 0, 0.2);
}
.site-restaurant .site-hero-overlay {
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
}
.site-restaurant .site-header-cta { background: #ff9500; color: #1a1a1a; }

/* ═══ INTERIOR — Editorial warm ═══ */
.site-interior {
    --demo-glow: rgba(146, 113, 77, 0.15);
}
.site-interior .site-about { background: var(--demo-secondary); }
.site-interior.layout-editorial .site-card:first-child { grid-column: 1 / -1; }
.site-interior.layout-editorial .site-card:first-child .site-card-image { aspect-ratio: 21/9; }

/* ═══ REALESTATE — Clean blue ═══ */
.site-realestate.layout-grid .site-catalog-grid { grid-template-columns: repeat(3, 1fr); }
.site-realestate .site-card-price { color: #0071e3; }

/* ═══ MOBILE — Minimal tech ═══ */
.site-mobile.layout-minimal .site-catalog-grid { grid-template-columns: repeat(3, 1fr); }
.site-mobile .site-card-image { aspect-ratio: 1; background: #f5f5f7; }
.site-mobile .site-card-image img { object-fit: contain; padding: 12px; }

/* ═══ SHOP — Commerce vibrant ═══ */
.site-shop.layout-commerce .site-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ═══ CARPET — Heritage ═══ */
.site-carpet.layout-heritage .site-card-image { aspect-ratio: 3/4; }

/* ═══ MEDICAL — Clinical trust ═══ */
.site-medical .site-booking-form,
.site-medical .site-contact-form { border: 1px solid rgba(0,113,227,0.15); }

/* ═══ COSMETICS — Beauty soft ═══ */
.site-cosmetics.layout-beauty .site-card-image { aspect-ratio: 1; border-radius: 50%; margin: 16px; width: calc(100% - 32px); overflow: hidden; }

/* ═══ MENU — QR fresh ═══ */
.site-menu.layout-qrmenu .site-card {
    flex-direction: row; align-items: center;
}
.site-menu.layout-qrmenu .site-card-image {
    width: 100px; flex-shrink: 0; aspect-ratio: 1; border-radius: 12px; margin: 12px;
}

/* ── Process steps luxury ── */
.site-process-step {
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-xl, 24px);
    background: var(--demo-surface);
}
.site-process-num {
    background: linear-gradient(135deg, var(--demo-primary), var(--demo-accent));
    color: #fff; width: 40px; height: 40px;
    border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 600; margin-bottom: 16px;
}

/* ── Gallery masonry feel ── */
.site-gallery-grid { gap: 12px; }
.site-gallery-item {
    border-radius: 16px; overflow: hidden;
    transition: transform 0.4s ease;
}
.site-gallery-item:hover { transform: scale(1.02); }

/* ── Contact / forms ── */
.site-contact-form,
.site-booking-form {
    border-radius: var(--demo-radius-xl, 24px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
}
.site-map-placeholder {
    border-radius: 16px;
    background: var(--demo-secondary);
}

/* ── Modal luxury ── */
.site-modal-panel { border-radius: 24px; overflow: hidden; }
.site-modal-content h2 { letter-spacing: -0.03em; }

@media (max-width: 900px) {
    .site-automotive.layout-bold .site-catalog-grid,
    .site-realestate.layout-grid .site-catalog-grid,
    .site-mobile.layout-minimal .site-catalog-grid,
    .site-jewelry.layout-luxury .site-catalog-grid { grid-template-columns: 1fr; }
    .site-interior.layout-editorial .site-card:first-child { grid-column: auto; }
    .site-menu.layout-qrmenu .site-card { flex-direction: column; }
}