/* ============================================================
   P4K Premium Timeline — v2.5.0
   ============================================================ */

.p4k-timeline-wrapper *,
.p4k-timeline-wrapper *::before,
.p4k-timeline-wrapper *::after { box-sizing: border-box; }

/* wrapper: background/padding via style="" inline */
.p4k-timeline-wrapper { position: relative; width: 100%; }

/* ════ LINEE (top/height settati via JS dai dot) ════ */
.p4k-line-track {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: var(--p4k-line-width, 3px);
    background: var(--p4k-line-base-color, #d6d0c8);
    z-index: 0; border-radius: 99px; pointer-events: none;
}
.p4k-line-progress {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: var(--p4k-line-width, 3px); height: 0;
    background: var(--p4k-line-color, #ff4d00);
    z-index: 1; border-radius: 99px; pointer-events: none;
    will-change: height;
}

/* ════ LISTA ════ */
.p4k-timeline-list {
    list-style: none !important; margin: 0 !important;
    padding: 0 !important; position: relative; z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   DESKTOP — grid 3 colonne
════════════════════════════════════════════════════════════ */
.p4k-item {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr var(--p4k-center-gap, 80px) 1fr;
    grid-template-rows: auto;
    align-items: flex-start;
    margin-bottom: var(--p4k-item-gap, 100px) !important;
}
.p4k-item:last-child { margin-bottom: 0 !important; }

/* LEFT (indice 0,2…): card sx | dot | img dx */
.p4k-item.p4k-left .p4k-card-col  { grid-column: 1; grid-row: 1; }
.p4k-item.p4k-left .p4k-dot-col   { grid-column: 2; grid-row: 1; }
.p4k-item.p4k-left .p4k-image-col { grid-column: 3; grid-row: 1; }

/* RIGHT (indice 1,3…): img sx | dot | card dx */
.p4k-item.p4k-right .p4k-image-col { grid-column: 1; grid-row: 1; }
.p4k-item.p4k-right .p4k-dot-col   { grid-column: 2; grid-row: 1; }
.p4k-item.p4k-right .p4k-card-col  { grid-column: 3; grid-row: 1; }

/* ════ DOT ════ */
.p4k-dot-col {
    display: flex; justify-content: center;
    padding-top: 20px; position: relative; z-index: 2;
}
.p4k-dot {
    width: var(--p4k-dot-size, 22px); height: var(--p4k-dot-size, 22px);
    border-radius: 50%;
    background: var(--p4k-line-base-color, #d6d0c8);
    border: 3px solid var(--p4k-bg, #f5f0e8);
    box-shadow: 0 0 0 3px var(--p4k-line-base-color, #d6d0c8);
    transform: scale(0.72);
    transition: background .3s, box-shadow .3s,
                transform .35s cubic-bezier(.34,1.56,.64,1);
    will-change: transform, background; position: relative;
}
.p4k-item.p4k-dot-active .p4k-dot {
    background:   var(--p4k-line-color, #ff4d00) !important;
    box-shadow:   0 0 0 5px rgba(255,77,0,0.20)  !important;
    transform:    scale(1)                        !important;
    border-color: var(--p4k-bg, #f5f0e8)         !important;
}
.p4k-item.p4k-dot-pulse .p4k-dot::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: var(--p4k-line-color, #ff4d00);
    opacity: 0; animation: p4k-pulse .7s ease-out forwards; pointer-events: none;
}
@keyframes p4k-pulse {
    0%   { transform: scale(1);  opacity: .4; }
    100% { transform: scale(3);  opacity: 0;  }
}

/* ════ CARD COLUMN ════ */
.p4k-card-col { padding: 0 16px; }

/* ════ CARD: shadow + reveal (background/radius/padding via style="" inline) ════ */
.p4k-card {
    border: none !important;
    opacity: 0;
    transition: opacity .55s cubic-bezier(.22,1,.36,1),
                transform .55s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
.p4k-item.p4k-left  .p4k-card { transform: translateX(-30px); }
.p4k-item.p4k-right .p4k-card { transform: translateX( 30px); }
.p4k-item.p4k-card-visible .p4k-card {
    opacity: 1 !important; transform: translateX(0) !important;
}

/* ════ BADGE ANNO (stili tipografici via style="" inline) ════ */
.p4k-year {
    display: inline-block !important;
    padding: 5px 16px     !important;
    margin:  0 0 12px     !important;
    line-height: 1.5      !important;
}

/* ════ TITOLO (font/size/color/lh via style="" inline) — reset Astra ════ */
.p4k-card-title {
    padding: 0 !important; border: none !important; background: none !important;
}

/* ════ TESTO (font/size/color/lh via style="" inline) ════ */
.p4k-card-text {
    margin: 0 !important; padding: 0 !important;
}
.p4k-card-text p {
    margin: 0 0 .75em !important;
    font-size: inherit !important; color: inherit !important;
    font-family: inherit !important; line-height: inherit !important;
}
.p4k-card-text p:last-child { margin-bottom: 0 !important; }
.p4k-card-text strong,
.p4k-card-text b { font-weight: 600 !important; }

/* ════ IMMAGINE (border-radius/shadow via style="" inline) ════ */
.p4k-image-col { padding: 0 16px; }
.p4k-image-col img {
    display: block !important; width: 100% !important;
    max-width: var(--p4k-img-max-width, 420px) !important;
    height: auto !important;
    opacity: 0; transform: scale(0.96);
    transition: opacity .6s cubic-bezier(.22,1,.36,1) .09s,
                transform .6s cubic-bezier(.22,1,.36,1) .09s;
    will-change: opacity, transform;
}
.p4k-item.p4k-right .p4k-image-col img { margin-left: auto; }
.p4k-item.p4k-left  .p4k-image-col img { margin-right: auto; }
.p4k-item.p4k-card-visible .p4k-image-col img {
    opacity: 1 !important; transform: scale(1) !important;
}

/* ════ NO IMAGE ════ */
.p4k-item.p4k-no-image .p4k-card-col {
    grid-column: 1 / span 3; max-width: 640px; margin: 0 auto; padding: 0;
}

/* ════════════════════════════════════════════════════════════
   MOBILE ≤ 768px
   Layout: colonna singola, CARD sempre sopra, IMMAGINE sotto
   Linea verticale a sinistra
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Linea sposta a sinistra */
    .p4k-line-track,
    .p4k-line-progress { left: 20px; transform: none; }

    /* Ogni item diventa flex colonna */
    .p4k-item,
    .p4k-item.p4k-left,
    .p4k-item.p4k-right {
        display:        flex          !important;
        flex-direction: column        !important;
        align-items:    stretch       !important;
        padding-left:   54px          !important;
        position:       relative;
    }

    /* Reset grid sul dot-col (era grid-column:2) */
    .p4k-item .p4k-dot-col,
    .p4k-item.p4k-left  .p4k-dot-col,
    .p4k-item.p4k-right .p4k-dot-col {
        position:  absolute !important;
        left:      8px      !important;
        top:       16px     !important;
        padding:   0        !important;
        width:     auto     !important;
        display:   flex     !important;
    }

    /* Card e Image: full width, reset padding */
    .p4k-card-col,
    .p4k-image-col,
    .p4k-item.p4k-left  .p4k-card-col,
    .p4k-item.p4k-left  .p4k-image-col,
    .p4k-item.p4k-right .p4k-card-col,
    .p4k-item.p4k-right .p4k-image-col {
        width:   100% !important;
        padding: 0    !important;
        display: block !important;
    }

    /* ── ORDINE FISSO: card sempre prima (order:1), immagine dopo (order:2) ── */
    .p4k-card-col,
    .p4k-item.p4k-left  .p4k-card-col,
    .p4k-item.p4k-right .p4k-card-col { order: 1 !important; }

    .p4k-image-col,
    .p4k-item.p4k-left  .p4k-image-col,
    .p4k-item.p4k-right .p4k-image-col { order: 2 !important; margin-top: 16px; }

    /* Reset transform card → entra dal basso su mobile */
    .p4k-item .p4k-card,
    .p4k-item.p4k-left  .p4k-card,
    .p4k-item.p4k-right .p4k-card { transform: translateY(20px) !important; }

    .p4k-item.p4k-card-visible .p4k-card,
    .p4k-item.p4k-left.p4k-card-visible  .p4k-card,
    .p4k-item.p4k-right.p4k-card-visible .p4k-card {
        transform: translateY(0) !important; opacity: 1 !important;
    }

    /* Immagine full width su mobile */
    .p4k-image-col img { max-width: 100% !important; margin: 0 !important; }

    /* No-image mobile */
    .p4k-item.p4k-no-image .p4k-card-col { max-width: none !important; margin: 0 !important; }
}

/* ════ Piccoli schermi ════ */
@media (max-width: 480px) {
    .p4k-card-title { font-size: 20px !important; }
    .p4k-card-text  { font-size: 15px !important; }
}

/* ════ ELEMENTOR EDITOR: tutto visibile in preview ════ */
.elementor-editor-active .p4k-card {
    opacity: 1 !important; transform: none !important;
}
.elementor-editor-active .p4k-image-col img {
    opacity: 1 !important; transform: scale(1) !important;
}
.elementor-editor-active .p4k-dot {
    transform: scale(1) !important;
    background: var(--p4k-line-color, #ff4d00) !important;
    box-shadow: 0 0 0 5px rgba(255,77,0,0.20) !important;
}