/**
 * ZiyaraGuide Public Design System
 * Modern, clean, Instagram-inspired UI
 * Version: 5.0 (2026-03-17)
 *
 * Design Principles:
 * - X.com-style clarity and simplicity
 * - Instagram-like rounded corners and soft cards
 * - Mobile-first responsive design
 * - Consistent spacing, typography, and components
 * - Production-grade performance
 */

/* ============================================
   CSS VARIABLES - Design Tokens
   ============================================ */

:root {
    /* Primary Colors - Islamic Green Palette */
    --zg-primary: #1B5E20;
    --zg-primary-hover: #145018;
    --zg-primary-light: #E8F5E9;
    --zg-primary-alpha: rgba(27, 94, 32, 0.1);

    /* Neutral Colors */
    --zg-white: #FFFFFF;
    --zg-black: #000000;
    --zg-gray-50: #FAFAFA;
    --zg-gray-100: #F5F5F5;
    --zg-gray-200: #EEEEEE;
    --zg-gray-300: #E0E0E0;
    --zg-gray-400: #BDBDBD;
    --zg-gray-500: #9E9E9E;
    --zg-gray-600: #757575;
    --zg-gray-700: #616161;
    --zg-gray-800: #424242;
    --zg-gray-900: #212121;

    /* Semantic Colors */
    --zg-success: #4CAF50;
    --zg-warning: #FF9800;
    --zg-error: #F44336;
    --zg-info: #2196F3;

    /* Text Colors */
    --zg-text-primary: #212121;
    --zg-text-secondary: #757575;
    --zg-text-tertiary: #BDBDBD;
    --zg-text-link: #1B5E20;
    --zg-text-inverse: #FFFFFF;

    /* Background Colors */
    --zg-bg-page: #FAFAFA;
    --zg-bg-surface: #FFFFFF;
    --zg-bg-elevated: #FFFFFF;
    --zg-bg-overlay: rgba(0, 0, 0, 0.05);

    /* Border & Dividers */
    --zg-border: #E0E0E0;
    --zg-border-light: #EEEEEE;
    --zg-divider: #E0E0E0;

    /* Shadows - Soft, Instagram-like */
    --zg-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --zg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
    --zg-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
    --zg-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    --zg-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.04);

    /* Spacing Scale (4px base) */
    --zg-space-1: 0.25rem;
    /* 4px */
    --zg-space-2: 0.5rem;
    /* 8px */
    --zg-space-3: 0.75rem;
    /* 12px */
    --zg-space-4: 1rem;
    /* 16px */
    --zg-space-5: 1.25rem;
    /* 20px */
    --zg-space-6: 1.5rem;
    /* 24px */
    --zg-space-8: 2rem;
    /* 32px */
    --zg-space-10: 2.5rem;
    /* 40px */
    --zg-space-12: 3rem;
    /* 48px */
    --zg-space-16: 4rem;
    /* 64px */
    --zg-space-20: 5rem;
    /* 80px */

    /* Border Radius Scale - Instagram-style smooth curves */
    --zg-radius-sm: 6px;
    --zg-radius-md: 10px;
    --zg-radius-lg: 14px;
    --zg-radius-xl: 18px;
    --zg-radius-2xl: 24px;
    --zg-radius-full: 9999px;

    /* Typography */
    --zg-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --zg-font-mono: "SF Mono", Monaco, "Cascadia Code", Consolas, monospace;

    --zg-font-size-xs: 0.75rem;
    /* 12px */
    --zg-font-size-sm: 0.875rem;
    /* 14px */
    --zg-font-size-base: 1rem;
    /* 16px */
    --zg-font-size-lg: 1.125rem;
    /* 18px */
    --zg-font-size-xl: 1.25rem;
    /* 20px */
    --zg-font-size-2xl: 1.5rem;
    /* 24px */
    --zg-font-size-3xl: 1.875rem;
    /* 30px */
    --zg-font-size-4xl: 2.25rem;
    /* 36px */
    --zg-font-size-5xl: 3rem;
    /* 48px */

    --zg-font-weight-normal: 400;
    --zg-font-weight-medium: 500;
    --zg-font-weight-semibold: 600;
    --zg-font-weight-bold: 700;

    --zg-line-height-tight: 1.25;
    --zg-line-height-normal: 1.5;
    --zg-line-height-relaxed: 1.75;

    /* Layout */
    --zg-container-max: 1200px;
    --zg-container-narrow: 680px;
    --zg-header-height: 60px;
    --zg-bottom-nav-height: 56px;

    /* Transitions */
    --zg-transition-fast: 150ms ease;
    --zg-transition-base: 200ms ease;
    --zg-transition-slow: 300ms ease;

    /* Z-Index Scale */
    --zg-z-dropdown: 100;
    --zg-z-sticky: 200;
    --zg-z-fixed: 300;
    --zg-z-modal-backdrop: 400;
    --zg-z-modal: 500;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {

    :root.auto-theme,
    body.dark-mode {
        --zg-bg-page: #000000;
        --zg-bg-surface: #121212;
        --zg-bg-elevated: #1E1E1E;
        --zg-bg-overlay: rgba(255, 255, 255, 0.05);

        --zg-text-primary: #F5F5F5;
        --zg-text-secondary: #A8A8A8;
        --zg-text-tertiary: #6E6E6E;

        --zg-border: #2C2C2C;
        --zg-border-light: #1E1E1E;
        --zg-divider: #2C2C2C;

        --zg-primary-light: rgba(27, 94, 32, 0.15);
    }
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--zg-font-family);
    font-size: var(--zg-font-size-base);
    font-weight: var(--zg-font-weight-normal);
    line-height: var(--zg-line-height-normal);
    color: var(--zg-text-primary);
    background-color: var(--zg-bg-page);
    min-height: 100vh;
    overflow-x: hidden;
}

h1 {
    font-size: var(--zg-font-size-4xl);
}

h2 {
    font-size: var(--zg-font-size-3xl);
}

h3 {
    font-size: var(--zg-font-size-2xl);
}

h4 {
    font-size: var(--zg-font-size-xl);
}

h5 {
    font-size: var(--zg-font-size-lg);
}

h6 {
    font-size: var(--zg-font-size-base);
}

p {
    margin: 0 0 var(--zg-space-4);
}

a {
    color: var(--zg-text-link);
    text-decoration: none;
    transition: color var(--zg-transition-fast);
}

a:hover {
    color: var(--zg-primary-hover);
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */

.zg-container {
    width: 100%;
    max-width: var(--zg-container-max);
    margin: 0 auto;
    padding: 0 var(--zg-space-4);
}

.zg-container-narrow {
    max-width: var(--zg-container-narrow);
}

.zg-section {
    padding: var(--zg-space-8) 0;
}

@media (min-width: 768px) {
    .zg-section {
        padding: var(--zg-space-12) 0;
    }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.zg-header {
    position: sticky;
    top: 0;
    z-index: var(--zg-z-sticky);
    height: var(--zg-header-height);
    background: var(--zg-bg-surface);
    border-bottom: 1px solid var(--zg-border-light);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

body.dark-mode .zg-header {
    background: rgba(18, 18, 18, 0.95);
}

.zg-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--zg-container-max);
    margin: 0 auto;
    padding: 0 var(--zg-space-4);
}

.zg-logo {
    display: flex;
    align-items: center;
    gap: var(--zg-space-2);
    font-weight: var(--zg-font-weight-bold);
    font-size: var(--zg-font-size-lg);
    color: var(--zg-text-primary);
    text-decoration: none;
}

.zg-logo img {
    width: 32px;
    height: 32px;
    border-radius: var(--zg-radius-md);
}

.zg-nav-desktop {
    display: none;
    gap: var(--zg-space-2);
}

@media (min-width: 768px) {
    .zg-nav-desktop {
        display: flex;
    }
}

.zg-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-2);
    padding: var(--zg-space-2) var(--zg-space-3);
    font-size: var(--zg-font-size-sm);
    font-weight: var(--zg-font-weight-medium);
    color: var(--zg-text-secondary);
    text-decoration: none;
    border-radius: var(--zg-radius-md);
    transition: all var(--zg-transition-fast);
}

.zg-nav-link:hover {
    background: var(--zg-bg-overlay);
    color: var(--zg-text-primary);
}

.zg-nav-link-active {
    color: var(--zg-primary);
    background: var(--zg-primary-alpha);
}

.zg-header-actions {
    display: flex;
    align-items: center;
    gap: var(--zg-space-2);
}

/* ============================================
   HOME PAGE COMPONENTS
   ============================================ */

.zg-home-hero {
    text-align: center;
    padding: var(--zg-space-12) var(--zg-space-4);
    background: var(--zg-bg-surface);
}

@media (min-width: 768px) {
    .zg-home-hero {
        padding: var(--zg-space-20) var(--zg-space-4);
    }
}

.zg-home-hero h1 {
    font-size: var(--zg-font-size-4xl);
    font-weight: var(--zg-font-weight-bold);
    margin-bottom: var(--zg-space-3);
    color: var(--zg-text-primary);
}

@media (min-width: 768px) {
    .zg-home-hero h1 {
        font-size: var(--zg-font-size-5xl);
    }
}

.zg-home-hero p {
    font-size: var(--zg-font-size-lg);
    color: var(--zg-text-secondary);
    margin-bottom: var(--zg-space-8);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .zg-home-hero p {
        font-size: var(--zg-font-size-xl);
    }
}

/* Search Box */
.zg-home-search {
    max-width: 680px;
    margin: 0 auto var(--zg-space-8);
}

.zg-home-search-box {
    position: relative;
    display: flex;
    gap: var(--zg-space-2);
}

.zg-home-search-input {
    flex: 1;
    height: 52px;
    padding: 0 var(--zg-space-4);
    font-family: var(--zg-font-family);
    font-size: var(--zg-font-size-base);
    color: var(--zg-text-primary);
    background: var(--zg-bg-surface);
    border: 2px solid var(--zg-border);
    border-radius: var(--zg-radius-full);
    transition: all var(--zg-transition-fast);
}

.zg-home-search-input:focus {
    outline: none;
    border-color: var(--zg-primary);
    box-shadow: 0 0 0 4px var(--zg-primary-alpha);
}

.zg-home-search-input::placeholder {
    color: var(--zg-text-tertiary);
}

.zg-home-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zg-space-2);
    height: 52px;
    padding: 0 var(--zg-space-6);
    font-family: var(--zg-font-family);
    font-size: var(--zg-font-size-base);
    font-weight: var(--zg-font-weight-semibold);
    color: var(--zg-text-inverse);
    background: var(--zg-primary);
    border: none;
    border-radius: var(--zg-radius-full);
    cursor: pointer;
    transition: all var(--zg-transition-fast);
}

.zg-home-search-btn:hover {
    background: var(--zg-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--zg-shadow-md);
}

.zg-home-search-btn:active {
    transform: translateY(0);
}

/* Quick Links */
.zg-home-quick-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--zg-space-3);
}

.zg-home-quick-link {
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-2);
    padding: var(--zg-space-2) var(--zg-space-4);
    font-size: var(--zg-font-size-sm);
    font-weight: var(--zg-font-weight-medium);
    color: var(--zg-text-secondary);
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius-full);
    text-decoration: none;
    transition: all var(--zg-transition-fast);
}

.zg-home-quick-link:hover {
    color: var(--zg-primary);
    border-color: var(--zg-primary);
    background: var(--zg-primary-alpha);
    transform: translateY(-1px);
    box-shadow: var(--zg-shadow-sm);
}

.zg-home-quick-link i {
    font-size: 18px;
}

/* Stats Section */
.zg-home-stats {
    background: var(--zg-bg-surface);
    border-top: 1px solid var(--zg-border-light);
    border-bottom: 1px solid var(--zg-border-light);
}

.zg-home-stats-inner {
    max-width: var(--zg-container-max);
    margin: 0 auto;
    padding: var(--zg-space-8) var(--zg-space-4);
}

.zg-home-stats-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--zg-space-6);
    align-items: center;
    justify-items: center;
}

@media (max-width: 767px) {
    .zg-home-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--zg-space-4);
    }
}

.zg-home-stat-item {
    text-align: center;
}

.zg-home-stat-number {
    display: block;
    font-size: var(--zg-font-size-3xl);
    font-weight: var(--zg-font-weight-bold);
    color: var(--zg-primary);
    margin-bottom: var(--zg-space-1);
}

.zg-home-stat-label {
    display: block;
    font-size: var(--zg-font-size-sm);
    color: var(--zg-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zg-home-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--zg-border);
}

@media (max-width: 767px) {
    .zg-home-stat-divider {
        display: none;
    }
}

/* Categories Section */
.zg-home-categories {
    padding: var(--zg-space-12) var(--zg-space-4);
    max-width: var(--zg-container-max);
    margin: 0 auto;
}

.zg-home-categories h2 {
    font-size: var(--zg-font-size-3xl);
    font-weight: var(--zg-font-weight-bold);
    margin-bottom: var(--zg-space-8);
    text-align: center;
}

.zg-home-categories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zg-space-4);
}

@media (min-width: 640px) {
    .zg-home-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .zg-home-categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.zg-home-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--zg-space-8) var(--zg-space-4);
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border-light);
    border-radius: var(--zg-radius-xl);
    text-decoration: none;
    transition: all var(--zg-transition-base);
}

.zg-home-category-card:hover {
    border-color: var(--zg-primary);
    box-shadow: var(--zg-shadow-lg);
    transform: translateY(-4px);
}

.zg-home-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--zg-space-4);
    background: var(--zg-primary-alpha);
    border-radius: var(--zg-radius-xl);
    font-size: 32px;
    color: var(--zg-primary);
}

.zg-home-category-name {
    font-size: var(--zg-font-size-lg);
    font-weight: var(--zg-font-weight-semibold);
    color: var(--zg-text-primary);
    margin-bottom: var(--zg-space-1);
}

.zg-home-category-count {
    font-size: var(--zg-font-size-sm);
    color: var(--zg-text-secondary);
}

/* ============================================
   BUTTONS
   ============================================ */

.zg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zg-space-2);
    padding: var(--zg-space-3) var(--zg-space-5);
    font-family: var(--zg-font-family);
    font-size: var(--zg-font-size-sm);
    font-weight: var(--zg-font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--zg-radius-md);
    cursor: pointer;
    transition: all var(--zg-transition-fast);
    min-height: 40px;
}

.zg-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.zg-btn-primary {
    color: var(--zg-text-inverse);
    background: var(--zg-primary);
}

.zg-btn-primary:hover:not(:disabled) {
    background: var(--zg-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--zg-shadow-md);
}

.zg-btn-secondary {
    color: var(--zg-text-primary);
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border);
}

.zg-btn-secondary:hover:not(:disabled) {
    background: var(--zg-bg-overlay);
    border-color: var(--zg-text-secondary);
}

.zg-btn-ghost {
    color: var(--zg-text-secondary);
    background: transparent;
}

.zg-btn-ghost:hover:not(:disabled) {
    color: var(--zg-text-primary);
    background: var(--zg-bg-overlay);
}

.zg-btn-sm {
    padding: var(--zg-space-2) var(--zg-space-3);
    font-size: var(--zg-font-size-xs);
    min-height: 32px;
}

.zg-btn-lg {
    padding: var(--zg-space-4) var(--zg-space-6);
    font-size: var(--zg-font-size-base);
    min-height: 48px;
}

.zg-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--zg-radius-full);
}

/* ============================================
   CARDS
   ============================================ */

.zg-card {
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border-light);
    border-radius: var(--zg-radius-xl);
    overflow: hidden;
    transition: all var(--zg-transition-base);
}

.zg-card:hover {
    border-color: var(--zg-border);
    box-shadow: var(--zg-shadow-md);
    transform: translateY(-2px);
}

.zg-card-body {
    padding: var(--zg-space-4);
}

.zg-card-header {
    padding: var(--zg-space-4);
    border-bottom: 1px solid var(--zg-border-light);
}

.zg-card-footer {
    padding: var(--zg-space-3) var(--zg-space-4);
    border-top: 1px solid var(--zg-border-light);
}

/* ============================================
   FORMS
   ============================================ */

.zg-form-group {
    margin-bottom: var(--zg-space-4);
}

.zg-label {
    display: block;
    margin-bottom: var(--zg-space-2);
    font-size: var(--zg-font-size-sm);
    font-weight: var(--zg-font-weight-medium);
    color: var(--zg-text-primary);
}

.zg-input,
.zg-select,
.zg-textarea {
    width: 100%;
    padding: var(--zg-space-3) var(--zg-space-4);
    font-family: var(--zg-font-family);
    font-size: var(--zg-font-size-base);
    line-height: var(--zg-line-height-normal);
    color: var(--zg-text-primary);
    background: var(--zg-bg-surface);
    border: 2px solid var(--zg-border);
    border-radius: var(--zg-radius-md);
    transition: all var(--zg-transition-fast);
}

.zg-input:focus,
.zg-select:focus,
.zg-textarea:focus {
    outline: none;
    border-color: var(--zg-primary);
    box-shadow: 0 0 0 4px var(--zg-primary-alpha);
}

.zg-input::placeholder {
    color: var(--zg-text-tertiary);
}

.zg-textarea {
    min-height: 120px;
    resize: vertical;
}

/* ============================================
   UTILITIES
   ============================================ */

.zg-text-center {
    text-align: center;
}

.zg-text-left {
    text-align: left;
}

.zg-text-right {
    text-align: right;
}

.zg-text-primary {
    color: var(--zg-text-primary);
}

.zg-text-secondary {
    color: var(--zg-text-secondary);
}

.zg-text-tertiary {
    color: var(--zg-text-tertiary);
}

.zg-flex {
    display: flex;
}

.zg-flex-col {
    flex-direction: column;
}

.zg-items-center {
    align-items: center;
}

.zg-justify-center {
    justify-content: center;
}

.zg-justify-between {
    justify-content: space-between;
}

.zg-gap-2 {
    gap: var(--zg-space-2);
}

.zg-gap-3 {
    gap: var(--zg-space-3);
}

.zg-gap-4 {
    gap: var(--zg-space-4);
}

.zg-mb-0 {
    margin-bottom: 0 !important;
}

.zg-mb-2 {
    margin-bottom: var(--zg-space-2);
}

.zg-mb-4 {
    margin-bottom: var(--zg-space-4);
}

.zg-mb-6 {
    margin-bottom: var(--zg-space-6);
}

.zg-mb-8 {
    margin-bottom: var(--zg-space-8);
}

.zg-mt-2 {
    margin-top: var(--zg-space-2);
}

.zg-mt-4 {
    margin-top: var(--zg-space-4);
}

.zg-mt-6 {
    margin-top: var(--zg-space-6);
}

.zg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 767px) {
    .zg-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .zg-hide-desktop {
        display: none !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Content visibility for off-screen content */
.zg-card,
.zg-home-category-card {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

/* ============================================
   PUBLIC HEADER & NAVIGATION
   ============================================ */

.zg-public-header {
    position: sticky;
    top: 0;
    z-index: var(--zg-z-sticky);
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--zg-border-light);
    backdrop-filter: blur(12px);
}

body.dark-mode .zg-public-header {
    background: rgba(18, 18, 18, 0.98);
}

.zg-public-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zg-space-4);
    max-width: var(--zg-container-max);
    margin: 0 auto;
    padding: 0 var(--zg-space-4);
    height: var(--zg-header-height);
}

/* Brand/Logo */
.zg-public-brand {
    display: flex;
    align-items: center;
    gap: var(--zg-space-3);
    text-decoration: none;
    color: var(--zg-text-primary);
}

.zg-public-brand__mark img {
    width: 34px;
    height: 34px;
    border-radius: var(--zg-radius-md);
}

.zg-public-brand__text {
    display: none;
}

@media (min-width: 768px) {
    .zg-public-brand__text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .zg-public-brand__text strong {
        font-size: var(--zg-font-size-lg);
        font-weight: var(--zg-font-weight-bold);
        line-height: 1;
        color: var(--zg-text-primary);
    }

    .zg-public-brand__text small {
        font-size: var(--zg-font-size-xs);
        color: var(--zg-text-secondary);
        line-height: 1;
    }
}

/* Primary Navigation */
.zg-public-nav {
    display: none;
    gap: var(--zg-space-1);
}

@media (min-width: 1024px) {
    .zg-public-nav {
        display: flex;
    }
}

.zg-public-nav__link {
    padding: var(--zg-space-2) var(--zg-space-3);
    font-size: var(--zg-font-size-sm);
    font-weight: var(--zg-font-weight-medium);
    color: var(--zg-text-secondary);
    text-decoration: none;
    border-radius: var(--zg-radius-md);
    transition: all var(--zg-transition-fast);
}

.zg-public-nav__link:hover {
    background: var(--zg-bg-overlay);
    color: var(--zg-text-primary);
}

.zg-public-nav__link.is-active {
    color: var(--zg-primary);
    background: var(--zg-primary-alpha);
}

/* Header Search */
.zg-public-header__search {
    position: relative;
    display: none;
    flex: 1 1 280px;
    min-width: 0;
    max-width: 400px;
}

@media (min-width: 768px) {
    .zg-public-header__search {
        display: flex;
        align-items: center;
    }
}

.zg-public-search-pill {
    position: relative;
    width: 100%;
    margin: unset;
}

.zg-public-search-pill i {
    position: absolute;
    left: var(--zg-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--zg-text-tertiary);
    font-size: 18px;
}

.zg-public-search-pill input {
    width: 100%;
    height: 40px;
    padding: 0 var(--zg-space-4) 0 var(--zg-space-10);
    font-family: var(--zg-font-family);
    font-size: var(--zg-font-size-sm);
    color: var(--zg-text-primary);
    background: var(--zg-bg-overlay);
    border: 1px solid transparent;
    border-radius: var(--zg-radius-full);
    transition: all var(--zg-transition-fast);
}

.zg-public-search-pill input:focus {
    outline: none;
    background: var(--zg-bg-surface);
    border-color: var(--zg-border);
    box-shadow: 0 0 0 3px var(--zg-primary-alpha);
}

.zg-public-search-pill input::placeholder {
    color: var(--zg-text-tertiary);
}

/* Header Actions */
.zg-public-header__actions {
    display: flex;
    align-items: center;
    gap: var(--zg-space-2);
}

.zg-public-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    color: var(--zg-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--zg-radius-full);
    cursor: pointer;
    transition: all var(--zg-transition-fast);
}

.zg-public-action:hover {
    background: var(--zg-bg-overlay);
    color: var(--zg-text-primary);
}

.zg-public-action i {
    font-size: 20px;
}

.zg-public-action__dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--zg-error);
    border: 2px solid var(--zg-bg-surface);
    border-radius: 50%;
}

.zg-public-action--mobile-only {
    display: flex;
}

@media (min-width: 768px) {
    .zg-public-action--mobile-only {
        display: none;
    }
}

/* Profile Dropdown */
.zg-public-profile-link {
    display: none;
    align-items: center;
    gap: var(--zg-space-2);
    padding: var(--zg-space-1) var(--zg-space-2);
    background: transparent;
    border: none;
    border-radius: var(--zg-radius-full);
    cursor: pointer;
    transition: all var(--zg-transition-fast);
}

@media (min-width: 768px) {
    .zg-public-profile-link {
        display: flex;
    }
}

.zg-public-profile-link:hover {
    background: var(--zg-bg-overlay);
}

.zg-public-profile-link__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
}

.zg-public-profile-link__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zg-public-profile-link__label {
    font-size: var(--zg-font-size-sm);
    font-weight: var(--zg-font-weight-medium);
    color: var(--zg-text-primary);
}

.zg-public-profile-link__caret {
    font-size: 18px;
    color: var(--zg-text-tertiary);
}

/* Mobile Drawer */
.zg-public-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--zg-z-modal) - 1);
    opacity: 0;
    transition: opacity var(--zg-transition-base);
    pointer-events: none;
}

.zg-public-drawer-backdrop:not([hidden]) {
    opacity: 1;
    pointer-events: all;
}

.zg-public-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--zg-bg-surface);
    box-shadow: var(--zg-shadow-xl);
    z-index: var(--zg-z-modal);
    transform: translateX(100%);
    transition: transform var(--zg-transition-base);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.zg-public-drawer[aria-hidden="false"] {
    transform: translateX(0);
}

.zg-public-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--zg-space-6) var(--zg-space-4);
    border-bottom: 1px solid var(--zg-border-light);
}

.zg-public-drawer__eyebrow {
    font-size: var(--zg-font-size-xs);
    font-weight: var(--zg-font-weight-semibold);
    color: var(--zg-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--zg-space-1);
}

.zg-public-drawer__title {
    font-size: var(--zg-font-size-xl);
    font-weight: var(--zg-font-weight-bold);
    margin: 0;
}

.zg-public-drawer__search {
    position: relative;
    padding: var(--zg-space-4);
    border-bottom: 1px solid var(--zg-border-light);
}

.zg-public-drawer__search i {
    position: absolute;
    left: var(--zg-space-6);
    top: 50%;
    transform: translateY(-50%);
    color: var(--zg-text-tertiary);
    font-size: 18px;
}

.zg-public-drawer__search input {
    width: 100%;
    height: 44px;
    padding: 0 var(--zg-space-4) 0 var(--zg-space-10);
    font-family: var(--zg-font-family);
    font-size: var(--zg-font-size-base);
    color: var(--zg-text-primary);
    background: var(--zg-bg-overlay);
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius-md);
    transition: all var(--zg-transition-fast);
}

.zg-public-drawer__search input:focus {
    outline: none;
    border-color: var(--zg-primary);
    box-shadow: 0 0 0 3px var(--zg-primary-alpha);
}

.zg-public-drawer__nav {
    flex: 1;
    padding: var(--zg-space-2) 0;
    overflow-y: auto;
}

.zg-public-drawer__link {
    display: flex;
    align-items: center;
    gap: var(--zg-space-3);
    padding: var(--zg-space-3) var(--zg-space-4);
    font-size: var(--zg-font-size-base);
    font-weight: var(--zg-font-weight-medium);
    color: var(--zg-text-primary);
    text-decoration: none;
    transition: background var(--zg-transition-fast);
}

.zg-public-drawer__link:hover {
    background: var(--zg-bg-overlay);
}

.zg-public-drawer__link i {
    width: 24px;
    font-size: 20px;
    color: var(--zg-text-secondary);
}

.zg-public-drawer__footer {
    padding: var(--zg-space-4);
    border-top: 1px solid var(--zg-border-light);
}

.zg-public-drawer__utility {
    display: flex;
    align-items: center;
    gap: var(--zg-space-3);
    width: 100%;
    padding: var(--zg-space-3) var(--zg-space-2);
    font-size: var(--zg-font-size-base);
    font-weight: var(--zg-font-weight-medium);
    color: var(--zg-text-primary);
    background: transparent;
    border: none;
    border-radius: var(--zg-radius-md);
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: background var(--zg-transition-fast);
}

.zg-public-drawer__utility:hover {
    background: var(--zg-bg-overlay);
}

.zg-public-drawer__utility i {
    width: 24px;
    font-size: 20px;
    color: var(--zg-text-secondary);
}

/* Bottom Navigation (Mobile) */
.zg-public-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: var(--zg-bottom-nav-height);
    background: var(--zg-bg-surface);
    border-top: 1px solid var(--zg-border-light);
    z-index: var(--zg-z-fixed);
    padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 768px) {
    .zg-public-bottom-nav {
        display: none;
    }
}

.zg-public-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--zg-space-2);
    color: var(--zg-text-secondary);
    text-decoration: none;
    font-size: 10px;
    font-weight: var(--zg-font-weight-medium);
    transition: color var(--zg-transition-fast);
}

.zg-public-bottom-nav__item i {
    font-size: 24px;
}

.zg-public-bottom-nav__item:hover,
.zg-public-bottom-nav__item.is-active {
    color: var(--zg-primary);
}

body.has-bottom-nav {
    padding-bottom: var(--zg-bottom-nav-height);
}

/* Skip to content link */
.zg-sr-only-focusable {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.zg-sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: var(--zg-space-2) var(--zg-space-4);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   PUBLIC FOOTER
   ============================================ */

.zg-public-footer {
    background: var(--zg-bg-surface);
    border-top: 1px solid var(--zg-border-light);
    padding: var(--zg-space-12) 0 var(--zg-space-6);
    margin-top: var(--zg-space-16);
}

.zg-public-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zg-space-8);
    max-width: var(--zg-container-max);
    margin: 0 auto;
    padding: 0 var(--zg-space-4);
}

@media (min-width: 640px) {
    .zg-public-footer__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .zg-public-footer__inner {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: var(--zg-space-12);
    }
}

.zg-public-footer__brand {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .zg-public-footer__brand {
        grid-column: span 1;
    }
}

.zg-public-footer__logo {
    display: flex;
    align-items: center;
    gap: var(--zg-space-3);
    margin-bottom: var(--zg-space-4);
    text-decoration: none;
}

.zg-public-footer__logo img {
    width: 40px;
    height: 40px;
    border-radius: var(--zg-radius-md);
}

.zg-public-footer__logo strong {
    display: block;
    font-size: var(--zg-font-size-lg);
    font-weight: var(--zg-font-weight-bold);
    color: var(--zg-text-primary);
}

.zg-public-footer__logo span {
    display: block;
    font-size: var(--zg-font-size-sm);
    color: var(--zg-text-secondary);
}

.zg-public-footer__copy {
    font-size: var(--zg-font-size-sm);
    color: var(--zg-text-secondary);
    line-height: var(--zg-line-height-relaxed);
    margin-bottom: var(--zg-space-4);
}

.zg-public-footer__social {
    display: flex;
    gap: var(--zg-space-2);
}

.zg-public-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--zg-text-secondary);
    background: var(--zg-bg-overlay);
    border-radius: var(--zg-radius-full);
    transition: all var(--zg-transition-fast);
}

.zg-public-footer__social a:hover {
    color: var(--zg-primary);
    background: var(--zg-primary-alpha);
    transform: translateY(-2px);
}

.zg-public-footer__social i {
    font-size: 20px;
}

.zg-public-footer__column {
    display: flex;
    flex-direction: column;
    gap: var(--zg-space-2);
}

.zg-public-footer__column h2 {
    font-size: var(--zg-font-size-sm);
    font-weight: var(--zg-font-weight-semibold);
    color: var(--zg-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--zg-space-2);
}

.zg-public-footer__column a {
    font-size: var(--zg-font-size-sm);
    color: var(--zg-text-secondary);
    text-decoration: none;
    transition: color var(--zg-transition-fast);
}

.zg-public-footer__column a:hover {
    color: var(--zg-primary);
}

.zg-public-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zg-space-4);
    max-width: var(--zg-container-max);
    margin: var(--zg-space-8) auto 0;
    padding: var(--zg-space-6) var(--zg-space-4) 0;
    border-top: 1px solid var(--zg-border-light);
}

@media (min-width: 768px) {
    .zg-public-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.zg-public-footer__bottom p {
    margin: 0;
    font-size: var(--zg-font-size-sm);
    color: var(--zg-text-secondary);
}

.zg-public-footer__meta {
    display: flex;
    align-items: center;
    gap: var(--zg-space-4);
}

.zg-public-footer__meta a {
    font-size: var(--zg-font-size-sm);
    color: var(--zg-text-secondary);
    text-decoration: none;
    transition: color var(--zg-transition-fast);
}

.zg-public-footer__meta a:hover {
    color: var(--zg-primary);
}

.zg-public-footer__theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--zg-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--zg-radius-full);
    cursor: pointer;
    transition: all var(--zg-transition-fast);
}

.zg-public-footer__theme-toggle:hover {
    background: var(--zg-bg-overlay);
    color: var(--zg-text-primary);
}

.zg-public-footer__theme-toggle i {
    font-size: 18px;
}

/* Back to Top Button */
.zg-public-back-to-top {
    position: fixed;
    bottom: calc(var(--zg-space-4) + var(--zg-bottom-nav-height));
    right: var(--zg-space-4);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zg-primary);
    color: var(--zg-text-inverse);
    border: none;
    border-radius: var(--zg-radius-full);
    box-shadow: var(--zg-shadow-lg);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all var(--zg-transition-base);
    z-index: var(--zg-z-sticky);
}

@media (min-width: 768px) {
    .zg-public-back-to-top {
        bottom: var(--zg-space-4);
    }
}

.zg-public-back-to-top.is-visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.zg-public-back-to-top:hover {
    background: var(--zg-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--zg-shadow-xl);
}

.zg-public-back-to-top i {
    font-size: 24px;
}

/* Auth Modal (Sign In) */
.zg-auth-modal .modal-content {
    border-radius: var(--zg-radius-xl);
}

.zg-auth-modal__form .form-control {
    height: 44px;
    border-radius: var(--zg-radius-md);
}

.zg-w-full {
    width: 100%;
}

/* ========================================================================
   SEARCH PAGE
   ======================================================================== */

/* Search Form Card */
.zg-public-search-form-card {
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border-light);
    border-radius: var(--zg-radius-xl);
    padding: var(--zg-space-6);
    margin-bottom: var(--zg-space-6);
}

.zg-public-search-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zg-space-3);
    align-items: center;
}

@media (min-width: 640px) {
    .zg-public-search-form__row {
        grid-template-columns: 1fr auto auto;
    }
}

.zg-public-search-form__field {
    position: relative;
    display: flex;
    align-items: center;
}

.zg-public-search-form__field i {
    position: absolute;
    left: var(--zg-space-4);
    color: var(--zg-text-muted);
    pointer-events: none;
    font-size: 1.125rem;
}

.zg-public-search-form__field .form-control {
    width: 100%;
    height: 48px;
    padding-left: var(--zg-space-10);
    padding-right: var(--zg-space-4);
    border: 2px solid var(--zg-border);
    border-radius: var(--zg-radius-full);
    background: var(--zg-bg-overlay);
    font-size: 1rem;
    transition: all var(--zg-transition-fast);
}

.zg-public-search-form__field .form-control:focus {
    outline: none;
    border-color: var(--zg-primary);
    background: var(--zg-bg-surface);
    box-shadow: 0 0 0 4px var(--zg-primary-alpha);
}

.zg-public-search-form .form-select {
    min-width: 140px;
    height: 48px;
    padding: 0 var(--zg-space-8) 0 var(--zg-space-4);
    border: 2px solid var(--zg-border);
    border-radius: var(--zg-radius-full);
    background: var(--zg-bg-overlay);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all var(--zg-transition-fast);
    cursor: pointer;
}

.zg-public-search-form .form-select:focus {
    outline: none;
    border-color: var(--zg-primary);
    background: var(--zg-bg-surface);
    box-shadow: 0 0 0 4px var(--zg-primary-alpha);
}

.zg-public-search-form .btn {
    height: 48px;
    padding: 0 var(--zg-space-6);
    border-radius: var(--zg-radius-full);
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-2);
}

/* Search Summary */
.zg-public-search-summary {
    margin-bottom: var(--zg-space-6);
    padding-bottom: var(--zg-space-4);
    border-bottom: 1px solid var(--zg-border-light);
}

.zg-public-search-summary h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--zg-text);
    margin: 0;
}

.zg-public-search-summary p {
    font-size: 0.9375rem;
    color: var(--zg-text-muted);
    margin: var(--zg-space-2) 0 0;
}

/* Search Results Grid */
.zg-public-search-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zg-space-5);
}

@media (min-width: 640px) {
    .zg-public-search-results {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .zg-public-search-results {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Filter Chips */
.zg-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-2);
    height: 40px;
    padding: 0 var(--zg-space-4);
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--zg-text);
    text-decoration: none;
    transition: all var(--zg-transition-fast);
}

.zg-filter-chip:hover {
    background: var(--zg-bg-overlay);
    border-color: var(--zg-primary);
    color: var(--zg-primary);
    text-decoration: none;
}

.zg-filter-chip.is-active {
    background: var(--zg-primary);
    border-color: var(--zg-primary);
    color: white;
}

.zg-filter-chip.is-active:hover {
    background: var(--zg-primary-hover);
    border-color: var(--zg-primary-hover);
    color: white;
}

/* Item Cards - Enhanced for search results */
.zg-public-card {
    display: flex;
    flex-direction: column;
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border-light);
    border-radius: var(--zg-radius-xl);
    overflow: hidden;
    transition: all var(--zg-transition-base);
    height: 100%;
}

.zg-public-card:hover {
    border-color: var(--zg-border);
    box-shadow: var(--zg-shadow-lg);
    transform: translateY(-2px);
}

.zg-public-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--zg-bg-overlay);
    overflow: hidden;
}

.zg-public-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--zg-transition-base);
}

.zg-public-card:hover .zg-public-card__media img {
    transform: scale(1.05);
}

.zg-public-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--zg-space-4);
}

.zg-public-card__badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zg-space-2);
    margin-bottom: var(--zg-space-3);
}

.zg-public-card__badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--zg-space-3);
    background: var(--zg-primary-light);
    color: var(--zg-primary);
    border-radius: var(--zg-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.zg-public-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 var(--zg-space-3);
}

.zg-public-card__title a {
    color: var(--zg-text);
    text-decoration: none;
    transition: color var(--zg-transition-fast);
}

.zg-public-card__title a:hover {
    color: var(--zg-primary);
}

.zg-public-card__text {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--zg-text-muted);
    margin: 0 0 var(--zg-space-4);
}

.zg-public-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zg-space-3);
    padding-top: var(--zg-space-3);
    border-top: 1px solid var(--zg-border-light);
}

.zg-public-card__meta {
    font-size: 0.8125rem;
    color: var(--zg-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-1);
}

.zg-public-card__link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--zg-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-1);
    transition: gap var(--zg-transition-fast);
}

.zg-public-card__link:hover {
    color: var(--zg-primary-hover);
    gap: var(--zg-space-2);
}

/* List variant for cards */
.zg-public-card--list {
    flex-direction: row;
}

.zg-public-card--list .zg-public-card__media {
    width: 200px;
    flex-shrink: 0;
    aspect-ratio: 1;
}

@media (max-width: 639px) {
    .zg-public-card--list {
        flex-direction: column;
    }

    .zg-public-card--list .zg-public-card__media {
        width: 100%;
        aspect-ratio: 16 / 10;
    }
}

/* Empty State */
.zg-public-empty-state {
    text-align: center;
    padding: var(--zg-space-12) var(--zg-space-4);
}

.zg-public-empty-state__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--zg-space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zg-bg-overlay);
    border-radius: var(--zg-radius-2xl);
}

.zg-public-empty-state__icon i {
    font-size: 2.5rem;
    color: var(--zg-text-muted);
}

.zg-public-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--zg-text);
    margin: 0 0 var(--zg-space-2);
}

.zg-public-empty-state p {
    font-size: 0.9375rem;
    color: var(--zg-text-muted);
    max-width: 480px;
    margin: 0 auto;
}

/* Section Header */
.zg-public-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--zg-space-4);
    margin-bottom: var(--zg-space-6);
}

.zg-public-section-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--zg-text);
    margin: 0;
}

.zg-public-section-header__text {
    font-size: 0.9375rem;
    color: var(--zg-text-muted);
    margin: var(--zg-space-2) 0 0;
}

@media (max-width: 767px) {
    .zg-public-section-header {
        flex-direction: column;
    }
}

/* Toolbar for chips and filters */
.zg-public-search-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zg-space-2);
    margin-bottom: var(--zg-space-6);
}

/* Page Hero Section */
.zg-page-hero {
    text-align: center;
    padding: var(--zg-space-8) var(--zg-space-4) var(--zg-space-6);
}

.zg-page-hero__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--zg-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--zg-space-2);
}

.zg-page-hero__title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--zg-text);
    line-height: 1.2;
    margin: 0 0 var(--zg-space-3);
}

.zg-page-hero__text {
    font-size: 1.125rem;
    color: var(--zg-text-muted);
    max-width: 640px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .zg-page-hero__title {
        font-size: 2rem;
    }

    .zg-page-hero__text {
        font-size: 1rem;
    }
}

/* Section Surface */
.zg-section-surface {
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border-light);
    border-radius: var(--zg-radius-xl);
    padding: var(--zg-space-6);
    margin-bottom: var(--zg-space-6);
}

/* Page Shell */
.zg-page-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--zg-space-6) var(--zg-space-4);
}

.zg-page-shell--wide {
    max-width: 1440px;
}

/* Pagination */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--zg-space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-item {
    display: block;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--zg-space-3);
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius-md);
    color: var(--zg-text);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--zg-transition-fast);
}

.page-link:hover {
    background: var(--zg-bg-overlay);
    border-color: var(--zg-primary);
    color: var(--zg-primary);
}

.page-item.active .page-link {
    background: var(--zg-primary);
    border-color: var(--zg-primary);
    color: white;
}

.page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 767px) {
    .pagination {
        gap: var(--zg-space-1);
    }

    .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 var(--zg-space-2);
        font-size: 0.875rem;
    }
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zg-space-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--zg-space-4);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--zg-text-muted);
}

.breadcrumb-item+.breadcrumb-item::before {
    content: '/';
    margin-right: var(--zg-space-2);
    color: var(--zg-text-muted);
}

.breadcrumb-item a {
    color: var(--zg-primary);
    text-decoration: none;
    transition: color var(--zg-transition-fast);
}

.breadcrumb-item a:hover {
    color: var(--zg-primary-hover);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--zg-text);
}

/* Dark Mode - Search Page */
@media (prefers-color-scheme: dark) {
    .zg-public-search-form-card {
        background: var(--zg-bg-surface);
        border-color: var(--zg-border);
    }

    .zg-public-card {
        background: var(--zg-bg-surface);
        border-color: var(--zg-border);
    }

    .zg-public-card:hover {
        border-color: var(--zg-primary);
    }
}

/* ========================================================================
   DISCOVERY / LISTING PAGES (Places, Persons, Events)
   ======================================================================== */

/* View Toggle (Grid/Map) */
.zg-discovery-view-toggle {
    display: inline-flex;
    gap: var(--zg-space-2);
    padding: 4px;
    background: var(--zg-bg-overlay);
    border-radius: var(--zg-radius-full);
}

/* Pills (Filter buttons) */
.zg-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-2);
    height: 40px;
    padding: 0 var(--zg-space-4);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--zg-radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--zg-text);
    text-decoration: none;
    transition: all var(--zg-transition-fast);
    cursor: pointer;
}

.zg-pill:hover {
    background: var(--zg-bg-surface);
    color: var(--zg-text);
    text-decoration: none;
}

.zg-pill-active,
.zg-pill.zg-pill-active {
    background: var(--zg-primary);
    border-color: var(--zg-primary);
    color: white;
}

.zg-pill-active:hover,
.zg-pill.zg-pill-active:hover {
    background: var(--zg-primary-hover);
    border-color: var(--zg-primary-hover);
    color: white;
}

.zg-pill i {
    font-size: 1rem;
}

/* Discovery Toolbar */
.zg-discovery-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zg-space-4);
    margin-bottom: var(--zg-space-6);
    padding-bottom: var(--zg-space-4);
    border-bottom: 1px solid var(--zg-border-light);
}

.zg-discovery-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zg-space-2);
}

.zg-discovery-stats {
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-2);
    font-size: 0.875rem;
    color: var(--zg-text-muted);
    white-space: nowrap;
}

.zg-discovery-stats i {
    font-size: 1rem;
    color: var(--zg-primary);
}

.zg-discovery-stats strong {
    color: var(--zg-text);
    font-weight: 600;
}

@media (max-width: 767px) {
    .zg-discovery-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .zg-discovery-stats {
        width: 100%;
    }
}

/* Geo Discovery Map */
.zg-geo-discovery-map {
    margin: var(--zg-space-6) 0;
}

.zg-geo-discovery-map__canvas {
    width: 100%;
    height: 600px;
    background: var(--zg-bg-overlay);
    border: 1px solid var(--zg-border-light);
    border-radius: var(--zg-radius-xl);
    overflow: hidden;
}

@media (max-width: 767px) {
    .zg-geo-discovery-map__canvas {
        height: 450px;
    }
}

.zg-geo-discovery-note {
    margin-top: var(--zg-space-3);
    font-size: 0.875rem;
    color: var(--zg-text-muted);
    text-align: center;
}

/* Map Popup (Leaflet override) */
.zg-geo-discovery-popup {
    min-width: 200px;
}

.zg-geo-discovery-popup h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--zg-text);
    margin: 0 0 var(--zg-space-2);
}

.zg-geo-discovery-popup p {
    font-size: 0.875rem;
    color: var(--zg-text-muted);
    margin: 0 0 var(--zg-space-3);
}

.zg-geo-discovery-popup a {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--zg-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-1);
}

.zg-geo-discovery-popup a:hover {
    color: var(--zg-primary-hover);
    text-decoration: underline;
}

/* Leaflet Map Overrides */
.leaflet-container {
    font-family: var(--zg-font-sans);
}

.leaflet-popup-content-wrapper {
    border-radius: var(--zg-radius-lg);
    box-shadow: var(--zg-shadow-xl);
}

.leaflet-popup-tip {
    box-shadow: var(--zg-shadow-lg);
}

/* Dark Mode - Discovery Pages */
@media (prefers-color-scheme: dark) {
    .zg-discovery-view-toggle {
        background: var(--zg-bg-surface);
    }

    .zg-geo-discovery-map__canvas {
        background: var(--zg-bg-surface);
        border-color: var(--zg-border);
    }
}

/* ========================================================================
   EVENT CARDS (Events Calendar Page)
   ======================================================================== */

/* Events Grid */
.zg-events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zg-space-4);
}

@media (min-width: 640px) {
    .zg-events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .zg-events-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Event Card */
.zg-event-card {
    display: flex;
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border-light);
    border-radius: var(--zg-radius-xl);
    overflow: hidden;
    transition: all var(--zg-transition-base);
}

.zg-event-card:hover {
    border-color: var(--zg-border);
    box-shadow: var(--zg-shadow-lg);
    transform: translateY(-2px);
}

.zg-event-card__link {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.zg-event-card__link:hover {
    text-decoration: none;
    color: inherit;
}

/* Event Date Badge */
.zg-event-card__date {
    flex-shrink: 0;
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--zg-primary) 0%, var(--zg-primary-hover) 100%);
    color: white;
    padding: var(--zg-space-3);
    text-align: center;
}

.zg-event-card__day {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--zg-space-1);
}

.zg-event-card__month {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.95;
}

.zg-event-card__year {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: var(--zg-space-1);
    opacity: 0.85;
}

/* Event Card Body */
.zg-event-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--zg-space-4);
}

.zg-event-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--zg-text);
    margin: 0 0 var(--zg-space-2);
    transition: color var(--zg-transition-fast);
}

.zg-event-card:hover .zg-event-card__title {
    color: var(--zg-primary);
}

.zg-event-card__text {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--zg-text-muted);
    margin: 0 0 var(--zg-space-3);
}

.zg-event-card__footer {
    display: flex;
    align-items: center;
    gap: var(--zg-space-4);
    padding-top: var(--zg-space-3);
    border-top: 1px solid var(--zg-border-light);
}

.zg-event-card__meta {
    font-size: 0.8125rem;
    color: var(--zg-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-1);
}

.zg-event-card__meta i {
    font-size: 1rem;
}

/* Responsive Layout */
@media (max-width: 639px) {
    .zg-event-card {
        flex-direction: column;
    }

    .zg-event-card__date {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--zg-space-3);
        padding: var(--zg-space-3) var(--zg-space-4);
    }

    .zg-event-card__day {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

    .zg-event-card__month {
        font-size: 0.875rem;
    }

    .zg-event-card__year {
        margin-top: 0;
        margin-left: auto;
    }
}

/* Dark Mode - Event Cards */
@media (prefers-color-scheme: dark) {
    .zg-event-card {
        background: var(--zg-bg-surface);
        border-color: var(--zg-border);
    }

    .zg-event-card:hover {
        border-color: var(--zg-primary);
    }

    .zg-event-card__date {
        background: linear-gradient(135deg, var(--zg-primary) 0%, var(--zg-primary-hover) 100%);
    }
}

/* ========================================================================
   BUTTONS & FORMS (Bootstrap-compatible classes)
   ======================================================================== */

/* Primary Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zg-space-2);
    height: 40px;
    padding: 0 var(--zg-space-4);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--zg-radius-full);
    cursor: pointer;
    transition: all var(--zg-transition-fast);
    user-select: none;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--zg-primary-alpha);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--zg-primary);
    border-color: var(--zg-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--zg-primary-hover);
    border-color: var(--zg-primary-hover);
    color: white;
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--zg-primary);
    color: var(--zg-primary);
}

.btn-outline-primary:hover {
    background: var(--zg-primary);
    border-color: var(--zg-primary);
    color: white;
}

.btn-secondary {
    background: var(--zg-bg-overlay);
    border-color: var(--zg-border);
    color: var(--zg-text);
}

.btn-secondary:hover {
    background: var(--zg-bg-surface);
    border-color: var(--zg-border);
    color: var(--zg-text);
}

/* Form Controls */
.form-control {
    width: 100%;
    height: 40px;
    padding: 0 var(--zg-space-4);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--zg-text);
    background: var(--zg-bg-surface);
    border: 2px solid var(--zg-border);
    border-radius: var(--zg-radius-full);
    transition: all var(--zg-transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--zg-primary);
    box-shadow: 0 0 0 4px var(--zg-primary-alpha);
}

.form-control::placeholder {
    color: var(--zg-text-muted);
    opacity: 0.6;
}

.form-select {
    width: auto;
    height: 40px;
    padding: 0 var(--zg-space-8) 0 var(--zg-space-4);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--zg-text);
    background: var(--zg-bg-surface);
    border: 2px solid var(--zg-border);
    border-radius: var(--zg-radius-full);
    cursor: pointer;
    transition: all var(--zg-transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--zg-space-3) center;
    background-size: 12px;
}

.form-select:focus {
    outline: none;
    border-color: var(--zg-primary);
    box-shadow: 0 0 0 4px var(--zg-primary-alpha);
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

/* Spacing Utilities */
.p-3 {
    padding: var(--zg-space-4);
}

.p-md-4 {
    padding: var(--zg-space-4);
}

@media (min-width: 768px) {
    .p-md-4 {
        padding: var(--zg-space-6);
    }
}

.py-3 {
    padding-top: var(--zg-space-4);
    padding-bottom: var(--zg-space-4);
}

.py-4 {
    padding-top: var(--zg-space-6);
    padding-bottom: var(--zg-space-6);
}

.mt-3 {
    margin-top: var(--zg-space-4);
}

.mt-4 {
    margin-top: var(--zg-space-6);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--zg-space-2);
}

.mb-2 {
    margin-bottom: var(--zg-space-3);
}

.mb-3 {
    margin-bottom: var(--zg-space-4);
}

.mb-4 {
    margin-bottom: var(--zg-space-6);
}

.me-2 {
    margin-right: var(--zg-space-2);
}

/* Text Utilities */
.text-muted {
    color: var(--zg-text-muted);
}

.text-center {
    text-align: center;
}

.text-uppercase {
    text-transform: uppercase;
}

.fw-bold {
    font-weight: 700;
}

.fw-semibold {
    font-weight: 600;
}

/* Display Utilities */
.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--zg-space-2);
}

.gap-3 {
    gap: var(--zg-space-3);
}

.gap-4 {
    gap: var(--zg-space-4);
}

/* List Utilities */
.list-clean {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Container */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--zg-space-4);
    padding-right: var(--zg-space-4);
}

/* Background */
.bg-body-tertiary {
    background: var(--zg-bg-overlay);
}

/* Hide on mobile */
.zg-hide-mobile {
    display: inline;
}

@media (max-width: 639px) {
    .zg-hide-mobile {
        display: none;
    }
}

/* Dark Mode - Utilities */
@media (prefers-color-scheme: dark) {
    .bg-body-tertiary {
        background: var(--zg-bg-surface);
    }
}

/* ========================================================================
   ADDITIONAL COMPONENTS (Nearby, Blog, etc.)
   ======================================================================== */

/* Nearby Page Styles */
.zg-nearby-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--zg-space-6) var(--zg-space-4);
}

.zg-nearby-actions {
    display: flex;
    flex-direction: column;
    gap: var(--zg-space-4);
    max-width: 600px;
    margin: 0 auto;
}

.zg-nearby-stack>*+* {
    margin-top: var(--zg-space-4);
}

.btn-success {
    background: #059669;
    border-color: #059669;
    color: white;
}

.btn-success:hover {
    background: #047857;
    border-color: #047857;
    color: white;
}

.btn-outline-success {
    background: transparent;
    border-color: #059669;
    color: #059669;
}

.btn-outline-success:hover {
    background: #059669;
    border-color: #059669;
    color: white;
}

.btn-lg {
    height: 48px;
    padding: 0 var(--zg-space-6);
    font-size: 1rem;
}

/* Input Groups */
.input-group {
    display: flex;
    gap: var(--zg-space-2);
}

.input-group-lg .form-control {
    height: 48px;
    font-size: 1rem;
}

.input-group-lg .btn {
    height: 48px;
}

/* Grid System */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--zg-space-3) * -0.5);
}

.row.g-3>* {
    padding: 0 calc(var(--zg-space-3) * 0.5);
    margin-bottom: var(--zg-space-3);
}

.col-md-4 {
    width: 100%;
}

@media (min-width: 768px) {
    .col-md-4 {
        width: 33.333333%;
    }
}

/* Card Component */
.card {
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border-light);
    border-radius: var(--zg-radius-lg);
    overflow: hidden;
}

.card.border-0 {
    border: none;
}

.card.h-100 {
    height: 100%;
}

.card-body {
    padding: var(--zg-space-4);
}

/* Alerts */
.alert {
    padding: var(--zg-space-4);
    border: 1px solid transparent;
    border-radius: var(--zg-radius-lg);
    margin-bottom: var(--zg-space-4);
}

.alert-danger {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #991B1B;
}

/* Spinner */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border.text-success {
    color: #059669;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* Small Text */
small {
    font-size: 0.875rem;
}

.d-block {
    display: block;
}

/* Height Utilities */
.h-100 {
    height: 100%;
}

/* Dark Mode - Additional Components */
@media (prefers-color-scheme: dark) {
    .card {
        background: var(--zg-bg-surface);
        border-color: var(--zg-border);
    }

    .alert-danger {
        background: rgba(220, 38, 38, 0.1);
        border-color: rgba(220, 38, 38, 0.3);
        color: #FCA5A5;
    }
}

/* ========================================================================
   MOBILE RESPONSIVENESS FIXES
   ======================================================================== */

/* Homepage Stats - Mobile Fix */
.zg-home-stats {
    background: var(--zg-bg-overlay);
    padding: var(--zg-space-6) var(--zg-space-4);
    margin-bottom: var(--zg-space-6);
}

.zg-home-stats-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.zg-home-stats-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--zg-space-4);
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .zg-home-stats-grid {
        gap: var(--zg-space-8);
        flex-wrap: nowrap;
    }
}

.zg-home-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zg-space-2);
    min-width: 80px;
}

.zg-home-stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--zg-primary);
    line-height: 1;
}

@media (min-width: 640px) {
    .zg-home-stat-number {
        font-size: 2.5rem;
    }
}

.zg-home-stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--zg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zg-home-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--zg-border);
    display: none;
}

@media (min-width: 640px) {
    .zg-home-stat-divider {
        display: block;
    }
}

/* Footer Columns - Mobile Fix */
.zg-public-footer__column {
    display: flex;
    flex-direction: column;
    gap: var(--zg-space-2);
}

.zg-public-footer__column h2 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--zg-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--zg-space-2);
}

.zg-public-footer__column a {
    font-size: 0.9375rem;
    color: var(--zg-text-muted);
    text-decoration: none;
    transition: color var(--zg-transition-fast);
    padding: var(--zg-space-1) 0;
}

.zg-public-footer__column a:hover {
    color: var(--zg-primary);
}

/* Mobile: Stack footer columns vertically */
@media (max-width: 767px) {
    .zg-public-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--zg-space-6);
    }

    .zg-public-footer__column {
        padding: 0;
    }

    .zg-public-footer__brand {
        padding-bottom: var(--zg-space-4);
        border-bottom: 1px solid var(--zg-border-light);
    }
}

/* ========================================================================
   COOKIE CONSENT
   ======================================================================== */

.zg-cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--zg-z-sticky);
    background: var(--zg-bg-surface);
    border-top: 1px solid var(--zg-border-light);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    padding: var(--zg-space-4);
    animation: slideUp 0.3s ease-out;
}

.zg-cookie-consent[hidden] {
    display: none !important;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.zg-cookie-content {
    display: flex;
    align-items: flex-start;
    gap: var(--zg-space-3);
    margin-bottom: var(--zg-space-4);
}

.zg-cookie-icon {
    font-size: 1.5rem;
    color: var(--zg-primary);
    flex-shrink: 0;
    margin-top: var(--zg-space-1);
}

.zg-cookie-text {
    flex: 1;
}

.zg-cookie-text h6 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--zg-text);
    margin: 0 0 var(--zg-space-1);
}

.zg-cookie-text p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--zg-text-muted);
    margin: 0;
}

.zg-cookie-text a {
    color: var(--zg-primary);
    text-decoration: underline;
    font-weight: 500;
}

.zg-cookie-text a:hover {
    color: var(--zg-primary-hover);
}

.zg-cookie-actions {
    display: flex;
    gap: var(--zg-space-2);
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Cookie Consent Buttons */
.zg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zg-space-2);
    height: 40px;
    padding: 0 var(--zg-space-4);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border: 2px solid transparent;
    border-radius: var(--zg-radius-full);
    cursor: pointer;
    transition: all var(--zg-transition-fast);
    user-select: none;
}

.zg-btn-sm {
    height: 36px;
    padding: 0 var(--zg-space-4);
    font-size: 0.875rem;
}

.zg-btn-primary {
    background: var(--zg-primary);
    border-color: var(--zg-primary);
    color: white;
}

.zg-btn-primary:hover {
    background: var(--zg-primary-hover);
    border-color: var(--zg-primary-hover);
}

.zg-btn-ghost {
    background: transparent;
    border-color: var(--zg-border);
    color: var(--zg-text);
}

.zg-btn-ghost:hover {
    background: var(--zg-bg-overlay);
    border-color: var(--zg-border);
}

/* Desktop: Make cookie consent more compact */
@media (min-width: 768px) {
    .zg-cookie-consent {
        padding: var(--zg-space-5) var(--zg-space-6);
    }

    .zg-cookie-consent>div {
        max-width: 1280px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--zg-space-6);
    }

    .zg-cookie-content {
        margin-bottom: 0;
        flex: 1;
    }

    .zg-cookie-actions {
        flex-shrink: 0;
    }
}

/* Mobile: Stack cookie consent vertically */
@media (max-width: 767px) {
    .zg-cookie-consent {
        left: var(--zg-space-3);
        right: var(--zg-space-3);
        bottom: calc(env(safe-area-inset-bottom) + var(--zg-space-3));
        border: 1px solid var(--zg-border-light);
        border-radius: var(--zg-radius-xl);
        box-shadow: var(--zg-shadow-xl);
        padding: var(--zg-space-4);
    }

    body.has-bottom-nav .zg-cookie-consent {
        bottom: calc(var(--zg-bottom-nav-height) + env(safe-area-inset-bottom) + var(--zg-space-3));
    }

    .zg-cookie-content {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--zg-space-2);
        margin-bottom: var(--zg-space-3);
    }

    .zg-cookie-icon {
        margin-top: 0;
        font-size: 1.25rem;
    }

    .zg-cookie-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--zg-space-2);
    }

    .zg-cookie-text h6 {
        font-size: 0.95rem;
    }

    .zg-cookie-text p {
        font-size: 0.8125rem;
        line-height: 1.45;
    }

    .zg-cookie-actions button {
        width: 100%;
        min-width: 0;
        height: 40px;
    }
}

@media (max-width: 479px) {
    .zg-cookie-consent {
        left: var(--zg-space-2);
        right: var(--zg-space-2);
        bottom: calc(env(safe-area-inset-bottom) + var(--zg-space-2));
        padding: var(--zg-space-3);
    }

    body.has-bottom-nav .zg-cookie-consent {
        bottom: calc(var(--zg-bottom-nav-height) + env(safe-area-inset-bottom) + var(--zg-space-2));
    }

    .zg-cookie-content {
        gap: var(--zg-space-2);
    }

    .zg-cookie-actions {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode - Cookie Consent */
@media (prefers-color-scheme: dark) {
    .zg-cookie-consent {
        background: var(--zg-bg-surface);
        border-top-color: var(--zg-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
    }
}

/* ========================================================================
   HOMEPAGE RESPONSIVE IMPROVEMENTS
   ======================================================================== */

/* Home Categories Grid - Better mobile */
.zg-home-categories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zg-space-4);
}

@media (min-width: 640px) {
    .zg-home-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .zg-home-categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Home Quick Links - Better mobile spacing */
.zg-home-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zg-space-2);
    justify-content: center;
    margin-top: var(--zg-space-6);
}

.zg-home-quick-link {
    display: inline-flex;
    align-items: center;
    gap: var(--zg-space-2);
    padding: var(--zg-space-2) var(--zg-space-4);
    background: var(--zg-bg-surface);
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--zg-text);
    text-decoration: none;
    transition: all var(--zg-transition-fast);
}

.zg-home-quick-link:hover {
    background: var(--zg-bg-overlay);
    border-color: var(--zg-primary);
    color: var(--zg-primary);
    text-decoration: none;
    transform: translateY(-2px);
}

.zg-home-quick-link i {
    font-size: 1rem;
}

@media (max-width: 639px) {
    .zg-home-quick-link {
        flex: 1 1 calc(50% - var(--zg-space-1));
        justify-content: center;
        min-width: 120px;
    }
}

/* ========================================================================
   AUTH MODAL - Enhanced Styling
   ======================================================================== */

/* Modal Backdrop */
.zg-auth-modal .modal-dialog {
    max-width: 440px;
}

.zg-auth-modal .modal-content {
    border-radius: var(--zg-radius-xl);
    border: 1px solid var(--zg-border-light);
}

.zg-auth-modal .modal-header {
    padding: var(--zg-space-5) var(--zg-space-6) var(--zg-space-2);
}

.zg-auth-modal .modal-body {
    padding: var(--zg-space-2) var(--zg-space-6) var(--zg-space-6);
}

.zg-auth-modal .modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--zg-text);
}

/* Form Inputs */
.zg-auth-modal__form .form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--zg-text);
    margin-bottom: var(--zg-space-2);
}

.zg-auth-modal__form .form-control {
    height: 44px;
    border-radius: var(--zg-radius-md);
    border: 2px solid var(--zg-border);
    padding: 0 var(--zg-space-4);
    font-size: 0.9375rem;
    transition: all var(--zg-transition-fast);
}

.zg-auth-modal__form .form-control:focus {
    border-color: var(--zg-primary);
    box-shadow: 0 0 0 4px var(--zg-primary-alpha);
    outline: none;
}

/* Checkbox */
.zg-auth-modal__form .form-check {
    padding-left: 1.75rem;
}

.zg-auth-modal__form .form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    border: 2px solid var(--zg-border);
    border-radius: var(--zg-radius-sm);
}

.zg-auth-modal__form .form-check-input:checked {
    background-color: var(--zg-primary);
    border-color: var(--zg-primary);
}

.zg-auth-modal__form .form-check-label {
    font-size: 0.875rem;
    color: var(--zg-text-muted);
}

/* Submit Button - Override all conflicting styles */
.zg-auth-modal__form button[type="submit"],
.zg-auth-modal .zg-btn-primary {
    width: 100% !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--zg-space-2) !important;
    background: var(--zg-primary) !important;
    border: 2px solid var(--zg-primary) !important;
    color: white !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    border-radius: var(--zg-radius-full) !important;
    cursor: pointer !important;
    transition: all var(--zg-transition-fast) !important;
    text-decoration: none !important;
    padding: 0 var(--zg-space-6) !important;
}

.zg-auth-modal__form button[type="submit"]:hover,
.zg-auth-modal .zg-btn-primary:hover {
    background: var(--zg-primary-hover) !important;
    border-color: var(--zg-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.2) !important;
}

.zg-auth-modal__form button[type="submit"]:active,
.zg-auth-modal .zg-btn-primary:active {
    transform: translateY(0) !important;
}

.zg-auth-modal__form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Footer Links */
.zg-auth-modal .modal-body a {
    color: var(--zg-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--zg-transition-fast);
}

.zg-auth-modal .modal-body a:hover {
    color: var(--zg-primary-hover);
    text-decoration: underline;
}

/* Close Button */
.zg-auth-modal .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: none;
    padding: 0.5rem;
    opacity: 0.5;
    transition: opacity var(--zg-transition-fast);
}

.zg-auth-modal .btn-close:hover {
    opacity: 1;
}

/* Margin Bottom utilities */
.mb-3 {
    margin-bottom: var(--zg-space-4);
}

.mt-3 {
    margin-top: var(--zg-space-4);
}

.m-0 {
    margin: 0;
}

/* Display utilities for modal footer */
.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-content-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--zg-space-2);
}

.small {
    font-size: 0.875rem;
}

/* Dark Mode - Auth Modal */
@media (prefers-color-scheme: dark) {
    .zg-auth-modal .modal-content {
        background: var(--zg-bg-surface);
        border-color: var(--zg-border);
    }

    .zg-auth-modal__form .form-control {
        background: var(--zg-bg-overlay);
        border-color: var(--zg-border);
        color: var(--zg-text);
    }

    .zg-auth-modal .btn-close {
        filter: invert(1);
    }
}

/* ========================================================================
   PUBLIC DETAIL VIEWS (CENTRALIZED)
   ======================================================================== */

.opacity-90 {
    opacity: 0.9;
}

.hover-opacity-100:hover {
    opacity: 1 !important;
}

.btn-touch {
    min-width: 44px;
    min-height: 44px;
    border-radius: 14px;
}

.prose {
    line-height: 1.8;
    color: var(--zg-text-primary);
}

.prose>*:last-child {
    margin-bottom: 0;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Shared detail cards */
.sacred-card,
.event-card,
.biography-card,
.person-card,
.page-content,
.blog-body,
.place-card {
    background: #ffffff;
    border: 1px solid rgba(17, 43, 77, 0.1);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(14, 36, 64, 0.08);
}

.sacred-card .infobox,
.event-card .infobox,
.person-card .infobox {
    margin-bottom: 0;
}

/* Place / Relic / Work detail views */
.place-view {
    color: var(--zg-text-primary);
}

.place-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 52%),
        radial-gradient(circle at 80% 18%, rgba(86, 167, 119, 0.18), transparent 50%),
        linear-gradient(140deg, #102f55 0%, #16436f 50%, #1c5f7c 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.place-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.2));
    pointer-events: none;
}

.place-content {
    position: relative;
    z-index: 1;
}

.place-content .lead {
    color: rgba(255, 255, 255, 0.84) !important;
}

.info-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
}

.zg-page--natural-feature-detail .place-hero {
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 239, 198, 0.2), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(190, 154, 91, 0.22), transparent 36%),
        linear-gradient(145deg, #3c2619 0%, #6b4a2d 42%, #92724a 100%);
    border-bottom-color: rgba(248, 228, 196, 0.18);
}

.zg-page--natural-feature-detail .place-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.08), transparent 0 28%),
        repeating-radial-gradient(circle at 24% 32%, rgba(255, 244, 214, 0.16) 0 1px, transparent 1px 16px),
        repeating-radial-gradient(circle at 74% 68%, rgba(82, 49, 24, 0.18) 0 1px, transparent 1px 18px);
    opacity: 0.72;
    pointer-events: none;
}

.zg-page--natural-feature-detail .place-hero::after {
    background: linear-gradient(to bottom, rgba(18, 10, 6, 0.06), rgba(18, 10, 6, 0.34));
}

.zg-page--natural-feature-detail .place-content .lead {
    color: rgba(255, 245, 230, 0.88) !important;
    max-width: 52rem;
}

.zg-page--natural-feature-detail .info-badge {
    background: rgba(62, 36, 18, 0.34);
    border-color: rgba(248, 225, 184, 0.34);
    color: #fff6e1;
}

.natural-feature-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
    margin-top: 1.35rem;
    max-width: 54rem;
}

.natural-feature-summary__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background: rgba(44, 25, 14, 0.26);
    border: 1px solid rgba(250, 227, 192, 0.2);
    box-shadow: 0 16px 28px rgba(28, 16, 8, 0.16);
    backdrop-filter: blur(10px);
}

.natural-feature-summary__icon {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 243, 220, 0.12);
    border: 1px solid rgba(255, 243, 220, 0.18);
    color: #fff1d5;
    font-size: 1.1rem;
}

.natural-feature-summary__label {
    margin: 0;
    color: rgba(255, 241, 213, 0.72);
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.natural-feature-summary__value {
    display: block;
    color: #fffdf8;
    font-size: 1rem;
    line-height: 1.45;
}

.natural-feature-aliases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.natural-feature-alias {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 247, 232, 0.12);
    border: 1px solid rgba(255, 231, 190, 0.22);
    color: #fff4dd;
    font-size: 0.84rem;
    line-height: 1;
}

.natural-feature-snapshot {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 248, 235, 0.96) 0%, rgba(245, 235, 213, 0.98) 54%, rgba(238, 227, 204, 0.98) 100%);
    border-color: rgba(135, 104, 63, 0.16);
    box-shadow: 0 20px 34px rgba(84, 57, 28, 0.08);
}

.natural-feature-snapshot::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 110% 110%, rgba(134, 102, 61, 0.12) 0 1px, transparent 1px 20px),
        linear-gradient(120deg, rgba(255, 255, 255, 0.42), transparent 58%);
    pointer-events: none;
}

.natural-feature-snapshot__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.natural-feature-snapshot__eyebrow {
    color: #7a5730;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.natural-feature-aliases--snapshot {
    margin-top: 0;
}

.zg-page--natural-feature-detail .natural-feature-aliases--snapshot .natural-feature-alias {
    background: rgba(122, 87, 48, 0.08);
    border-color: rgba(122, 87, 48, 0.18);
    color: #6d4a29;
}

.zg-page--natural-feature-detail .sacred-card {
    border-color: rgba(135, 104, 63, 0.14);
    box-shadow: 0 14px 26px rgba(84, 57, 28, 0.06);
}

.zg-page--natural-feature-detail .gallery-item {
    background: #ddd1bd;
    box-shadow: 0 10px 22px rgba(84, 57, 28, 0.14);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 0.85rem;
}

.gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: #e8ecf1;
    box-shadow: 0 8px 18px rgba(12, 31, 56, 0.12);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
}

.gallery-item:focus-visible {
    outline: 3px solid rgba(27, 94, 32, 0.38);
    outline-offset: 2px;
}

.journey-item {
    border: 1px solid var(--zg-border);
    border-radius: 12px;
    background: var(--zg-bg-page);
}

/* Person detail view */
.zg-page--person-detail {
    --person-primary: #1e3a5f;
    --person-surface: #ffffff;
    --person-border: rgba(24, 39, 75, 0.1);
    --person-text-soft: rgba(255, 255, 255, 0.86);
}

.zg-page--person-detail .person-view {
    color: var(--zg-text-primary);
}

.zg-page--person-detail .biography-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.24), transparent 52%),
        radial-gradient(circle at 82% 24%, rgba(95, 158, 239, 0.2), transparent 52%),
        linear-gradient(140deg, #0f2542 0%, #14335a 42%, #1e4f86 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.zg-page--person-detail .biography-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.zg-page--person-detail .biography-hero>.container {
    position: relative;
    z-index: 1;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.zg-page--person-detail .biography-hero .lead {
    color: var(--person-text-soft);
}

.zg-page--person-detail .biography-hero .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.55);
}

.zg-page--person-detail .biography-hero .breadcrumb-item a {
    transition: opacity 160ms ease;
}

.zg-page--person-detail .biography-hero .breadcrumb-item a:hover {
    opacity: 1 !important;
}

.zg-page--person-detail .portrait-frame {
    width: clamp(180px, 28vw, 260px);
    aspect-ratio: 1;
    margin: 0 auto;
    padding: 0.75rem;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zg-page--person-detail .portrait-frame--photo {
    border-color: rgba(255, 255, 255, 0.24);
}

.zg-page--person-detail .portrait-frame--fallback {
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.45), transparent 52%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
}

.zg-page--person-detail .portrait-frame img,
.zg-page--person-detail .portrait-fallback-svg-wrap {
    width: 100%;
    height: 100%;
    border-radius: 22px;
}

.zg-page--person-detail .portrait-frame img {
    display: block;
    background: rgba(255, 255, 255, 0.82);
}

.zg-page--person-detail .portrait-frame--photo img {
    object-fit: cover;
}

.zg-page--person-detail .portrait-frame--fallback img {
    object-fit: contain;
    padding: 0.35rem;
}

.zg-page--person-detail .portrait-fallback-svg-wrap {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.68);
}

.zg-page--person-detail .portrait-fallback-svg-wrap svg {
    max-width: 100%;
    max-height: 100%;
}

.zg-page--person-detail .portrait-empty {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.8), rgba(205, 220, 235, 0.9) 42%, rgba(170, 191, 214, 0.9) 100%);
}

.zg-page--person-detail .biography-card,
.zg-page--person-detail .person-card {
    border: 1px solid var(--person-border);
    border-radius: 20px;
    background: var(--person-surface);
}

.zg-page--person-detail .biography-card {
    padding: 1.25rem;
}

.zg-page--person-detail .bio-content>*:last-child {
    margin-bottom: 0;
}

.zg-page--person-detail .bio-content a {
    color: var(--person-primary);
    text-decoration-thickness: 1px;
}

.zg-page--person-detail .bio-content a:hover {
    color: #15324f;
}

.zg-page--person-detail .grid-center {
    display: block;
}

/* Event detail and date views */
.event-view {
    --event-primary: #1f3c63;
    --event-secondary: #2d7c66;
    color: var(--zg-text-primary);
}

.event-timeline {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.2), transparent 50%),
        radial-gradient(circle at 82% 20%, rgba(125, 205, 173, 0.22), transparent 48%),
        linear-gradient(145deg, #0f294b 0%, #164069 48%, #185774 100%);
    color: #ffffff;
    padding: 2.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.event-timeline::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.16));
    pointer-events: none;
}

.event-timeline .container {
    position: relative;
    z-index: 1;
}

.event-timeline .lead {
    color: rgba(255, 255, 255, 0.86);
}

.timeline-marker {
    border-left: 3px solid rgba(255, 255, 255, 0.35);
    padding-left: 1rem;
}

.event-date-badge {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    padding: 1rem 1.2rem;
    text-align: center;
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.16);
}

.event-date-badge .day {
    display: block;
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1;
}

.event-date-badge .month {
    display: block;
    margin-top: 0.3rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.event-date-badge a {
    color: #ffffff;
}

.countdown-timer {
    border: 1px solid rgba(23, 58, 94, 0.13);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(14, 36, 64, 0.08);
    padding: 1.1rem 1rem;
}

.countdown-number {
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 800;
    color: var(--event-primary);
}

.btn-event {
    background: linear-gradient(135deg, var(--event-primary), #295884);
    border: 1px solid transparent;
    color: #ffffff;
    border-radius: 999px;
    font-weight: 600;
}

.btn-event:hover,
.btn-event:focus {
    background: linear-gradient(135deg, #1a3153, #21496f);
    color: #ffffff;
}

.event-card {
    position: relative;
}

.series-navigation .ordinal-grid .btn {
    border-radius: 10px;
}

.date-filter-view {
    --event-primary: #1f3c63;
    --event-secondary: #2d7c66;
}

.month-hero,
.day-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.22), transparent 52%),
        radial-gradient(circle at 82% 16%, rgba(125, 205, 173, 0.24), transparent 50%),
        linear-gradient(140deg, #102e52 0%, #174673 52%, #1f6083 100%);
    color: #ffffff;
    padding: 3rem 0 2.6rem;
}

.month-hero::after,
.day-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.16));
    pointer-events: none;
}

.month-hero .container,
.day-hero .container {
    position: relative;
    z-index: 1;
}

.month-hero .lead,
.day-hero .lead {
    color: rgba(255, 255, 255, 0.86);
}

.event-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.event-card-grid .event-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 3.4rem !important;
}

.date-badge {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--event-primary), #275880);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Page content detail view */
.page-view {
    color: var(--zg-text-primary);
}

.page-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.22), transparent 50%),
        radial-gradient(circle at 85% 16%, rgba(154, 231, 184, 0.2), transparent 50%),
        linear-gradient(138deg, #0f2d4f 0%, #15436d 52%, #1f5e78 100%);
    color: #ffffff;
    padding: 2.4rem 0;
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero .lead {
    color: rgba(255, 255, 255, 0.88);
}

.breadcrumb-link {
    color: rgba(255, 255, 255, 0.82) !important;
}

.breadcrumb-link:hover {
    color: #ffffff !important;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.2rem;
}

.page-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.36rem 0.75rem;
    border: 1px solid rgba(31, 56, 84, 0.14);
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.82rem;
    color: #4d6177;
}

.page-meta-item i {
    color: #1d6a43;
}

.page-content {
    padding: 1.3rem;
    color: var(--zg-text-primary);
    line-height: 1.8;
}

.page-content>*:last-child {
    margin-bottom: 0;
}

.page-content a {
    color: #1e6e46;
}

.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Blog detail view */
.blog-post {
    color: var(--zg-text-primary);
}

.blog-header {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.22), transparent 52%),
        radial-gradient(circle at 82% 15%, rgba(162, 212, 255, 0.2), transparent 48%),
        linear-gradient(140deg, #102f51 0%, #16456e 52%, #1d5e81 100%);
    color: #ffffff;
    padding: 2.5rem 0 2.2rem;
}

.blog-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.blog-header .container {
    position: relative;
    z-index: 1;
}

.blog-meta {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.95rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92rem;
}

.blog-content {
    max-width: 920px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
    color: #1e6e46;
    font-weight: 600;
}

.updated-notice {
    padding: 0.65rem 0.9rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(31, 56, 84, 0.14);
    border-radius: 12px;
    background: rgba(29, 106, 67, 0.05);
    color: #35506a;
    font-size: 0.9rem;
}

.blog-body {
    padding: 1.4rem;
    line-height: 1.8;
}

.blog-body>*:last-child {
    margin-bottom: 0;
}

.blog-body a {
    color: #1e6e46;
}

/* Guide detail view */
.guide-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.22), transparent 50%),
        radial-gradient(circle at 80% 18%, rgba(148, 226, 180, 0.22), transparent 46%),
        linear-gradient(140deg, #0f2d4f 0%, #174873 55%, #1a5e73 100%);
    color: #ffffff;
    padding: 2.2rem 0;
}

.guide-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.16));
    pointer-events: none;
}

.guide-hero .container {
    position: relative;
    z-index: 1;
}

.guide-hero .guide-avatar:not(img) {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #ffffff;
    font-size: 2rem;
    flex: 0 0 auto;
}

.guide-hero .guide-avatar img,
.guide-hero img.guide-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
}

.place-card {
    display: block;
    padding: 0.95rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.place-card:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: rgba(21, 92, 58, 0.32);
    box-shadow: 0 14px 22px rgba(14, 36, 64, 0.14);
}

@media (max-width: 991.98px) {
    .place-hero {
        padding-top: 0.2rem;
    }

    .natural-feature-snapshot__grid {
        grid-template-columns: 1fr;
    }

    .event-timeline {
        padding: 1.8rem 0;
    }

    .event-date-badge {
        max-width: 220px;
    }

    .zg-page--person-detail .biography-hero>.container {
        padding-top: 1.6rem;
        padding-bottom: 2rem;
    }

    .zg-page--person-detail .portrait-frame {
        width: clamp(160px, 56vw, 220px);
        border-radius: 26px;
    }
}

@media (max-width: 767.98px) {

    .sacred-card,
    .event-card,
    .biography-card,
    .person-card,
    .page-content,
    .blog-body,
    .place-card {
        border-radius: 14px;
    }

    .sacred-card,
    .event-card,
    .page-content,
    .blog-body {
        padding: 1rem;
    }

    .event-card-grid {
        grid-template-columns: 1fr;
    }

    .month-hero,
    .day-hero,
    .page-hero,
    .blog-header,
    .guide-hero {
        padding-top: 1.9rem;
        padding-bottom: 1.8rem;
    }

    .page-meta {
        gap: 0.45rem;
    }

    .page-meta-item {
        font-size: 0.78rem;
    }

    .blog-content {
        padding: 1.4rem 0.75rem 2.2rem;
    }

    .blog-meta {
        gap: 0.7rem;
        font-size: 0.86rem;
    }

    .guide-hero .guide-avatar:not(img) {
        width: 82px;
        height: 82px;
    }

    .zg-page--person-detail .biography-card,
    .zg-page--person-detail .person-card {
        border-radius: 16px;
    }

    .zg-page--person-detail .biography-card {
        padding: 1rem;
    }

    .zg-page--person-detail .biography-hero h1.display-5 {
        font-size: clamp(1.8rem, 7.8vw, 2.25rem);
        margin-bottom: 0.75rem;
    }

    .zg-page--person-detail .biography-hero .lead {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .natural-feature-summary {
        grid-template-columns: 1fr;
    }
}

body.dark-mode .sacred-card,
body.dark-mode .event-card,
body.dark-mode .biography-card,
body.dark-mode .person-card,
body.dark-mode .page-content,
body.dark-mode .blog-body,
body.dark-mode .place-card {
    background: var(--zg-bg-surface);
    border-color: var(--zg-border);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.28);
}

body.dark-mode .page-meta-item,
body.dark-mode .updated-notice,
body.dark-mode .journey-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--zg-border);
    color: var(--zg-text-secondary);
}

body.dark-mode .info-badge,
body.dark-mode .guide-badge {
    border-color: rgba(255, 255, 255, 0.24);
}

body.dark-mode.zg-page--person-detail {
    --person-surface: #121a24;
    --person-border: rgba(133, 166, 205, 0.2);
}

body.dark-mode.zg-page--person-detail .bio-content a {
    color: #9ac4ff;
}
/* ============================================
   FEED SYSTEM — X-STYLE DESIGN
   ============================================ */

/* ── Homepage shell ──────────────────────────────────── */
.zg-home-feed-shell {
    max-width: 680px;
    margin: 0 auto;
    padding-bottom: var(--zg-space-10);
}

/* ── Page header ─────────────────────────────────────── */
.zg-home-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zg-space-4);
    padding: var(--zg-space-5) var(--zg-space-4) var(--zg-space-4);
    border-bottom: 1px solid var(--zg-border-light);
}

.zg-home-feed-header__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.zg-home-feed-header__sub {
    margin: var(--zg-space-1) 0 0;
    font-size: 0.875rem;
    color: var(--zg-text-secondary);
}

.zg-home-feed-header__count {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    padding: var(--zg-space-2) var(--zg-space-3);
    border: 1px solid var(--zg-border-light);
    border-radius: var(--zg-radius-lg);
    background: var(--zg-bg-surface);
    text-align: center;
    flex-shrink: 0;
}

.zg-home-feed-count__num {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--zg-primary);
    line-height: 1.2;
}

.zg-home-feed-count__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--zg-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Sticky tab bar ──────────────────────────────────── */
.zg-home-feed-tabs {
    position: sticky;
    top: var(--zg-header-height);
    z-index: calc(var(--zg-z-sticky) - 1);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--zg-border-light);
}

body.dark-mode .zg-home-feed-tabs {
    background: rgba(18, 18, 18, 0.98);
}

.zg-home-feed-tabbar {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.zg-home-feed-tabbar::-webkit-scrollbar {
    display: none;
}

/* Override pill-style filter chips to look like X tabs */
.zg-home-feed-tabbar .zg-filter-chip {
    flex-shrink: 0;
    height: auto;
    padding: 0.85rem 1.15rem;
    border: none;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--zg-text-secondary);
    transition: color 0.15s, border-bottom-color 0.15s, background 0.1s;
}

.zg-home-feed-tabbar .zg-filter-chip:hover:not(.is-active) {
    color: var(--zg-text-primary);
    background: var(--zg-bg-overlay);
    border-bottom-color: transparent;
}

.zg-home-feed-tabbar .zg-filter-chip.is-active {
    color: var(--zg-text-primary);
    background: transparent;
    border-bottom-color: var(--zg-primary);
    font-weight: 700;
}

/* ── Feed list ───────────────────────────────────────── */
.zg-feed-list {
    display: flex;
    flex-direction: column;
}

/* ── Feed card (base) ────────────────────────────────── */
.zg-feed-card {
    background: var(--zg-bg-surface);
    border-bottom: 1px solid var(--zg-border-light);
    transition: background var(--zg-transition-fast);
}

.zg-feed-card[data-feed-preview="true"] {
    cursor: pointer;
}

.zg-feed-card:hover {
    background: var(--zg-bg-overlay);
}

.zg-feed-card[data-feed-preview="true"]:focus-visible {
    outline: 2px solid var(--zg-primary);
    outline-offset: -2px;
}

.zg-feed-card--detail {
    border-bottom: none;
}

.zg-feed-card--detail:hover {
    background: var(--zg-bg-surface);
}

/* ── Card inner: two-column grid ─────────────────────── */
.zg-feed-card__inner {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
}

.zg-feed-card--detail .zg-feed-card__inner {
    padding: 1.25rem 1rem;
}

/* ── Avatar column ───────────────────────────────────── */
.zg-feed-card__avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2px;
}

.zg-feed-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--ac, #1B5E20);
    background-color: var(--abg, #E8F5E9);
}

/* ── Content column ──────────────────────────────────── */
.zg-feed-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/* ── Byline ──────────────────────────────────────────── */
.zg-feed-card__byline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.3rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.zg-feed-card__author {
    font-weight: 700;
    color: var(--zg-text-primary);
}

.zg-feed-card__handle {
    color: var(--zg-text-secondary);
    font-weight: 400;
    font-size: 0.875rem;
}

.zg-feed-card__sep {
    color: var(--zg-text-secondary);
}

.zg-feed-card__time {
    color: var(--zg-text-secondary);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* ── Title ───────────────────────────────────────────── */
.zg-feed-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.zg-feed-card--detail .zg-feed-card__title {
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    line-height: 1.3;
}

.zg-feed-card__title a {
    color: var(--zg-text-primary);
    text-decoration: none;
}

.zg-feed-card__title a:hover {
    color: var(--zg-primary);
}

/* ── Event / urus date badge ─────────────────────────── */
.zg-feed-card__event-date {
    margin: 0;
    font-size: 0.85rem;
    color: var(--zg-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── Excerpt ─────────────────────────────────────────── */
.zg-feed-card__excerpt {
    margin: 0;
    color: var(--zg-text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ── Media / image ───────────────────────────────────── */
.zg-feed-card__media {
    display: block;
    border-radius: var(--zg-radius-lg);
    overflow: hidden;
    border: 1px solid var(--zg-border-light);
    margin-top: 0.25rem;
    background: var(--zg-bg-overlay);
}

.zg-feed-card__media img {
    display: block;
    width: 100%;
    max-height: 400px;
    height: auto;
    object-fit: cover;
    transition: opacity 0.15s;
}

.zg-feed-card__media:hover img {
    opacity: 0.92;
}

/* ── Action bar ──────────────────────────────────────── */
.zg-feed-card__actions {
    display: flex;
    gap: 0;
    margin-top: 0.2rem;
    margin-left: -0.45rem;
}

.zg-feed-act {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.38rem 0.55rem;
    border-radius: var(--zg-radius-full);
    border: none;
    background: transparent;
    color: var(--zg-text-secondary);
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
    white-space: nowrap;
}

.zg-feed-act:hover {
    background: var(--zg-primary-alpha);
    color: var(--zg-primary);
    text-decoration: none;
}

.zg-feed-act i {
    font-size: 1rem;
}

/* ── Feed preview modal ─────────────────────────────── */
.zg-feed-preview-modal .modal-dialog {
    max-width: min(680px, calc(100vw - 1.5rem));
}

.zg-feed-preview-modal__content {
    border: 1px solid var(--zg-border-light);
    border-radius: 24px;
    overflow: hidden;
    background: var(--zg-bg-surface);
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
}

.zg-feed-preview-modal__header {
    align-items: flex-start;
    padding: 1rem 1rem 0.35rem;
}

.zg-feed-preview-modal__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zg-text-secondary);
}

.zg-feed-preview-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.zg-feed-preview-modal__body {
    padding: 0;
}

.zg-feed-preview-modal__body .zg-feed-card {
    border-bottom: none;
    background: transparent;
}

.zg-feed-preview-modal__body .zg-feed-card:hover {
    background: transparent;
}

.zg-feed-preview-modal__body .zg-feed-card__inner {
    padding: 0.6rem 1rem 1rem;
}

.zg-feed-preview-modal__body .zg-feed-card__media img {
    max-height: 520px;
}

body.dark-mode .zg-feed-preview-modal__content {
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
}

/* ── Feed detail shell ───────────────────────────────── */
.zg-feed-detail-shell {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--zg-space-4) 0 var(--zg-space-10);
}

/* ── Detail: back nav bar ────────────────────────────── */
.zg-feed-detail-back {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zg-space-3) var(--zg-space-4);
    border-bottom: 1px solid var(--zg-border-light);
}

.zg-feed-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--zg-text-primary);
    text-decoration: none;
    padding: 0.3rem 0.5rem;
    border-radius: var(--zg-radius-full);
    transition: background 0.12s;
}

.zg-feed-back-link:hover {
    background: var(--zg-bg-overlay);
    color: var(--zg-text-primary);
    text-decoration: none;
}

.zg-feed-detail-back__title {
    font-size: 0.875rem;
    color: var(--zg-text-secondary);
    font-weight: 500;
}

/* ── Detail: post wrapper ────────────────────────────── */
.zg-feed-detail-post {
    border-bottom: 1px solid var(--zg-border-light);
}

/* ── Detail: metadata panel ──────────────────────────── */
.zg-feed-detail-meta {
    display: flex;
    flex-direction: column;
    padding: 0 var(--zg-space-4);
    border-bottom: 1px solid var(--zg-border-light);
}

.zg-feed-detail-meta__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--zg-space-4);
    padding: var(--zg-space-3) 0;
    border-bottom: 1px solid var(--zg-border-light);
    font-size: 0.9rem;
}

.zg-feed-detail-meta__row:last-child {
    border-bottom: none;
}

.zg-feed-detail-meta__row span {
    color: var(--zg-text-secondary);
    flex-shrink: 0;
}

.zg-feed-detail-meta__row strong {
    color: var(--zg-text-primary);
    font-weight: 600;
    text-align: right;
}

.zg-feed-detail-meta__row a {
    color: var(--zg-primary);
    text-decoration: none;
    word-break: break-all;
    text-align: right;
}

.zg-feed-detail-meta__row a:hover {
    text-decoration: underline;
}

/* ── Detail: action buttons ──────────────────────────── */
.zg-feed-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zg-space-2);
    padding: var(--zg-space-4);
}

/* ── Toast notification ──────────────────────────────── */
.zg-feed-toast {
    position: fixed;
    bottom: calc(var(--zg-bottom-nav-height, 0px) + 1rem);
    left: 50%;
    transform: translateX(-50%) translateY(0.5rem);
    background: var(--zg-gray-900);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: var(--zg-radius-full);
    box-shadow: var(--zg-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 9000;
    white-space: nowrap;
}

.zg-feed-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .zg-home-feed-header {
        padding: var(--zg-space-4) var(--zg-space-3) var(--zg-space-3);
    }

    .zg-feed-card__inner {
        grid-template-columns: 36px 1fr;
        gap: 0.6rem;
        padding: 0.75rem 0.75rem;
    }

    .zg-feed-card--detail .zg-feed-card__inner {
        padding: 1rem 0.75rem;
    }

    .zg-feed-card__avatar {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .zg-feed-card__byline {
        font-size: 0.84rem;
    }

    .zg-feed-card__title {
        font-size: 0.95rem;
    }

    .zg-feed-act__label {
        display: none;
    }

    .zg-feed-act {
        padding: 0.42rem 0.5rem;
    }

    .zg-feed-detail-back {
        padding: var(--zg-space-2) var(--zg-space-3);
    }

    .zg-feed-detail-shell {
        padding: var(--zg-space-3) 0 var(--zg-space-8);
    }

    .zg-feed-detail-meta,
    .zg-feed-detail-actions {
        padding-left: var(--zg-space-3);
        padding-right: var(--zg-space-3);
    }
}