/* ==========================================================================
   Blog article (/blog/{slug}) in the approved design language. The blade keeps
   its semantic markup (.bp-*) and its server side work (schema, TOC, FAQ,
   related posts); this sheet is the whole design: the soft canvas, an
   editorial head (breadcrumb, meta chips, a balanced display title, the lead)
   above the cover in a rounded frame (the title never sits on the picture),
   a 760px reading measure in Inter, the table of contents, share, author and
   FAQ as glass cards, the trust block and related posts as glass, one deep
   navy plate for the call to action with the orange pill, the national mark
   faint in the plate's corner. Wide monitors grow with --bp-scale.
   ========================================================================== */

:root {
    --bp-scale: 1;
    --bp-ink: #0b1220;
    --bp-ink-2: #253247;
    --bp-ink-3: #3f4d66;
    --bp-muted: #5b6478;
    --bp-blue: #2563eb;
    --bp-blue-deep: #1d4ed8;
    --bp-green: #059669;
    --bp-line: rgba(30, 58, 138, 0.1);
    --bp-line-strong: rgba(30, 58, 138, 0.2);
    --bp-display: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bp-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --bp-measure: calc(760px * var(--bp-scale));
    --bp-wide: calc(1080px * var(--bp-scale));
    --bp-leaf: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23ffffff'><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z'/><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z' transform='rotate(90 50 50)'/><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z' transform='rotate(270 50 50)'/><path d='M50 50C52 62 50 70 58 80 51 76 46 68 47 55Z'/></g></svg>");
    --bp-crown: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffffff'><path d='M5 16 3.2 6.6a.5.5 0 0 1 .8-.5L8.6 9.6 11.56 4.3a.5.5 0 0 1 .88 0l2.96 5.3 4.6-3.5a.5.5 0 0 1 .8.5L19 16H5Z'/><path d='M5.2 17.6h13.6a.9.9 0 0 1 .9.9v.8a.9.9 0 0 1-.9.9H5.2a.9.9 0 0 1-.9-.9v-.8a.9.9 0 0 1 .9-.9Z'/></g></svg>");
}

@media (min-width: 1600px) { :root { --bp-scale: 1.08; } }
@media (min-width: 1800px) { :root { --bp-scale: 1.16; } }
@media (min-width: 2200px) { :root { --bp-scale: 1.28; } }

/* ---- the canvas and the reading progress ------------------------------------ */
body.bp-body { background: #f5f8ff; }

.bp-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100001;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb 0%, #059669 100%);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
    pointer-events: none;
    transition: width 0.15s linear;
}

.bp-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(28px, 4vw, 52px) 24px clamp(64px, 8vw, 104px);
    background: linear-gradient(180deg, #f7f9fe 0%, #eef3fd 45%, #eaf6f2 100%);
    font-family: var(--bp-body);
    color: var(--bp-ink);
}

.bp-page::before,
.bp-page::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.bp-page::before { top: -160px; left: -180px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, rgba(37, 99, 235, 0) 70%); }
.bp-page::after { top: 520px; right: -220px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(5, 150, 105, 0.16) 0%, rgba(5, 150, 105, 0) 70%); }

.bp-page main { position: relative; z-index: 1; display: block; }

/* ---- breadcrumb ---------------------------------------------------------- */
.bp-page .bp-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    max-width: var(--bp-wide);
    margin: 0 auto calc(26px * var(--bp-scale));
    font-family: var(--bp-body);
    font-size: calc(13.5px * var(--bp-scale));
    font-weight: 600;
    line-height: 1.4;
    color: var(--bp-muted);
}

.bp-page .bp-crumb a { color: var(--bp-ink-2); text-decoration: none; transition: color 0.2s var(--bp-ease); }
.bp-page .bp-crumb a:hover { color: var(--bp-blue-deep); }
.bp-page .bp-crumb .sep { color: rgba(30, 58, 138, 0.3); }
.bp-page .bp-crumb span:last-child { color: var(--bp-muted) !important; }

/* ---- the editorial head: meta chips, the title, the lead ----------------- */
.bp-page .bp-head {
    max-width: calc(820px * var(--bp-scale));
    margin: 0 auto;
    text-align: center;
}

.bp-page .bp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    margin: 0 0 calc(18px * var(--bp-scale));
}

.bp-page .bp-tag {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    font-family: var(--bp-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 10px 22px -12px rgba(29, 78, 216, 0.7);
}

.bp-page .bp-date,
.bp-page .bp-read {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--bp-line);
    font-family: var(--bp-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bp-ink-2);
}

.bp-page .bp-read svg { width: 15px; height: 15px; stroke: var(--bp-blue-deep); fill: none; stroke-width: 2; stroke-linecap: round; }

.bp-page .bp-head h1 {
    margin: 0 0 calc(16px * var(--bp-scale));
    font-family: var(--bp-display);
    font-size: clamp(30px, 3.6vw, calc(46px * var(--bp-scale)));
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--bp-ink);
    text-wrap: balance;
}

.bp-page .bp-lead {
    max-width: calc(700px * var(--bp-scale));
    margin: 0 auto;
    font-family: var(--bp-body);
    font-size: clamp(17px, 1.3vw, calc(19px * var(--bp-scale)));
    font-weight: 500;
    line-height: 1.6;
    color: var(--bp-ink-3);
    text-wrap: pretty;
}

/* ---- the cover in a frame, never under the title -------------------------- */
.bp-page .bp-cover {
    max-width: calc(960px * var(--bp-scale));
    margin: calc(34px * var(--bp-scale)) auto 0;
    padding: 8px;
    border-radius: calc(30px * var(--bp-scale));
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 40px 90px -36px rgba(11, 31, 58, 0.4), 0 0 0 1px var(--bp-line);
}

.bp-page .bp-cover img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(520px * var(--bp-scale));   /* a tall photo is cropped to the frame, a wide illustration keeps its shape */
    object-fit: cover;
    border-radius: calc(22px * var(--bp-scale));
    background: #eef3fd;
}

/* ---- the table of contents ---------------------------------------------- */
.bp-page .bp-toc { max-width: var(--bp-measure); margin: calc(36px * var(--bp-scale)) auto 0; }

.bp-page .bp-toc-box {
    padding: calc(22px * var(--bp-scale)) calc(26px * var(--bp-scale));
    border-radius: calc(22px * var(--bp-scale));
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--bp-line);
    box-shadow: 0 24px 60px -36px rgba(11, 31, 58, 0.35);
}

.bp-page .bp-toc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--bp-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-muted);
}

.bp-page .bp-toc-title svg { width: 18px; height: 18px; stroke: var(--bp-blue-deep); fill: none; stroke-width: 2; stroke-linecap: round; }

.bp-page .bp-toc-list { margin: 0; padding: 0; list-style: none; counter-reset: bp-toc; display: grid; gap: 6px; }
.bp-page .bp-toc-list li { counter-increment: bp-toc; display: flex; align-items: baseline; gap: 12px; }
.bp-page .bp-toc-list li::before {
    content: counter(bp-toc, decimal-leading-zero);
    flex: 0 0 auto;
    font-family: var(--bp-display);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--bp-blue-deep);
}
.bp-page .bp-toc-list a { font-family: var(--bp-body); font-size: calc(15.5px * var(--bp-scale)); font-weight: 600; line-height: 1.45; color: var(--bp-ink-2); text-decoration: none; transition: color 0.2s var(--bp-ease); }
.bp-page .bp-toc-list a:hover { color: var(--bp-blue-deep); }
@media (min-width: 900px) { .bp-page .bp-toc-list { grid-template-columns: 1fr 1fr; column-gap: 28px; } }

/* ---- the article ------------------------------------------------------------ */
.bp-page .bp-article { max-width: var(--bp-measure); margin: calc(36px * var(--bp-scale)) auto 0; }

.bp-page .bp-content {
    font-family: var(--bp-body);
    font-size: calc(17.5px * var(--bp-scale));
    font-weight: 400;
    line-height: 1.75;
    color: var(--bp-ink-2);
    overflow-wrap: anywhere;
}

.bp-page .bp-content > *:first-child { margin-top: 0; }
.bp-page .bp-content p { margin: 0 0 calc(20px * var(--bp-scale)); }
.bp-page .bp-content strong, .bp-page .bp-content b { font-weight: 700; color: var(--bp-ink); }
.bp-page .bp-content a { color: var(--bp-blue-deep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(29, 78, 216, 0.35); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color 0.2s var(--bp-ease); }
.bp-page .bp-content a:hover { text-decoration-color: var(--bp-blue-deep); }

.bp-page .bp-content h2 {
    margin: calc(44px * var(--bp-scale)) 0 calc(16px * var(--bp-scale));
    font-family: var(--bp-display);
    font-size: clamp(24px, 2.3vw, calc(31px * var(--bp-scale)));
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--bp-ink);
    scroll-margin-top: 96px;
    text-wrap: balance;
}

.bp-page .bp-content h3 {
    margin: calc(32px * var(--bp-scale)) 0 calc(12px * var(--bp-scale));
    font-family: var(--bp-display);
    font-size: clamp(20px, 1.7vw, calc(23px * var(--bp-scale)));
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--bp-ink);
    scroll-margin-top: 96px;
}

.bp-page .bp-content h4 { margin: 26px 0 10px; font-family: var(--bp-display); font-size: 18px; font-weight: 700; color: var(--bp-ink); }

.bp-page .bp-content ul, .bp-page .bp-content ol { margin: 0 0 calc(22px * var(--bp-scale)); padding: 0 0 0 calc(26px * var(--bp-scale)); }
.bp-page .bp-content li { margin: 0 0 calc(8px * var(--bp-scale)); padding-left: 4px; }
.bp-page .bp-content li::marker { color: var(--bp-blue-deep); font-weight: 700; }
.bp-page .bp-content li > ul, .bp-page .bp-content li > ol { margin: 8px 0 0; }

.bp-page .bp-content blockquote {
    position: relative;
    margin: calc(28px * var(--bp-scale)) 0;
    padding: calc(24px * var(--bp-scale)) calc(28px * var(--bp-scale)) calc(24px * var(--bp-scale)) calc(64px * var(--bp-scale));
    border-radius: calc(22px * var(--bp-scale));
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--bp-line);
    box-shadow: 0 24px 60px -36px rgba(11, 31, 58, 0.35);
    font-family: var(--bp-display);
    font-size: calc(19px * var(--bp-scale));
    font-weight: 600;
    line-height: 1.5;
    color: var(--bp-ink);
}

.bp-page .bp-content blockquote::before {
    content: '\201C';
    position: absolute;
    left: calc(22px * var(--bp-scale));
    top: calc(10px * var(--bp-scale));
    font-family: var(--bp-display);
    font-size: calc(56px * var(--bp-scale));
    font-weight: 800;
    line-height: 1;
    color: var(--bp-blue);
    opacity: 0.55;
}

.bp-page .bp-content blockquote p { margin: 0; }
.bp-page .bp-content blockquote p + p { margin-top: 12px; }

.bp-page .bp-content img, .bp-page .bp-content figure { display: block; max-width: 100%; height: auto; margin: calc(28px * var(--bp-scale)) 0; border-radius: calc(20px * var(--bp-scale)); box-shadow: 0 30px 70px -36px rgba(11, 31, 58, 0.45); }
.bp-page .bp-content figure img { margin: 0; box-shadow: none; }
.bp-page .bp-content figcaption { margin: 10px 0 0; font-size: 14px; font-weight: 500; color: var(--bp-muted); text-align: center; }
.bp-page .bp-content hr { height: 1px; margin: calc(36px * var(--bp-scale)) 0; border: 0; background: var(--bp-line); }
.bp-page .bp-content code { padding: 2px 7px; border-radius: 6px; background: rgba(30, 58, 138, 0.07); font-size: 0.92em; }

/* tables: a glass frame, the head in the display face, a swipe on phones */
.bp-page .bp-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: calc(28px * var(--bp-scale)) 0;
    border-collapse: collapse;
    border-radius: calc(20px * var(--bp-scale));
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--bp-line);
    box-shadow: 0 24px 60px -36px rgba(11, 31, 58, 0.35);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: calc(15.5px * var(--bp-scale));
    line-height: 1.55;
}

.bp-page .bp-content table thead, .bp-page .bp-content table tbody, .bp-page .bp-content table tr { width: 100%; }
.bp-page .bp-content table thead { display: table-header-group; }
.bp-page .bp-content table tbody { display: table-row-group; }
.bp-page .bp-content table tr { display: table-row; }
.bp-page .bp-content table th, .bp-page .bp-content table td { display: table-cell; padding: calc(13px * var(--bp-scale)) calc(18px * var(--bp-scale)); text-align: left; vertical-align: top; border-bottom: 1px solid var(--bp-line); overflow-wrap: normal; hyphens: manual; }
.bp-page .bp-content table th { white-space: nowrap; }
.bp-page .bp-content table th { font-family: var(--bp-display); font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-blue-deep); background: rgba(37, 99, 235, 0.06); }
.bp-page .bp-content table tr:last-child td { border-bottom: 0; }
.bp-page .bp-content table td strong { color: var(--bp-ink); }
@supports (width: max-content) { .bp-page .bp-content table thead, .bp-page .bp-content table tbody { display: table-header-group; min-width: 100%; } .bp-page .bp-content table tbody { display: table-row-group; } }

/* the FAQ block inside the article: question cards */
.bp-page .bp-content .bp-faq { display: grid; gap: 12px; margin: calc(20px * var(--bp-scale)) 0 calc(28px * var(--bp-scale)); }
.bp-page .bp-content .bp-faq-item {
    padding: calc(20px * var(--bp-scale)) calc(24px * var(--bp-scale));
    border-radius: calc(20px * var(--bp-scale));
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--bp-line);
    box-shadow: 0 24px 60px -36px rgba(11, 31, 58, 0.3);
}
.bp-page .bp-content .bp-faq-item + .bp-faq-item { margin-top: 12px; }
.bp-page .bp-content .bp-faq > .bp-faq-item + .bp-faq-item { margin-top: 0; }
.bp-page .bp-content .bp-faq-item h3 { position: relative; margin: 0 0 8px; padding-left: 30px; font-size: calc(18px * var(--bp-scale)); font-weight: 700; line-height: 1.35; }
.bp-page .bp-content .bp-faq-item h3::before { content: '?'; position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; font-family: var(--bp-display); font-size: 12px; font-weight: 800; }
.bp-page .bp-content .bp-faq-item p { margin: 0; padding-left: 30px; font-size: calc(16px * var(--bp-scale)); line-height: 1.65; color: var(--bp-ink-3); }
.bp-page .bp-content .bp-faq-item p + p { margin-top: 8px; }

/* ---- share --------------------------------------------------------------- */
.bp-page .bp-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: var(--bp-measure);
    margin: calc(40px * var(--bp-scale)) auto 0;
    padding: calc(24px * var(--bp-scale)) 0 0;
    border-top: 1px solid var(--bp-line);
}

.bp-page .bp-share-label { font-family: var(--bp-body); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-muted); }
.bp-page .bp-share-links { display: flex; gap: 10px; }
.bp-page .bp-share-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--bp-line-strong);
    background: rgba(255, 255, 255, 0.85);
    color: var(--bp-ink-2);
    cursor: pointer;
    transition: transform 0.2s var(--bp-ease), color 0.2s var(--bp-ease), border-color 0.2s var(--bp-ease), background 0.2s var(--bp-ease);
}
.bp-page .bp-share-btn svg { width: 18px; height: 18px; fill: currentColor; }
.bp-page .bp-share-btn svg [fill="none"] { fill: none; }
.bp-page .bp-share-btn:hover { color: var(--bp-blue-deep); border-color: rgba(37, 99, 235, 0.45); background: #ffffff; transform: translateY(-2px); }
.bp-page .bp-share-btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3); }

/* ---- author ---------------------------------------------------------------- */
.bp-page .bp-author { max-width: var(--bp-measure); margin: calc(28px * var(--bp-scale)) auto 0; }
.bp-page .bp-author-card {
    display: flex;
    align-items: center;
    gap: calc(18px * var(--bp-scale));
    padding: calc(20px * var(--bp-scale)) calc(24px * var(--bp-scale));
    border-radius: calc(22px * var(--bp-scale));
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--bp-line);
    box-shadow: 0 24px 60px -36px rgba(11, 31, 58, 0.35);
}
.bp-page .bp-author-av {
    display: grid;
    place-items: center;
    width: calc(56px * var(--bp-scale));
    height: calc(56px * var(--bp-scale));
    flex: 0 0 auto;
    border-radius: 18px;
    background: linear-gradient(135deg, #0b1f3a 0%, #1d4ed8 100%);
    color: #ffffff;
    font-family: var(--bp-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 16px 30px -16px #1d4ed8;
}
.bp-page .bp-author-info h3 { margin: 0 0 4px; font-family: var(--bp-display); font-size: calc(17px * var(--bp-scale)); font-weight: 700; color: var(--bp-ink); }
.bp-page .bp-author-info p { margin: 0; font-family: var(--bp-body); font-size: calc(15px * var(--bp-scale)); font-weight: 500; line-height: 1.55; color: var(--bp-ink-3); }
.bp-page .bp-author-info a { color: var(--bp-blue-deep); font-weight: 700; text-decoration: none; }
.bp-page .bp-author-info a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- the trust block (landing-seo-guide) in glass, on the article and the list -- */
:is(.bp-page, .bl-page) .bseo { position: relative; max-width: var(--bp-wide); margin: calc(64px * var(--bp-scale)) auto 0; padding: 0; background: none; }
:is(.bp-page, .bl-page) .bseo__bg { display: none; }
:is(.bp-page, .bl-page) .bseo__shell { max-width: none; padding: 0; }
:is(.bp-page, .bl-page) .bseo__head { max-width: calc(760px * var(--bp-scale)); margin: 0 auto calc(28px * var(--bp-scale)); text-align: center; }
:is(.bp-page, .bl-page) .bseo__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--bp-body); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-blue-deep); }
:is(.bp-page, .bl-page) .bseo__eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); }
:is(.bp-page, .bl-page) .bseo__title { margin: 0 0 12px; font-family: var(--bp-display); font-size: clamp(26px, 2.8vw, calc(36px * var(--bp-scale))); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: var(--bp-ink); text-wrap: balance; }
:is(.bp-page, .bl-page) .bseo__lead { margin: 0; font-family: var(--bp-body); font-size: calc(17px * var(--bp-scale)); font-weight: 500; line-height: 1.6; color: var(--bp-ink-3); text-wrap: pretty; }
:is(.bp-page, .bl-page) .bseo__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 calc(22px * var(--bp-scale)); padding: 0; list-style: none; }
:is(.bp-page, .bl-page) .bseo__metric { display: grid; gap: 4px; padding: calc(20px * var(--bp-scale)) 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--bp-line); text-align: center; box-shadow: 0 24px 60px -36px rgba(11, 31, 58, 0.3); }
:is(.bp-page, .bl-page) .bseo__metricVal { font-family: var(--bp-display); font-size: clamp(24px, 2.2vw, calc(30px * var(--bp-scale))); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--bp-blue-deep); }
:is(.bp-page, .bl-page) .bseo__metricLbl { font-family: var(--bp-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--bp-muted); }
:is(.bp-page, .bl-page) .bseo__card { padding: calc(32px * var(--bp-scale)); border-radius: calc(28px * var(--bp-scale)); background: rgba(255, 255, 255, 0.82); border: 1px solid var(--bp-line); box-shadow: 0 30px 70px -36px rgba(11, 31, 58, 0.4); }
:is(.bp-page, .bl-page) .bseo__split { display: grid; grid-template-columns: 1fr 1.45fr; gap: calc(32px * var(--bp-scale)); align-items: start; }
:is(.bp-page, .bl-page) .bseo__highlightsTitle { margin: 0 0 12px; font-family: var(--bp-body); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-muted); }
:is(.bp-page, .bl-page) .bseo__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
:is(.bp-page, .bl-page) .bseo__list li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--bp-body); font-size: calc(15.5px * var(--bp-scale)); font-weight: 500; line-height: 1.55; color: var(--bp-ink-2); }
:is(.bp-page, .bl-page) .bseo__list strong { color: var(--bp-ink); font-weight: 700; }
:is(.bp-page, .bl-page) .bseo__dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 0.5em; border-radius: 50%; background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.14); }
:is(.bp-page, .bl-page) .bseo__copy p { margin: 0 0 14px; font-family: var(--bp-body); font-size: calc(16px * var(--bp-scale)); font-weight: 400; line-height: 1.7; color: var(--bp-ink-2); }
:is(.bp-page, .bl-page) .bseo__copy p:last-child { margin-bottom: 0; }
:is(.bp-page, .bl-page) .bseo__copy strong { color: var(--bp-ink); font-weight: 700; }
:is(.bp-page, .bl-page) .bseo__copy a { color: var(--bp-blue-deep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(29, 78, 216, 0.35); text-underline-offset: 3px; }
:is(.bp-page, .bl-page) .bseo__nav { display: flex; flex-wrap: wrap; gap: 8px; margin: calc(24px * var(--bp-scale)) 0 0; padding: calc(22px * var(--bp-scale)) 0 0; border-top: 1px solid var(--bp-line); }
:is(.bp-page, .bl-page) .bseo__chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--bp-line); font-family: var(--bp-body); font-size: 13.5px; font-weight: 600; color: var(--bp-ink-2); text-decoration: none; transition: color 0.2s var(--bp-ease), border-color 0.2s var(--bp-ease), transform 0.2s var(--bp-ease); }
:is(.bp-page, .bl-page) .bseo__chip:hover { color: var(--bp-blue-deep); border-color: rgba(37, 99, 235, 0.4); transform: translateY(-1px); }
:is(.bp-page, .bl-page) .bseo__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: calc(22px * var(--bp-scale)) 0 0; }
:is(.bp-page, .bl-page) .bseo__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; box-sizing: border-box; max-width: 100%; border-radius: 999px; font-family: var(--bp-display); font-size: 15.5px; font-weight: 800; text-decoration: none; transition: transform 0.25s var(--bp-ease), box-shadow 0.25s var(--bp-ease), border-color 0.25s var(--bp-ease), color 0.25s var(--bp-ease); }
:is(.bp-page, .bl-page) .bseo__btn--pri { color: #ffffff; background: linear-gradient(135deg, #ff8a1f 0%, #f26a00 100%); box-shadow: 0 18px 36px -16px rgba(242, 106, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
:is(.bp-page, .bl-page) .bseo__btn--pri:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 24px 44px -16px rgba(242, 106, 0, 0.9), 0 0 0 6px rgba(249, 115, 22, 0.12); }
:is(.bp-page, .bl-page) .bseo__btn--ghost { color: var(--bp-ink); background: rgba(255, 255, 255, 0.85); border: 1px solid var(--bp-line-strong); }
:is(.bp-page, .bl-page) .bseo__btn--ghost:hover { color: var(--bp-blue-deep); border-color: rgba(37, 99, 235, 0.45); transform: translateY(-2px); }

/* ---- related posts ------------------------------------------------------------ */
.bp-page .bp-related { max-width: var(--bp-wide); margin: calc(64px * var(--bp-scale)) auto 0; padding: 0; }
.bp-page .bp-related-title { margin: 0 0 calc(22px * var(--bp-scale)); font-family: var(--bp-display); font-size: clamp(24px, 2.4vw, calc(30px * var(--bp-scale))); font-weight: 800; letter-spacing: -0.02em; color: var(--bp-ink); text-align: center; }
.bp-page .bp-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(20px * var(--bp-scale)); }
.bp-page .bp-related-card {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-radius: calc(24px * var(--bp-scale));
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--bp-line);
    box-shadow: 0 24px 60px -36px rgba(11, 31, 58, 0.35);
    text-decoration: none;
    transition: transform 0.25s var(--bp-ease), box-shadow 0.25s var(--bp-ease), border-color 0.25s var(--bp-ease);
}
.bp-page .bp-related-card:hover { transform: translateY(-4px); border-color: rgba(37, 99, 235, 0.3); box-shadow: 0 30px 70px -34px rgba(11, 31, 58, 0.45); }
.bp-page .bp-related-thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(17px * var(--bp-scale)); background: #eef3fd; }
.bp-page .bp-related-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-page .bp-related-body { padding: calc(16px * var(--bp-scale)) calc(14px * var(--bp-scale)) calc(14px * var(--bp-scale)); }
.bp-page .bp-related-body h3 { margin: 0 0 6px; font-family: var(--bp-display); font-size: calc(17px * var(--bp-scale)); font-weight: 700; line-height: 1.35; color: var(--bp-ink); }
.bp-page .bp-related-body p { margin: 0; font-family: var(--bp-body); font-size: calc(14.5px * var(--bp-scale)); font-weight: 500; line-height: 1.55; color: var(--bp-ink-3); }

/* ---- related training courses: chips ---------------------------------------- */
.bp-page .bp-topics { max-width: var(--bp-wide); margin: calc(56px * var(--bp-scale)) auto 0; text-align: center; }
.bp-page .bp-topics-title { margin: 0 0 calc(18px * var(--bp-scale)); font-family: var(--bp-body); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-muted); }
.bp-page .bp-topics-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bp-page .bp-topics-grid a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--bp-line); font-family: var(--bp-body); font-size: 13.5px; font-weight: 600; color: var(--bp-ink-2); text-decoration: none; transition: color 0.2s var(--bp-ease), border-color 0.2s var(--bp-ease), background 0.2s var(--bp-ease), transform 0.2s var(--bp-ease); }
.bp-page .bp-topics-grid a:hover { color: var(--bp-blue-deep); background: #ffffff; border-color: rgba(37, 99, 235, 0.4); transform: translateY(-1px); }

/* ---- the call to action: the one deep plate ---------------------------------- */
.bp-page .bp-cta { max-width: var(--bp-wide); margin: calc(48px * var(--bp-scale)) auto 0; }
.bp-page .bp-cta-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(28px * var(--bp-scale));
    padding: calc(40px * var(--bp-scale)) calc(44px * var(--bp-scale));
    border-radius: calc(30px * var(--bp-scale));
    background: radial-gradient(900px 400px at 10% 0%, rgba(37, 99, 235, 0.45) 0%, transparent 60%), linear-gradient(135deg, #0b1f3a 0%, #12305e 100%);
    color: #ffffff;
    box-shadow: 0 40px 90px -36px rgba(11, 31, 58, 0.7);
}
html[lang="en-IE"] .bp-page .bp-cta-card::after, html[lang="en-GB"] .bp-page .bp-cta-card::after { content: ''; position: absolute; right: -30px; bottom: -40px; z-index: -1; width: 220px; height: 220px; opacity: 0.08; pointer-events: none; }
html[lang="en-IE"] .bp-page .bp-cta-card::after { background: var(--bp-leaf) no-repeat center / contain; transform: rotate(-14deg); }
html[lang="en-GB"] .bp-page .bp-cta-card::after { background: var(--bp-crown) no-repeat center / contain; transform: rotate(-8deg); }
.bp-page .bp-cta-text { max-width: 640px; }
.bp-page .bp-cta-text h2 { margin: 0 0 10px; font-family: var(--bp-display); font-size: clamp(24px, 2.4vw, calc(32px * var(--bp-scale))); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #ffffff; text-wrap: balance; }
.bp-page .bp-cta-text p { margin: 0; font-family: var(--bp-body); font-size: calc(16.5px * var(--bp-scale)); font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.bp-page .bp-cta-text p a { color: #ffffff !important; font-weight: 700 !important; text-underline-offset: 3px; }
.bp-page .bp-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 56px;
    padding: 0 28px;
    box-sizing: border-box;
    max-width: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff8a1f 0%, #f26a00 100%);
    color: #ffffff;
    font-family: var(--bp-display);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 18px 36px -16px rgba(242, 106, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.25s var(--bp-ease), box-shadow 0.25s var(--bp-ease);
}
.bp-page .bp-cta-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; transition: transform 0.25s var(--bp-ease); }
.bp-page .bp-cta-btn:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 24px 44px -16px rgba(242, 106, 0, 0.95), 0 0 0 6px rgba(249, 115, 22, 0.16); }
.bp-page .bp-cta-btn:hover svg { transform: translateX(3px); }

/* ---- back to the list -------------------------------------------------------- */
.bp-page .bp-back { margin: calc(28px * var(--bp-scale)) auto 0; text-align: center; }
.bp-page .bp-back a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; box-sizing: border-box; max-width: 100%; border-radius: 999px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--bp-line); font-family: var(--bp-body); font-size: 14.5px; font-weight: 700; color: var(--bp-ink-2); text-decoration: none; transition: color 0.2s var(--bp-ease), border-color 0.2s var(--bp-ease), transform 0.2s var(--bp-ease); }
.bp-page .bp-back a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.bp-page .bp-back a:hover { color: var(--bp-blue-deep); border-color: rgba(37, 99, 235, 0.4); transform: translateY(-1px); }

/* ---- tablets and phones -------------------------------------------------------- */
@media (max-width: 900px) {
    :is(.bp-page, .bl-page) .bseo__split { grid-template-columns: 1fr; gap: 24px; }
    :is(.bp-page, .bl-page) .bseo__metrics { grid-template-columns: repeat(2, 1fr); }
    .bp-page .bp-related-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .bp-page .bp-cta-card { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .bp-page { padding: 22px 14px 52px; }
    .bp-page .bp-crumb { justify-content: flex-start; margin-bottom: 18px; font-size: 13px; }
    .bp-page .bp-crumb span:last-child { display: none; }
    .bp-page .bp-crumb .sep:last-of-type { display: none; }
    .bp-page .bp-head { text-align: left; }
    .bp-page .bp-meta { justify-content: flex-start; gap: 8px; }
    .bp-page .bp-head h1 { font-size: 30px; }
    .bp-page .bp-lead { font-size: 16.5px; }
    .bp-page .bp-cover { margin-top: 24px; padding: 6px; border-radius: 22px; }
    .bp-page .bp-cover img { border-radius: 16px; }
    .bp-page .bp-toc { margin-top: 26px; }
    .bp-page .bp-toc-box { padding: 18px 18px; border-radius: 18px; }
    .bp-page .bp-article { margin-top: 28px; }
    .bp-page .bp-content { font-size: 16.5px; line-height: 1.7; }
    .bp-page .bp-content h2 { margin-top: 34px; font-size: 24px; }
    .bp-page .bp-content h3 { font-size: 19.5px; }
    .bp-page .bp-content blockquote { padding: 20px 20px 20px 52px; font-size: 17.5px; }
    .bp-page .bp-content blockquote::before { left: 16px; font-size: 48px; }
    .bp-page .bp-content table { font-size: 14.5px; }
    .bp-page .bp-content table th, .bp-page .bp-content table td { padding: 11px 14px; }
    .bp-page .bp-content .bp-faq-item { padding: 18px 18px; }
    .bp-page .bp-author-card { align-items: flex-start; padding: 18px; }
    :is(.bp-page, .bl-page) .bseo { margin-top: 48px; }
    :is(.bp-page, .bl-page) .bseo__card { padding: 22px 18px; border-radius: 22px; }
    :is(.bp-page, .bl-page) .bseo__metrics { gap: 10px; }
    :is(.bp-page, .bl-page) .bseo__metric { padding: 16px 12px; }
    :is(.bp-page, .bl-page) .bseo__actions .bseo__btn { width: 100%; }
    .bp-page .bp-related { margin-top: 48px; }
    .bp-page .bp-cta-card { padding: 28px 22px; border-radius: 24px; }
    .bp-page .bp-cta-btn { width: 100%; }
    html[lang="en-IE"] .bp-page .bp-cta-card::after, html[lang="en-GB"] .bp-page .bp-cta-card::after { width: 160px; height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
    .bp-page .bp-related-card, .bp-page .bp-cta-btn, :is(.bp-page, .bl-page) .bseo__btn, .bp-page .bp-share-btn { transition: none; }
    .bp-progress { transition: none; }
}

/* ==========================================================================
   The listing (/blogs): the same canvas, a centred head, the featured post
   as a wide glass card, the grid of glass cards, pill pagination and the same
   deep plate for the call to action.
   ========================================================================== */
.bl-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(36px, 5vw, 64px) 24px clamp(64px, 8vw, 104px);
    background: linear-gradient(180deg, #f7f9fe 0%, #eef3fd 45%, #eaf6f2 100%);
    font-family: var(--bp-body);
    color: var(--bp-ink);
}
.bl-page::before, .bl-page::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.bl-page::before { top: -160px; left: -180px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, rgba(37, 99, 235, 0) 70%); }
.bl-page::after { top: 560px; right: -220px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(5, 150, 105, 0.16) 0%, rgba(5, 150, 105, 0) 70%); }

.bl-page .bl-hero { max-width: calc(820px * var(--bp-scale)); margin: 0 auto; padding: 0; background: none; text-align: center; }
.bl-page .bl-hero-inner { max-width: none; padding: 0; }
.bl-page .bl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0 0 18px;
    padding: 0 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    font-family: var(--bp-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 10px 22px -12px rgba(29, 78, 216, 0.7);
}
.bl-page .bl-hero-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bl-page .bl-hero h1 { margin: 0 0 14px; font-family: var(--bp-display); font-size: clamp(34px, 4.4vw, calc(54px * var(--bp-scale))); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: var(--bp-ink); text-wrap: balance; }
.bl-page .bl-hero p { max-width: calc(640px * var(--bp-scale)); margin: 0 auto; font-family: var(--bp-body); font-size: clamp(16.5px, 1.3vw, calc(19px * var(--bp-scale))); font-weight: 500; line-height: 1.6; color: var(--bp-ink-3); text-wrap: pretty; }

.bl-page .bseo { margin-top: calc(44px * var(--bp-scale)); }

/* the featured post */
.bl-page .bl-featured { max-width: var(--bp-wide); margin: calc(56px * var(--bp-scale)) auto 0 !important; padding: 0; position: static !important; }
.bl-page .bl-featured-card { background: none; border: 0; box-shadow: none; }
.bl-page .bl-featured-card > a {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    padding: 10px;
    border-radius: calc(30px * var(--bp-scale));
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--bp-line);
    box-shadow: 0 30px 70px -36px rgba(11, 31, 58, 0.4);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s var(--bp-ease), box-shadow 0.3s var(--bp-ease), border-color 0.3s var(--bp-ease);
}
.bl-page .bl-featured-card > a:hover { transform: translateY(-4px); border-color: rgba(37, 99, 235, 0.3); box-shadow: 0 40px 90px -36px rgba(11, 31, 58, 0.5); }
.bl-page .bl-featured-img { position: relative; min-height: 320px; overflow: hidden; border-radius: calc(22px * var(--bp-scale)); background: #eef3fd; }
.bl-page .bl-featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-page .bl-featured-badge { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, #ff8a1f 0%, #f26a00 100%); color: #ffffff; font-family: var(--bp-body); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 10px 22px -12px rgba(242, 106, 0, 0.9); }
.bl-page .bl-featured-body { display: flex; flex-direction: column; justify-content: center; padding: calc(28px * var(--bp-scale)) calc(36px * var(--bp-scale)); }
.bl-page .bl-featured-date, .bl-page .bl-card-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--bp-body); font-size: 13px; font-weight: 600; color: var(--bp-muted); }
.bl-page .bl-featured-date svg, .bl-page .bl-card-date svg { width: 15px; height: 15px; fill: none; stroke: var(--bp-blue-deep); stroke-width: 2; stroke-linecap: round; }
.bl-page .bl-featured-read { color: var(--bp-muted) !important; margin: 0 !important; }
.bl-page .bl-featured-read::before { content: '\00B7'; margin-right: 8px; color: rgba(30, 58, 138, 0.3); }
.bl-page .bl-featured-title { margin: 0 0 12px; font-family: var(--bp-display); font-size: clamp(24px, 2.4vw, calc(32px * var(--bp-scale))); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--bp-ink); text-wrap: balance; }
.bl-page .bl-featured-desc { margin: 0 0 20px; font-family: var(--bp-body); font-size: calc(16px * var(--bp-scale)); font-weight: 500; line-height: 1.6; color: var(--bp-ink-3); }
.bl-page .bl-featured-link, .bl-page .bl-card-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--bp-display); font-size: 15px; font-weight: 800; color: var(--bp-blue-deep); }
.bl-page .bl-featured-link svg, .bl-page .bl-card-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; transition: transform 0.25s var(--bp-ease); }
.bl-page .bl-featured-card > a:hover .bl-featured-link svg, .bl-page .bl-card > a:hover .bl-card-link svg { transform: translateX(3px); }

/* the grid */
.bl-page .bl-section-label { max-width: var(--bp-wide); margin: calc(52px * var(--bp-scale)) auto calc(18px * var(--bp-scale)); padding: 0; font-family: var(--bp-body); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bp-muted); text-align: center; }
.bl-page .bl-grid-wrap { max-width: var(--bp-wide); margin: 0 auto; padding: 0; }
.bl-page .bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(20px * var(--bp-scale)); }
.bl-page .bl-card { background: none; border: 0; box-shadow: none; }
.bl-page .bl-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px;
    border-radius: calc(24px * var(--bp-scale));
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--bp-line);
    box-shadow: 0 24px 60px -36px rgba(11, 31, 58, 0.35);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s var(--bp-ease), box-shadow 0.25s var(--bp-ease), border-color 0.25s var(--bp-ease);
}
.bl-page .bl-card > a:hover { transform: translateY(-4px); border-color: rgba(37, 99, 235, 0.3); box-shadow: 0 30px 70px -34px rgba(11, 31, 58, 0.45); }
.bl-page .bl-card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(17px * var(--bp-scale)); background: #eef3fd; }
.bl-page .bl-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-page .bl-card-tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--bp-blue-deep); font-family: var(--bp-body); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.bl-page .bl-card-body { flex: 1 1 auto; padding: calc(16px * var(--bp-scale)) calc(14px * var(--bp-scale)) 6px; }
.bl-page .bl-card-date { margin-bottom: 8px; }
.bl-page .bl-card-title { margin: 0 0 6px; font-family: var(--bp-display); font-size: calc(17px * var(--bp-scale)); font-weight: 700; line-height: 1.35; color: var(--bp-ink); }
.bl-page .bl-card-desc { margin: 0; font-family: var(--bp-body); font-size: calc(14.5px * var(--bp-scale)); font-weight: 500; line-height: 1.55; color: var(--bp-ink-3); }
.bl-page .bl-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px calc(14px * var(--bp-scale)) calc(14px * var(--bp-scale)); border: 0; background: none; }
.bl-page .bl-card-link { font-size: 14px; }
.bl-page .bl-card-reading { font-family: var(--bp-body); font-size: 12.5px; font-weight: 600; color: var(--bp-muted); }

/* pagination */
.bl-page .bl-pagination { margin: calc(36px * var(--bp-scale)) auto 0; padding: 0; }
.bl-page .bl-pagination .pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-page .bl-pagination .pagination li, .bl-page .bl-pagination .pagination a { text-decoration: none; }
.bl-page .bl-pagination .pagination li { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--bp-line); font-family: var(--bp-body); font-size: 14px; font-weight: 700; color: var(--bp-ink-2); box-sizing: border-box; transition: color 0.2s var(--bp-ease), border-color 0.2s var(--bp-ease), transform 0.2s var(--bp-ease); }
.bl-page .bl-pagination .pagination li a { color: inherit; }
.bl-page .bl-pagination .pagination a:hover li, .bl-page .bl-pagination .pagination li:has(> a):hover { color: var(--bp-blue-deep); border-color: rgba(37, 99, 235, 0.4); transform: translateY(-1px); }
.bl-page .bl-pagination .pagination li.active { color: #ffffff; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); border-color: transparent; box-shadow: 0 10px 22px -12px rgba(29, 78, 216, 0.8); }
.bl-page .bl-pagination .pagination li.disabled { color: rgba(91, 100, 120, 0.55); background: rgba(255, 255, 255, 0.5); }

/* the call to action, the same plate as the article */
.bl-page .bl-cta { max-width: var(--bp-wide); margin: calc(48px * var(--bp-scale)) auto 0; padding: 0; }
.bl-page .bl-cta-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: calc(28px * var(--bp-scale)); padding: calc(40px * var(--bp-scale)) calc(44px * var(--bp-scale)); border-radius: calc(30px * var(--bp-scale)); background: radial-gradient(900px 400px at 10% 0%, rgba(37, 99, 235, 0.45) 0%, transparent 60%), linear-gradient(135deg, #0b1f3a 0%, #12305e 100%); color: #ffffff; box-shadow: 0 40px 90px -36px rgba(11, 31, 58, 0.7); }
html[lang="en-IE"] .bl-page .bl-cta-card::after, html[lang="en-GB"] .bl-page .bl-cta-card::after { content: ''; position: absolute; right: -30px; bottom: -40px; z-index: -1; width: 220px; height: 220px; opacity: 0.08; pointer-events: none; }
html[lang="en-IE"] .bl-page .bl-cta-card::after { background: var(--bp-leaf) no-repeat center / contain; transform: rotate(-14deg); }
html[lang="en-GB"] .bl-page .bl-cta-card::after { background: var(--bp-crown) no-repeat center / contain; transform: rotate(-8deg); }
.bl-page .bl-cta-content { max-width: 640px; }
.bl-page .bl-cta-content h2 { margin: 0 0 10px; font-family: var(--bp-display); font-size: clamp(24px, 2.4vw, calc(32px * var(--bp-scale))); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #ffffff; text-wrap: balance; }
.bl-page .bl-cta-content p { margin: 0; font-family: var(--bp-body); font-size: calc(16.5px * var(--bp-scale)); font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.bl-page .bl-cta-content p a { color: #ffffff !important; font-weight: 700 !important; text-underline-offset: 3px; }
.bl-page .bl-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; min-height: 56px; padding: 0 28px; box-sizing: border-box; max-width: 100%; border-radius: 999px; background: linear-gradient(135deg, #ff8a1f 0%, #f26a00 100%); color: #ffffff; font-family: var(--bp-display); font-size: 16px; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 18px 36px -16px rgba(242, 106, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: transform 0.25s var(--bp-ease), box-shadow 0.25s var(--bp-ease); }
.bl-page .bl-cta-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; transition: transform 0.25s var(--bp-ease); }
.bl-page .bl-cta-btn:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 24px 44px -16px rgba(242, 106, 0, 0.95), 0 0 0 6px rgba(249, 115, 22, 0.16); }
.bl-page .bl-cta-btn:hover svg { transform: translateX(3px); }
.bl-page .bl-spacer { display: none; }

@media (max-width: 900px) {
    .bl-page .bl-featured-card > a { grid-template-columns: 1fr; }
    .bl-page .bl-featured-img { min-height: 0; aspect-ratio: 16 / 9; }
    .bl-page .bl-featured-body { padding: 22px 18px 18px; }
    .bl-page .bl-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .bl-page .bl-cta-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
    .bl-page { padding: 28px 14px 52px; }
    .bl-page .bl-hero h1 { font-size: 34px; }
    .bl-page .bl-featured { margin-top: 40px !important; }
    .bl-page .bl-featured-card > a { padding: 8px; border-radius: 24px; }
    .bl-page .bl-featured-img { border-radius: 18px; }
    .bl-page .bl-cta-card { padding: 28px 22px; border-radius: 24px; }
    .bl-page .bl-cta-btn { width: 100%; }
    html[lang="en-IE"] .bl-page .bl-cta-card::after, html[lang="en-GB"] .bl-page .bl-cta-card::after { width: 160px; height: 160px; }
}