/* ==========================================================================
   Blog post — article details page
   Scope: Blog/Details view only. Prefix: blog-post-
   Built on notebook-details.css (OurServices/Details), which the view also loads:
   .notebook-details-wrap gives the width/margins and .notebook-details-container
   the mint surface. The values below are that component's tokens — mint #eaf4ee,
   border #d8e7dd, 18px radius, white inner blocks, #284d3c headings with the
   #4CAF50 dot, #28a850 accent — applied to article content.
   ========================================================================== */

.blog-post-page {
    --bp-surface: #eaf4ee;
    --bp-border: #d8e7dd;
    --bp-divider: #eef3f0;
    --bp-radius: 18px;
    --bp-ink: #1f2b2a;
    --bp-heading: #284d3c;
    --bp-text: #555;
    --bp-muted: #6a6c71;
    --bp-accent: #28a850;
    --bp-accent-deep: #017e3d;
    --bp-dot: #4CAF50;
    background: #f7f8f7;
    padding: 1px 0 48px;
    overflow-x: clip;
}

.blog-post { text-align: start; }

/* ---- Mint surface (.notebook-details-container) ------------------------- */
.blog-post__surface { display: flex; flex-direction: column; gap: 24px; }

/* Same treatment as .notebook-details-header: white strip, 18px radius, divider,
   media chip at the start and the title beside it. */
.blog-post__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    background: #fff;
    border-radius: var(--bp-radius);
    border-bottom: 1px solid var(--bp-divider);
    padding: 3%;
}
.blog-post__heading { flex: 1 1 auto; min-width: 0; }

.blog-post__category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    color: var(--bp-accent-deep);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.blog-post__category::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bp-dot);
}
.blog-post__category:hover { color: var(--bp-accent-deep); background: #deefe5; }

.blog-post__title {
    font-size: clamp(28px, 2.2vw + 18px, 46px);
    font-weight: 800;
    line-height: 1.35;
    /* Same green the service page uses for its title (.account-wrapper.license h2). */
    color: var(--bp-accent);
    margin: 0 0 14px;
    max-width: 900px;
    text-align: start;
    overflow-wrap: anywhere;
}

.blog-post__meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--bp-muted);
    font-size: 14px;
}
.blog-post__meta svg { width: 17px; height: 17px; color: var(--bp-accent); flex: 0 0 auto; }

/* ---- Article card (white block inside the surface) ---------------------- */
.blog-post__card {
    background: #fff;
    border-radius: var(--bp-radius);
    padding: 24px 24px 32px;
}

/* Media chip — .notebook-details-icon--image (#f4f4f4, 12px radius, cover) at article size. */
.blog-post__media {
    flex: 0 0 auto;
    width: 300px;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f4f4f4;
}
.blog-post__zoom {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.blog-post__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
    transition: transform .4s ease;
}
/* .is-small = the compact header chip: fit the whole image (no crop, no upscale);
   the full-size view is one click away in the lightbox. */
.blog-post__media.is-small img { object-fit: contain; }

/* Clickable hint: faint veil + magnifier chip; the image barely moves. */
.blog-post__zoom::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(31, 43, 42, .28);
    opacity: 0;
    transition: opacity .25s ease;
}
.blog-post__zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    color: var(--bp-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.9);
    transition: opacity .25s ease, transform .25s ease;
}
.blog-post__zoom-icon svg { width: 22px; height: 22px; }
.blog-post__zoom:hover img,
.blog-post__zoom:focus-visible img { transform: scale(1.03); }
.blog-post__zoom:hover::after,
.blog-post__zoom:focus-visible::after,
.blog-post__zoom:hover .blog-post__zoom-icon,
.blog-post__zoom:focus-visible .blog-post__zoom-icon { opacity: 1; transform: none; }
.blog-post__zoom:focus-visible { outline: 3px solid rgba(40, 168, 80, .4); outline-offset: 2px; }
/* Touch screens have no hover — keep the magnifier visible so the image reads as tappable. */
@media (hover: none) {
    .blog-post__zoom-icon { opacity: 1; transform: none; top: auto; left: auto; bottom: 10px; inset-inline-end: 10px; margin: 0; width: 38px; height: 38px; }
}

/* Body images that joined the gallery. */
.blog-post__zoom--inline { display: inline-block; width: auto; height: auto; cursor: zoom-in; }

/* Lightbox (existing Magnific Popup): lock the page behind it — this sheet only loads here. */
html:has(.mfp-wrap), html:has(.mfp-wrap) body { overflow: hidden; }
.mfp-img { border-radius: 12px; padding: 0 !important; margin: 40px auto; }

/* ---- Body: editor HTML, notebook-details heading/text language ---------- */
.blog-post__body {
    max-width: 790px;
    margin: 0 auto;
    color: var(--bp-text);
    font-size: 18px;
    line-height: 2;
    text-align: start;
    overflow-wrap: break-word;
}
.blog-post__body > *:first-child { margin-top: 0; }
.blog-post__body > *:last-child { margin-bottom: 0; }
.blog-post__body p { margin: 0 0 1.25em; text-align: start; }

.blog-post__body h1,
.blog-post__body h2,
.blog-post__body h3,
.blog-post__body h4 {
    position: relative;
    color: var(--bp-heading);
    font-weight: 700;
    line-height: 1.5;
    text-align: start;
    padding-inline-start: 20px;
    margin: 1.8em 0 .7em;
}
.blog-post__body h1, .blog-post__body h2 { font-size: 26px; }
.blog-post__body h3 { font-size: 21px; }
.blog-post__body h4 { font-size: 18px; }
.blog-post__body h1::before,
.blog-post__body h2::before,
.blog-post__body h3::before,
.blog-post__body h4::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .75em;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bp-dot);
}

.blog-post__body ul,
.blog-post__body ol { margin: 0 0 1.4em; padding-inline-start: 1.6em; }
.blog-post__body li { margin-bottom: .45em; }
.blog-post__body li::marker { color: var(--bp-accent); }

.blog-post__body a {
    color: var(--bp-accent-deep);
    text-decoration: underline;
    text-decoration-color: rgba(40, 168, 80, .35);
    text-underline-offset: 4px;
}
.blog-post__body a:hover { text-decoration-color: currentColor; }

.blog-post__body strong,
.blog-post__body b { color: var(--bp-heading); font-weight: 600; }

.blog-post__body blockquote {
    margin: 1.8em 0;
    padding: 18px 22px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-inline-start: 4px solid var(--bp-accent);
    border-radius: 14px;
    color: var(--bp-heading);
}
.blog-post__body blockquote p:last-child { margin-bottom: 0; }

.blog-post__body img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-post__body iframe,
.blog-post__body video { max-width: 100%; border-radius: 12px; }
.blog-post__body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 1.4em; }
.blog-post__body th,
.blog-post__body td { border: 1px solid var(--bp-divider); padding: 8px 12px; }

/* ---- Share / back -------------------------------------------------------- */
.blog-post__actions {
    max-width: 790px;
    margin: 40px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--bp-divider);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.blog-post__share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.blog-post__share-label { font-size: 15px; font-weight: 700; color: var(--bp-heading); margin-inline-end: 6px; }

/* Icon chip look of .notebook-details-icon (#f4f4f4, 12px radius). */
.blog-post__share-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: #f4f4f4;
    color: var(--bp-heading);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .3s ease;
}
.blog-post__share-btn svg { width: 18px; height: 18px; }
.blog-post__share-btn:hover { background: var(--bp-accent); color: #fff; transform: translateY(-2px); }
.blog-post__copied { font-size: 13px; font-weight: 600; color: var(--bp-accent-deep); }

.blog-post__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 22px;
    border-radius: 12px;
    border: 1px solid var(--bp-border);
    background: var(--bp-surface);
    color: var(--bp-heading);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.blog-post__back svg { width: 18px; height: 18px; transition: transform .2s ease; }
/* "Back" points right in RTL; mirrored for the English (LTR) page. */
html[dir="ltr"] .blog-post__back svg { transform: scaleX(-1); }
.blog-post__back:hover { background: var(--bp-accent); border-color: var(--bp-accent); color: #fff; }
html[dir="rtl"] .blog-post__back:hover svg { transform: translateX(3px); }
html[dir="ltr"] .blog-post__back:hover svg { transform: scaleX(-1) translateX(3px); }

.blog-post__category:focus-visible,
.blog-post__share-btn:focus-visible,
.blog-post__back:focus-visible {
    outline: 3px solid rgba(40, 168, 80, .4);
    outline-offset: 2px;
}

/* ---- Related: _BlogCard in the notebook card style ---------------------- */
.blog-post__related { margin-top: 48px; }
.blog-post__related-title {
    position: relative;
    font-size: clamp(22px, 1.2vw + 16px, 28px);
    font-weight: 700;
    color: var(--bp-heading);
    margin: 0 0 24px;
    padding-inline-start: 20px;
    text-align: start;
}
.blog-post__related-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bp-dot);
}
.blog-post__related .blog-card {
    background: #fff;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    overflow: hidden;
    box-shadow: 0 12px 32px -8px rgba(31, 43, 42, .12);
    transition: transform .3s ease;
}
/* Same lift as .notebook-details-card:hover. */
.blog-post__related .blog-card:hover { transform: translateY(-4px); }
.blog-post__related .blog-card__media { border-radius: 0; }
.blog-post__related .blog-card__body { padding: 18px 20px 22px; }

/* ---- Entrance motion ----------------------------------------------------- */
@keyframes blog-post-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
.blog-post__header { animation: blog-post-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
.blog-post__card { animation: blog-post-rise .5s cubic-bezier(.2, .7, .2, 1) .08s both; }

@media (prefers-reduced-motion: reduce) {
    .blog-post *,
    .blog-post *::before { animation: none !important; transition: none !important; }
}

/* ---- Responsive (breakpoints match notebook-details.css) ----------------- */
@media (max-width: 991.98px) {
    .blog-post__header { gap: 22px; }
    .blog-post__media { width: 220px; }
}

@media (max-width: 767.98px) {
    .blog-post-page { padding-bottom: 32px; }
    /* notebook-details-wrap uses 15px; the article page wants a 16px+ gutter on phones. */
    .blog-post-page .notebook-details-wrap { padding-inline: 16px; }
    .blog-post__surface { gap: 16px; }
    /* Phones: chip becomes a full-width image on top — a 300px chip beside a title won't fit. */
    .blog-post__header { flex-direction: column; align-items: stretch; gap: 18px; padding: 14px 14px 20px; border-radius: 14px; }
    .blog-post__heading { padding-inline: 6px; }
    .blog-post__card { padding: 12px 12px 24px; border-radius: 14px; }
    .blog-post__media { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; }
    .blog-post__body { font-size: 16.5px; line-height: 1.9; padding-inline: 6px; }
    .blog-post__body h1, .blog-post__body h2 { font-size: 22px; }
    .blog-post__body h3 { font-size: 19px; }
    .blog-post__actions { margin-top: 28px; padding-inline: 6px; flex-direction: column; align-items: stretch; }
    .blog-post__related { margin-top: 36px; }
}

@media (max-width: 575.98px) {
    /* notebook-details-container drops to 24px here; go a little tighter on phones. */
    .blog-post__surface.notebook-details-container { padding: 16px; }
}