/* GME Feature Grid - Frontend Styles - GLOBAL SETTINGS ONLY */
.gme-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--cols-d, 2), 1fr) !important;
    gap: var(--gap-y, 24px) var(--gap-x, 24px) !important;
    margin: 0 !important;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
    .gme-grid {
        grid-template-columns: repeat(var(--cols-t, 2), 1fr) !important;
    }
}

@media (max-width: 640px) {
    .gme-grid {
        grid-template-columns: repeat(var(--cols-m, 1), 1fr) !important;
    }
}

/* Card styling */
.gme-grid .gme-card {
    padding: var(--pad, 16px) !important;
    border-radius: var(--radius, 12px) !important;
    background: var(--card-bg, #ffffff) !important;
    border: var(--card-border, 1px solid #e0e0e0) !important;
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.1)) !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Card hover effects */
.gme-grid .gme-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.1)), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* List variant styling */
.gme-grid.is-variant-list .gme-card {
    border: none !important;
    box-shadow: none !important;
    padding: var(--pad, 16px) 0 !important;
    background: transparent !important;
    border-bottom: var(--divider, 0) solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 !important;
    transition: none !important;
}

.gme-grid.is-variant-list .gme-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.gme-grid.is-variant-list .gme-card:last-child {
    border-bottom: none !important;
}

/* Icon styling */
.gme-grid .gme-icon {
    width: var(--icon-size, 32px) !important;
    height: var(--icon-size, 32px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--icon-color, #c51b1b) !important;
    flex-shrink: 0 !important;
    font-size: var(--icon-size, 32px) !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: top !important;
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 0 !important;
    margin-top: 0.25rem !important;
}

/* SVG icon styling */
.gme-grid .gme-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

.gme-grid .gme-icon svg * {
    fill: currentColor !important;
    stroke: none !important;
}

.gme-grid .gme-icon svg path,
.gme-grid .gme-icon svg circle,
.gme-grid .gme-icon svg rect,
.gme-grid .gme-icon svg polygon,
.gme-grid .gme-icon svg polyline,
.gme-grid .gme-icon svg line,
.gme-grid .gme-icon svg ellipse {
    fill: currentColor !important;
    stroke: none !important;
}

/* Emoji fallback styling */
.gme-grid .gme-icon-emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Content area */
.gme-grid .gme-content {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Title styling */
.gme-grid .gme-title {
    font-size: var(--title-size, 1.125rem) !important;
    margin: 0 0 0.75em !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: inherit !important;
}

/* Bullet list styling */
.gme-grid .gme-list {
    font-size: var(--bullet-size, 1rem) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

.gme-grid .gme-list li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    padding-left: 1.5em !important;
}

.gme-grid .gme-list li + li {
    margin-top: 0.5em !important;
    border-top: var(--divider, 0) solid rgba(0, 0, 0, 0.1) !important;
    padding-top: calc(var(--divider, 0) * 0.5em) !important;
}

/* Bullet points */
.gme-grid .gme-list li::before {
    content: "•" !important;
    color: var(--icon-color, #c51b1b) !important;
    font-weight: bold !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
}

.gme-grid.is-variant-list .gme-list li::before {
    content: "→" !important;
}

/* Animation styles */
.gme-grid[data-animate="true"] {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}

.gme-grid[data-animate="true"].gme-animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.gme-grid[data-animate="true"][data-stagger="true"] .gme-card {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}

.gme-grid[data-animate="true"][data-stagger="true"] .gme-card.gme-animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Prevent editor overrides */
.block-editor-page .gme-grid,
.wp-block-gme-feature-grid .gme-grid {
    opacity: 1 !important;
    transform: none !important;
}

.block-editor-page .gme-grid .gme-card,
.wp-block-gme-feature-grid .gme-grid .gme-card {
    opacity: 1 !important;
    transform: none !important;
}

/* Accessibility improvements */
.gme-grid .gme-card:focus-within {
    outline: 2px solid var(--icon-color, #c51b1b) !important;
    outline-offset: 2px !important;
}

/* Print styles */
@media print {
    .gme-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .gme-grid .gme-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .gme-grid .gme-card {
        background: var(--card-bg-dark, #1a1a1a) !important;
        border-color: var(--card-border-dark, #333) !important;
        color: var(--text-color-dark, #ffffff) !important;
    }
    
    .gme-grid .gme-title {
        color: var(--title-color-dark, #ffffff) !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .gme-grid .gme-card,
    .gme-grid[data-animate="true"],
    .gme-grid[data-animate="true"] .gme-card {
        transition: none !important;
        animation: none !important;
    }
    
    .gme-grid .gme-card:hover {
        transform: none !important;
    }
}