/**
 * Blog post body + custom HTML classes (blog-head, blog-qa, etc.)
 * Loaded on the public blog detail page. Relies on CSS variables from main.css + color.php.
 * Edit this file to change interview/Q&A, quotes, callouts, and prose inside .blog-details__body.
 */

/* Featured image: natural aspect ratio (not .fit-image — that forces 100%×100% + cover) */
.blog-details .blog-details__thumb {
    height: auto !important;
    max-height: none !important;
}

@media screen and (max-width: 991px) {
    .blog-details .blog-details__thumb {
        height: auto !important;
    }
}

@media screen and (max-width: 767px) {
    .blog-details .blog-details__thumb {
        height: auto !important;
    }
}

.blog-details .blog-details__thumb .blog-details__hero-img {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    display: block;
    vertical-align: top;
    object-fit: unset;
    object-position: unset;
}

/* TinyMCE / article HTML: undo theme globals that break prose (lists, spans, links) */
.blog-details__body {
    line-height: 1.75;
    word-break: normal;
    overflow-wrap: break-word;
}

.blog-details__body > *:first-child {
    margin-top: 0;
}

.blog-details__body > *:last-child {
    margin-bottom: 0;
}

.blog-details__body p {
    margin-bottom: 1em;
}

.blog-details__body span {
    display: inline;
}

.blog-details__body a {
    display: inline;
}

.blog-details__body ul,
.blog-details__body ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.blog-details__body ul {
    list-style: disc;
}

.blog-details__body ol {
    list-style: decimal;
}

.blog-details__body ul ul {
    list-style: circle;
}

.blog-details__body li {
    margin: 0.35em 0;
}

.blog-details__body table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.95em;
}

.blog-details__body th,
.blog-details__body td {
    border: 1px solid hsl(var(--border-color));
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.blog-details__body th {
    font-weight: 600;
    background-color: hsl(var(--section-bg));
}

/* ---- Custom content classes (Admin → blog → “View custom classes”) ---- */

/* Explicit h2/h3 so theme heading rules don’t collapse sizes with .blog-subhead */
.blog-details__body h2.blog-head,
.blog-details__body h3.blog-head,
.blog-details__body .blog-head {
    margin: 2rem 0 0.4rem;
    font-size: clamp(1.5rem, 4.25vw, 2.125rem);
    font-weight: 700;
    line-height: 1.2;
    color: hsl(var(--heading-color));
}

.blog-details__body .blog-head:first-child {
    margin-top: 0;
}

.blog-details__body p.blog-subhead,
.blog-details__body .blog-subhead {
    margin: 0 0 1.2rem;
    padding: 0.65rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.55;
    color: hsl(var(--heading-color));
    background-color: hsl(var(--section-bg));
    border-radius: 0.375rem;
    border: 1px solid hsl(var(--border-color) / 0.45);
}

.blog-details__body .blog-lead {
    font-size: 1.125em;
    line-height: 1.65;
    margin-bottom: 1.25em;
}

.blog-details__body blockquote.blog-quote,
.blog-details__body .blog-quote {
    margin: 1.5rem 0;
    padding: 1.1rem 1.25rem 1.1rem 1.45rem;
    border-left: 4px solid hsl(var(--base));
    background-color: hsl(var(--section-bg));
    font-size: 1.06em;
    font-style: italic;
    line-height: 1.65;
}

.blog-details__body .blog-quote p:last-child {
    margin-bottom: 0;
}

.blog-details__body .blog-quote__cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.88em;
    font-style: normal;
    font-weight: 600;
    opacity: 0.9;
}

.blog-details__body .blog-callout {
    position: relative;
    margin: 1.5rem 0;
    padding: 1rem 1.15rem 1rem 2.85rem;
    border-radius: 0.375rem;
    border: 1px solid hsl(var(--border-color));
    background-color: hsl(var(--section-bg));
    font-size: 0.98em;
    line-height: 1.6;
}

/* Leading icon (SVG mask — no icon font required in editor or front) */
.blog-details__body .blog-callout::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 1.35rem;
    height: 1.35rem;
    background-color: hsl(var(--heading-color));
    opacity: 0.92;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Default / neutral callout: info circle */
.blog-details__body .blog-callout:not(.blog-callout--tip):not(.blog-callout--warning)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

.blog-details__body .blog-callout--tip {
    border-color: hsl(var(--base) / 0.4);
    background-color: hsl(var(--base) / 0.09);
    color: hsl(var(--heading-color));
}

.blog-details__body .blog-callout--tip::before {
    background-color: hsl(var(--base));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 00-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 001 1h6a1 1 0 001-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 00-7-7zm-1 17h2v2h-2v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 00-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 001 1h6a1 1 0 001-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 00-7-7zm-1 17h2v2h-2v-2z'/%3E%3C/svg%3E");
}

.blog-details__body .blog-callout--tip a {
    color: hsl(var(--heading-color));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-details__body .blog-callout--warning {
    border-color: rgba(245, 158, 11, 0.55);
    background-color: rgba(245, 158, 11, 0.1);
    color: hsl(var(--heading-color));
}

.blog-details__body .blog-callout--warning::before {
    background-color: #b45309;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2L1 20h22L12 2zm0 3.8L18.4 18H5.6L12 5.8zM11 10h2v4h-2v-4zm0 6h2v2h-2v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2L1 20h22L12 2zm0 3.8L18.4 18H5.6L12 5.8zM11 10h2v4h-2v-4zm0 6h2v2h-2v-2z'/%3E%3C/svg%3E");
}

.blog-details__body .blog-callout--warning a {
    color: hsl(var(--heading-color));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-details__body .blog-divider {
    margin: 2rem 0;
    height: 1px;
    border: 0;
    background: hsl(var(--border-color));
}

.blog-details__body hr.blog-divider {
    height: 1px;
    background: hsl(var(--border-color));
    border: 0;
}

.blog-details__body .blog-caption,
.blog-details__body figcaption.blog-caption {
    display: block;
    margin: 0.35rem 0 1.25rem;
    font-size: 0.875em;
    line-height: 1.45;
    color: hsl(var(--body-color));
    opacity: 0.78;
}

/* Interview / Q&A */
.blog-details__body .blog-qa {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    margin: 1.75rem 0;
}

.blog-details__body .blog-qa__pair {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.blog-details__body .blog-qa__q {
    margin: 0;
    padding: 0.9rem 1rem 0.9rem 1.1rem;
    border-left: 4px solid hsl(var(--base));
    background-color: hsl(var(--section-bg));
    font-weight: 600;
    font-size: 1.05em;
    line-height: 1.5;
}

.blog-details__body .blog-qa__a {
    margin: 0;
    padding: 0.15rem 0 0.15rem 1.25rem;
    border-left: 2px solid hsl(var(--border-color));
    line-height: 1.65;
    color: hsl(var(--body-color));
}

.blog-details__body div.blog-qa__a > p:last-child,
.blog-details__body .blog-qa__pair > .blog-qa__a p:last-child {
    margin-bottom: 0;
}

.blog-details__body div.blog-qa__a > p:first-child,
.blog-details__body .blog-qa__pair > .blog-qa__a p:first-child {
    margin-top: 0;
}

.blog-details__body div.blog-qa__a p,
.blog-details__body .blog-qa__pair > .blog-qa__a p {
    margin-bottom: 0.65em;
}

@media screen and (max-width: 767px) {
    .blog-details__body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}