/*
 * mbre-newsletter-front.css
 * All front-end styles for the MBRE Newsletter V1 template.
 *
 * SCOPE: Every rule is prefixed with .post-template-single-mbre-newsletter-v1
 * so no existing page or post on the site is affected.
 *
 * AVADA RULE: No bare h1-h6, p, or a selectors at global scope.
 * All heading/paragraph/link styles here are either:
 *   (a) scoped to .mbre-nl-sections so Avada's globals still apply
 *       to all other content, or
 *   (b) using class selectors (.nl-h2, .aio-summary, etc.)
 *
 * COVERAGE:
 *   1.  Page + hero wrapper
 *   2.  Hero image + overlay + eyebrow
 *   3.  AIO card + meta row + attribution box
 *   4.  Newsletter sections wrapper (base typography reset)
 *   5.  Layout utilities: nl-wrap, nl-section, eyebrow, nl-h2
 *   6.  Stat pills (S2)
 *   7.  Personal intro (S3)
 *   8.  Tables (S4)
 *   9.  NL Signup (S5)
 *   10. Commentary (S6)
 *   11. Images + Slider (S7/S8)
 *   12. Chart grid (S9)
 *   13. Spotlight (S9)
 *   14. News (S10)
 *   15. Previous NL cards (S11)
 *   16. Market Report cards (S12)
 *   17. Research Library (S13)
 *   18. CTA block (S14)
 *   19. Search box (S16)
 *   20. FAQs (S17)
 *   21. Image pair
 *   22. Mobile breakpoints
 */

/* ─────────────────────────────────────────────────────────────────── */
/* 0. CSS VARIABLES (scoped so they don't conflict with Avada)         */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .mbre-nl-sections,
.post-template-single-mbre-newsletter-v1 .mbre-nl-card {
    --blue:    #00A3E0;
    /* --nl- aliases used by template inline styles (e.g. var(--nl-muted)) */
    --nl-blue:    #00A3E0;
    --nl-black:   #000000;
    --nl-ink:     #1c1c1c;
    --nl-muted:   #5a5a5a;
    --nl-faint:   #8a8a8a;
    --nl-white:   #ffffff;
    --nl-off:     #f7f7f7;
    --nl-rule:    #e2e2e2;
    --nl-rule-md: #c8c8c8;
    --blue-dk: #007fb0;
    --blue-lt: #e8f6fc;
    --black:   #000000;
    --ink:     #1c1c1c;
    --muted:   #5a5a5a;
    --faint:   #8a8a8a;
    --white:   #ffffff;
    --off:     #f7f7f7;
    --rule:    #e2e2e2;
    --rule-md: #c8c8c8;
    --pos:     #1a6b3c;
    --neg:     #8b1a1a;
}


/* ─────────────────────────────────────────────────────────────────── */
/* 1. PAGE WRAPPER                                                      */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .mbre-nl-wrap { max-width: 100%; margin: 0 auto; }
.mbre-nl-wrap a { color: #3fa5dc; font-weight: 400; }

/* ─────────────────────────────────────────────────────────────────── */
/* 2. HERO                                                              */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .mbre-nl-hero-wrap { position: relative; width: 100%; overflow: hidden; }

.post-template-single-mbre-newsletter-v1 .mbre-nl-hero-img {
    width: 100%; height: clamp(300px, 45vw, 520px);
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.nl-wrap a { color: #3fa5dc; font-weight: 400; }
.post-template-single-mbre-newsletter-v1 .mbre-nl-hero-placeholder {
    width: 100%; height: clamp(300px, 45vw, 520px);
    background: linear-gradient(135deg, #0a1f35 0%, #003d5c 60%, #005c8a 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: rgba(255,255,255,0.35); letter-spacing: 0.1em; font-style: italic;
    font-family: 'DM Sans', Arial, sans-serif;
}

.post-template-single-mbre-newsletter-v1 .mbre-nl-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.56) 0%, rgba(0,0,0,0.12) 60%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 40px 52px; color: #ffffff;
}

/* Eyebrow: span is permitted per Avada rules (not a global tag) */
.post-template-single-mbre-newsletter-v1 .mbre-nl-hero-eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-family: 'DM Sans', Arial, sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: #00A3E0; margin-bottom: 12px;
}
.post-template-single-mbre-newsletter-v1 .mbre-nl-hero-eyebrow::before {
    content: ''; display: block; width: 22px; height: 1px; background: #00A3E0; flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────── */
/* 3. AIO CARD                                                          */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .mbre-nl-card {
    position: relative; z-index: 2;
    max-width: 880px; margin: -32px auto 0 auto; padding: 28px;
    background: #f7f7f7; border-top: 3px solid #00A3E0;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.post-template-single-mbre-newsletter-v1 .mbre-nl-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
    font-family: 'DM Sans', Arial, sans-serif; font-size: 12px; color: #8A8A8A;
    margin-bottom: 16px; line-height: 1.6;
}
.post-template-single-mbre-newsletter-v1 .mbre-nl-byline { margin-left: auto; }

/* aio-summary: class selector permitted */
.post-template-single-mbre-newsletter-v1 .aio-summary {
    font-size: 18px; line-height: 1.82; color: #1c1c1c; margin: 0 0 24px 0; max-width: 740px;
}

.post-template-single-mbre-newsletter-v1 .mbre-rule {
    border: none; border-top: 1px solid #dedede; margin: 0 0 20px 0;
}


/* ─────────────────────────────────────────────────────────────────── */
/* 4. NEWSLETTER SECTIONS WRAPPER: base typography                    */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .mbre-nl-sections { -webkit-font-smoothing: antialiased;}


/* ─────────────────────────────────────────────────────────────────── */
/* 5. LAYOUT UTILITIES                                                  */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .nl-wrap { margin: 0 auto; }
.post-template-single-mbre-newsletter-v1 .nl-section { padding: 30px 0; }
.post-template-single-mbre-newsletter-v1 .nl-section:last-child { border-bottom: none; padding-bottom: 60px;}
.post-template-single-mbre-newsletter-v1 .nl-section--tight { padding: 30px 0; }
.post-template-single-mbre-newsletter-v1 .nl-section--flush { padding: 30px 0;; }
.post-template-single-mbre-newsletter-v1 .nl-rule { border: none; border-top: 1px solid #e2e2e2; }

/* ── TABLE OF CONTENTS ANCHORS ──────────────────────────────────────
 * Every newsletter section carries an id so a contents list at the top of
 * the page can jump to it. scroll-margin-top keeps the eyebrow and heading
 * clear of Avada's sticky header when a jump lands. Tune the two values
 * below against the real header height if the offset looks off.
 * .nl-anchor is the zero-height marker emitted before an optional custom
 * HTML block, which is left unwrapped so it keeps its own layout.           */
.post-template-single-mbre-newsletter-v1 .nl-section[id],
.post-template-single-mbre-newsletter-v1 .nl-section--tight[id],
.post-template-single-mbre-newsletter-v1 .nl-section--flush[id],
.post-template-single-mbre-newsletter-v1 .nl-anchor,
.post-template-single-mbre-newsletter-v1 #property-search { scroll-margin-top: 100px; }
.post-template-single-mbre-newsletter-v1 .nl-anchor { display: block; height: 0; overflow: hidden; }
.post-template-single-mbre-newsletter-v1 .eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: nowrap; }
.post-template-single-mbre-newsletter-v1 .eyebrow-text { font-size: 14px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #00A3E0; white-space: nowrap; flex-shrink: 0; }
.post-template-single-mbre-newsletter-v1 .eyebrow-line { flex: 1; min-width: 8px; height: 1px; background: #e2e2e2; }
.post-template-single-mbre-newsletter-v1 .nl-lede { margin-bottom: 36px; }
.post-template-single-mbre-newsletter-v1 .nl-intro { margin-bottom: 36px; border-left: 3px solid #00A3E0; padding-left: 20px; }
.post-template-single-mbre-newsletter-v1 .mbre-nl-sections .pos { color: #1a6b3c; font-weight: 500; }
.post-template-single-mbre-newsletter-v1 .mbre-nl-sections .neg { color: #8b1a1a; font-weight: 500; }
.post-template-single-mbre-newsletter-v1 .mbre-nl-sections .neut { color: #5a5a5a; }
.post-template-single-mbre-newsletter-v1 .link-arrow::after { content: ' →'; }


/* ─────────────────────────────────────────────────────────────────── */
/* 6. STAT PILLS (S2)                                                   */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .stat-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.post-template-single-mbre-newsletter-v1 .stat-pill { flex: 1 1 140px; min-width: 130px; max-width: 25%; padding: 30px 20px 30px; background: color(srgb 0.67 0.91 1 / 0.08); border: 1px solid #e2e2e2; border-top: 3px solid #00A3E0; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.post-template-single-mbre-newsletter-v1 .sp-val { font-size: 28px; font-weight: 700; color: #212121; line-height: 1; }
.post-template-single-mbre-newsletter-v1 .sp-label { font-size: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5a5a5a; line-height: 1.4; }
.post-template-single-mbre-newsletter-v1 .sp-context { font-size: 16px; font-weight: 500; line-height: 1.3; }
.post-template-single-mbre-newsletter-v1 .sp-context.pos { color: #1a6b3c; }
.post-template-single-mbre-newsletter-v1 .sp-context.neg { color: #8b1a1a; }
.post-template-single-mbre-newsletter-v1 .sp-context.blue { color: #00A3E0; }
.post-template-single-mbre-newsletter-v1 .sp-context.muted { color: #8a8a8a; }
.post-template-single-mbre-newsletter-v1 .stat-pills-placeholder { font-size: 16px; color: #8a8a8a; margin-top: 10px; margin-bottom: 0; line-height: 1.5; }


/* ─────────────────────────────────────────────────────────────────── */
/* 7. PERSONAL INTRO (S3)                                               */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .personal-intro { margin-top: 28px; }
.personal-intro p { margin-bottom: 25px;}
.post-template-single-mbre-newsletter-v1 .sign-off { font-size: 18px; color: #1c1c1c; margin-top: 12px; }


/* ─────────────────────────────────────────────────────────────────── */
/* 8. TABLES (S4)                                                       */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .tbl-label { display: flex; align-items: center; gap: 0; margin-bottom: 0; }
.post-template-single-mbre-newsletter-v1 .tbl-label-text { font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; background: #000000; padding: 6px 16px; }
.post-template-single-mbre-newsletter-v1 .tbl-label-line { flex: 1; height: 1px; background: #c8c8c8; }
.post-template-single-mbre-newsletter-v1 .tbl-block { margin-bottom: 40px; }
.post-template-single-mbre-newsletter-v1 .tbl-block:last-of-type { margin-bottom: 0; }
.post-template-single-mbre-newsletter-v1 .tbl-sub { font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #00A3E0; margin-bottom: 0; padding: 8px 0 0 0; display: block; }
/* Horizontal scroll container for wide tables. overflow-x is the axis that
   matters; naming it explicitly also makes the >3-column mobile rule in
   section 21 able to switch it back off. */
.post-template-single-mbre-newsletter-v1 .nl-tbl-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Mobile scroll hint. Hidden by default at every width: the front-end script
   adds .is-on only when the labelled element genuinely overflows (or when the
   hint is marked --always, for cross-origin chart embeds we cannot measure).
   All visible styling lives in the 660px block in section 21. */
.post-template-single-mbre-newsletter-v1 .nl-scroll-hint{ display: none; }
.post-template-single-mbre-newsletter-v1 .nl-chart-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-template-single-mbre-newsletter-v1 table.nl-tbl { width: 100%; border-collapse: collapse; font-size: 17px; }
.post-template-single-mbre-newsletter-v1 table.nl-tbl thead tr { background: #f7f7f7; }
.post-template-single-mbre-newsletter-v1 table.nl-tbl thead th { font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #5a5a5a; padding: 11px 15px; text-align: left; border-bottom: 2px solid #c8c8c8; white-space: nowrap; }
.post-template-single-mbre-newsletter-v1 table.nl-tbl thead th:not(:first-child) { text-align: right; }
.post-template-single-mbre-newsletter-v1 table.nl-tbl tbody tr { border-bottom: 1px solid #e2e2e2; }
.post-template-single-mbre-newsletter-v1 table.nl-tbl tbody tr:last-child { border-bottom: none; }
.post-template-single-mbre-newsletter-v1 table.nl-tbl tbody tr:hover { background: #fafafa; }
.post-template-single-mbre-newsletter-v1 table.nl-tbl tbody td { padding: 11px 15px; color: #1c1c1c; vertical-align: middle; line-height: 1.5;text-transform: none; letter-spacing: 0;font-family: Montserrat, Arial, Helvetica, sans-serif; }
.post-template-single-mbre-newsletter-v1 table.nl-tbl tbody td:first-child { font-weight: 500; color: #000000; font-size: 16px; }
.post-template-single-mbre-newsletter-v1 table.nl-tbl tbody td:not(:first-child) { text-align: right; font-size: 17px; }
.post-template-single-mbre-newsletter-v1 .nl-tbl--dense tbody td { padding: 9px 12px; font-size: 15px; }
.post-template-single-mbre-newsletter-v1 .nl-tbl--dense tbody td:first-child { font-size: 14px; }
.post-template-single-mbre-newsletter-v1 .nl-tbl--dense thead th { padding: 9px 12px; font-size: 12px; }
.post-template-single-mbre-newsletter-v1 .tbl-source { font-size: 16px; color: #8a8a8a; margin-top: 10px; font-style: italic; line-height: 1.6; margin-bottom:25px !important;font-style: italic; }

/* InfoSparks iframes */
.post-template-single-mbre-newsletter-v1 .iframe-block { margin-top: 48px; }
.post-template-single-mbre-newsletter-v1 .iframe-intro { font-size: 18px; color: #5a5a5a; line-height: 1.7; margin-bottom: 14px; }
.post-template-single-mbre-newsletter-v1 .iframe-responsive { position: relative; width: 100%; overflow: hidden; background: #f7f7f7; border: 1px solid #e2e2e2; }
.post-template-single-mbre-newsletter-v1 .iframe-responsive iframe { width: 100%; min-height: 400px; border: 0; display: block; }
.post-template-single-mbre-newsletter-v1 .iframe-source { font-size: 13px; color: #8a8a8a; font-style: italic; margin-top: 10px; padding-bottom: 48px; }

/* ─────────────────────────────────────────────────────────────────── */
/* 9. NL SIGNUP (S5)                                                    */
/* ─────────────────────────────────────────────────────────────────── */
/* Two column block: copy + credentials left, form panel right. Replaces
   the old single centred column, which left the right half of the black
   panel empty and opened large vertical gaps between the stacked items.
   Form control styling is intentionally NOT set here. See the note at
   the end of this section. */

/* Percentage flex bases below assume border-box, so declare it here rather
   than relying on the theme reset. Without it the padding pushes the two
   columns past 100% and the form panel wraps under the copy. */
.post-template-single-mbre-newsletter-v1 .nl-signup,
.post-template-single-mbre-newsletter-v1 .signup-left,
.post-template-single-mbre-newsletter-v1 .signup-right,
.post-template-single-mbre-newsletter-v1 .signup-proof,
.post-template-single-mbre-newsletter-v1 .proof-item { box-sizing: border-box; }

.post-template-single-mbre-newsletter-v1 .nl-signup { background: #000000; display: flex; flex-wrap: wrap; align-items: stretch; }
.post-template-single-mbre-newsletter-v1 .signup-left { flex: 1 1 56%; min-width: 0; padding: 40px 44px 40px 52px; display: flex; flex-direction: column; justify-content: center; }
/* No form shortcode set → left column takes the full width. */
.post-template-single-mbre-newsletter-v1 .signup-left:only-child { flex-basis: 100%; }
.post-template-single-mbre-newsletter-v1 .signup-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #00A3E0; margin-bottom: 12px; }
.post-template-single-mbre-newsletter-v1 .signup-left h2 { color: #ffffff; margin-bottom: 14px; }
.post-template-single-mbre-newsletter-v1 .signup-left p { font-weight: 400; color: #ffffff;margin: 0; }
.post-template-single-mbre-newsletter-v1 .signup-lede { line-height: 1.6; margin-bottom: 25px !important; }

/* Credential strip: three equal columns between hairline rules. Fills the
   vertical space the old stacked block left empty. */
.post-template-single-mbre-newsletter-v1 .signup-proof { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 18px; padding: 0; border-top: 1px solid rgba(255,255,255,0.24); border-bottom: 1px solid rgba(255,255,255,0.24); }
.post-template-single-mbre-newsletter-v1 .proof-item { flex: 1 1 33.333%; min-width: 0; display: flex; flex-direction: column; padding: 14px 14px 14px 0; }
.post-template-single-mbre-newsletter-v1 .proof-val { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: #00A3E0; line-height: 1.1; }
.post-template-single-mbre-newsletter-v1 .proof-lbl { font-size: 14px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.66); margin-top: 6px; }

/* Archive link: plain inline link, not a button. */
.post-template-single-mbre-newsletter-v1 .signup-archive { font-size: 16px; line-height: 1.5; margin-bottom: 0 !important; margin-top: 15px !important;}
.post-template-single-mbre-newsletter-v1 .signup-archive a { color: #00A3E0; }
.post-template-single-mbre-newsletter-v1 .signup-archive a:hover { color: #ffffff; }

/* Form panel */
.post-template-single-mbre-newsletter-v1 .signup-right { flex: 1 1 44%; min-width: 0; padding: 40px 52px 40px 44px; background: #0d0d0d; border-left: 3px solid #00A3E0; display: flex; flex-direction: column; justify-content: center; }
.post-template-single-mbre-newsletter-v1 .signup-form-head { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 6px; }
.post-template-single-mbre-newsletter-v1 .signup-form-sub { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.66); margin-bottom: 18px; }
.post-template-single-mbre-newsletter-v1 .signup-fine { font-size: 14px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,0.66); text-align: left; margin: 14px 0 0 !important; text-align:center; }
/* ── FORM CONTROLS ────────────────────────────────────────────────────
   Styles the Avada/Fusion form (188983) output inside the dark signup panel.
   The real form renders .fusion-form-field / .fusion-form-input / a
   .fusion-button.form-form-submit, not the old .field-wrap / .signup-btn
   markup, so these selectors target the Avada classes directly. */

/* Hide the duplicate field labels; the placeholders carry the field names. */
.post-template-single-mbre-newsletter-v1 .signup-right .fusion-form-field label { display: none !important; }

/* Even spacing between fields, driven by the field wrapper. */
.post-template-single-mbre-newsletter-v1 .signup-right .fusion-form-field { margin-bottom: 18px !important;}
.post-template-single-mbre-newsletter-v1 .signup-right .fusion-form-submit-field { margin-bottom: 0 !important; }

/* White inputs with dark text; identical padding, height and spacing on every field. */
.post-template-single-mbre-newsletter-v1 .signup-right .fusion-form-input {
    width: 100%;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    padding: 13px 17px !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: #181b20 !important;
    outline: none;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.post-template-single-mbre-newsletter-v1 .signup-right .fusion-form-input:focus { border-color: #00A3E0 !important; }
.post-template-single-mbre-newsletter-v1 .signup-right .fusion-form-input::placeholder { color: #666666 !important; opacity: 1; }

/* Submit button: full-width accent bar. */
.post-template-single-mbre-newsletter-v1 .signup-right button.form-form-submit { width: 100% !important; justify-content: center; }
.post-template-single-mbre-newsletter-v1 .signup-right button.form-form-submit:hover { background: #007fb0 !important; }
.post-template-single-mbre-newsletter-v1 .signup-right button.form-form-submit:hover span { color: #ffffff !important; font-weight: 600; }

/* Signup at 1024: tighten the padding before the columns stack */
@media (max-width: 1024px) {
    .post-template-single-mbre-newsletter-v1 .signup-left { padding: 32px 30px 32px 34px; }
    .post-template-single-mbre-newsletter-v1 .signup-right { padding: 32px 34px 32px 30px; }
}


/* ─────────────────────────────────────────────────────────────────── */
/* 10. COMMENTARY (S6)                                                  */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .commentary-cred-bar { background: #f7f7f7; border: 1px solid #e2e2e2; padding: 16px 24px; display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.post-template-single-mbre-newsletter-v1 .commentary-headshot { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.post-template-single-mbre-newsletter-v1 .commentary-cred-name { font-weight: 500; color: #000000; display: block; }
.post-template-single-mbre-newsletter-v1 .commentary-cred-role { color: #5a5a5a; display: block;font-size: 18px; }
.post-template-single-mbre-newsletter-v1 .commentary-body p { margin-bottom: 20px; }
.post-template-single-mbre-newsletter-v1 .commentary-pull { font-size: 20px; font-style: italic; background: #e8f6fc; border-left: 3px solid #00A3E0; padding: 20px 24px; margin: 28px 0; font-weight: 500; }


/* ─────────────────────────────────────────────────────────────────── */
/* 11. IMAGES + SLIDER (S7/S8)                                          */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .mid-image-placeholder { width: 100%; height: clamp(240px, 36vw, 420px); background: linear-gradient(135deg, #0a1f35 0%, #003d5c 60%); display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(255,255,255,0.3); letter-spacing: 0.1em; font-style: italic; }
.post-template-single-mbre-newsletter-v1 .mid-image-caption { text-align: center; font-size: 13px; color: #8a8a8a; padding: 10px 0 0; font-style: italic; }
.post-template-single-mbre-newsletter-v1 .slider-placeholder { width: 100%; height: clamp(260px, 40vw, 480px); background: linear-gradient(135deg, #0a1f35 0%, #003d5c 40%, #005c8a 100%); display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(255,255,255,0.35); letter-spacing: 0.1em; font-style: italic; position: relative; }
.post-template-single-mbre-newsletter-v1 .slider-placeholder::after { content: '◄ ►'; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 18px; color: rgba(255,255,255,0.4); letter-spacing: 24px; }
.post-template-single-mbre-newsletter-v1 .img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.post-template-single-mbre-newsletter-v1 .img-pair-item { background: linear-gradient(135deg, #0a1f35, #003d5c); min-height: 220px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(255,255,255,0.3); font-style: italic; overflow: hidden; }
.post-template-single-mbre-newsletter-v1 .img-pair-item img { width: 100%; height: 100%; object-fit: cover; }
.post-template-single-mbre-newsletter-v1 .img-pair-caption { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.post-template-single-mbre-newsletter-v1 .img-pair-caption p { font-size: 13px; color: #8a8a8a; font-style: italic; padding: 8px 4px 0; }


/* ─────────────────────────────────────────────────────────────────── */
/* 12. CHART GRID (S9)                                                  */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e2e2e2; margin-top: 32px; }
.post-template-single-mbre-newsletter-v1 .chart-card { background: #f7f7f7; padding: 24px 24px 22px; }
/* Grid items default to min-width:auto, which lets an oversized chart widen its
   own column instead of scrolling inside it. min-width:0 keeps the card on the
   grid track so .nl-chart-scroll can do its job. */
.post-template-single-mbre-newsletter-v1 .chart-card { min-width: 0; }
.post-template-single-mbre-newsletter-v1 .nl-chart-scroll { max-width: 100%; }
.post-template-single-mbre-newsletter-v1 .chart-card:hover { background: #DBE9FD; }
.post-template-single-mbre-newsletter-v1 .chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.post-template-single-mbre-newsletter-v1 .chart-num { font-size: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #00A3E0; }
.post-template-single-mbre-newsletter-v1 .chart-metric { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; color: #000000; line-height: 1.3; text-align: right; }
.post-template-single-mbre-newsletter-v1 .chart-method { font-size: 16px; text-align: right; margin-top: 2px; font-style: italic;font-weight: 500; }
.post-template-single-mbre-newsletter-v1 .chart-val-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e2e2e2; }
.post-template-single-mbre-newsletter-v1 .chart-val { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700; color: #000000; line-height: 1.3; }
.post-template-single-mbre-newsletter-v1 .chart-yoy { font-size: 16px; font-weight: 600; padding: 3px 9px;}
.post-template-single-mbre-newsletter-v1 .yoy-up { background: rgba(26,107,60,0.09); color: #1a6b3c; }
.post-template-single-mbre-newsletter-v1 .yoy-dn { background: rgba(139,26,26,0.09); color: #8b1a1a; }
.post-template-single-mbre-newsletter-v1 .yoy-fl { background: #f7f7f7; color: #5a5a5a; }
.post-template-single-mbre-newsletter-v1 .chart-placeholder { background: #f7f7f7; border: 1px dashed #c8c8c8; height: 136px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 12px; color: #8a8a8a; font-style: italic; text-align: center; padding: 14px; }
.post-template-single-mbre-newsletter-v1 .nl-section .nl-wrap .chart-grid .chart-card .chart-caption-bottom{ margin: 0; margin-top: 15px; font-size: 16px; }
/* Per-chart H3. On a full-width chart it is its own row above the chart grid;
   on a 2-col grid chart it stays inside the card above the embed. */
.post-template-single-mbre-newsletter-v1 .chart-h3 { font-size: 18px; font-weight: 700; color: #000000; margin: 60px 0 12px;text-transform: uppercase; }
.post-template-single-mbre-newsletter-v1 .chart-card .chart-h3 { margin: 0 0 12px; }

/* Chart commentary and combined source.
   On a full-width chart these render as their own rows between the chart grids;
   on a 2-col grid chart they stay inside the card. The selectors are not scoped
   to .chart-card so one rule covers both placements. */
.post-template-single-mbre-newsletter-v1 .chart-commentary { border-left: 3px solid #00A3E0; padding-left: 22px; margin: 26px 0 26px 0; }
.post-template-single-mbre-newsletter-v1 .chart-combined-source { margin: 0px 0 26px 0; font-size: 16px; color: #8a8a8a; font-style: italic; line-height: 1.6; }
.post-template-single-mbre-newsletter-v1 .chart-commentary > *:last-child,
.post-template-single-mbre-newsletter-v1 .chart-combined-source > *:last-child { margin-bottom: 0; }
/* Inside a card the blocks sit under the trailing caption, so they need top
   spacing and no trailing gap against the card's own padding. */
.post-template-single-mbre-newsletter-v1 .chart-card .chart-commentary,
.post-template-single-mbre-newsletter-v1 .chart-card .chart-combined-source { margin: 15px 0 0 0; }


/* ─────────────────────────────────────────────────────────────────── */
/* 13. SPOTLIGHT (S9)                                                   */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .pr-spotlight { background: #000000; padding: 40px 48px; margin-top: 32px; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.post-template-single-mbre-newsletter-v1 .pr-spotlight-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #00A3E0; margin-bottom: 12px; }
.post-template-single-mbre-newsletter-v1 .pr-spotlight h3 { font-family: 'Playfair Display', serif; font-size: clamp(17px, 2.5vw, 21px); font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 10px; }
.post-template-single-mbre-newsletter-v1 .pr-spotlight p { font-size: 20px; color: rgba(255,255,255,0.58); line-height: 1.7; }
.post-template-single-mbre-newsletter-v1 .pr-links { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; align-items: flex-end; border-left: 1px solid rgba(255,255,255,0.08); padding-left: 36px; }
.post-template-single-mbre-newsletter-v1 .pr-link { font-size: 15px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #00A3E0; text-decoration: none; white-space: nowrap; }


/* ─────────────────────────────────────────────────────────────────── */
/* 14. NEWS (S10)                                                       */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .news-intro { margin-bottom: 36px; border-left: 3px solid #00A3E0; padding-left: 18px; }
.post-template-single-mbre-newsletter-v1 .news-featured { background: #000000; padding: 34px 40px; margin-bottom: 4px; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; text-decoration: none; }
.post-template-single-mbre-newsletter-v1 .news-featured:hover { opacity: 0.92; }
.post-template-single-mbre-newsletter-v1 .news-feat-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #00A3E0; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.post-template-single-mbre-newsletter-v1 .news-feat-tag::before { content:''; display:block; width:20px; height:1px; background:#00A3E0; }
.post-template-single-mbre-newsletter-v1 .news-featured h3 { font-family: 'Playfair Display', serif; font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 10px; }
.post-template-single-mbre-newsletter-v1 .news-featured p { color: rgba(255,255,255,0.58); }
.post-template-single-mbre-newsletter-v1 .news-feat-cta { display: inline-block; font-size: 18px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: #00A3E0; border-bottom: 1px solid rgba(0,163,224,0.35); }
.post-template-single-mbre-newsletter-v1 .news-feat-price { text-align: center; flex-shrink: 0; border-left: 1px solid rgba(255,255,255,0.30); padding-left: 30px; }
.post-template-single-mbre-newsletter-v1 .news-feat-price .pv { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: #00A3E0; display: block; line-height: 1; }
.post-template-single-mbre-newsletter-v1 .news-feat-price .pl { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.58); display: block; margin-top: 6px; }
.post-template-single-mbre-newsletter-v1 .news-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-bottom: 40px; }
.post-template-single-mbre-newsletter-v1 .nstat { background: #f7f7f7; border-top: 2px solid #000000; padding: 18px 20px; text-align: center; }
.post-template-single-mbre-newsletter-v1 .nstat .nv { font-family: 'Playfair Display', serif; font-size: clamp(19px, 3vw, 27px); font-weight: 700; color: #00A3E0; display: block; line-height: 1; margin-bottom: 5px; }
.post-template-single-mbre-newsletter-v1 .nstat .nl2 { font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a8a8a; line-height: 1.4; }
.post-template-single-mbre-newsletter-v1 .cat-header { display: flex; align-items: center; gap: 0; margin-bottom: 0; }
.post-template-single-mbre-newsletter-v1 .cat-name { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; background: #3fa5dc; padding: 6px 16px; white-space: nowrap; }
.post-template-single-mbre-newsletter-v1 .cat-line { flex: 1; height: 1px; background: #e2e2e2; }
.post-template-single-mbre-newsletter-v1 .cat-block { margin-bottom: 36px; }
.post-template-single-mbre-newsletter-v1 .article-list { display: flex; flex-direction: column; }
.post-template-single-mbre-newsletter-v1 .article-row { display: grid; grid-template-columns: 1fr 0px; }
.post-template-single-mbre-newsletter-v1 .article-row:not(:last-child){ border-bottom: 1px solid #e2e2e2; }
.post-template-single-mbre-newsletter-v1 .article-row:hover { background: #fafafa; }
.post-template-single-mbre-newsletter-v1 .art-accent { width: 3px; background: transparent; transition: background 0.15s; }
.post-template-single-mbre-newsletter-v1 .article-row:hover .art-accent { background: #00A3E0; }
.post-template-single-mbre-newsletter-v1 .article-row.hl .art-accent { background: #00A3E0; }
.post-template-single-mbre-newsletter-v1 .art-inner { padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.post-template-single-mbre-newsletter-v1 .art-inner--with-img { grid-template-columns: 88px 1fr auto; }
.post-template-single-mbre-newsletter-v1 .art-thumb { width: 88px; height: 66px; object-fit: cover; flex-shrink: 0; background: #f7f7f7; border: 1px solid #e2e2e2; }
.post-template-single-mbre-newsletter-v1 .src-badge { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #00A3E0; background: #e8f6fc; padding: 3px 9px; margin-bottom: 6px; }
.post-template-single-mbre-newsletter-v1 .art-inner h3 { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600; color: #000000; line-height: 1.35; margin-bottom: 5px; }
.post-template-single-mbre-newsletter-v1 .read-lnk { flex-shrink: 0; font-size: 16px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #00A3E0; text-decoration: none; border-bottom: 1px solid rgba(0,163,224,0.35); white-space: nowrap; align-self: center; }

/* Details-based article rows (expandable items with summary) */
.post-template-single-mbre-newsletter-v1 details.article-row summary { list-style: none; cursor: pointer; padding: 18px 20px; display: flex; gap: 18px; align-items: flex-start;padding-bottom: 50px; padding-top: 40px; }
.post-template-single-mbre-newsletter-v1 details.article-row summary::-webkit-details-marker { display: none; }
.post-template-single-mbre-newsletter-v1 details.article-row summary::marker { display: none; }
.post-template-single-mbre-newsletter-v1 details.article-row summary h3 { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 600; margin-bottom: 5px; }
.post-template-single-mbre-newsletter-v1 details.article-row summary h3 a { color: #000000;font-weight: 500; }
.post-template-single-mbre-newsletter-v1 details.article-row[open] summary h3 { color: #00A3E0; }
.post-template-single-mbre-newsletter-v1 details.article-row summary p { margin-top: 20px; margin-bottom: 10px; }
.post-template-single-mbre-newsletter-v1 details.article-row:hover { background: #fafafa; }

/* Featured story image column */
.post-template-single-mbre-newsletter-v1 .news-feat-price img { width: 160px; height: 120px; object-fit: cover; display: block; }


/* ─────────────────────────────────────────────────────────────────── */
/* 15. PREVIOUS NL CARDS (S11)                                          */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .card-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e2e2e2; }
.post-template-single-mbre-newsletter-v1 .ref-card { background: #f7fcff; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.post-template-single-mbre-newsletter-v1 .ref-card:hover { background: #ffffff;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.post-template-single-mbre-newsletter-v1 .ref-card-tag { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #00A3E0; }
.post-template-single-mbre-newsletter-v1 .ref-card h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; color: #000000; line-height: 1.35; margin-bottom: 0px;}
.post-template-single-mbre-newsletter-v1 .ref-card p { margin-bottom: 20px;}
.post-template-single-mbre-newsletter-v1 .ref-card a { font-size: 17px; font-weight: 500; color: #00A3E0; margin-top: auto; }


/* ─────────────────────────────────────────────────────────────────── */
/* 16. MARKET REPORT CARDS (S12)                                        */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .report-card { background: #ffffff; border: 1px solid #e2e2e2; display: grid; grid-template-columns: 1fr; overflow: hidden; margin-bottom: 16px; }
.post-template-single-mbre-newsletter-v1 .mr-card-download-main-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* S12 three-card row: WR report, NABOR report, Newsletter Archive.
   Applied by the template only when the archive card renders, so a row
   with just the two report cards keeps the 1fr 1fr layout above. */
.post-template-single-mbre-newsletter-v1 .mr-card-download-main-row--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Cards in this row: image on top, content beneath, all equal height.
   grid-template-rows lets .report-info take the leftover height, which is
   what makes .report-btns { margin-top:auto } pin the buttons to a common
   baseline across all three cards. */
.post-template-single-mbre-newsletter-v1 .mr-card-download-main-row .report-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100%; margin-bottom: 0; }
.post-template-single-mbre-newsletter-v1 .mr-card-download-main-row .report-cover { aspect-ratio: 16 / 10; min-height: 170px; }

/* Fallback cover for the archive card when no image is set. */
.post-template-single-mbre-newsletter-v1 .report-cover--archive { box-sizing: border-box; padding: 22px; text-align: center; }
.post-template-single-mbre-newsletter-v1 .report-cover--archive .report-cover-archive-label { color: #ffffff; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; }
.post-template-single-mbre-newsletter-v1 .report-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.post-template-single-mbre-newsletter-v1 .report-cover {  background: linear-gradient(135deg, #0a1f35, #003d5c); display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(255,255,255,0.4); font-style: italic; overflow: hidden; }
.post-template-single-mbre-newsletter-v1 .report-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-template-single-mbre-newsletter-v1 .report-info { padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; }
.post-template-single-mbre-newsletter-v1 .report-info-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #00A3E0; }
.post-template-single-mbre-newsletter-v1 .report-info h3 { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 700; color: #000000; line-height: 1.3; }
.post-template-single-mbre-newsletter-v1 .report-info p { margin: 0; }
.post-template-single-mbre-newsletter-v1 .report-btns { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
.post-template-single-mbre-newsletter-v1 .report-btn { padding: 10px 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; text-align: center; }
.post-template-single-mbre-newsletter-v1 .report-btn--fill { background: #000000; color: #ffffff; }
.post-template-single-mbre-newsletter-v1 .report-btn--fill:hover { background: #00A3E0; opacity: 1; }
.post-template-single-mbre-newsletter-v1 .report-btn--outline { border: 1px solid #000000; color: #000000; background: transparent; }
.post-template-single-mbre-newsletter-v1 .report-btn--outline:hover { border-color: #00A3E0; color: #00A3E0; opacity: 1; }


/* ─────────────────────────────────────────────────────────────────── */
/* 17. RESEARCH LIBRARY (S13)                                           */
/* ─────────────────────────────────────────────────────────────────── */

/* Two rows: titles share row 1, link lists share row 2, so every column title
   is the same height and the links below all start on the same line however
   many lines a title wraps to. Each .research-col opts into the parent rows
   with subgrid. Browsers without subgrid ignore these two declarations and
   fall back to the previous stacked behaviour. Desktop only; the columns are
   stacked at 660px and below, where equal heights would only add dead space. */
.post-template-single-mbre-newsletter-v1 .research-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 32px; }
.post-template-single-mbre-newsletter-v1 .research-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 0; }
/* Explicit rows so a column with no title still lines its links up with the rest. */
.post-template-single-mbre-newsletter-v1 .research-col > .research-col-title { grid-row: 1; }
.post-template-single-mbre-newsletter-v1 .research-col > .research-col-links { grid-row: 2; }
.post-template-single-mbre-newsletter-v1 .research-col-title { font-size: 20px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #000000; padding-bottom: 10px; border-bottom: 2px solid #00A3E0; margin-bottom: 0; }
.post-template-single-mbre-newsletter-v1 .research-link { display: block; padding: 14px 0; border-bottom: 1px solid #e2e2e2; font-size: 20px; color: #00A3E0; text-decoration: none; line-height: 1.45; }
.post-template-single-mbre-newsletter-v1 .research-link:hover { color: #007fb0; opacity: 1; }


/* ─────────────────────────────────────────────────────────────────── */
/* 18. CTA BLOCK (S14)                                                  */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .cta-bar { background: #00A3E0; padding: 12px 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: left; }
.post-template-single-mbre-newsletter-v1 .cta-bar span { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; white-space: nowrap; }
.post-template-single-mbre-newsletter-v1 .cta-bar span + span::before { content: '·'; margin-right: 24px; }
.post-template-single-mbre-newsletter-v1 .cta-main { background: #000000; display: grid; grid-template-columns: 1fr 320px; min-height: 340px; }
.post-template-single-mbre-newsletter-v1 .cta-content { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; }
.post-template-single-mbre-newsletter-v1 .cta-content h2 { color: #ffffff;}
.post-template-single-mbre-newsletter-v1 .cta-content p { color: #ffffff;font-weight: 400;margin-top: 10px; }
.post-template-single-mbre-newsletter-v1 .cta-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.post-template-single-mbre-newsletter-v1 .cta-btn-primary { background: #00A3E0; color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 28px; display:inline-block; }
.post-template-single-mbre-newsletter-v1 .cta-btn-primary:hover { background: #007fb0; opacity: 1; }
.post-template-single-mbre-newsletter-v1 .cta-btn-secondary { border: 1px solid rgba(255,255,255,0.2); color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 15px 24px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.post-template-single-mbre-newsletter-v1 .cta-btn-secondary:hover { border-color: #00A3E0; color: #00A3E0; opacity: 1; }
.post-template-single-mbre-newsletter-v1 .cta-photo { width: 320px; min-height: 340px; background: linear-gradient(135deg, #0a1f35, #003d5c); display: flex; align-items: center; justify-content: center; font-size: 12px; color: rgba(255,255,255,0.3); font-style: italic; overflow: hidden; }
.post-template-single-mbre-newsletter-v1 .cta-photo img { width: 100%; height: 100%; object-fit: cover; }


/* ─────────────────────────────────────────────────────────────────── */
/* 19. SEARCH BOX (S16)                                                 */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 .search-section { background: #f7f7f7; border-top: 3px solid #00A3E0; padding: 40px 44px; text-align: center; }
.post-template-single-mbre-newsletter-v1 .search-section h3 { font-family: 'Playfair Display', serif; font-size: clamp(20px, 2.8vw, 26px); font-weight: 700; color: #000000; margin-bottom: 10px; }
.post-template-single-mbre-newsletter-v1 .search-section p { color: #5a5a5a; margin-bottom: 24px; line-height: 1.6; }
.post-template-single-mbre-newsletter-v1 .search-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.post-template-single-mbre-newsletter-v1 .search-pill { display: inline-block; padding: 6px 14px; border: 1.5px solid #00A3E0; color: #00A3E0; font-size: 16px; font-weight: 500; letter-spacing: 0.06em; text-decoration: none; transition: all 0.15s; }
.post-template-single-mbre-newsletter-v1 .search-pill:hover { background: #00A3E0; color: #ffffff; opacity: 1; }


/* ─────────────────────────────────────────────────────────────────── */
/* 20. FAQs (S17)                                                       */
/* ─────────────────────────────────────────────────────────────────── */

.post-template-single-mbre-newsletter-v1 details.faq-item { border-bottom: 1px solid #e2e2e2; background: #ffffff; }
.post-template-single-mbre-newsletter-v1 details.faq-item:first-of-type { border-top: 1px solid #e2e2e2; }
.post-template-single-mbre-newsletter-v1 summary.faq-q { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 18px 0px; cursor: pointer; list-style: none; }
.post-template-single-mbre-newsletter-v1 summary.faq-q::-webkit-details-marker { display: none; }
.post-template-single-mbre-newsletter-v1 .faq-n { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: rgba(0,0,0,0.09); line-height: 1; text-align: center; }
.post-template-single-mbre-newsletter-v1 .faq-qt { font-family: 'Montserrat', serif; font-weight: 500; font-size:22px; margin-bottom:0; }
.post-template-single-mbre-newsletter-v1 .faq-ico { width: 24px; height: 24px; border: 1px solid #c8c8c8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; color: #5a5a5a; }
.post-template-single-mbre-newsletter-v1 details[open] .faq-ico { background: #00A3E0; border-color: #00A3E0; color: #ffffff; }
.post-template-single-mbre-newsletter-v1 details[open] .faq-ico::before { content: '−';font-weight: 500; font-size: 20px; }
.post-template-single-mbre-newsletter-v1 details:not([open]) .faq-ico::before { content: '+';font-weight: 500; color: #5A5A5A; font-size: 20px; }
.post-template-single-mbre-newsletter-v1 .faq-ans { padding: 4px 0px 18px 0px; margin-top: -10px;}

/* Global: Breakpoint CSS */
@media (min-width: 1100px) {
    .post-template-single-mbre-newsletter-v1 .mr-card-download-main-row{ grid-template-columns: 1fr 1fr; }
    .post-template-single-mbre-newsletter-v1 .mr-card-download-main-row--3up{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Global: Breakpoint CSS */
@media (max-width: 768px) {
    .post-template-single-mbre-newsletter-v1 .mr-card-download-main-row--3up{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post-template-single-mbre-newsletter-v1 details.article-row summary { flex-direction: column; }
    .post-template-single-mbre-newsletter-v1 .read-lnk{ align-self: start; }
    .mbre-nbc-layout {
        flex-direction: column;
        gap:5px;
    }

  .mbre-video-wrap {
    height: auto;
    padding-top: 56.25%; /* 16:9 ratio */
  }

  .mbre-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────── */
/* 21. MOBILE (≤660px)                                                  */
/* ─────────────────────────────────────────────────────────────────── */

@media (max-width: 660px) {
    .nl-h2 { font-size: 30px !important; }
    .post-template-single-mbre-newsletter-v1 .mr-card-download-main-row{ display: grid; grid-template-columns: 1fr; }
    .post-template-single-mbre-newsletter-v1 .mr-card-download-main-row--3up{ grid-template-columns: 1fr; }
    .post-template-single-mbre-newsletter-v1 .nl-section,
    .post-template-single-mbre-newsletter-v1 .nl-section--tight { padding: 40px 0; }
    /* Shorter offset on mobile, where the sticky header is smaller. */
    .post-template-single-mbre-newsletter-v1 .nl-section[id],
    .post-template-single-mbre-newsletter-v1 .nl-section--tight[id],
    .post-template-single-mbre-newsletter-v1 .nl-section--flush[id],
    .post-template-single-mbre-newsletter-v1 .nl-anchor,
    .post-template-single-mbre-newsletter-v1 #property-search { scroll-margin-top: 70px; }
    .post-template-single-mbre-newsletter-v1 .nl-wrap {  }

    /* Signup stacks. Form panel drops below the copy, blue rule moves to top. */
    .post-template-single-mbre-newsletter-v1 .signup-left,
    .post-template-single-mbre-newsletter-v1 .signup-right { flex: 1 1 100%; }
    .post-template-single-mbre-newsletter-v1 .signup-left { padding: 36px 28px 28px 32px; }
    .post-template-single-mbre-newsletter-v1 .signup-right { padding: 28px 28px 36px 32px; border-left: 0; border-top: 3px solid #00A3E0; }
    .post-template-single-mbre-newsletter-v1 .signup-proof { display: block; }
    .post-template-single-mbre-newsletter-v1 .proof-item { padding: 10px 0; }

    .post-template-single-mbre-newsletter-v1 .chart-grid { grid-template-columns: 1fr; }

    .post-template-single-mbre-newsletter-v1 .news-featured { grid-template-columns: 1fr; }
    .post-template-single-mbre-newsletter-v1 .news-feat-price { border-left: none; border-top: 1px solid rgba(255,255,255,0.09); padding-left: 0; padding-top: 18px; }
    .post-template-single-mbre-newsletter-v1 .news-stats { grid-template-columns: 1fr 1fr; }
    .post-template-single-mbre-newsletter-v1 .news-stats .nstat:last-child { grid-column: span 2; }
    .post-template-single-mbre-newsletter-v1 .art-inner,
    .post-template-single-mbre-newsletter-v1 .art-inner--with-img { grid-template-columns: 1fr; gap: 10px; }
    .post-template-single-mbre-newsletter-v1 .art-thumb { width: 100%; height: 140px; }

    .post-template-single-mbre-newsletter-v1 .pr-spotlight { grid-template-columns: 1fr; }
    .post-template-single-mbre-newsletter-v1 .pr-links { border-left: none; border-top: 1px solid rgba(255,255,255,0.30); padding-left: 0; padding-top: 18px; align-items: flex-start; }

    .post-template-single-mbre-newsletter-v1 .card-row-2 { grid-template-columns: 1fr; }
    /* Columns stack, so undo the subgrid pairing and let each column flow again. */
    .post-template-single-mbre-newsletter-v1 .research-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .post-template-single-mbre-newsletter-v1 .research-col { display: block; grid-row: auto; grid-template-rows: none; }

    /* Tables with 4 or more columns scroll sideways; 3 or fewer are made to fit
       by letting the header cells wrap instead of forcing them onto one line.
       Browsers without :has() keep the base .nl-tbl-wrap scroll for every table,
       which is the behaviour that shipped before this rule existed. */
    .post-template-single-mbre-newsletter-v1 .nl-tbl-wrap:has(table.nl-tbl thead th:nth-child(4)) { overflow-x: auto; }
    .post-template-single-mbre-newsletter-v1 .nl-tbl-wrap:not(:has(table.nl-tbl thead th:nth-child(4))) { overflow: visible; }
    .post-template-single-mbre-newsletter-v1 .nl-tbl-wrap:not(:has(table.nl-tbl thead th:nth-child(4))) table.nl-tbl thead th { white-space: normal; }

    /* Wide chart images render at their natural width and scroll sideways rather
       than being shrunk to fit, so the detail stays readable. Only inside
       .nl-chart-scroll, which is only emitted when the section has the hint on,
       so charts in every other section keep shrinking to fit as before.
       Mobile only: on desktop the cards are wide enough that shrinking is fine. */
    .post-template-single-mbre-newsletter-v1 .nl-chart-scroll img { max-width: none; width: auto; }

    /* Scroll hint. The script adds .is-on when the labelled element really does
       overflow, and .is-done once the reader has scrolled it. */
    .post-template-single-mbre-newsletter-v1 .nl-scroll-hint.is-on {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #5a5a5a;
        transition: opacity .3s ease;
        /* The hint sits directly above a table label that has a solid black
           background. Nothing in this stylesheet stacks over it, but theme or
           pasted markup can, and a painted-over hint reads as missing. A
           position plus z-index puts it in front of any static sibling, and
           the reserved min-height stops a tall label crowding it out.        */
        position: relative;
        z-index: 5;
        min-height: 16px;
    }
    /* Whatever follows the hint must not be pulled up over it. Theme CSS and
       pasted markup both set negative top margins on headings, and a label with
       a solid black background then paints across the hint. These reset that
       for the element the hint labels only, so nothing else is affected.      */
    .post-template-single-mbre-newsletter-v1 .nl-scroll-hint.is-on + .tbl-label,
    .post-template-single-mbre-newsletter-v1 .nl-scroll-hint.is-on + .tbl-sub-label,
    .post-template-single-mbre-newsletter-v1 .nl-scroll-hint.is-on + .eyebrow,
    .post-template-single-mbre-newsletter-v1 .nl-scroll-hint.is-on + .nl-tbl-wrap,
    .post-template-single-mbre-newsletter-v1 .nl-scroll-hint.is-on + .iframe-responsive {
        margin-top: 0;
    }
    .post-template-single-mbre-newsletter-v1 .nl-scroll-hint.is-on.is-done { opacity: 0; }
    .post-template-single-mbre-newsletter-v1 .nl-scroll-hint-arrow {
        color: #00A3E0;
        font-size: 14px;
        line-height: 1;
        animation: nl-scroll-nudge 1.5s ease-in-out infinite;
    }

    .post-template-single-mbre-newsletter-v1 .cta-main { grid-template-columns: 1fr; overflow:hidden; }
    .post-template-single-mbre-newsletter-v1 .cta-bar { justify-content: center; text-align: center; }
    .post-template-single-mbre-newsletter-v1 .cta-bar span { white-space: normal; word-break: break-word; }
    .post-template-single-mbre-newsletter-v1 .cta-photo { width: 100%; min-height: 240px; }
    .post-template-single-mbre-newsletter-v1 .cta-content { padding: 36px 28px; order: 1;}
    .post-template-single-mbre-newsletter-v1 .cta-bar span + span::before{ display:none; }
    .post-template-single-mbre-newsletter-v1 .report-card { grid-template-columns: 1fr; }
    .post-template-single-mbre-newsletter-v1 .report-cover { width: 100%; min-height: 120px; }
    .post-template-single-mbre-newsletter-v1 .report-info { padding: 18px 20px; }

    .commentary-cred-role span { display:none; }
    .post-template-single-mbre-newsletter-v1 .stat-pills { gap: 6px;justify-content: center; }
    .post-template-single-mbre-newsletter-v1 .stat-pill { min-width: 100px; padding: 15px 15px; flex: 0 0 calc(50% - 3px); max-width: 100%;}
    .post-template-single-mbre-newsletter-v1 .sp-val{ font-size: 22px; }
    .post-template-single-mbre-newsletter-v1 .sp-label{ font-size: 16px;letter-spacing: unset; }
    .post-template-single-mbre-newsletter-v1 .sp-context { font-size: 15px;}
    .post-template-single-mbre-newsletter-v1 table.nl-tbl { font-size: 13px; }
    .post-template-single-mbre-newsletter-v1 table.nl-tbl thead th { font-size: 10px; padding: 9px 10px; }
    .post-template-single-mbre-newsletter-v1 table.nl-tbl tbody td { padding: 9px 10px; font-size: 15px !important; }

    /* Eyebrow keeps the desktop shape on mobile: left text, rule, right text on
       one row. Type drops a little and the texts may wrap within their own
       column when they are too long to fit, rather than stacking full width. */
    .post-template-single-mbre-newsletter-v1 .eyebrow { flex-wrap: nowrap; gap: 10px; row-gap: 0; align-items: center; }
    .post-template-single-mbre-newsletter-v1 .eyebrow-text { font-size: 11px; letter-spacing: 0.1em; white-space: normal; width: auto; flex: 0 1 auto; min-width: 0; }
    .post-template-single-mbre-newsletter-v1 .eyebrow-line { display: block; flex: 1 1 auto; min-width: 10px; }
    .post-template-single-mbre-newsletter-v1 .eyebrow-text + .eyebrow-line { display: block; }
    .post-template-single-mbre-newsletter-v1 summary.faq-q h3{ font-size: 18px !important; letter-spacing: 1px; margin-bottom: 0;}
    .post-template-single-mbre-newsletter-v1 .faq-ans { font-size: 16px;margin-top: -10px; }
    .post-template-single-mbre-newsletter-v1 .search-section { padding: 28px 15px 40px 15px; }

    .post-template-single-mbre-newsletter-v1 .img-pair { grid-template-columns: 1fr; }
    .post-template-single-mbre-newsletter-v1 .img-pair-caption { grid-template-columns: 1fr; }
    .post-template-single-mbre-newsletter-v1 .chart-val {
        font-size: 18px;
        font-weight: 500;
    }
    .post-template-single-mbre-newsletter-v1 .chart-card{ padding: 10px; }
    .post-template-single-mbre-newsletter-v1 details.article-row summary{ flex-direction: column; }
    .post-template-single-mbre-newsletter-v1 details.article-row summary p { margin-bottom: 0px; }
    .post-template-single-mbre-newsletter-v1 .research-link{ font-size: 18px; }

}

@media (max-width: 480px) {

    .post-template-single-mbre-newsletter-v1 .mbre-nl-card { padding: 18px 16px; margin-top: -28px; }
    .post-template-single-mbre-newsletter-v1 .commentary-cred-bar { margin-bottom: 10px;align-items: flex-start; gap: 10px; }

    /* Signup: tighten */
    .post-template-single-mbre-newsletter-v1 .signup-left { padding: 24px 20px; }
    .post-template-single-mbre-newsletter-v1 .signup-right { padding: 24px 20px; }

}
@media (max-width:400px){
    .post-template-single-mbre-newsletter-v1 .chart-head{ flex-direction: column; }
    .post-template-single-mbre-newsletter-v1 .chart-num{ padding-top: 15px; margin-bottom: -10px; }
}
.mbre-toc-block { background-color: #F7F7F7; border-left: 4px solid #00A3E0; padding: 24px 28px; margin: 32px 0; border-radius: 4px; }
.mbre-toc-label { font-weight: 700; margin: 0 0 12px 0 !important; color: #1C1C1C; }
.mbre-toc-list { margin: 0; padding: 0 0 0 20px; }
.mbre-toc-list a{color: var(--blue);}
blockquote.commentary-pull::before { content: '"'; }
/* sportlight S9-1 */
.mbre-listing-callout {
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-left: 4px solid #00A3E0;
    padding: 18px 22px;
    margin: 5px 0;
    border-radius: 4px;

}
.mbre-record-sale-wrap {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

/* LEFT */
.mbre-record-sale-text {
  flex: 1 40%;
}

/* RIGHT IMAGE COLUMN */
.mbre-record-sale-image {
  flex: 1;
  position: relative;
  min-height: 100%;
}

/* BACKGROUND IMAGE */
.mbre-record-sale-image-inner {
  position: absolute;
  inset: 0;
  background-image: url("https://www.mattbrownrealestate.com/wp-content/uploads/4300-brynwood-dr-naples-quail-west-golf-community-under-contract.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* MOBILE */
@media (max-width: 768px) {
  .mbre-record-sale-wrap {
    flex-direction: column;
  }

  .mbre-record-sale-image {
    min-height: 300px;
  }
}

/* START: Naplex X Club Feature - Text & Video */
/* Sidebar */
.mbre-sidebar-feature {
  background-color: #E8F6FC;
  border-left: 4px solid #00A3E0;
  border-radius: 4px;
}

.mbre-sidebar-feature h3 { margin-top: 0; }
.mbre-sidebar-feature ul { margin: 12px 0; padding-left: 20px; }
.mbre-sidebar-feature li { margin-bottom: 8px; }


/* Layout */
.mbre-nbc-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

/* Left text */
.mbre-nbc-copy {
  flex: 1; padding: 30px;
}
.mbre-nbc-copy p {
    margin-bottom: 15px;
}

/* Right video */
.mbre-nbc-video-col {
  flex: 1;
  display: flex;
}

/* Video wrapper */
.mbre-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

/* Make iframe fill space */
.mbre-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* END: Naplex X Club Feature - Text & Video */
/*-- ====== v5 CHANGE 6: Both featured listing callouts restructured to two-column layout with copy left + photo placeholder right. Each callout gained a third descriptor line about beach proximity. ====== */
.mbre-listing-with-photo {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-left: 4px solid #00A3E0;
    /*padding: 18px 22px;*/
    margin: 14px 0;
}

.mbre-listing-with-photo-copy {
    flex: 1 1 60%;
    min-width: 260px;
    padding: 30px;
}

.mbre-listing-spec
 {
    font-size: 18px;
    color: #5A5A5A;
    margin-top: 6px;
    display: block;
}

.mbre-listing-context {
    /*font-size: 14px;*/
    color: #1C1C1C;
    margin-top: 8px;
    display: block;
    line-height: 1.5;
}

.mbre-listing-with-photo-img {
    flex: 1 1 35%;
    min-width: 220px;
}

.mbre-listing-with-photo-img-placeholder {
    width: 100%;
    height: 200px;
    background-color: #F7F7F7;
    border: 1px dashed #C0C0C0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    color: #8A8A8A;
    padding: 12px;
    box-sizing: border-box;
}
/* Scroll hint arrow nudge. Kept outside the media query so the keyframes are
   always defined, and switched off for readers who ask for reduced motion. */
@keyframes nl-scroll-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .post-template-single-mbre-newsletter-v1 .nl-scroll-hint-arrow { animation: none; }
    .post-template-single-mbre-newsletter-v1 .nl-scroll-hint.is-on { transition: none; }
}