/* ==========================================================================
   PosInTech native single-post templates
   Replaces the Elementor Theme Builder templates Skins 4.0, Themes 4.1, Posts 3.0
   Loaded only by single-native.php
   ========================================================================== */

/* Elementor wrapped everything in border-box; the shortcodes were built with that in mind */
.pos-single,
.pos-single *,
.pos-single *::before,
.pos-single *::after {
    box-sizing: border-box;
}

.pos-single {
    --pos-single-glow: rgba(0, 0, 0, 0.35);
    --pos-single-accent: rgba(103, 102, 241, 0.73);
    display: block;
}

html.light-theme .pos-single,
body.light-theme .pos-single {
    --pos-single-glow: rgba(185, 194, 245, 0.51);
}

/* ---------- Admin preview bar ---------- */
.pos-native-bar {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 99999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    padding: 8px 12px;
    background: #111;
    color: #fff;
    border: 1px solid rgba(168, 85, 247, 0.6);
    border-radius: 10px;
    font: 12px/1.4 system-ui, sans-serif;
}
.pos-native-bar a { color: #c4a1ff; text-decoration: underline; }

/* ==========================================================================
   COMPONENT LAYOUTS (skins + themes)
   ========================================================================== */
/* Skins + Themes: content area is 1300px wide (with a 16px gutter on narrower screens) */
.pos-single__container {
    box-sizing: border-box;
    width: min(1300px, calc(100% - 32px));
    margin: 30px auto 0;
    padding: 0;
}

.pos-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.pos-single__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.pos-single__block { min-width: 0; }
.pos-single__block.is-pulled { margin-top: -30px; }

.pos-single__side { min-width: 0; }

/* Framework cards cap themselves at 360px; inside the sidebar column they should fill it,
   so the info card, ad, tabs and trending list all share one width */
.pos-single__side-sticky > .pos-single__block > * {
    width: 100%;
    max-width: none;
}

.pos-single__side-sticky {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Sidebar cards fill the whole column. Without this, the info and ad cards stop at their own
   360px max-width while the trending cards (no max-width) run to the column edge. */
.pos-single__side .pos-sidebar,
.pos-single__side .pos-ad-card,
.pos-single__side .pos-sidebar-tabs-container {
    width: 100%;
    max-width: none;
}

/* Extra space above the tabs / trending box (measured from your live pages) */
.pos-single__block--pos_sidebar_tabs,
.pos-single__block--pos_trending {
    margin-top: 24px;
}

@media (min-width: 1025px) {
    .pos-single__grid {
        grid-template-columns: 64% 30%;
        justify-content: space-between;
    }

    /* single.js lowers "top" when the sidebar is taller than the screen,
       so its bottom stays reachable while it sticks */
    .pos-single__side-sticky {
        position: sticky;
        top: 50px;
    }
}

/* ==========================================================================
   ARTICLE LAYOUT (default posts)
   ========================================================================== */
.pos-article-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 350px;
    overflow: hidden;
    background: #120920;
    border-bottom: 1px solid rgba(103, 102, 241, 0.29);
    border-radius: 0 0 16px 16px;
}

.pos-article-hero__bg {
    position: absolute;
    top: -12px;
    left: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    object-fit: cover;
    filter: blur(5px) brightness(0.8) contrast(1.06);
    z-index: -2;
}

.pos-article-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    z-index: -1;
}

.pos-article-hero__inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: var(--pos-container-width, 1300px);
    margin: 0 auto;
    padding: 32px 16px;
}

.pos-article-crumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 3px 16px;
    background: var(--pos-single-accent);
    border-radius: 6px 14px;
    font-size: 13px;
    color: #fff;
    backdrop-filter: blur(6px);
}
.pos-article-crumbs a { color: #fff; text-decoration: none; }
.pos-article-crumbs a:hover { text-decoration: underline; }
.pos-article-crumbs__sep { opacity: 0.7; }

.pos-article-title {
    margin: 8px 0 0;
    color: #fff;
    font-family: var(--pos-font-heading);
    font-size: 2.2rem;
    line-height: 1.2;
}

.pos-article-divider {
    width: 43%;
    height: 3px;
    background: var(--pos-accent-purple);
    border-radius: 3px;
}

.pos-article-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #e5e7eb;
}

.pos-article-pill {
    padding: 3px 16px;
    background: var(--pos-accent-purple);
    border-radius: 6px 14px;
    color: #fff;
    text-decoration: none;
}
.pos-article-pill:hover { filter: brightness(1.1); }

/* Three columns: share rail | article card | ad rail */
.pos-article-layout {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: var(--pos-container-width, 1300px);
    margin: 33px auto 0;
    padding: 0 16px;
}

.pos-article-share {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 4px;
    background: var(--pos-bg-card);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(207, 179, 255, 0.26);
}

.pos-share {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--pos-single-accent);
    border-radius: 50%;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.pos-share:hover { transform: translateY(-2px); filter: brightness(1.15); }

.pos-article-card {
    box-sizing: border-box;
    min-width: 0;
    padding: 20px 24px;
    background: var(--pos-bg-card);
    color: var(--pos-text-main);
    border-radius: 16px;
    box-shadow: 0 0 10px rgba(103, 102, 241, 0.35);
}

.pos-article-ad { display: flex; justify-content: center; }

.pos-article-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 3px 8px;
    border-bottom: 1px solid var(--pos-border-card);
    border-radius: 8px;
    box-shadow: 5px 5px 10px var(--pos-single-glow);
    font-size: 15px;
    color: var(--pos-text-muted);
}

.posts-content {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.posts-content img { max-width: 100%; height: auto; border-radius: 10px; }

.posts-content a {
    display: inline-block;
    position: relative;
    color: #7e6bfa;
    text-decoration: none;
}
.posts-content a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #c069ff;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.posts-content a:hover:after { transform: scaleX(1); transform-origin: bottom left; }

.posts-content h2,
.posts-content h3,
.posts-content h4 { line-height: 2.5; }

/* Post navigation */
.pos-article-card .post-navigation { margin-top: 24px; }
.pos-article-card .nav-links { display: flex; justify-content: space-between; gap: 12px; }
.pos-article-card .nav-previous,
.pos-article-card .nav-next { flex: 1 1 0; min-width: 0; }
.pos-article-card .nav-next { text-align: right; }
.pos-article-card .nav-links a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: 10px;
    box-shadow: 4px 7px 10px var(--pos-single-glow);
    color: inherit;
    text-decoration: none;
}
.pos-nav-label { font-size: 12px; font-weight: 700; color: var(--pos-accent-purple); }
.pos-nav-title { font-size: 14px; }

.pos-article-rail { display: none; }

@media (min-width: 1025px) {
    .pos-article-layout {
        grid-template-columns: 8% 65% 15%;
        justify-content: space-between;
        align-items: start;
    }

    .pos-article-share {
        position: sticky;
        top: 50px;
        flex-direction: column;
        align-items: center;
    }

    .pos-article-rail { display: block; }
    .pos-article-rail__sticky { position: sticky; top: 50px; }
}

/* Related articles */
.pos-article-related {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: var(--pos-container-width, 1300px);
    margin: 16px auto 40px;
    padding: 12px;
    background: var(--pos-bg-mirror);
    border-radius: 10px;
}

.pos-article-related__title {
    display: inline-block;
    margin: 0;
    padding: 10px 8px;
    background: var(--pos-bg-card);
    border-radius: 10px;
    box-shadow: 3px 4px 10px var(--pos-single-glow);
    font-size: 16px;
}

.pos-article-related__line {
    width: 96%;
    height: 2px;
    margin: 12px auto;
    background: rgba(103, 102, 241, 0.73);
}

@media (max-width: 767px) {
    .pos-article-title { font-size: 1.125rem; line-height: 1.2; }
    .pos-article-divider { width: 50%; }
    .pos-article-card { padding: 14px; }
    .posts-content { font-size: 16px; }
}