/**
 * InoriWeb SEO - Content Classes
 *
 * Pre-defined CSS classes for AI-generated content
 * Uses CSS variables set by plugin settings (theme mode + primary color)
 *
 * @since 1.2.7
 */

/* =============================================================================
   GRID LAYOUTS - Fix display: grid being stripped by WordPress KSES
   ============================================================================= */

.inoriweb-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    margin: 32px 0 !important;
}

.inoriweb-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin: 32px 0 !important;
}

/* Smart fix: If grid-3 has exactly 4 children, use 2 columns (2x2 layout) */
.inoriweb-grid-3 > *:nth-child(4):last-child {
    grid-column: auto;
}
.inoriweb-grid-3:has(> *:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr) !important;
}

.inoriweb-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin: 32px 0 !important;
}

/* Mobile: Stack all grids into single column */
@media screen and (max-width: 768px) {
    .inoriweb-grid-2,
    .inoriweb-grid-3,
    .inoriweb-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Tablet: 2 columns for 3/4 column grids */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .inoriweb-grid-3,
    .inoriweb-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =============================================================================
   CARDS - Consistent card styling with theme awareness
   ============================================================================= */

.inoriweb-card {
    background: var(--inoriweb-card-bg) !important;
    border: 1px solid var(--inoriweb-card-border) !important;
    border-radius: 12px;
    padding: 32px;
    box-sizing: border-box;
}

/* Override ANY heading colors in cards (including inline styles from agents) */
.inoriweb-card h1,
.inoriweb-card h2,
.inoriweb-card h3,
.inoriweb-card h4,
.inoriweb-card h5,
.inoriweb-card h6,
.inoriweb-card-glass h1,
.inoriweb-card-glass h2,
.inoriweb-card-glass h3,
.inoriweb-card-glass h4,
.inoriweb-card-glass h5,
.inoriweb-card-glass h6,
.inoriweb-card-compact h1,
.inoriweb-card-compact h2,
.inoriweb-card-compact h3,
.inoriweb-card-compact h4,
.inoriweb-card-compact h5,
.inoriweb-card-compact h6 {
    color: var(--inoriweb-card-heading) !important;
}

/* Override ANY text colors in cards (including inline styles from agents) */
.inoriweb-card p,
.inoriweb-card li,
.inoriweb-card span,
.inoriweb-card code,
.inoriweb-card kbd,
.inoriweb-card pre,
.inoriweb-card-glass p,
.inoriweb-card-glass li,
.inoriweb-card-glass span,
.inoriweb-card-glass code,
.inoriweb-card-glass kbd,
.inoriweb-card-glass pre,
.inoriweb-card-compact p,
.inoriweb-card-compact li,
.inoriweb-card-compact span,
.inoriweb-card-compact code,
.inoriweb-card-compact kbd,
.inoriweb-card-compact pre {
    color: var(--inoriweb-card-text) !important;
}

/* Style code blocks inside cards - override theme styles */
.inoriweb-card code,
.inoriweb-card-glass code,
.inoriweb-card-compact code {
    background: rgba(0, 0, 0, 0.2) !important; /* Slightly darker than card bg */
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 0.9em !important;
}

.inoriweb-card pre,
.inoriweb-card-glass pre,
.inoriweb-card-compact pre {
    background: rgba(0, 0, 0, 0.2) !important; /* Slightly darker than card bg */
    padding: 12px !important;
    border-radius: 6px !important;
    overflow-x: auto !important;
}

.inoriweb-card pre code,
.inoriweb-card-glass pre code,
.inoriweb-card-compact pre code {
    background: none !important; /* Remove double background */
    padding: 0 !important;
}

.inoriweb-card p:last-child {
    margin-bottom: 0;
}

/* Glassmorphic card variant */
.inoriweb-card-glass {
    background: var(--inoriweb-card-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--inoriweb-card-border) !important;
    border-radius: 12px;
    padding: 32px;
    box-sizing: border-box;
}

/* Compact card variant (less padding) */
.inoriweb-card-compact {
    background: var(--inoriweb-card-bg) !important;
    border: 1px solid var(--inoriweb-card-border) !important;
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
}

/* Mobile: Reduce padding */
@media screen and (max-width: 768px) {
    .inoriweb-card,
    .inoriweb-card-glass {
        padding: 24px;
    }

    .inoriweb-card-compact {
        padding: 16px;
    }
}

/* =============================================================================
   CALLOUTS - Highlight boxes with colored borders and glassmorphism
   ============================================================================= */

.inoriweb-callout {
    background: var(--inoriweb-callout-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--inoriweb-card-border) !important;
    border-left: 4px solid var(--inoriweb-primary) !important;
    border-radius: 12px;
    padding: 24px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Override ANY heading colors in callouts (including inline styles from agents) */
.inoriweb-callout h1,
.inoriweb-callout h2,
.inoriweb-callout h3,
.inoriweb-callout h4,
.inoriweb-callout h5,
.inoriweb-callout h6 {
    color: var(--inoriweb-callout-heading) !important;
}

/* Variant-specific heading colors (override base callout colors) */
.inoriweb-callout-info h1,
.inoriweb-callout-info h2,
.inoriweb-callout-info h3,
.inoriweb-callout-info h4,
.inoriweb-callout-info h5,
.inoriweb-callout-info h6 {
    color: var(--inoriweb-info-heading) !important;
}

.inoriweb-callout-warning h1,
.inoriweb-callout-warning h2,
.inoriweb-callout-warning h3,
.inoriweb-callout-warning h4,
.inoriweb-callout-warning h5,
.inoriweb-callout-warning h6 {
    color: var(--inoriweb-warning-heading) !important;
}

.inoriweb-callout-success h1,
.inoriweb-callout-success h2,
.inoriweb-callout-success h3,
.inoriweb-callout-success h4,
.inoriweb-callout-success h5,
.inoriweb-callout-success h6 {
    color: var(--inoriweb-success-heading) !important;
}

/* Override ANY text colors in callouts (including inline styles from agents) */
.inoriweb-callout p,
.inoriweb-callout li,
.inoriweb-callout span,
.inoriweb-callout strong,
.inoriweb-callout code,
.inoriweb-callout kbd,
.inoriweb-callout pre {
    color: var(--inoriweb-callout-text) !important;
}

/* Variant-specific text colors (override base callout colors) */
.inoriweb-callout-info p,
.inoriweb-callout-info li,
.inoriweb-callout-info span,
.inoriweb-callout-info strong,
.inoriweb-callout-info code,
.inoriweb-callout-info kbd,
.inoriweb-callout-info pre {
    color: var(--inoriweb-info-text) !important;
}

.inoriweb-callout-warning p,
.inoriweb-callout-warning li,
.inoriweb-callout-warning span,
.inoriweb-callout-warning strong,
.inoriweb-callout-warning code,
.inoriweb-callout-warning kbd,
.inoriweb-callout-warning pre {
    color: var(--inoriweb-warning-text) !important;
}

.inoriweb-callout-success p,
.inoriweb-callout-success li,
.inoriweb-callout-success span,
.inoriweb-callout-success strong,
.inoriweb-callout-success code,
.inoriweb-callout-success kbd,
.inoriweb-callout-success pre {
    color: var(--inoriweb-success-text) !important;
}

/* Style code blocks inside callouts - override theme styles */
.inoriweb-callout code,
.inoriweb-callout-info code,
.inoriweb-callout-warning code,
.inoriweb-callout-success code {
    background: rgba(0, 0, 0, 0.2) !important; /* Slightly darker than callout bg */
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 0.9em !important;
}

.inoriweb-callout pre,
.inoriweb-callout-info pre,
.inoriweb-callout-warning pre,
.inoriweb-callout-success pre {
    background: rgba(0, 0, 0, 0.2) !important; /* Slightly darker than callout bg */
    padding: 12px !important;
    border-radius: 6px !important;
    overflow-x: auto !important;
}

.inoriweb-callout pre code,
.inoriweb-callout-info pre code,
.inoriweb-callout-warning pre code,
.inoriweb-callout-success pre code {
    background: none !important; /* Remove double background */
    padding: 0 !important;
}

.inoriweb-callout p,
.inoriweb-callout-info p,
.inoriweb-callout-warning p,
.inoriweb-callout-success p {
    margin: 0;
}

.inoriweb-callout strong {
    /* Color handled by rule above */
}

/* Info callout (blue) - INHERITS all base styles */
.inoriweb-callout-info {
    /* Inherit base callout styles */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--inoriweb-card-border) !important;
    border-radius: 12px;
    padding: 24px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Variant-specific overrides (user-controlled) */
    border-left: 4px solid var(--inoriweb-info) !important;
    background: var(--inoriweb-info-bg) !important;
}

/* Warning callout (accent/yellow) - INHERITS all base styles */
.inoriweb-callout-warning {
    /* Inherit base callout styles */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--inoriweb-card-border) !important;
    border-radius: 12px;
    padding: 24px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Variant-specific overrides (user-controlled) */
    border-left: 4px solid var(--inoriweb-warning) !important;
    background: var(--inoriweb-warning-bg) !important;
}

/* Success callout (green) - INHERITS all base styles */
.inoriweb-callout-success {
    /* Inherit base callout styles */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--inoriweb-card-border) !important;
    border-radius: 12px;
    padding: 24px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Variant-specific overrides (user-controlled) */
    border-left: 4px solid var(--inoriweb-success) !important;
    background: var(--inoriweb-success-bg) !important;
}

/* =============================================================================
   TABLES - Theme-aware table styling
   ============================================================================= */

/* FIX AGENT MISTAKE: They wrap tables in <div class="inoriweb-table"> instead of adding class to <table> */
div.inoriweb-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}

div.inoriweb-table > table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    border: 1px solid var(--inoriweb-table-border) !important;
    background: var(--inoriweb-table-body-bg) !important;
    font-size: 16px !important;
}

div.inoriweb-table > table thead {
    background: var(--inoriweb-table-header-bg) !important;
}

div.inoriweb-table > table thead th {
    color: var(--inoriweb-table-header-text) !important;
    font-weight: 600 !important;
    text-align: left !important;
    padding: 12px !important;
    border: 1px solid var(--inoriweb-table-border) !important;
    border-bottom: 2px solid var(--inoriweb-table-border) !important;
}

div.inoriweb-table > table tbody tr {
    border-bottom: 1px solid var(--inoriweb-table-border) !important;
}

div.inoriweb-table > table tbody td {
    padding: 12px !important;
    border: 1px solid var(--inoriweb-table-border) !important;
}

/* Corner radius */
div.inoriweb-table > table thead th:first-child {
    border-top-left-radius: 11px !important;
}

div.inoriweb-table > table thead th:last-child {
    border-top-right-radius: 11px !important;
}

div.inoriweb-table > table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px !important;
}

div.inoriweb-table > table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px !important;
}

/* Remove double borders on edges */
div.inoriweb-table > table tbody tr:last-child td {
    border-bottom: none !important;
}

div.inoriweb-table > table thead th:last-child,
div.inoriweb-table > table tbody td:last-child {
    border-right: none !important;
}

/* Mobile styles for agent-wrapped tables */
@media screen and (max-width: 768px) {
    div.inoriweb-table {
        margin-right: 0;
    }

    div.inoriweb-table > table {
        margin-right: 20px !important;
        min-width: 500px !important;
        font-size: 13px !important;
    }

    div.inoriweb-table > table th,
    div.inoriweb-table > table td {
        padding: 10px 8px !important;
        white-space: nowrap !important;
    }

    div.inoriweb-table > table thead th:last-child,
    div.inoriweb-table > table tbody td:last-child {
        padding-right: 16px !important;
    }

    div.inoriweb-table > table thead th:first-child,
    div.inoriweb-table > table tbody td:first-child {
        white-space: normal !important;
        min-width: 120px !important;
    }
}

/* CORRECT USAGE: class on <table> element itself */
/* Ultra-high specificity to override ALL theme styles */
table.inoriweb-table,
.entry-content table.inoriweb-table,
.post-content table.inoriweb-table,
article table.inoriweb-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 32px 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--inoriweb-table-border) !important;
    background: transparent !important;
    overflow: hidden !important; /* Clip backgrounds to border-radius */
}

table.inoriweb-table thead tr,
.entry-content table.inoriweb-table thead tr {
    background: var(--inoriweb-table-header-bg) !important;
}

table.inoriweb-table thead th,
.entry-content table.inoriweb-table thead th {
    color: var(--inoriweb-table-header-text) !important;
    font-weight: 600 !important;
    text-align: left !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--inoriweb-table-border) !important;
    background: var(--inoriweb-table-header-bg) !important;
}

table.inoriweb-table thead th:not(:last-child),
.entry-content table.inoriweb-table thead th:not(:last-child) {
    border-right: 1px solid var(--inoriweb-table-border) !important;
}

/* Explicitly remove right border from last column - table border provides it */
table.inoriweb-table thead th:last-child,
.entry-content table.inoriweb-table thead th:last-child {
    border-right: none !important;
}

table.inoriweb-table tbody,
.entry-content table.inoriweb-table tbody {
    background: var(--inoriweb-table-body-bg) !important;
}

table.inoriweb-table tbody tr,
.entry-content table.inoriweb-table tbody tr {
    background: var(--inoriweb-table-body-bg) !important;
}

table.inoriweb-table tbody td,
.entry-content table.inoriweb-table tbody td {
    color: var(--inoriweb-text) !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--inoriweb-table-border) !important;
    background: var(--inoriweb-table-body-bg) !important;
}

table.inoriweb-table tbody td:not(:last-child),
.entry-content table.inoriweb-table tbody td:not(:last-child) {
    border-right: 1px solid var(--inoriweb-table-border) !important;
}

/* Explicitly remove right border from last column - table border provides it */
table.inoriweb-table tbody td:last-child,
.entry-content table.inoriweb-table tbody td:last-child {
    border-right: none !important;
}

/* Remove bottom border from last row - table border provides it */
table.inoriweb-table tbody tr:last-child td,
.entry-content table.inoriweb-table tbody tr:last-child td {
    border-bottom: none !important;
}

table.inoriweb-table tbody tr:nth-child(even),
.entry-content table.inoriweb-table tbody tr:nth-child(even) {
    background: var(--inoriweb-table-row-even) !important;
}

table.inoriweb-table tbody tr:nth-child(even) td,
.entry-content table.inoriweb-table tbody tr:nth-child(even) td {
    background: var(--inoriweb-table-row-even) !important;
}

/* Rounded corners for table - Match table's 12px radius */
.inoriweb-table thead th:first-child {
    border-top-left-radius: 11px !important; /* Slightly less than table to fit inside border */
}

.inoriweb-table thead th:last-child {
    border-top-right-radius: 11px !important;
}

.inoriweb-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px !important;
}

.inoriweb-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px !important;
}

/* Mobile: Simple, clean responsive tables */
@media screen and (max-width: 768px) {
    .inoriweb-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 20px 0;
    }

    .inoriweb-table {
        margin: 0;
        margin-right: 20px; /* Add space on right side so last column isn't cut off */
        min-width: 500px; /* Reduced from 600px - less aggressive */
        font-size: 13px; /* Smaller text on mobile */
    }

    /* Reduce padding on mobile - makes tables more compact */
    .inoriweb-table th,
    .inoriweb-table td {
        padding: 10px 8px !important; /* Reduced from 12px, vertical slightly more than horizontal */
        white-space: nowrap; /* Prevent text wrapping for cleaner appearance */
    }

    /* Extra padding on last column to ensure visibility */
    .inoriweb-table thead th:last-child,
    .inoriweb-table tbody td:last-child {
        padding-right: 16px !important; /* Extra padding on right to prevent cutoff */
    }

    /* Allow text wrapping in first column (usually product names/labels) */
    .inoriweb-table thead th:first-child,
    .inoriweb-table tbody td:first-child {
        white-space: normal;
        min-width: 120px; /* Ensure first column has minimum readable width */
    }
}

/* =============================================================================
   FLEX LAYOUTS - Fix display: flex being stripped by WordPress KSES
   ============================================================================= */

.inoriweb-flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.inoriweb-flex-start {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.inoriweb-flex-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.inoriweb-flex-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

/* =============================================================================
   FAQ STYLING - Clean accordions (no inline styles needed)
   ============================================================================= */

.inoriweb-faq details {
    margin: 15px 0 !important;
    border: 1px solid var(--inoriweb-faq-border) !important;
    border-radius: 8px !important;
    padding: 20px 20px 12px 20px !important; /* Reduced bottom padding from 20px to 12px */
    background: var(--inoriweb-faq-bg) !important;
}

.inoriweb-faq summary {
    cursor: pointer !important;
    font-weight: 600 !important;
    user-select: none;
    list-style: none;
    color: var(--inoriweb-faq-heading) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.inoriweb-faq summary::-webkit-details-marker {
    display: none;
}

.inoriweb-faq summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.2s;
    color: var(--inoriweb-faq-icon-color);
}

.inoriweb-faq details[open] summary::before {
    transform: rotate(90deg);
}

.inoriweb-faq summary:hover {
    opacity: 0.8;
}

.inoriweb-faq details p {
    margin-top: 12px !important;
    margin-bottom: 0 !important; /* Remove default browser bottom margin */
    color: var(--inoriweb-faq-text) !important;
    line-height: 1.6 !important;
}

/* =============================================================================
   HERO SECTIONS - Full-width headers
   ============================================================================= */

.inoriweb-hero {
    padding: 60px 40px;
    margin: -20px -20px 40px -20px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(135deg, var(--inoriweb-primary) 0%, var(--inoriweb-card-bg) 100%);
}

.inoriweb-hero h1 {
    margin: 0 0 16px 0;
    font-size: clamp(2em, 5vw, 2.5em);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.inoriweb-hero p {
    margin: 0;
    font-size: clamp(1.1em, 2.5vw, 1.2em);
    opacity: 0.95;
    line-height: 1.6;
    color: #ffffff;
}

@media screen and (max-width: 768px) {
    .inoriweb-hero {
        padding: 40px 24px;
    }
}

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

.inoriweb-text-center {
    text-align: center !important;
}

.inoriweb-mt-0 {
    margin-top: 0 !important;
}

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

/* =============================================================================
   UTILITY CLASSES - Flexbox layouts and buttons
   ============================================================================= */

/* Icon centering - replaces inline display: inline-flex */
.inoriweb-icon-center {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button styling - replaces inline display: inline-block */
.inoriweb-btn-primary {
    display: inline-block !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* =============================================================================
   CTA SECTIONS - Call-to-action boxes with gradient backgrounds
   ============================================================================= */

.inoriweb-cta {
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    margin: 40px 0;
    box-sizing: border-box;
}

/* Gradient CTA variant - background controlled by plugin settings (gradient/solid/custom CSS) */
.inoriweb-cta-gradient {
    /* Background is set dynamically by class-settings.php based on user selection */
    /* DO NOT add background here - it will override custom CSS! */
    color: var(--inoriweb-cta-text) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Override heading colors in CTAs - force CTA text color */
.inoriweb-cta h1,
.inoriweb-cta h2,
.inoriweb-cta h3,
.inoriweb-cta h4,
.inoriweb-cta h5,
.inoriweb-cta h6,
.inoriweb-cta-gradient h1,
.inoriweb-cta-gradient h2,
.inoriweb-cta-gradient h3,
.inoriweb-cta-gradient h4,
.inoriweb-cta-gradient h5,
.inoriweb-cta-gradient h6 {
    color: var(--inoriweb-cta-text) !important;
    margin: 0 0 16px 0 !important;
}

/* Override text colors in CTAs - force CTA text color */
.inoriweb-cta p,
.inoriweb-cta li,
.inoriweb-cta span,
.inoriweb-cta strong,
.inoriweb-cta-gradient p,
.inoriweb-cta-gradient li,
.inoriweb-cta-gradient span,
.inoriweb-cta-gradient strong {
    color: var(--inoriweb-cta-text) !important;
    margin: 0 0 24px 0 !important;
    opacity: 0.95;
}

.inoriweb-cta p:last-child {
    margin-bottom: 0 !important;
}

/* CTA button styling - background/colors controlled by plugin settings (solid/gradient/custom CSS) */
.inoriweb-cta-btn {
    display: inline-block !important;
    /* Background and color set dynamically by class-settings.php based on user selection */
    /* DO NOT add background/color here - it will override custom CSS with animations! */
    padding: 14px 35px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.inoriweb-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Mobile: Reduce padding */
@media screen and (max-width: 768px) {
    .inoriweb-cta,
    .inoriweb-cta-gradient {
        padding: 32px 24px;
    }
}

/* =============================================================================
   LEGACY SUPPORT - Fix old inline-style content
   ============================================================================= */

/* Auto-fix grids that are missing display property (old content) */
.entry-content div[style*="grid-template-columns"],
.post-content div[style*="grid-template-columns"],
article div[style*="grid-template-columns"] {
    display: grid !important;
}

/* Auto-fix flex containers that are missing display property (old content) */
.entry-content div[style*="align-items"][style*="center"],
.entry-content div[style*="justify-content"][style*="center"],
.post-content div[style*="align-items"][style*="center"],
.post-content div[style*="justify-content"][style*="center"],
article div[style*="align-items"][style*="center"],
article div[style*="justify-content"][style*="center"] {
    display: flex !important;
}