/* ── Single blog-post page styles
   Mirrors the structure of the editorial mock but uses the site's tokens
   (--site-bg, --pintor-btn-gradient) instead of the mock's lime/coral/violet
   palette. Drop-in compatible with layouts/main.blade.php. ── */

.blog-post-scope{
    --bg-1: var(--site-bg);
    --bg-2: rgba(255,255,255,0.03);
    --bg-3: rgba(255,255,255,0.05);
    --ink: #ffffff;
    --ink-2: #d4dde9;
    --ink-soft: #9aa5b8;
    --line: rgba(255,255,255,0.08);
    --line-2: rgba(255,255,255,0.16);
    --accent: #00AEFF;
    --accent-grad: var(--pintor-btn-gradient);
    color: var(--ink);
    position: relative;
    z-index: 1; /* below the fixed <header id="header"> */
}
.blog-post-scope *{ box-sizing: border-box; }

/* ── Article container ── */
.bp-article{ max-width: 1000px; margin: 0 auto; padding: 140px 24px 60px; }

/* ── Breadcrumbs ── */
.bp-crumbs{
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink); display: flex; gap: 10px;
    margin-bottom: 24px; flex-wrap: wrap;
}
.bp-crumbs a{ color: var(--ink); text-decoration: none; transition: opacity .2s; }
.bp-crumbs a:hover{ opacity: .7; }
.bp-crumbs .sep{ color: var(--ink); opacity: .5; }

/* ── Meta row: back button + category tag in a tight side-by-side row.
   Both pills have identical box dimensions so they line up perfectly. */
.bp-meta-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

/* ── Both pills share the exact same box: same height, padding, border,
   radius, background, color, line-height. Only the typography differs. ── */
.bp-back,
.bp-tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    color: #ffffff;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
    flex: 0 0 auto;
    margin: 0;
}

.bp-back{
    font-family: 'Outfit', sans-serif;
    font-size: 12px; font-weight: 600;
    letter-spacing: -.005em;
    text-decoration: none;
    transition: transform .25s ease, background .2s, border-color .2s;
}
.bp-back:hover{
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.32);
    transform: translateX(-3px);
}
.bp-back:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.bp-back svg{
    width: 14px; height: 14px;
    transition: transform .25s ease;
}
.bp-back:hover svg{ transform: translateX(-2px); }

/* ── Category tag pill ── */
.bp-tag{
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.bp-tag .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bp-tag-eye{ width: 11px; height: 11px; opacity: .85; vertical-align: -1px; flex-shrink: 0; }

/* ── Hero image ── */
.bp-hero{
    margin: 8px 0 28px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 21 / 9;
    background: var(--accent-grad);
    box-shadow: 0 30px 80px -30px rgba(0,0,0,.5);
}
.bp-hero img{
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.bp-hero-overlay{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}
/* ── Title + dek ── */
.bp-title{
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: clamp(24px, 3.2vw, 38px);
    line-height: 1.15; letter-spacing: -.015em;
    margin: 18px 0 14px; color: var(--ink);
    /* Clamp to a maximum of 2 lines — anything longer truncates with "…". */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bp-title em{
    font-style: normal;
    background: var(--accent-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Editorial pull-quote treatment for the dek — same blockquote pattern
   used in the article body, applied to the post's tagline so it lands
   with weight under the title. */
.bp-dek{
    margin: 0 0 32px;
    padding: 22px 28px;
    border-left: 3px solid var(--accent);
    background: var(--bg-2);
    border-radius: 0 14px 14px 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(17px, 1.7vw, 21px);
    line-height: 1.5;
    color: var(--ink);
    max-width: none;
}
.bp-dek cite{
    display: block; margin-top: 12px;
    font-style: normal;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-2);
}

/* ── Byline ── */
.bp-byline{
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding: 20px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    margin-bottom: 36px; font-size: 13.5px;
    flex-wrap: wrap;
}
.bp-author{ display: inline-flex; align-items: center; gap: 12px; }
.bp-author .av{
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--accent-grad); color: #fff;
    display: grid; place-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600; font-size: 13px; flex-shrink: 0;
    overflow: hidden;
}
.bp-author .av--img{ background: transparent; }
.bp-author .av img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-author .who{ display: flex; flex-direction: column; line-height: 1.3; }
.bp-author .who b{ font-weight: 600; color: var(--ink); }
.bp-author .who span{ color: var(--ink-2); font-size: 12px; }
.bp-author .who .bp-updated{ color: var(--ink-2); font-size: 11px; opacity: .85; font-style: italic; }
.bp-byline-meta{
    color: var(--ink-2);
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase; text-align: right;
}
.bp-byline-meta div{ margin-bottom: 4px; }
.bp-views{
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: 4px;
}
.bp-views svg{
    width: 11px; height: 11px;
    opacity: .85;
    flex-shrink: 0;
}
.bp-share{ display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bp-share-b{
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.22); background: transparent;
    display: grid; place-items: center; cursor: pointer;
    color: #ffffff; transition: border-color .2s, background .2s, transform .15s;
    text-decoration: none; flex-shrink: 0;
}
.bp-share-b:hover{ border-color: #ffffff; background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.bp-share-b:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.bp-share-b svg{ width: 15px; height: 15px; }

/* ── Body content ──
   Two-font system: Outfit Bold (700) for headings, Outfit Light (300) for
   body text. Same family throughout = calm, readable column with clear
   hierarchy via weight contrast alone. */
.bp-body{
    font-size: 17px; line-height: 1.75;
    color: #ffffff;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;
}
.bp-body > * + *{ margin-top: 1.1em; }
.bp-body p{ margin: 0; color: #ffffff; font-weight: 300; }

/* Headings — all six levels so the editor's heading picker always renders */
.bp-body h1{
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: clamp(28px, 3.2vw, 36px); line-height: 1.15;
    letter-spacing: -.02em; margin: 56px 0 0; color: #ffffff;
}
.bp-body h2{
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25;
    letter-spacing: -.01em; margin: 48px 0 0; color: #ffffff;
}
.bp-body h3{
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: 20px; letter-spacing: -.005em;
    margin: 36px 0 0; color: #ffffff;
}
.bp-body h4{
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: 17px; margin: 28px 0 0; color: #ffffff;
}
.bp-body h5, .bp-body h6{
    font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: 15px; margin: 20px 0 0; color: rgba(255,255,255,0.85);
}

.bp-body a{
    color: var(--accent);
    border-bottom: 1px solid rgba(0,174,255,0.4);
    text-decoration: none; transition: border-color .2s;
    font-weight: inherit;
}
.bp-body a:hover{ border-bottom-color: var(--accent); }
.bp-body strong, .bp-body b{ font-weight: 700; color: #ffffff; }
.bp-body em, .bp-body i{ font-style: italic; font-weight: 300; color: #ffffff; }
.bp-body u{ text-decoration: underline; }
.bp-body s, .bp-body del{ text-decoration: line-through; opacity: .7; }

/* Lists — explicit list-style-type so the * { padding:0 } global reset
   can't strip the markers. padding-left gives enough room for the marker
   to render inside the visible area (list-style-position: outside default). */
.bp-body ul{
    list-style-type: disc;
    padding-left: 1.8em; margin: 0; color: #ffffff; font-weight: 300;
}
.bp-body ol{
    list-style-type: decimal;
    padding-left: 1.8em; margin: 0; color: #ffffff; font-weight: 300;
}
.bp-body ul ul{ list-style-type: circle; margin: 0; }
.bp-body ul ul ul{ list-style-type: square; }
.bp-body ol ol{ list-style-type: lower-alpha; margin: 0; }
.bp-body li{
    display: list-item;
    margin: .4em 0; color: #ffffff; font-weight: 300;
}

/* Code / pre */
.bp-body code{
    font-family: 'JetBrains Mono', monospace; font-size: .85em;
    background: rgba(255,255,255,0.08); padding: 2px 6px;
    border-radius: 5px; color: var(--ink);
}
.bp-body pre{
    font-family: 'JetBrains Mono', monospace; font-size: .85em;
    background: rgba(255,255,255,0.06); padding: 16px 20px;
    border-radius: 8px; color: var(--ink);
    overflow-x: auto; white-space: pre; line-height: 1.6;
    border: 1px solid rgba(255,255,255,0.08);
}
.bp-body pre code{ background: none; padding: 0; border-radius: 0; }

/* Inline images inserted via the rich-text editor toolbar.
   Without these rules wide images overflow the column, and a failed
   load renders at ~25px (just the broken-icon glyph). */
.bp-body img{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px auto;
    border-radius: 12px;
    background: var(--bg-2);
}

/* Horizontal rule */
.bp-body hr{
    border: none; border-top: 1px solid rgba(255,255,255,0.12);
    margin: 32px 0;
}

/* Blockquotes */
.bp-body blockquote{
    margin: 32px 0; padding: 20px 26px;
    border-left: 3px solid var(--accent);
    background: var(--bg-2);
    border-radius: 0 12px 12px 0;
    font-family: 'Outfit', sans-serif; font-weight: 300; font-style: italic;
    font-size: 19px; line-height: 1.5; color: var(--ink);
}
.bp-body blockquote cite{
    display: block; margin-top: 10px; font-style: normal;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-2);
}

/* ── Google AdSense banner slot ──
   Clean rectangular container ready for an <ins class="adsbygoogle">
   block. Reserves a sensible min-height so the page doesn't reflow when
   the ad lazy-loads. Empty state shows a subtle dashed placeholder. */
.bp-ad-banner{
    margin: 42px 0;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 8px;
}
.bp-ad-banner-label{
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-soft); text-align: center;
}
.bp-ad-banner-slot{
    width: 100%;
    min-height: 90px;
    background: var(--bg-2);
    border: 1px dashed var(--line-2);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    /* Reserve vertical space so the layout doesn't jump when the ad loads. */
    contain: layout;
}
.bp-ad-banner-slot:empty::before,
.bp-ad-banner-slot:not(:has(*))::before{
    content: 'Ad space — responsive';
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
}
.bp-ad-banner-slot ins{ display: block; width: 100%; }

/* ── Article foot — tags ── */
.bp-foot{ margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.bp-tags-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.bp-tpill{
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--line-2);
    font-size: 12.5px; color: var(--ink-2);
    text-decoration: none; transition: all .2s;
}
.bp-tpill:hover{ color: var(--ink); border-color: rgba(255,255,255,0.28); }

/* ── Comments ──
   Collapsible thread: first comment shown by default, rest hidden until
   the toggle button reveals them with a staggered slide-in. */
.bp-comments{
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}
.bp-comments-head{
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 22px;
}
.bp-comments-head h3{
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: 22px; letter-spacing: -.01em;
    margin: 0; color: var(--ink);
    display: flex; align-items: baseline; gap: 8px;
}
.bp-comments-count{
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; color: var(--ink-2);
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    padding: 2px 8px; border-radius: 999px;
    font-weight: 400;
    letter-spacing: 0;
}
.bp-comments-sub{
    margin: 0; color: var(--ink-2); font-size: 13.5px;
    font-family: 'Outfit', sans-serif; font-weight: 300;
}

.bp-comments-list{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 18px;
}
.bp-comment{
    display: flex; gap: 14px;
    padding: 16px; border-radius: 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
}
.bp-comment.is-hidden{ display: none; }
.bp-comment.is-revealed{
    animation: bpCommentIn .35s ease-out backwards;
    animation-delay: var(--reveal-delay, 0ms);
}
@keyframes bpCommentIn{
    from{ opacity: 0; transform: translateY(8px); }
    to  { opacity: 1; transform: translateY(0); }
}
/* Vestibular-sensitivity users get an instant reveal instead of slide-in. */
@media (prefers-reduced-motion: reduce){
    .bp-comment.is-revealed{ animation: none; }
    .bp-comments-toggle svg{ transition: none; }
    .bp-promo-banner{ transition: none; }
    .bp-rel{ transition: none; }
}
.bp-comment-av{
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent-grad); color: #fff;
    display: grid; place-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600; font-size: 13px;
    flex-shrink: 0;
    overflow: hidden;
}
.bp-comment-av--img{ background: transparent; }
.bp-comment-av img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-comment-body{ flex: 1; min-width: 0; }
.bp-comment-meta{
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 6px; flex-wrap: wrap;
}
.bp-comment-meta b{
    font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: 14px; color: var(--ink);
}
.bp-comment-date{
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-2);
}
.bp-comment-body p{
    margin: 0; color: var(--ink); font-size: 14.5px;
    line-height: 1.6; font-family: 'Outfit', sans-serif; font-weight: 300;
    word-wrap: break-word;
}

.bp-comments-toggle{
    display: inline-flex; align-items: center; gap: 6px;
    margin: 18px 0 0;
    min-height: 44px; /* WCAG 2.5.5 — at least 44×44 px touch target */
    background: transparent; border: 1px solid var(--line-2);
    color: var(--ink); padding: 11px 18px;
    border-radius: 999px; cursor: pointer;
    font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: 13px;
    transition: opacity .2s, transform .2s, border-color .2s, background .2s;
}
.bp-comments-toggle:hover{
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.04);
}
.bp-comments-toggle:focus-visible{
    outline: 2px solid var(--accent); outline-offset: 2px;
}
.bp-comments-toggle svg{
    width: 14px; height: 14px;
    transition: transform .25s ease;
}
.bp-comments-toggle.is-open svg{ transform: rotate(180deg); }

/* ── Comment form ── */
.bp-comment-form{
    margin-top: 32px;
    padding: 22px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex; flex-direction: column; gap: 12px;
}
.bp-comment-form h4{
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: 16px; letter-spacing: -.005em;
    margin: 0 0 4px; color: var(--ink);
}
.bp-comment-form input,
.bp-comment-form textarea{
    width: 100%;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 11px 14px;
    font: inherit; font-size: 14px;
    font-family: 'Outfit', sans-serif; font-weight: 300;
    color: var(--ink); outline: none;
    transition: border-color .2s, box-shadow .2s;
    resize: vertical;
}
.bp-comment-form input::placeholder,
.bp-comment-form textarea::placeholder{
    color: var(--ink-soft);
    font-weight: 300;
}
.bp-comment-form input:focus,
.bp-comment-form textarea:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,174,255,0.12);
}
.bp-comment-actions{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.bp-comment-hint{
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-soft);
}
.bp-comment-form button[type="submit"]{
    background: var(--accent-grad); color: #fff;
    border: none; padding: 12px 22px; border-radius: 999px;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: 13px; cursor: pointer;
    transition: transform .15s, box-shadow .15s, opacity .2s;
}
.bp-comment-form button[type="submit"]:hover:not(:disabled){
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(0,174,255,0.45);
}
.bp-comment-form button[type="submit"]:focus-visible{
    outline: 2px solid #fff; outline-offset: 2px;
}
.bp-comment-form button[type="submit"]:disabled{
    opacity: .65; cursor: default;
}

/* ── Promo image banner (replaces the old author card) ── */
.bp-promo-banner{
    display: block;
    margin-top: 24px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line);
    aspect-ratio: 5 / 1;
    transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
    text-decoration: none;
}
.bp-promo-banner img{
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.bp-promo-banner:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -16px rgba(0,0,0,0.55);
    border-color: rgba(255,255,255,0.22);
}

/* ── Related ── */
.bp-related{ max-width: 1200px; margin: 0 auto; padding: 24px 40px 80px; }
.bp-related h2{
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.01em;
    line-height: 1.15;
    margin: 0 0 22px; color: var(--ink);
}
.bp-related h2 em{
    font-style: normal;
    background: var(--accent-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bp-related-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bp-related-empty{ color: rgba(255,255,255,0.4); font-size: 0.95rem; margin: 0; }
.bp-related-empty a{ color: rgba(255,255,255,0.6); text-decoration: underline; }
.bp-related-empty a:hover{ color: #fff; }
.bp-rel{
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .3s, box-shadow .3s, border-color .2s;
    display: flex; flex-direction: column;
}
.bp-rel:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -16px rgba(0,0,0,0.55);
    border-color: rgba(255,255,255,0.22);
}
.bp-rcov{
    aspect-ratio: 16/10; position: relative;
    background-size: cover; background-position: center;
    background-color: #0a1a2e;
}
.bp-rcov::after{
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.45));
}
.bp-rcov-tag{
    position: absolute; left: 12px; top: 12px; z-index: 1;
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    letter-spacing: .18em; text-transform: uppercase;
    background: rgba(0,0,0,0.55); color: #fff;
    padding: 4px 9px; border-radius: 999px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.12);
}
.bp-rel-body{ padding: 18px; }
.bp-rel-meta{
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-2); margin-bottom: 6px;
}
.bp-rel-body h3{
    font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: 16px; line-height: 1.3; letter-spacing: -.005em;
    margin: 0; color: var(--ink);
}

/* ── Responsive ── */
@media (max-width: 920px){
    .bp-article{ padding: 130px 22px 56px; }
    .bp-related{ padding: 20px 22px 60px; }
    .bp-related-grid{ grid-template-columns: 1fr 1fr; }
    .bp-ad-banner-slot{ min-height: 100px; border-radius: 10px; }
}

@media (max-width: 640px){
    .bp-article{ padding: 110px 16px 48px; }
    .bp-crumbs{ font-size: 10px; gap: 8px; margin-bottom: 18px; }
    /* Keep the back pill + category pill on a single line and shrink them
       proportionally so the row never wraps on phones. */
    .bp-meta-row{ flex-wrap: nowrap; gap: 5px; }
    .bp-back, .bp-tag{ height: 26px; padding: 0 9px; }
    .bp-back{ font-size: 11px; gap: 5px; min-width: 0; flex-shrink: 0; }
    .bp-back svg{ width: 12px; height: 12px; }
    .bp-tag{
        font-size: 9px; letter-spacing: .12em; gap: 5px;
        min-width: 0; flex: 1 1 auto;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .bp-tag .dot{ width: 5px; height: 5px; flex-shrink: 0; }
    .bp-tag-eye{ width: 9px; height: 9px; flex-shrink: 0; }
    .bp-hero{ aspect-ratio: 16 / 9; border-radius: 14px; margin-bottom: 22px; }
    .bp-title{ font-size: clamp(22px, 6vw, 30px); margin: 14px 0 10px; line-height: 1.15; }
    .bp-dek{ font-size: 16px; margin-bottom: 24px; }

    .bp-byline{
        flex-direction: column; align-items: flex-start;
        gap: 14px; padding: 16px 0; margin-bottom: 28px;
    }
    .bp-byline-meta{ text-align: left; }

    .bp-body{ font-size: 16px; line-height: 1.7; }
    .bp-body h2{ margin-top: 36px; }
    .bp-body blockquote{ font-size: 18px; padding: 16px 18px; margin: 24px 0; }

    .bp-ad-banner{ margin: 32px 0; }
    .bp-ad-banner-slot{ min-height: 90px; }

    .bp-foot{ margin-top: 36px; }
    .bp-promo-banner{ aspect-ratio: 4 / 1; border-radius: 14px; }

    .bp-comments{ margin-top: 40px; padding-top: 24px; }
    .bp-comments-head h3{ font-size: 19px; }
    .bp-comments-sub{ font-size: 12.5px; }
    .bp-comments-list{ gap: 14px; }
    .bp-comment{ padding: 14px; gap: 12px; border-radius: 12px; }
    .bp-comment-av{ width: 36px; height: 36px; font-size: 12px; }
    .bp-comment-meta b{ font-size: 13.5px; }
    .bp-comment-body p{ font-size: 14px; }
    .bp-comments-toggle{ font-size: 12px; padding: 9px 14px; }
    .bp-comment-form{ padding: 18px; border-radius: 12px; }
    .bp-comment-form h4{ font-size: 15px; }

    .bp-related{ padding: 16px 16px 56px; }
    .bp-related h3{ font-size: 22px; margin-bottom: 16px; }
    .bp-related-grid{ grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 380px){
    .bp-article{ padding: 100px 14px 40px; }
    .bp-title{ font-size: 22px; line-height: 1.15; }
    /* Tightest pill scale for very narrow phones (≤380px). */
    .bp-back, .bp-tag{ height: 24px; padding: 0 8px; }
    .bp-back{ font-size: 10.5px; }
    .bp-back svg{ width: 11px; height: 11px; }
    .bp-tag{ font-size: 8.5px; letter-spacing: .1em; }
}

/* Body paragraphs justified (moved out of inline styles for cleaner markup). */
.bp-body p { text-align: justify; }