/* ==========================================================================
   SRG PREMIUM EDITORIAL PATTERNS (Masked Icons & Typography Tracking)
   ========================================================================== */

/* Shared wrapper for all editorial boxes */
.srg-pattern-box {
    border-radius: 14px;
    padding: 24px;
    margin-top: 28px;
    margin-bottom: 28px;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background 0.3s ease, border-color 0.3s ease;
    letter-spacing: -0.01em; 
}

/* ── 1. Pro Tip Style ── */
.srg-pattern-pro-tip {
    background: linear-gradient(135deg, var(--srg-brand-50) 0%, var(--srg-bg-primary) 100%);
    border-color: var(--srg-brand-100);
}

html.srg-dark .srg-pattern-pro-tip {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.03) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.03);
}

.srg-pattern-pro-tip .srg-pattern-inline-title::before {
    background-color: var(--srg-brand-500);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A5 5 0 0 0 8 8c0 1 .3 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A5 5 0 0 0 8 8c0 1 .3 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}

/* ── 2. Red Flag Style ── */
.srg-pattern-red-flag {
    background: linear-gradient(135deg, #fef2f2 0%, var(--srg-bg-primary) 100%);
    border-color: #fee2e2;
}

html.srg-dark .srg-pattern-red-flag {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.03) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.03);
}

.srg-pattern-red-flag .srg-pattern-inline-title::before {
    background-color: #ef4444;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Ccircle cx='12' cy="12" r="10"/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* ── 3. Inline Flex Alerts Header ── */
.srg-pattern-inline-title {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    color: var(--srg-text-primary);
    letter-spacing: -0.015em;
}

.srg-pattern-inline-title::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ── 4. Quick Summary Style ── */
.srg-pattern-quick-summary {
    background: linear-gradient(135deg, var(--srg-brand-50) 0%, var(--srg-accent-50) 100%);
    border-color: var(--srg-brand-100);
}

html.srg-dark .srg-pattern-quick-summary {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.03) 0%, rgba(16, 185, 129, 0.03) 100%);
    border-color: rgba(255, 255, 255, 0.03);
}

.srg-pattern-quick-summary .srg-pattern-inline-title::before {
    background-color: var(--srg-accent-500);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}

/* ── 5. Quick Fix Style ── */
.srg-pattern-quick-fix {
    background: linear-gradient(135deg, var(--srg-neutral-50) 0%, var(--srg-bg-primary) 100%);
    border-color: var(--srg-neutral-200);
}

html.srg-dark .srg-pattern-quick-fix {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.02) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.03);
}

.srg-pattern-quick-fix .srg-pattern-inline-title::before {
    background-color: var(--srg-neutral-500);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

/* ── 6. Bottom Line Style ── */
.srg-pattern-bottom-line {
    background: linear-gradient(135deg, #fef3c7 0%, var(--srg-bg-primary) 100%);
    border-color: #fde68a;
}

html.srg-dark .srg-pattern-bottom-line {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.03) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.03);
}

.srg-pattern-bottom-line .srg-pattern-inline-title::before {
    background-color: #f59e0b;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

/* ── 7. Voice of the Street Style ── */
.srg-pattern-voice {
    background: linear-gradient(135deg, #e0f2fe 0%, var(--srg-bg-primary) 100%);
    border-color: #bae6fd;
}

html.srg-dark .srg-pattern-voice {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.03) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.03);
}

.srg-pattern-voice .srg-pattern-inline-title::before {
    background-color: #0ea5e9;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* ── 8. Verdict Block Style ── */
.srg-pattern-verdict {
    background: linear-gradient(135deg, var(--srg-brand-50) 0%, var(--srg-bg-primary) 100%);
    border-color: var(--srg-brand-100);
}

html.srg-dark .srg-pattern-verdict {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.03) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.03);
}

.srg-pattern-verdict .srg-pattern-inline-title::before {
    background-color: #eab308;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.45 1-1 1H4v2h16v-2h-5c-.55 0-1-.45-1-1/7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.45 1-1 1H4v2h16v-2h-5c-.55 0-1-.45-1-1/7z'/%3E%3C/svg%3E");
}

/* ── 9. Pros & Cons Grid Pattern (Borderless SaaS Look) ── */
.srg-pros-cons-grid {
    gap: 24px !important;
    margin-top: 28px !important;
    margin-bottom: 28px !important;
}

.srg-pros-column,
.srg-cons-column {
    border-radius: 12px !important;
    padding: 24px !important;
    border: 1px solid transparent !important;
}

.srg-pros-column {
    background: linear-gradient(135deg, #f0fdf4 0%, var(--srg-bg-primary) 100%) !important;
    border-color: #dcfce7 !important;
}

html.srg-dark .srg-pros-column {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.02) 0%, rgba(15, 23, 42, 0.4) 100%) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
}

.srg-cons-column {
    background: linear-gradient(135deg, #fef2f2 0%, var(--srg-bg-primary) 100%) !important;
    border-color: #fee2e2 !important;
}

html.srg-dark .srg-cons-column {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.02) 0%, rgba(15, 23, 42, 0.4) 100%) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
}

.srg-pros-title::before {
    background-color: #22c55e !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.srg-cons-title::before {
    background-color: #ef4444 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

.srg-pros-column ul, .srg-cons-column ul {
    padding-left: 18px !important;
    margin-bottom: 0 !important;
}

.srg-pros-column li, .srg-cons-column li {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
    color: var(--srg-text-secondary) !important;
}

.srg-pros-column li:last-child, .srg-cons-column li:last-child {
    margin-bottom: 0 !important;
}