/* ==========================================================================
   BLOG / ARTICLE RENDERING (shared by the public pages and the editor canvas)
   ========================================================================== */

.bp-doc {
    font-family: "Roboto Condensed", Arial, sans-serif;
    color: inherit;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bp-section {
    padding: var(--bp-pt, 40px) var(--bp-px, 24px) var(--bp-pb, 40px);
}

.bp-inner {
    container-type: inline-size;
    margin: 0 auto;
    width: 100%;
}

.bp-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
    gap: var(--gapy, 16px) var(--gapx, 16px);
    min-width: 0;
}

.bp-item {
    position: relative;
    min-width: 0;
}

.bp-va-start  { align-self: start; }
.bp-va-center { align-self: center; }
.bp-va-end    { align-self: end; }

/* ------------------------------------------------------------------ text */
.bp-item--text {
    overflow-wrap: break-word;
}

.bp-text p { margin: 0 0 .55em; }
.bp-text p:last-child { margin-bottom: 0; }
.bp-text ul,
.bp-text ol { margin: 0 0 .55em; padding-left: 1.35em; }
.bp-text li { margin: 0 0 .25em; }
.bp-text h1,
.bp-text h2,
.bp-text h3 { font-family: "Bebas Neue Cyrillic", sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1.02; margin: .6em 0 .3em; }
.bp-text h2 { font-size: 1.7em; }
.bp-text h3 { font-size: 1.35em; }
.bp-text blockquote { margin: .6em 0; padding-left: 18px; border-left: 2px solid currentColor; }
.bp-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bp-text hr { border: 0; border-top: 1px solid currentColor; opacity: .2; margin: 1.2em 0; }
.bp-text img { max-width: 100%; height: auto; }
.bp-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em; background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px;
}

.bp-t-display {
    font-family: "Bebas Neue Cyrillic", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: .92;
    letter-spacing: .012em;
    font-size: calc(clamp(44px, 7.6vw, 128px) * var(--fs, 1));
}

.bp-t-h1 {
    font-family: "Bebas Neue Cyrillic", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: .01em;
    font-size: calc(clamp(36px, 5.4vw, 88px) * var(--fs, 1));
}

.bp-t-h2 {
    font-family: "Bebas Neue Cyrillic", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: .98;
    letter-spacing: .01em;
    font-size: calc(clamp(28px, 3.6vw, 60px) * var(--fs, 1));
}

.bp-t-h3 {
    font-family: "Bebas Neue Cyrillic", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.04;
    letter-spacing: .02em;
    font-size: calc(clamp(22px, 2.4vw, 40px) * var(--fs, 1));
}

.bp-t-lead {
    line-height: 1.34;
    font-weight: 300;
    font-size: calc(clamp(20px, 2vw, 30px) * var(--fs, 1));
}

.bp-t-body {
    line-height: 1.6;
    font-size: calc(clamp(17px, 1.1vw, 19px) * var(--fs, 1));
}

.bp-t-small {
    line-height: 1.55;
    color: rgba(0, 0, 0, .6);
    font-size: calc(clamp(14px, .9vw, 15px) * var(--fs, 1));
}

.bp-t-caption {
    font-family: "Bebas Neue Cyrillic", sans-serif;
    text-transform: uppercase;
    letter-spacing: .16em;
    line-height: 1.4;
    color: rgba(0, 0, 0, .55);
    font-size: calc(clamp(12px, .85vw, 14px) * var(--fs, 1));
}

.bp-t-quote {
    line-height: 1.32;
    font-weight: 300;
    padding-left: 20px;
    border-left: 2px solid currentColor;
    font-size: calc(clamp(20px, 2.2vw, 32px) * var(--fs, 1));
}

.bp-t-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.5;
    font-size: calc(clamp(14px, 1vw, 16px) * var(--fs, 1));
}

/* ----------------------------------------------------------------- media */
.bp-item--image,
.bp-item--embed {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.bp-media {
    position: relative;
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #f4f4f4;
}

.bp-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.bp-media-link { display: block; flex: 1 1 auto; min-height: 0; }

.bp-cap {
    font-family: "Roboto Condensed", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(0, 0, 0, .55);
    padding-top: 8px;
}

.bp-embed {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #000;
}

.bp-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.bp-embed[style*="aspect-ratio"] {
    flex: 0 0 auto;
    height: auto;
}

.bp-embed[style*="aspect-ratio"] iframe {
    position: absolute;
}

.bp-item--shape { background: #111; }

/* ------------------------------------------------------------ responsive */
/* Public pages react to the viewport width.
   In the editor the canvas is a fixed-width frame, so responsive rules are
   scoped to `.bp-doc:not(.ed-page)` and the editor switches by `.is-mobile`
   / absence of it (desktop & laptop stay full grid layout). */
@media (max-width: 767px) {
    .bp-doc:not(.ed-page) .bp-hide-mobile { display: none !important; }

    .bp-doc:not(.ed-page) .bp-grid {
        display: flex;
        flex-direction: column;
        gap: var(--gapy, 16px);
    }

    .bp-doc:not(.ed-page) .bp-grid > .bp-item {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100%;
        align-self: stretch;
    }

    .bp-doc:not(.ed-page) .bp-grid > .ed-cell { display: none !important; }

    /* clip masks are never applied on the mobile stack */
    .bp-doc:not(.ed-page) .bp-media { clip-path: none !important; }

    .bp-doc:not(.ed-page) .bp-section {
        padding-left: max(var(--bp-px, 24px), 16px);
        padding-right: max(var(--bp-px, 24px), 16px);
    }
}

@media (min-width: 768px) {
    .bp-doc:not(.ed-page) .bp-hide-desktop { display: none !important; }
}

/* editor: device buttons drive visibility (independent of browser width) */
.bp-doc.ed-page:not(.is-mobile) .bp-hide-desktop { display: none !important; }
.bp-doc.is-mobile .bp-hide-mobile { display: none !important; }
.bp-doc.is-mobile .bp-hide-desktop { display: none !important; }

/* laptop: 768–1439px on the public pages, always in the editor's Laptop mode */
@media (min-width: 768px) and (max-width: 1439px) {
    .bp-doc:not(.ed-page) .bp-hide-laptop { display: none !important; }
}
.bp-doc.ed-page.is-laptop .bp-hide-laptop { display: none !important; }

.bp-doc.is-mobile .bp-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gapy, 16px);
}

.bp-doc.is-mobile .bp-grid > .bp-item {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
    align-self: stretch;
}

.bp-doc.is-mobile .bp-media { clip-path: none !important; }