/* ══════════════════════════════════════════════════════════════════════════
   BLOCKS — CSS for the DB-backed template system (src/blocks/registry.php).
   One stylesheet for every block partial in templates/blocks/.
   Loaded once by page-renderer.php; block partials emit markup only.
   ══════════════════════════════════════════════════════════════════════════ */

/* Section rhythm — .tool-info has no global spacing, blocks need their own */
section.tool-info.block-hero,
section.tool-info.block-feature-grid,
section.tool-info.block-faq,
section.tool-info.block-cta-card,
section.tool-info.block-code-snippet,
section.tool-info.block-stats-row,
section.tool-info.block-example-list,
section.tool-info.block-rich-text { display: block; margin-top: 24px; }

section.tool-info.block-hero            { margin-top: 0; }
section.tool-info:last-of-type          { margin-bottom: 56px; }

/* ── HERO ─────────────────────────────────────────────────────────── */

.block-hero[data-align="center"] .card       { text-align: center; }
.block-hero[data-align="center"] .tool-title { justify-content: center; }

.block-hero__badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface2);
    border: 1px solid var(--border2);
    color: var(--muted2);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.block-hero__endpoint {
    display: inline-block;
    background: var(--surface2);
    border: 1px solid var(--border2);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    color: var(--accent);
    margin-top: 10px;
}
.block-hero__endpoint code { background: transparent; color: inherit; padding: 0; }

.block-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 14px;
}
.block-hero[data-align="left"] .block-hero__ctas { justify-content: flex-start; }

/* ── FEATURE GRID ─────────────────────────────────────────────────── */

.block-feature-grid__grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 18px;
}
.block-feature-grid[data-cols="2"] .block-feature-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block-feature-grid[data-cols="3"] .block-feature-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block-feature-grid[data-cols="4"] .block-feature-grid__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.block-feature-grid__item {
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: 16px 18px;
    border-radius: var(--radius-sm);
}
.block-feature-grid__item h3 { margin: 8px 0 4px; font-size: 15px; color: var(--text); }
.block-feature-grid__item p  { margin: 6px 0 0; font-size: 13px; color: var(--muted2); line-height: 1.5; }

.block-feature-grid__code {
    font-family: var(--mono);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 4px;
}

/* ── CTA CARD ─────────────────────────────────────────────────────── */

.block-cta-card__card { text-align: center; }
.block-cta-card__text {
    color: var(--muted2);
    max-width: 500px;
    margin: 0 auto 14px;
}
.block-cta-card__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 14px;
}

/* ── CODE SNIPPET / STEPS ─────────────────────────────────────────── */

.block-code-snippet__box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 22px 18px;
}
.block-code-snippet__box h3 { margin: 0 0 8px; font-size: 16px; color: var(--text); }
.block-code-snippet__box h3:not(:first-child) { margin-top: 18px; }

.block-code-snippet__box .step-path {
    font-family: var(--mono);
    color: var(--muted2);
    font-size: 13px;
    margin: 0 0 12px;
}
.block-code-snippet__box .step-note {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--muted2);
}
.block-code-snippet__box pre {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

/* ── STATS ROW ────────────────────────────────────────────────────── */

.block-stats-row__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    text-align: center;
}
.block-stats-row__cell {
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: 20px 16px;
    border-radius: var(--radius-sm);
}
.block-stats-row__num {
    font-family: var(--mono);
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}
.block-stats-row__label {
    font-size: 12px;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 6px;
}

/* ── EXAMPLE LIST ─────────────────────────────────────────────────── */

.block-example-list__intro {
    color: var(--muted2);
    font-size: 14px;
    margin-bottom: 8px;
}
.block-example-list__items {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 8px;
}
.block-example-list__items li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 0;
    font-size: 14px;
    color: var(--text);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.block-example-list__items li:hover {
    background: var(--surface2);
    border-color: var(--border2);
}
.block-example-list__items li,
.block-example-list__items li a {
    display: block;
    padding: 10px 14px;
    color: var(--text);
    text-decoration: none;
}
.block-example-list__items li:has(a) {
    padding: 0;
}
.block-example-list__items li:has(a):hover a {
    color: var(--accent);
}

/* ── RICH TEXT ────────────────────────────────────────────────────── */

.block-rich-text__body {
    color: var(--text);
    line-height: 1.65;
    font-size: 15px;
}
.block-rich-text[data-narrow="1"] .block-rich-text__body { max-width: 760px; margin: 0 auto; }

.block-rich-text__body h2,
.block-rich-text__body h3 {
    color: var(--text);
    margin-top: 28px;
    margin-bottom: 10px;
}
.block-rich-text__body h2 { font-size: 20px; }
.block-rich-text__body h3 { font-size: 17px; }
.block-rich-text__body h2:first-child,
.block-rich-text__body h3:first-child { margin-top: 0; }

.block-rich-text__body p  { margin: 0 0 14px; }
.block-rich-text__body ul,
.block-rich-text__body ol { margin: 0 0 14px; padding-left: 22px; }
.block-rich-text__body li { margin-bottom: 6px; }

.block-rich-text__body a {
    color: var(--accent);
    text-decoration: none;
}
.block-rich-text__body a:hover { text-decoration: underline; }

.block-rich-text__body code {
    background: var(--surface2);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.9em;
}

.block-rich-text__body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

.block-rich-text__body blockquote {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-left: 3px solid var(--accent);
    background: var(--surface);
    color: var(--muted2);
    font-style: italic;
}

/* ── PRICING TABLE ─────────────────────────────────────────────────
   Plan cards, DB-driven. Admin updates plans in /admin/plans.php. */

section.tool-info.block-pricing-table { display: block; margin-top: 24px; }

.block-pricing-table__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 1140px;
    margin: 0 auto;
}

.block-pricing-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s, transform 0.2s;
}
.block-pricing-card:hover { border-color: var(--border2); }

.block-pricing-card--highlight {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--surface) 0%, rgba(91, 138, 248, 0.04) 100%);
    transform: translateY(-4px);
}

.block-pricing-card--current {
    border-color: #22c55e;
    background: linear-gradient(180deg, var(--surface) 0%, rgba(34, 197, 94, 0.04) 100%);
}

.block-pricing-card__badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
}

.block-pricing-card__name {
    margin: 0;
    font-size: 20px;
    color: var(--text);
    font-weight: 700;
}

.block-pricing-card__current {
    font-size: 12px;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.block-pricing-card__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 6px;
}

.block-pricing-card__amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--mono);
    line-height: 1.1;
}
.block-pricing-card__amount--custom {
    font-size: 22px;
    color: var(--accent);
}

.block-pricing-card__period {
    font-size: 13px;
    color: var(--muted2);
}

.block-pricing-card__annual {
    font-size: 12px;
    color: var(--muted2);
    margin-top: 6px;
}
.block-pricing-card__annual strong {
    color: var(--text);
    font-weight: 600;
}

.block-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.block-pricing-card__features li {
    font-size: 14px;
    color: var(--text);
    padding-left: 22px;
    position: relative;
    line-height: 1.5;
}
.block-pricing-card__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 700;
}

.block-pricing-card__cta {
    margin-top: 6px;
}
.block-pricing-card__cta .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}