/* ============================================================
   Seresa Block Templates — stylesheet
   Self-contained. Scoped under .seresa-content (front-end) and
   .editor-styles-wrapper (block editor). No dependency on Bricks.
   ============================================================ */

/* ---------- 1. Fonts ----------------------------------------
   Both font families (PosteramaTextW15, DM Sans) are loaded
   site-wide by Bricks / the parent theme, so this stylesheet
   references them by name only — no @font-face declarations
   are needed here, which keeps this CSS file lean and avoids
   double-loading.
   ------------------------------------------------------------ */

/* ---------- 2. Design tokens -------------------------------- */

.seresa-content,
.editor-styles-wrapper .seresa-content,
body.seresa-block-page {
    /* Colour */
    --seresa-bg-primary:    #0B1120;
    --seresa-bg-section:    #111827;
    --seresa-bg-card:       #1E293B;
    --seresa-bg-highlight:  #162032;
    --seresa-border:        #1E3A5F;

    --seresa-text-primary:   #E2E8F0;
    --seresa-text-secondary: #94A3B8;
    --seresa-text-heading:   #FFFFFF;

    --seresa-accent:       #22D3EE;
    --seresa-accent-hover: #06B6D4;
    --seresa-accent-glow:  rgba(34, 211, 238, 0.15);

    --seresa-tag-bg:   #1E3A5F;
    --seresa-tag-text: #7DD3FC;
    --seresa-success:  #4ADE80;
    --seresa-warning:  #FBBF24;

    /* Type */
    --seresa-font-heading: 'PosteramaTextW15', 'Helvetica Neue', Arial, sans-serif;
    --seresa-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* One consistent scale — used everywhere, no ad-hoc sizes. */
    --seresa-fs-h1:     clamp(2.5rem, 5vw, 4.25rem);
    --seresa-fs-h2:     clamp(1.875rem, 3.5vw, 2.625rem);
    --seresa-fs-h3:     clamp(1.375rem, 2.4vw, 1.75rem);
    --seresa-fs-h4:     1.3125rem;
    --seresa-fs-eyebrow:0.875rem;  /* section number / tiny label */
    --seresa-fs-body:   1.3125rem; /* 21px — readable, generous */
    --seresa-fs-small:  1.0625rem;
    --seresa-fs-metric: clamp(3rem, 6vw, 4.5rem);

    --seresa-lh-tight: 1.1;
    --seresa-lh-snug:  1.25;
    --seresa-lh-body:  1.65;

    --seresa-tracking-eyebrow: 0.18em;

    /* Spacing */
    --seresa-s-1: 0.5rem;
    --seresa-s-2: 1rem;
    --seresa-s-3: 1.5rem;
    --seresa-s-4: 2rem;
    --seresa-s-5: 3rem;
    --seresa-s-6: 4rem;
    /* Adjacent sections each contribute section-y, so the visible gap is 2x.
       At 1400px viewport: 3.5vw = 49px capped at 3rem → 48px per side →
       ~96px between sections. Lets each section breathe without going
       back to the cavernous gaps we had earlier. */
    --seresa-section-y: clamp(2rem, 3.5vw, 3rem);
    --seresa-block-y:   clamp(1.25rem, 2.5vw, 2rem);

    /* Layout — ONE width used everywhere, no exceptions.
       Desktop: 58vw centered, capped at 800px — tight enough that body
       paragraphs read at ~60 chars/line while still leaving room for the
       3-column metrics, gallery and before/after sections.
       Mobile:  95vw (override applied via @media below).
       Keeping the legacy --seresa-w-* aliases pointing at the same value so
       any older rule that still references them stays consistent. */
    --seresa-w-page:    min(58vw, 800px);
    --seresa-w-content: var(--seresa-w-page);
    --seresa-w-narrow:  var(--seresa-w-page);
    --seresa-w-wide:    var(--seresa-w-page);

    /* Shape */
    --seresa-radius:    0.5rem;
    --seresa-radius-lg: 0.75rem;
    --seresa-radius-pill: 999px;

    /* Motion */
    --seresa-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- 3. Base resets scoped to our content ------------ */

body.seresa-block-page {
    background: var(--seresa-bg-primary);
    color: var(--seresa-text-primary);
}

.seresa-content {
    font-family: var(--seresa-font-body);
    font-size: var(--seresa-fs-body);
    line-height: var(--seresa-lh-body);
    color: var(--seresa-text-primary);
    background: var(--seresa-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* First section absorbs the Bricks header clearance so the hero's
   gradient background reaches the very top — no flat band between
   the Bricks header and our content. The last section mirrors this
   on the bottom so the CTA gradient extends to meet the Bricks footer
   without a flat dark band in between. */
.seresa-content > .seresa-article > section:first-of-type {
    padding-top: clamp(9rem, 13vw, 12rem);
}
.seresa-content > .seresa-article > section:last-of-type {
    padding-bottom: clamp(4rem, 7vw, 6rem);
}
@media (max-width: 478px) {
    .seresa-content > .seresa-article > section:first-of-type {
        padding-top: clamp(7rem, 22vw, 9rem);
    }
    .seresa-content > .seresa-article > section:last-of-type {
        padding-bottom: clamp(3rem, 10vw, 5rem);
    }
}

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

.seresa-content img,
.seresa-content svg,
.seresa-content video {
    max-width: 100%;
    height: auto;
    display: block;
}

.seresa-content a {
    color: var(--seresa-accent);
    text-decoration: none;
    transition: color 0.2s var(--seresa-ease);
}
.seresa-content a:hover {
    color: var(--seresa-accent-hover);
}

/* ---------- 4. Typography (the single source of truth) -----
   IMPORTANT: every base rule uses :where() so it has element-zero
   specificity. That way a pattern class like .seresa-metric__value
   can override font-size with just (0,1,0) instead of needing
   (0,2,0) every time. */

.seresa-content :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--seresa-font-heading);
    color: var(--seresa-text-heading);
    font-weight: 600;
    line-height: var(--seresa-lh-tight);
    margin: 0 0 var(--seresa-s-3);
    letter-spacing: -0.005em;
}

.seresa-content :where(h1) {
    font-size: var(--seresa-fs-h1);
    line-height: var(--seresa-lh-tight);
}
.seresa-content :where(h2) {
    font-size: var(--seresa-fs-h2);
    line-height: var(--seresa-lh-snug);
}
.seresa-content :where(h3) {
    font-size: var(--seresa-fs-h3);
    line-height: var(--seresa-lh-snug);
}
.seresa-content :where(h4) {
    font-size: var(--seresa-fs-h4);
    line-height: var(--seresa-lh-snug);
}

.seresa-content :where(p) {
    margin: 0 0 var(--seresa-s-3);
    font-size: var(--seresa-fs-body);
    line-height: var(--seresa-lh-body);
}
.seresa-content :where(p:last-child) { margin-bottom: 0; }

.seresa-content :where(strong) { color: var(--seresa-text-heading); font-weight: 700; }
.seresa-content :where(em) { color: var(--seresa-text-primary); }

.seresa-content :where(ul, ol) {
    margin: 0 0 var(--seresa-s-3);
    padding-left: 1.25rem;
}
.seresa-content :where(li) { margin-bottom: var(--seresa-s-1); }

.seresa-content :where(blockquote) {
    border-left: 3px solid var(--seresa-accent);
    padding: var(--seresa-s-1) var(--seresa-s-3);
    margin: var(--seresa-s-4) 0;
    color: var(--seresa-text-secondary);
    font-style: italic;
}

/* ---------- 5. Layout primitives ---------------------------- */

.seresa-content > .seresa-article {
    /* Article fills viewport width; sections control their own width. */
    width: 100%;
}

/* All top-level blocks inside an article center via these classes.
   Specificity is bumped via `.seresa-content` so Bricks's `#brx-content`
   inline rules can't drag our column off-centre. */
.seresa-content .seresa-section {
    display: block;
    width: 100%;
    padding: var(--seresa-section-y) 0;
    margin: 0;
}
.seresa-content .seresa-section--card-bg   { background: var(--seresa-bg-section); }
.seresa-content .seresa-section--alt-bg    { background: var(--seresa-bg-highlight); }

/* THE one container. Every section uses it. No --narrow / --wide variants. */
.seresa-content .seresa-container {
    display: block;
    width: var(--seresa-w-page);
    max-width: var(--seresa-w-page);
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) {
    .seresa-content .seresa-container { width: 95vw; max-width: 95vw; }
}

/* WP alignfull / alignwide overrides — keep within our dark bg */
.seresa-content .alignfull {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.seresa-content .alignwide {
    width: var(--seresa-w-wide);
    max-width: 100%;
    margin-inline: auto;
}

/* Tighten WP's default vertical rhythm inside our scope */
.seresa-content .wp-block-group { margin: 0; }
.seresa-content .wp-block-group + .wp-block-group { margin-top: var(--seresa-block-y); }

/* ---------- 6. Pattern: Hero --------------------------------- */

.seresa-hero {
    /* padding-top is set by the :first-of-type rule above (absorbs the
       Bricks header clearance); bottom matches the rest of the page rhythm
       so the hero hands off cleanly to whatever section follows. */
    padding-top: var(--seresa-section-y);
    padding-bottom: var(--seresa-section-y);
    background:
        radial-gradient(70% 50% at 50% 0%, var(--seresa-accent-glow) 0%, transparent 60%),
        var(--seresa-bg-primary);
}
.seresa-hero__title {
    font-size: var(--seresa-fs-h1);
    line-height: var(--seresa-lh-tight);
    margin: 0 0 var(--seresa-s-3);
}
.seresa-hero__subtitle {
    font-size: 1.0625rem;
    color: var(--seresa-text-secondary);
    margin: 0 0 var(--seresa-s-4);
    max-width: 60ch;
}

/* ---------- 7. Pattern: Meta row (CLIENT / SOLUTION / …) ---- */

.seresa-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--seresa-s-4);
    padding: var(--seresa-s-3) 0;
    margin: 0 0 var(--seresa-s-4);
    border-top: 1px solid var(--seresa-border);
    border-bottom: 1px solid var(--seresa-border);
}
.seresa-meta__item {}
.seresa-meta__label {
    font-family: var(--seresa-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--seresa-accent);
    letter-spacing: var(--seresa-tracking-eyebrow);
    text-transform: uppercase;
    margin: 0 0 0.4rem;
}
.seresa-meta__value {
    font-family: var(--seresa-font-heading);
    font-size: 1.375rem;
    color: var(--seresa-text-heading);
    line-height: 1.25;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.seresa-meta__value small {
    display: block;
    font-family: var(--seresa-font-body);
    color: var(--seresa-text-secondary);
    font-weight: 400;
    font-size: 0.9375rem;
    margin-top: 0.3rem;
    letter-spacing: 0;
}

/* ---------- 8. Pattern: Metric cards ------------------------- */

.seresa-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--seresa-s-2);
    margin: var(--seresa-s-4) 0 0;
}
.seresa-metric {
    background:
        radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--seresa-accent) 10%, var(--seresa-bg-card)) 0%, var(--seresa-bg-card) 60%);
    border: 1px solid color-mix(in srgb, var(--seresa-accent) 30%, var(--seresa-border));
    border-radius: var(--seresa-radius);
    padding: var(--seresa-s-5) var(--seresa-s-4) var(--seresa-s-4);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 6px 24px -10px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.2s var(--seresa-ease), border-color 0.2s var(--seresa-ease), box-shadow 0.2s var(--seresa-ease);
}
.seresa-metric::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--seresa-accent);
    box-shadow: 0 0 12px var(--seresa-accent);
}
.seresa-metric:hover {
    transform: translateY(-3px);
    border-color: var(--seresa-accent);
    box-shadow:
        0 12px 32px -10px rgba(0, 0, 0, 0.7),
        0 0 0 1px var(--seresa-accent),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.seresa-metric__value {
    /* Dialled back from the "SUPER HERO" pass — -20% size, -50% weight,
       softer glow. Still prominent, but sits inside the design rather
       than fighting it. */
    font-family: var(--seresa-font-body);
    font-size: clamp(2.75rem, 6.4vw, 5rem);
    line-height: 0.95;
    color: var(--seresa-text-heading);
    font-weight: 400;
    margin: 0 0 var(--seresa-s-3);
    letter-spacing: -0.025em;
    text-shadow: 0 3px 20px rgba(34, 211, 238, 0.15);
}
.seresa-metric__label {
    font-size: var(--seresa-fs-body);
    color: var(--seresa-text-primary);
    margin: 0;
    line-height: 1.35;
    font-weight: 500;
}

/* ---------- 9. Pattern: Image gallery ----------------------- */

.seresa-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--seresa-s-2);
    margin: var(--seresa-block-y) 0;
    /* width comes from the .seresa-container parent — no override here */
}
.seresa-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--seresa-radius);
    border: 1px solid var(--seresa-border);
    aspect-ratio: 3 / 5; /* taller / more portrait */
}

/* ---------- 10. Pattern: Narrative section ------------------ */

.seresa-narrative {
    padding: var(--seresa-section-y) 0;
}
.seresa-eyebrow {
    display: block;
    font-family: var(--seresa-font-body);
    font-weight: 700;
    font-size: var(--seresa-fs-eyebrow);
    letter-spacing: var(--seresa-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--seresa-accent);
    margin: 0 0 var(--seresa-s-3);
}
.seresa-eyebrow + h1,
.seresa-eyebrow + h2,
.seresa-eyebrow + h3 {
    margin-top: 0;
}
.seresa-narrative h2 {
    border-bottom: 2px solid var(--seresa-accent);
    padding-bottom: var(--seresa-s-1);
    display: inline-block;
    margin-bottom: var(--seresa-s-4);
}

/* ---------- 11. Pattern: Highlight card --------------------- */

.seresa-highlight {
    background: var(--seresa-bg-card);
    border-left: 3px solid var(--seresa-accent);
    border-radius: var(--seresa-radius);
    padding: var(--seresa-s-4);
    margin: var(--seresa-block-y) 0;
}
.seresa-highlight h3,
.seresa-highlight h4 {
    margin-top: 0;
    color: var(--seresa-text-heading);
}
.seresa-highlight p:last-child { margin-bottom: 0; }

/* ---------- 12. Pattern: System diagram --------------------- */

.seresa-diagram {
    padding: var(--seresa-section-y) 0;
    background: var(--seresa-bg-section);
}
.seresa-diagram :where(h2) {
    margin-bottom: var(--seresa-s-3);
}
.seresa-diagram :where(img) {
    border-radius: var(--seresa-radius-lg);
    border: 1px solid var(--seresa-border);
}
.seresa-diagram__labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seresa-s-3);
    margin-top: var(--seresa-s-3);
    font-size: var(--seresa-fs-small);
    color: var(--seresa-text-secondary);
    letter-spacing: 0.04em;
}

/* ---------- 13. Pattern: Before / After --------------------- */

.seresa-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--seresa-s-4);
    margin: var(--seresa-block-y) 0;
}
.seresa-ba__col {
    padding: var(--seresa-s-4);
    border-radius: var(--seresa-radius);
    background: var(--seresa-bg-card);
}
.seresa-ba__col--before { border-top: 3px solid var(--seresa-text-secondary); }
.seresa-ba__col--after  { border-top: 3px solid var(--seresa-success); }
.seresa-ba__col h3 { font-size: var(--seresa-fs-h3); margin-bottom: var(--seresa-s-3); }
.seresa-ba__col ul { color: var(--seresa-text-primary); }
.seresa-ba__col--before { color: var(--seresa-text-secondary); }

/* ---------- 14. Pattern: Summary CTA ------------------------ */

.seresa-cta {
    padding: var(--seresa-section-y) 0;
    /* Wider/taller gradient so it fills the space between the CTA buttons
       and the Bricks footer, instead of leaving a flat dark band. */
    background:
        radial-gradient(90% 110% at 50% 100%, var(--seresa-accent-glow) 0%, transparent 65%),
        var(--seresa-bg-primary);
}
.seresa-cta :where(h2) {
    font-size: var(--seresa-fs-h2);
    margin-bottom: var(--seresa-s-3);
}
.seresa-cta :where(p) {
    color: var(--seresa-text-secondary);
    margin-bottom: var(--seresa-s-4);
    max-width: 65ch;
}
.seresa-cta__buttons {
    display: flex;
    gap: var(--seresa-s-2);
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* ---------- 15. Buttons ------------------------------------- */

/* Scoped under .seresa-content so they beat the generic
   `.seresa-content a { color: var(--seresa-accent) }` rule above. */
.seresa-content .wp-block-button__link,
.seresa-content a.seresa-btn,
.seresa-content .seresa-btn {
    display: inline-block;
    font-family: var(--seresa-font-body);
    font-size: var(--seresa-fs-body);
    font-weight: 600;
    padding: 0.85rem 1.5rem;
    border-radius: var(--seresa-radius);
    background: var(--seresa-accent);
    color: var(--seresa-bg-primary);
    border: 1px solid var(--seresa-accent);
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s var(--seresa-ease), color 0.2s var(--seresa-ease), transform 0.15s var(--seresa-ease);
}
.seresa-content .wp-block-button__link:hover,
.seresa-content a.seresa-btn:hover,
.seresa-content .seresa-btn:hover {
    background: var(--seresa-accent-hover);
    color: var(--seresa-bg-primary);
    transform: translateY(-1px);
}
.seresa-content .is-style-outline .wp-block-button__link,
.seresa-content a.seresa-btn--ghost,
.seresa-content .seresa-btn--ghost {
    background: transparent;
    color: var(--seresa-accent);
    border: 1px solid var(--seresa-accent);
}
.seresa-content .is-style-outline .wp-block-button__link:hover,
.seresa-content a.seresa-btn--ghost:hover,
.seresa-content .seresa-btn--ghost:hover {
    background: var(--seresa-accent-glow);
    color: var(--seresa-text-heading);
}

/* ---------- 15b. Pattern: Chart + 2x2 cards ------------------ */

.seresa-accent-text { color: var(--seresa-accent); }

.seresa-chart-cards h2 { margin-bottom: var(--seresa-s-3); }
.seresa-chart-cards > .seresa-container > p { margin-bottom: var(--seresa-block-y); max-width: 65ch; }

.seresa-chart {
    margin: 0 0 var(--seresa-block-y);
    background: var(--seresa-bg-card);
    border: 1px solid var(--seresa-border);
    border-radius: var(--seresa-radius-lg);
    overflow: hidden;
}
.seresa-chart :where(img) {
    width: 100%;
    height: auto;
    display: block;
}
.seresa-chart-placeholder {
    aspect-ratio: 16 / 9;
    background:
        repeating-linear-gradient(135deg,
            transparent 0 18px,
            color-mix(in srgb, var(--seresa-accent) 6%, transparent) 18px 36px),
        var(--seresa-bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--seresa-text-secondary);
    font-size: var(--seresa-fs-small);
    font-style: italic;
    padding: 2rem;
    letter-spacing: 0.02em;
}

.seresa-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--seresa-s-3);
}
.seresa-stat-card {
    background: var(--seresa-bg-card);
    border: 1px solid var(--seresa-border);
    border-radius: var(--seresa-radius);
    padding: var(--seresa-s-3);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon head"
        "icon body";
    column-gap: var(--seresa-s-3);
    row-gap: var(--seresa-s-1);
    transition: border-color 0.2s var(--seresa-ease), transform 0.2s var(--seresa-ease);
}
.seresa-stat-card:hover {
    border-color: var(--seresa-accent);
    transform: translateY(-2px);
}
.seresa-stat-card__icon {
    grid-area: icon;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--seresa-accent-glow);
    color: var(--seresa-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.seresa-stat-card__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}
.seresa-stat-card__head {
    grid-area: head;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--seresa-s-2);
    flex-wrap: wrap;
}
.seresa-stat-card__head h3 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
}
.seresa-stat-card__badge {
    font-family: var(--seresa-font-body);
    font-size: var(--seresa-fs-small);
    font-weight: 600;
    color: var(--seresa-accent);
    white-space: nowrap;
}
.seresa-stat-card p {
    grid-area: body;
    margin: 0;
    color: var(--seresa-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
}

@media (max-width: 768px) {
    .seresa-stats-grid { grid-template-columns: 1fr; }
    .seresa-stat-card {
        grid-template-columns: 1fr;
        grid-template-areas: "icon" "head" "body";
        row-gap: var(--seresa-s-2);
    }
}

/* ---------- 15c. Pattern: Data table ------------------------- */

.seresa-data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--seresa-bg-card);
    border: 1px solid var(--seresa-border);
    border-radius: var(--seresa-radius);
    overflow: hidden;
    margin: 0;
}
.seresa-data-table--half {
    max-width: 60%;
    margin-inline: auto;
}
.seresa-data-table :where(th, td) {
    padding: 0.85rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--seresa-border);
    font-family: var(--seresa-font-body);
}
.seresa-data-table tr:last-child :where(td) { border-bottom: none; }
.seresa-data-table :where(th) {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--seresa-tracking-eyebrow);
    color: var(--seresa-accent);
}
.seresa-data-table :where(td) {
    font-size: var(--seresa-fs-small);
    color: var(--seresa-text-primary);
}
.seresa-data-table :where(th:not(:first-child), td:not(:first-child)) {
    text-align: right;
}
.seresa-data-table .best {
    color: var(--seresa-success);
    font-weight: 700;
}

@media (max-width: 768px) {
    .seresa-data-table--half { max-width: 100%; }
}

/* ---------- 15d. Pattern: Side image + stat ----------------- */

.seresa-side-image {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2.2fr;
    gap: var(--seresa-s-4);
    align-items: start;
}
.seresa-side-image__col {
    display: flex;
    flex-direction: column;
    gap: var(--seresa-s-2);
}
.seresa-side-image__img {
    border-radius: var(--seresa-radius);
    border: 1px solid var(--seresa-border);
    overflow: hidden;
    margin: 0;
    background: var(--seresa-bg-card);
}
.seresa-side-image__img img {
    width: 100%;
    height: auto;
    display: block;
}
.seresa-stat-box {
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.35);
    border-radius: var(--seresa-radius);
    padding: var(--seresa-s-3) var(--seresa-s-2);
    text-align: center;
}
.seresa-stat-box__value {
    font-family: var(--seresa-font-body);
    font-size: clamp(2.25rem, 3.5vw, 2.75rem);
    line-height: 1;
    color: var(--seresa-success);
    font-weight: 800;
    margin: 0 0 var(--seresa-s-1);
    letter-spacing: -0.02em;
}
.seresa-stat-box__label {
    font-size: var(--seresa-fs-small);
    color: var(--seresa-text-secondary);
    margin: 0;
    line-height: 1.4;
}
.seresa-side-image__main h2 { margin: 0 0 var(--seresa-s-3); }
.seresa-side-image__footnote {
    font-size: var(--seresa-fs-body);
    color: var(--seresa-text-secondary);
    margin-top: var(--seresa-s-3);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .seresa-side-image { grid-template-columns: 1fr; }
}

/* ---------- 15e. Pattern: Pros / Cons + side image ----------- */

.seresa-pros-cons {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: var(--seresa-s-4);
    align-items: start;
    margin-top: var(--seresa-block-y);
}
.seresa-pros-cons__col {
    display: flex;
    flex-direction: column;
    gap: var(--seresa-s-2);
}
.seresa-pros,
.seresa-cons {
    border-radius: var(--seresa-radius);
    padding: var(--seresa-s-3) var(--seresa-s-4);
    border: 1px solid;
}
.seresa-pros {
    background: rgba(74, 222, 128, 0.07);
    border-color: rgba(74, 222, 128, 0.30);
}
.seresa-cons {
    background: rgba(248, 113, 113, 0.07);
    border-color: rgba(248, 113, 113, 0.30);
}
.seresa-pros__head,
.seresa-cons__head {
    display: flex;
    align-items: center;
    gap: var(--seresa-s-2);
    margin-bottom: var(--seresa-s-3);
}
.seresa-pros__head { color: var(--seresa-success); }
.seresa-cons__head { color: #f87171; }
.seresa-pros__head :where(h3),
.seresa-cons__head :where(h3) {
    margin: 0;
    color: inherit;
    font-size: 1.375rem;
}
.seresa-pros__icon,
.seresa-cons__icon {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.seresa-pros__icon { background: rgba(74, 222, 128, 0.20); }
.seresa-cons__icon { background: rgba(248, 113, 113, 0.20); }
.seresa-pros__icon svg,
.seresa-cons__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}
.seresa-pros :where(ul),
.seresa-cons :where(ul) {
    list-style: none;
    padding: 0;
    margin: 0;
}
.seresa-pros :where(li),
.seresa-cons :where(li) {
    padding-left: 1.75rem;
    position: relative;
    margin-bottom: var(--seresa-s-3);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--seresa-text-primary);
}
.seresa-pros :where(li:last-child),
.seresa-cons :where(li:last-child) { margin-bottom: 0; }
.seresa-pros :where(li)::before,
.seresa-cons :where(li)::before {
    content: '\2192';
    position: absolute;
    left: 0;
    font-weight: 700;
}
.seresa-pros :where(li)::before { color: var(--seresa-success); }
.seresa-cons :where(li)::before { color: #f87171; }

.seresa-pros-cons__img {
    border-radius: var(--seresa-radius);
    border: 1px solid var(--seresa-border);
    overflow: hidden;
    background: var(--seresa-bg-card);
    margin: 0;
    align-self: stretch;
}
.seresa-pros-cons__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .seresa-pros-cons { grid-template-columns: 1fr; }
}

/* ---------- 16. Status / utility ----------------------------- */

.seresa-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: var(--seresa-fs-small);
    font-weight: 600;
    border-radius: var(--seresa-radius-pill);
    line-height: 1.4;
}
.seresa-status--production { background: rgba(74, 222, 128, 0.15); color: var(--seresa-success); }
.seresa-status--beta       { background: rgba(251, 191, 36, 0.15); color: var(--seresa-warning); }
.seresa-status--soon       { background: rgba(148, 163, 184, 0.15); color: var(--seresa-text-secondary); }

/* ---------- 17. Responsive ---------------------------------- */

@media (max-width: 900px) {
    .seresa-gallery   { grid-template-columns: repeat(2, 1fr); }
    .seresa-ba        { grid-template-columns: 1fr; }
    .seresa-metrics   { grid-template-columns: 1fr; gap: var(--seresa-s-3); }
}

@media (max-width: 600px) {
    .seresa-content { font-size: 1rem; }
    .seresa-hero    { padding: 3rem 0 2rem; }
    .seresa-gallery { grid-template-columns: 1fr; }
}

/* ---------- 18. Editor-only tweaks -------------------------- */

.editor-styles-wrapper.seresa-block-page,
.editor-styles-wrapper .seresa-content {
    background: var(--seresa-bg-primary);
    color: var(--seresa-text-primary);
}