/* ============================================================
   JIP Single Post — Article Page Styles
   Two layouts: V1 (hero cover) and V2 (split)
   Uses _variables.css tokens — zero hardcoded colors.
   ============================================================ */


/* ── Base ── */

.jip-single {
    position: relative;
    padding-bottom: 80px;
}

.jip-single p {
    margin-bottom: 20px;
}

.jip-single h5,
.jip-single h5 b {
    font-weight: var(--jip-subhead-weight) !important;
    font-variation-settings: 'wdth' 100;
    font-size: var(--jip-paragraph-m) !important;
    line-height: var(--jip-subhead-lh) !important;
    margin-bottom: 5px;
    color: var(--jip-primary-dark);
}

.jip-single__container {
    max-width: var(--container-max, 1600px);
    margin: 0 auto;
    padding: 0 var(--container-pad, clamp(16px, 3vw, 64px));
    color: var(--jip-primary-dark) !important;
}

.jip-layout-v1 #page {
    padding-top: 0;
}

.jip-layout-v1 .jip-single__cat-badge,
.jip-layout-v2 .jip-single__cat-badge {
    display: none;
}

.jip-layout-v1 .elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: 0px;
}


/* ── Back button ── */

.jip-single__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--jip-font-family);
    font-size: var(--jip-paragraph-m);
    font-weight: var(--jip-paragraph-weight);
    color: var(--jip-surface-text-primary);
    text-decoration: none;
    margin-bottom: 24px;
    transition: filter 0.2s;
}

.jip-single__back:hover {
    filter: brightness(1.4);
}

.jip-single__back-chevron {
    width: 35px;
    height: 35px;
    background-image: url("https://jazzinthepark.ro/wp-content/uploads/2026/03/chevron-left2.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}


/* ── Category badge ── */

.jip-single__cat-badge {
    display: inline-block;
    font-family: var(--jip-font-family);
    font-weight: var(--jip-cta-desktop-weight);
    font-variation-settings: 'wdth' 125;
    font-size: var(--jip-cta-mobile-size);
    text-transform: uppercase;
    color: var(--jip-surface-text-primary);
    background: transparent;
    border: 1px solid var(--jip-surface-text-primary);
    border-radius: var(--jip-btn-radius);
    padding: 7px 16px 4px;
    margin-bottom: 12px;
}


/* ── Title ── */

.jip-single__title {
    font-size: var(--jip-headline-xl) !important;
    font-weight: var(--jip-headline-weight) !important;
    font-variation-settings: 'wdth' 125 !important;
    line-height: var(--jip-headline-lh) !important;
    color: var(--jip-surface-text-primary) !important;
    text-transform: uppercase;
    margin: 0 0 16px !important;
}


/* ── Meta ── */

.jip-single__meta {
    font-family: var(--jip-font-family);
    font-size: var(--jip-paragraph-xs);
    font-weight: var(--jip-paragraph-weight);
    color: var(--jip-secondary-dark-active);
    line-height: 1.6;
    margin-bottom: 4px;
}

.jip-single__meta--author {
    display: contents;
}

.jip-single__meta .jip-single__share-trigger,
.jip-single__meta .jip-blog-card__author {
    font-weight: var(--jip-cta-desktop-weight);
    font-variation-settings: 'wdth' 125;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.jip-single__meta {
    margin-bottom: 24px;
}

.jip-layout-v2 .jip-single__meta {
    margin-bottom: 4rem;
}

.jip-layout-v2 .jip-single--v2 .jip-single__title {
    max-width: 1100px;
}

.jip-single__share-trigger {
    cursor: pointer;
    transition: color 0.2s;
}

.jip-single__share-trigger:hover {
    color: var(--jip-primary-normal);
}


/* ── Content ── */

.jip-single__content {
    font-family: var(--jip-font-family);
    font-size: var(--jip-paragraph-m);
    font-weight: var(--jip-paragraph-weight);
    line-height: var(--jip-paragraph-lh);
    color: var(--jip-surface-text-primary);
}

.jip-single__content p {
    margin-bottom: 1.2em;
}

.jip-single__content a {
    color: var(--jip-primary-normal);
    text-decoration: underline;
}

.jip-single__content a:hover {
    color: var(--jip-primary-dark);
}

.jip-single__content img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

.jip-single__content blockquote {
    border-left: 4px solid var(--jip-primary-normal);
    margin: 1.5em 0;
    padding: 1em 1.5em;
    background: var(--jip-secondary-light);
    border-radius: 0 12px 12px 0;
}

.jip-single__content h2,
.jip-single__content h3,
.jip-single__content h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}


/* ═══════════════════════════════════════════
   V1 — HERO COVER
   ═══════════════════════════════════════════ */

.jip-single--v1 .jip-single__hero {
    width: 100%;
    max-height: 60vh;
    overflow: hidden;
    margin-bottom: 0;
}

.jip-single--v1 .jip-single__hero-img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    display: block;
}

.jip-single--v1 .jip-single__container {
    margin-top: 32px;
    max-width: var(--container-narrow, 900px);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) and (max-width: 1919px) {
    .jip-single--v1 .jip-single__container {
        max-width: 1400px;
    }
}

@media (min-width: 1920px) {
    .jip-single--v1 .jip-single__container {
        max-width: var(--container-max, 900px);
    }
}


/* ═══════════════════════════════════════════
   V2 — Image float LEFT, text wraps right
   ═══════════════════════════════════════════ */

.jip-single--v2 .jip-single__container {
    margin-top: 32px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) and (max-width: 1919px) {
    .jip-single--v2 .jip-single__container {
        max-width: 1400px;
    }
}

@media (min-width: 1920px) {
    .jip-single--v2 .jip-single__container {
        max-width: var(--container-max, 1600px);
    }
}

.jip-single--v2 .jip-single__v2-content::before {
    content: '';
    float: left;
    width: 42%;
    max-width: 500px;
    aspect-ratio: 3 / 4;
    margin: 0 40px 24px 0;
    border-radius: 16px;
    background-image: var(--single-thumb-v2);
    background-size: cover;
    background-position: center;
    shape-outside: margin-box;
}

.jip-single--v2 .jip-single__v2-content:not([style*="--single-thumb-v2"])::before {
    display: none;
}


/* Elementor wrappers transparent */

.jip-single--v2 .jip-single__v2-content>.elementor,
.jip-single--v2 .jip-single__v2-content .elementor-section,
.jip-single--v2 .jip-single__v2-content .elementor-container,
.jip-single--v2 .jip-single__v2-content .elementor-column,
.jip-single--v2 .jip-single__v2-content .elementor-widget-wrap,
.jip-single--v2 .jip-single__v2-content .elementor-widget,
.jip-single--v2 .jip-single__v2-content .elementor-widget-container {
    display: contents !important;
}


/* Title and meta wrap around image */

.jip-single--v2 .jip-single__title {
    font-size: var(--jip-headline-l) !important;
}

@media (max-width: 1023px) {
    .jip-single--v2 .jip-single__v2-content::before {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px 0;
        aspect-ratio: 16 / 9;
    }
    .jip-single--v2 .jip-single__title {
        font-size: var(--jip-headline-s-m) !important;
    }
}


/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */


/* Tablet landscape */

@media (min-width: 1024px) and (max-width: 1919px) {
    .jip-single--v1 .jip-single__hero-img {
        height: 50vh;
    }
    .jip-single--v2 .jip-single__split {
        gap: 30px;
    }
    .jip-single--v2 .jip-single__title {
        font-size: var(--jip-headline-l) !important;
    }
}


/* Tablet portrait */

@media (min-width: 768px) and (max-width: 1023px) {
    .jip-single--v1 .jip-single__hero-img {
        height: 60vh;
    }
    .jip-single--v1 .jip-single__title {
        font-size: var(--jip-headline-l) !important;
    }
    .jip-single--v2 .jip-single__split {
        gap: 24px;
    }
    .jip-single--v2 .jip-single__title {
        font-size: var(--jip-headline-s-m) !important;
    }
    .jip-single--v2 .jip-single__intro {
        font-size: var(--jip-paragraph-s);
    }
}


/* Mobile */

@media (max-width: 767px) {
    .jip-single {
        padding-bottom: 50px;
    }
    /* V1 mobile */
    .jip-single--v1 .jip-single__hero-img {
        height: 60vh;
    }
    .jip-single--v1 .jip-single__title {
        font-size: var(--jip-headline-m) !important;
    }
    .jip-single--v1 .jip-single__container {
        margin-top: 20px;
        padding-left: 8%;
        padding-right: 8%;
    }
    /* V2 mobile — stack vertically */
    .jip-single--v2 .jip-single__split {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .jip-single--v2 .jip-single__split-img {
        aspect-ratio: 16 / 9;
    }
    .jip-single--v2 .jip-single__title {
        font-size: var(--jip-headline-s-m) !important;
    }
    /* Shared mobile */
    .jip-single__back {
        margin-bottom: 16px;
        font-size: var(--jip-paragraph-s);
    }
    .jip-single__meta--author {
        margin-bottom: 16px;
    }
}


/* Featured image as float via ::before pseudo-element */

.jip-single--v1 .jip-single__content::before {
    content: '';
    float: right;
    width: 35%;
    max-width: 380px;
    aspect-ratio: 3 / 4;
    margin: 0 0 24px 32px;
    border-radius: 16px;
    background-image: var(--single-thumb);
    background-size: cover;
    background-position: center;
    shape-outside: margin-box;
}


/* Hide if no thumbnail */

.jip-single--v1 .jip-single__content:not([style*="--single-thumb"])::before {
    display: none;
}

@media (max-width: 1023px) {
    .jip-single--v1 .jip-single__content::before {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px 0;
        aspect-ratio: 16 / 9;
    }
}


/* Force Elementor content to respect float */

.jip-single--v1 .jip-single__content>.elementor {
    display: contents;
}


/* Force ALL Elementor wrappers to be transparent for float */

.jip-single--v1 .jip-single__content>.elementor,
.jip-single--v1 .jip-single__content .elementor-section,
.jip-single--v1 .jip-single__content .elementor-container,
.jip-single--v1 .jip-single__content .elementor-column,
.jip-single--v1 .jip-single__content .elementor-widget-wrap,
.jip-single--v1 .jip-single__content .elementor-widget,
.jip-single--v1 .jip-single__content .elementor-widget-container {
    display: contents !important;
}


/* Mobile fallback image - hidden on desktop, shown on mobile */

.jip-single__mobile-img {
    display: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1023px) {
    .jip-single__mobile-img {
        display: block;
    }
    /* Hide ::before on mobile since we use real img */
    .jip-single--v1 .jip-single__content::before,
    .jip-single--v2 .jip-single__v2-content::before {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════
   Shared topline
   ═══════════════════════════════════════════ */

.jip-single__topline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--jip-paragraph-m);
    margin-bottom: var(--jip-paragraph-m-l);
}

.jip-single__topline-row {
    display: flex;
    align-items: center;
}

.jip-single__meta-sep {
    opacity: 0.7;
    margin: 0 var(--jip-menu-bar-offset);
}


/* dacă vrei categoria și în v1/v2 */

.jip-layout-v1 .jip-single__cat-badge,
.jip-layout-v2 .jip-single__cat-badge {
    display: inline-block;
}


/* ═══════════════════════════════════════════
   V3 — Poster LEFT, article scroll RIGHT
   CLEAN VERSION
   ═══════════════════════════════════════════ */


/* wrappers: trebuie să lase fixed/sticky să existe */

.jip-layout-v3 #page,
.jip-layout-v3 .page_content_wrap,
.jip-layout-v3 .content_wrap,
.jip-layout-v3 .post_item_single,
.jip-layout-v3 .post_content,
.jip-layout-v3 .elementor,
.jip-layout-v3 .elementor-section,
.jip-layout-v3 .elementor-container,
.jip-layout-v3 .elementor-column,
.jip-layout-v3 .elementor-widget-wrap,
.jip-layout-v3 .elementor-widget,
.jip-layout-v3 .elementor-widget-container,
.jip-layout-v3 .jip-single,
.jip-layout-v3 .jip-single__container,
.jip-layout-v3 .jip-single__v3,
.jip-layout-v3 .jip-single__v3-poster-col,
.jip-layout-v3 .jip-single__v3-main {
    overflow: visible !important;
    transform: none !important;
}

.jip-single--v3 .elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: 0;
}

.jip-single--v3 .jip-single__container {
    max-width: var(--container-max);
    margin-top: calc(var(--jip-btn-padding-y) * 2);
}

.jip-single--v3 .jip-single__v3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--jip-btn-padding-x);
    align-items: start;
    margin-top: calc(var(--jip-btn-padding-x) * 2);
}

.jip-single--v3 .jip-single__v3--no-thumb {
    grid-template-columns: 1fr;
}

.jip-single--v3 .jip-single__v3-poster-col {
    width: 100%;
    max-width: calc(var(--container-narrow) * 0.6);
    margin: 0 auto;
    position: relative;
}

.jip-single--v3 .jip-single__v3-poster-sticky {
    position: static;
    width: 100%;
    top: auto;
    left: auto;
    z-index: 3;
    align-self: start;
}

.jip-single--v3 .jip-single__v3-poster-frame {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: calc(var(--jip-btn-radius) / 3);
    overflow: hidden;
    background: var(--jip-secondary-light);
}

.jip-single--v3 .jip-single__v3-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jip-single--v3 .jip-single__v3-main {
    min-width: 0;
    max-width: none;
    padding-top: 0;
}

.jip-single--v3 .jip-single__back,
.jip-single--v3 .jip-single__cat-badge {
    margin-bottom: 0;
}

.jip-single--v3 .jip-single__title {
    font-size: var(--jip-headline-xl) !important;
    margin-bottom: var(--jip-paragraph-m-l) !important;
    max-width: none;
}

.jip-single--v3 .jip-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--jip-menu-bar-offset);
    font-size: var(--jip-paragraph-xs);
    line-height: var(--jip-paragraph-lh);
    margin-bottom: calc(var(--jip-btn-padding-y) * 2);
}

.jip-single--v3 .jip-single__content {
    max-width: 100%;
}

.jip-single--v3 .jip-single__content> :first-child {
    margin-top: 0 !important;
}


/* ═══════════════════════════════════════════
   768–1024: stacked, fără fixed
   ═══════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
    .jip-single--v3 .jip-single__v3 {
        grid-template-columns: 1fr;
        gap: var(--jip-btn-padding-x);
    }
    .jip-single--v3 .jip-single__v3-poster-col {
        max-width: calc(var(--container-narrow) * 0.6);
        margin: 0 auto;
    }
    .jip-single--v3 .jip-single__v3-poster-sticky {
        position: static;
        width: 100%;
        top: auto;
        left: auto;
    }
    .jip-single--v3 .jip-single__title {
        font-size: var(--jip-headline-xl) !important;
    }
}


/* ═══════════════════════════════════════════
   1025–1919: fixed, mai mic
   height ≈ 80vh
   ═══════════════════════════════════════════ */

@media (min-width: 1025px) and (max-width: 1919px) {
    .jip-single--v3 .jip-single__v3 {
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        gap: var(--jip-btn-padding-x);
        margin-top: calc(var(--jip-btn-padding-x) * 2);
    }
    .jip-single--v3 .jip-single__v3-poster-col {
        max-width: none;
        margin: 0;
    }
    .jip-single--v3 .jip-single__v3-poster-sticky {
        position: fixed;
        top: calc((var(--jip-btn-padding-y) * 8) + (var(--jip-btn-padding-x) * 2));
        left: max( var(--container-pad), calc(((100vw - var(--container-max)) / 2) + var(--container-pad)));
        width: min( calc((100vw - (var(--container-pad) * 2) - var(--jip-btn-padding-x)) * 0.42), calc((var(--container-max) - (var(--container-pad) * 2) - var(--jip-btn-padding-x)) * 0.42), calc(80vh * 3 / 4));
    }
    .jip-single--v3 .jip-single__v3-main {
        grid-column: 2;
        padding-top: var(--jip-menu-bar-offset);
    }
    .jip-single--v3 .jip-single__title {
        font-size: var(--jip-headline-l) !important;
    }
}


/* ═══════════════════════════════════════════
   >= 1920: fixed, mare (cum e acum)
   ═══════════════════════════════════════════ */

@media (min-width: 1920px) {
    .jip-single--v3 .jip-single__v3 {
        grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
        gap: var(--jip-btn-padding-x);
        margin-top: calc(var(--jip-btn-padding-x) * 2);
    }
    .jip-single--v3 .jip-single__v3-poster-col {
        max-width: none;
        margin: 0;
    }
    .jip-single--v3 .jip-single__v3-poster-sticky {
        position: fixed;
        top: calc((var(--jip-btn-padding-y) * 8) + (var(--jip-btn-padding-x) * 2));
        left: max( var(--container-pad), calc(((100vw - var(--container-max)) / 2) + var(--container-pad)));
        width: min( calc((100vw - (var(--container-pad) * 2) - var(--jip-btn-padding-x)) * 0.48), calc((var(--container-max) - (var(--container-pad) * 2) - var(--jip-btn-padding-x)) * 0.48));
    }
    .jip-single--v3 .jip-single__v3-main {
        grid-column: 2;
        padding-top: var(--jip-menu-bar-offset);
    }
    .jip-single--v3 .jip-single__title {
        font-size: var(--jip-headline-l) !important;
    }
}


/* ═══════════════════════════════════════════
   < 768: fără fixed, fără sticky
   ═══════════════════════════════════════════ */

@media (max-width: 767px) {
    .jip-single--v3 .jip-single__container {
        margin-top: var(--jip-btn-padding-y);
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
    }
    .jip-single--v3 .jip-single__v3 {
        grid-template-columns: 1fr;
        gap: calc(var(--jip-paragraph-m-l) * 1.35);
        margin-top: var(--jip-btn-padding-x);
    }
    .jip-single--v3 .jip-single__v3-poster-col {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    .jip-single--v3 .jip-single__v3-poster-sticky {
        position: static !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
    }
    .jip-single--v3 .jip-single__v3-poster-frame {
        width: 100%;
    }
    .jip-single--v3 .jip-single__title {
        font-size: var(--jip-headline-m) !important;
    }
    .jip-single--v3 .jip-single__meta {
        margin-bottom: var(--jip-paragraph-m-l);
    }
}

.jip-single--v3 .jip-single__v3-poster-col {
    width: 100%;
    max-width: calc(var(--container-narrow) * 0.52);
    margin: 0 auto;
    position: relative;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .jip-single--v3 .jip-single__v3-poster-col {
        max-width: calc(var(--container-narrow) * 0.52);
        margin: 0 auto;
    }
}

@media (min-width: 1025px) and (max-width: 1919px) {
    .jip-single--v3 .jip-single__v3 {
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    }
    .jip-single--v3 .jip-single__v3-poster-sticky {
        width: min( calc((100vw - (var(--container-pad) * 2) - var(--jip-btn-padding-x)) * 0.38), calc((var(--container-max) - (var(--container-pad) * 2) - var(--jip-btn-padding-x)) * 0.38), calc(74vh * 3 / 4));
    }
}

@media (min-width: 1920px) {
    .jip-single--v3 .jip-single__v3 {
        grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
    }
    .jip-single--v3 .jip-single__v3-poster-sticky {
        width: min( calc((100vw - (var(--container-pad) * 2) - var(--jip-btn-padding-x)) * 0.43), calc((var(--container-max) - (var(--container-pad) * 2) - var(--jip-btn-padding-x)) * 0.43));
    }
}

@media (max-width: 767px) {
    .jip-single--v3 .jip-single__v3-poster-col {
        max-width: 100%;
        margin: 20px auto 0;
    }
}