/* ============================================================================
   Post page — magazine hero + glass title card + restrained body typography
   ========================================================================== */

.in-post__hero {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 320px;
    max-height: 520px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(124,58,237,0.4), rgba(6,182,212,0.4));
}
.in-post__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.in-post__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 75%, var(--color-bg-deep));
}

.in-post__title-card-wrap {
    margin-top: -100px;
    position: relative;
    z-index: 5;
}
.in-post__title-card {
    background: rgba(18, 18, 26, 0.92);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
    max-width: 960px;
    margin: 0 auto;
}
.in-post__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.15;
    margin: 0.5rem 0 0.6rem;
    color: var(--color-text-primary);
}
.in-post__meta {
    color: var(--color-text-tertiary);
    font-size: 0.92rem;
}
.in-post__dot { margin: 0 0.5rem; }

.in-post__body-wrap {
    /* Override only top/bottom — keep .in-container's horizontal padding
       so the body card aligns flush with the title card on mobile. */
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}
.in-post__body {
    max-width: 960px;
    margin: 0 auto;
    background: var(--color-bg-surface);
    padding: 2rem 2.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    /* Solid background, no glass, optimised for reading */
}

/* Typography for post body (using .gh-content class for Ghost's default content scope) */
.gh-content {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.gh-content > * + * { margin-top: 1rem; }
.gh-content h1,
.gh-content h2,
.gh-content h3 {
    font-family: var(--font-display);
    color: var(--color-cyan-light) !important;
    text-shadow: 0 0 6px rgba(6,182,212,0.4) !important;
    margin: 2rem 0 0.75rem;
    line-height: 1.2;
}
.gh-content h1 { font-size: 1.8rem; }
.gh-content h2 { font-size: 1.4rem; }
.gh-content h3 { font-size: 1.15rem; color: var(--color-text-primary) !important; text-shadow: none !important; }
.gh-content a {
    color: var(--color-cyan-light);
    text-decoration: underline;
    text-decoration-color: rgba(6,182,212,0.4);
}
.gh-content a:hover { text-decoration-color: var(--color-cyan-light); }
.gh-content code {
    background: rgba(255,255,255,0.06);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.92em;
}
.gh-content pre {
    background: var(--color-bg-deep);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    overflow-x: auto;
}
.gh-content pre code {
    background: transparent;
    padding: 0;
}
/* Image + gallery layout — figures centre themselves and stack their
   contents (image, caption) vertically. Generic .kg-card is intentionally
   NOT styled here so callout, toggle, button and other Koenig cards keep
   the row layouts they're supposed to have. */
.gh-content figure {
    margin: 1.5rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}
.gh-content figure img,
.gh-content .kg-image-card img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}
.gh-content figcaption {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    text-align: center;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Galleries — column of rows, each row distributes images evenly. */
.gh-content .kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}
.gh-content .kg-gallery-row {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    width: 100%;
}
.gh-content .kg-gallery-image {
    flex: 1 1 0;
    min-width: 0;
}
.gh-content .kg-gallery-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* Callout card — emoji on the left, text fills the rest. card_assets
   provides the tinted background per kg-callout-card-<color> variant. */
.gh-content .kg-callout-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 1.5rem 0;
}
.gh-content .kg-callout-emoji {
    font-size: 1.4rem;
    line-height: 1.3;
    flex-shrink: 0;
}
.gh-content .kg-callout-text {
    flex: 1;
    min-width: 0;
}
.gh-content .kg-callout-text > p:first-child { margin-top: 0; }
.gh-content .kg-callout-text > p:last-child { margin-bottom: 0; }
.gh-content blockquote {
    border-left: 3px solid var(--color-cyan);
    padding-left: 1rem;
    margin-left: 0;
    color: var(--color-text-tertiary);
    font-style: italic;
}
.gh-content hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
}
.gh-content ul,
.gh-content ol { padding-left: 1.5rem; }
.gh-content li + li { margin-top: 0.4rem; }
.gh-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}
.gh-content th,
.gh-content td {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.gh-content th { background: rgba(255,255,255,0.04); }

@media (max-width: 768px) {
    .in-post__title { font-size: 1.7rem; }
    .in-post__title-card { padding: 1.25rem 1.25rem; margin: 0 1rem; }
    .in-post__title-card-wrap { margin-top: -60px; }
    .in-post__body {
        padding: 1.25rem 1.25rem;
        margin: 0 1rem;
    }
    .in-post__body-wrap {
        padding: 1.5rem 0 3rem;
    }
}

/* Post quicknav — fixed-position TOC widget. Re-skinned from legacy pink/mauve
   to brand cyan/purple. Mobile collapses to floating hamburger button. */

.in-quicknav {
    position: fixed;
    top: 130px;
    left: 25px;
    z-index: 40;
    max-width: 250px;
    max-height: calc(100vh - 160px);
    background: rgba(18, 18, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    overflow-y: auto;
    transition: background 0.3s, opacity 0.3s;
    font-size: 0.85rem;
}
.in-quicknav.past-hero {
    background: rgba(18, 18, 26, 0.5);
}
.in-quicknav:hover {
    background: rgba(18, 18, 26, 0.92);
}
.in-quicknav__title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-cyan-light);
    text-shadow: 0 0 6px rgba(6,182,212,0.4);
}
.in-quicknav__list,
.in-quicknav__sublist {
    list-style: none;
    margin: 0;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(124,58,237,0.4);
}
.in-quicknav__sublist {
    padding-left: 0.6rem;
    margin: 0.3rem 0 0.3rem 0.5rem;
    border-left: 2px solid rgba(255,255,255,0.08);
}
.in-quicknav__item {
    margin: 0.3rem 0;
}
.in-quicknav__item a {
    color: var(--color-text-tertiary);
    text-decoration: none;
    transition: color 0.2s;
}
.in-quicknav__item--top a {
    color: var(--color-text-secondary);
    font-weight: 600;
}
.in-quicknav__item:hover > a,
.in-quicknav__item.is-active > a {
    color: var(--color-cyan-light);
    text-shadow: 0 0 4px rgba(6,182,212,0.4);
}
.in-quicknav__toggle {
    display: none;
    background: var(--color-purple);
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: 0 0 12px rgba(124,58,237,0.5);
}
.in-quicknav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    margin: 4px auto;
}
.in-quicknav__panel { display: block; }

@media (max-width: 768px) {
    .in-quicknav {
        position: fixed;
        top: auto;
        bottom: 1rem;
        left: 1rem;
        max-width: none;
        max-height: none;
        background: transparent;
        border: 0;
        padding: 0;
        backdrop-filter: none;
        overflow: visible;
    }
    .in-quicknav__toggle { display: block; }
    .in-quicknav__panel {
        display: none;
        position: fixed;
        top: 80px;
        left: 5%;
        right: 5%;
        max-height: 80vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: rgba(10, 10, 15, 0.95);
        backdrop-filter: blur(16px);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 1.25rem;
    }
    .in-quicknav.open .in-quicknav__panel { display: block; }
}

/* Reading progress bar — fixed slim cyan strip at the very top of the
   viewport, width fills as the user scrolls through .in-post__body. */
.in-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(to right, var(--color-cyan), var(--color-cyan-light));
    box-shadow: 0 0 8px var(--color-cyan-glow);
    z-index: 60;
    pointer-events: none;
    transition: width 0.1s ease-out;
}

/* Back-to-top floating button — bottom-right (opposite corner from the
   quicknav drawer button), revealed after one viewport of scroll. */
.in-totop {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 18, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-cyan-light);
    cursor: pointer;
    z-index: 40;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, box-shadow 0.2s, background 0.2s;
}
.in-totop.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.in-totop:hover {
    background: rgba(18, 18, 26, 0.95);
    box-shadow: 0 0 14px var(--color-cyan-glow);
}
.in-totop svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    .in-progress,
    .in-totop {
        transition: none;
    }
}

/* Language pill bar — sits above the post body card.
   Hidden until post-i18n.js populates it (the :not([hidden]) selector
   prevents the layout rules from overriding the [hidden] attribute, which
   otherwise wins via UA stylesheet specificity).
   Width matches the body card (max-width: 960px) so they align visually. */
.in-langbar:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 960px;
    margin: 0 auto 1.5rem;
    padding: 0.55rem 0.9rem;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
/* When the bar is visible, tighten the wrap's top padding so the gap above
   the bar matches the gap below it (1.5rem each). Without this :has() rule
   the wrap's default 2.5rem padding-top makes the spacing asymmetric. */
.in-post__body-wrap:has(.in-langbar:not([hidden])) {
    padding-top: 1.5rem;
}
.in-langbar::before {
    content: 'Language';
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-tertiary);
    margin-right: 0.25rem;
}
.in-langbar__pill {
    appearance: none;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.in-langbar__pill:hover:not(:disabled) {
    color: var(--color-text-primary);
    border-color: var(--color-cyan);
}
.in-langbar__pill[aria-pressed="true"] {
    background: rgba(6, 182, 212, 0.12);
    border-color: var(--color-cyan);
    color: var(--color-cyan-light);
}
.in-langbar__pill:disabled {
    cursor: default;
}
.in-langbar__flag {
    font-size: 0.95rem;
    line-height: 1;
}

/* Mobile: match the body card's left/right margin so the pill bar lines up
   with the body card edges instead of stretching to the container edge.
   Also force the "Language" label to its own row so the 5 pills get the
   full width below — otherwise the last pill (PH) wraps awkwardly alone. */
@media (max-width: 700px) {
    .in-langbar:not([hidden]) {
        margin: 0 1rem 1rem;
    }
    .in-langbar::before {
        flex-basis: 100%;
        margin: 0 0 0.4rem;
    }
}

/* Default visibility for language blocks. Hide everything tagged with
   data-lang, then reveal whichever language is active. The :not selector
   is a no-JS fallback so the SSR'd page (and RSS-stripped HTML) shows
   English by default — keeps content crawlable for SEO. */
.in-post__body [data-lang] { display: none; }
.in-post__body:not([data-active-lang]) [data-lang="en"] { display: revert; }
.in-post__body[data-active-lang="en"]    [data-lang="en"]    { display: revert; }
.in-post__body[data-active-lang="de"]    [data-lang="de"]    { display: revert; }
.in-post__body[data-active-lang="id"]    [data-lang="id"]    { display: revert; }
.in-post__body[data-active-lang="pt-br"] [data-lang="pt-br"] { display: revert; }
.in-post__body[data-active-lang="tl"]    [data-lang="tl"]    { display: revert; }

/* Untagged content is treated as EN-only: hide it when any non-EN language
   is active. Lets authors paste a single `<div data-lang="id">…</div>` block
   into an existing English post without having to wrap the rest of the post
   in `<div data-lang="en">`. The selector targets DIRECT children of the
   post body so deeply-nested markup stays addressable via its parent. */
.in-post__body[data-active-lang]:not([data-active-lang="en"]) > :not([data-lang]) {
    display: none;
}