/* ==========================================================================
   تایم‌لاین جنگ غزه — استایل فرانت‌اند (تم تیرهٔ مستندگونه)
   RTL-first | افقی + عمودی | متغیرهای CSS قابل‌شخصی‌سازی
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۱) ریشه و متغیرها
   -------------------------------------------------------------------------- */
.gzt-timeline {
        /* پالت پیش‌فرض */
        --gzt-accent: #C5221F;
        --gzt-accent-2: #8B0000;
        --gzt-line: #2C2C2C;
        --gzt-line-h: 2px;
        --gzt-node: #606060;
        --gzt-node-border: #3D3D3D;
        --gzt-node-size: 18px;
        --gzt-card-bg: #121212;
        --gzt-card-border: #2C2C2C;
        --gzt-card-w: 280px;
        --gzt-card-r: 14px;
        --gzt-card-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
        --gzt-card-shadow-hover: 0 26px 54px rgba(0, 0, 0, 0.68);
        --gzt-title-c: #FFFFFF;
        --gzt-title-s: 15px;
        --gzt-title-w: 700;
        --gzt-date-c: #B0B0B0;
        --gzt-date-s: 13px;
        --gzt-date-w: 500;
        --gzt-desc-c: #B0B0B0;
        --gzt-desc-s: 13.5px;
        --gzt-desc-w: 400;
        --gzt-btn-c: #FFFFFF;
        --gzt-btn-bg: #C5221F;
        --gzt-btn-bg2: #8B0000;
        --gzt-btn-r: 10px;
        --gzt-btn-s: 13px;
        --gzt-font: inherit;

        /* هندسهٔ افقی */
        --gzt-item-w: 240px;
        --gzt-track-h: 520px;
        --gzt-img-h: 130px;
        --gzt-clamp: 3;
        --gzt-date-row: 46px;
        --gzt-node-row: 24px;
        --gzt-title-row: 72px;

        /* هندسهٔ عمودی */
        --gzt-vmarker-w: 116px;

        /* بوم */
        --gzt-canvas-bg: transparent;
        --gzt-canvas-pad: 0px;

        position: relative;
        box-sizing: border-box;
        font-family: var(--gzt-font);
        background: var(--gzt-canvas-bg);
        padding: var(--gzt-canvas-pad);
        border-radius: 18px;
}

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

/* حالت خالی */
.gzt-empty {
        padding: 56px 24px;
        text-align: center;
        color: #B0B0B0;
        background: #0E0E0E;
        border: 1px dashed #2C2C2C;
        border-radius: 14px;
        font-size: 14px;
        line-height: 2;
}

.gzt-empty a {
        color: #C5221F;
        text-decoration: none;
        font-weight: 600;
}

.gzt-empty a:hover {
        text-decoration: underline;
}

/* ==========================================================================
   ۲) حالت افقی
   ========================================================================== */
.gzt-horizontal .gzt-scroller {
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 14px;
        height: var(--gzt-track-h);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        padding: 0 2px;
}

.gzt-horizontal .gzt-scroller::-webkit-scrollbar {
        display: none;
}

.gzt-horizontal .gzt-scroller.gzt-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
}

/* محور زمان */
.gzt-horizontal .gzt-axis {
        position: absolute;
        inset-inline: 0;
        top: calc(100% - var(--gzt-title-row) - var(--gzt-node-row) / 2 - var(--gzt-line-h) / 2);
        height: var(--gzt-line-h);
        background: var(--gzt-line);
        border-radius: var(--gzt-line-h);
        -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

/* هر رویداد */
.gzt-item {
        position: relative;
        flex: 0 0 var(--gzt-item-w);
        width: var(--gzt-item-w);
        display: grid;
        grid-template-rows: 1fr var(--gzt-date-row) var(--gzt-node-row) var(--gzt-title-row);
        justify-items: center;
        scroll-snap-align: center;
        padding: 0 10px;
}

/* تاریخ (بالای نقطه) */
.gzt-item .gzt-date {
        grid-row: 2;
        align-self: end;
        padding-bottom: 12px;
        max-width: 100%;
        color: var(--gzt-date-c);
        font-size: var(--gzt-date-s);
        font-weight: var(--gzt-date-w);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.25s ease;
}

/* عنوان روی محور (زیر نقطه) */
.gzt-item .gzt-axis-title {
        grid-row: 4;
        align-self: start;
        padding-top: 14px;
        max-width: 100%;
        text-align: center;
        color: var(--gzt-title-c);
        font-size: var(--gzt-title-s);
        font-weight: var(--gzt-title-w);
        line-height: 1.65;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.25s ease;
}

.gzt-item:hover .gzt-axis-title,
.gzt-item.gzt-open .gzt-axis-title {
        color: var(--gzt-accent);
}

/* نقطهٔ عطف */
.gzt-node {
        grid-row: 3;
        align-self: center;
        position: relative;
        z-index: 4;
        width: var(--gzt-node-size);
        height: var(--gzt-node-size);
        padding: 0;
        border: 2px solid var(--gzt-node-border);
        border-radius: 50%;
        background: radial-gradient(circle at 32% 28%, #B4B4B4, var(--gzt-node) 58%, #2C2C2C);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16), 0 3px 8px rgba(0, 0, 0, 0.55);
        cursor: pointer;
        transition:
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease;
}

.gzt-item:hover .gzt-node,
.gzt-item:focus-within .gzt-node,
.gzt-item.gzt-open .gzt-node {
        transform: scale(1.45);
        border-color: var(--gzt-accent);
        background: radial-gradient(circle at 32% 28%, #E5484D, var(--gzt-accent) 55%, var(--gzt-accent-2));
        box-shadow:
                0 0 0 5px rgba(197, 34, 31, 0.16),
                0 0 22px rgba(197, 34, 31, 0.45),
                inset 0 1px 1px rgba(255, 255, 255, 0.28);
}

/* کارت شناور */
.gzt-card {
        position: absolute;
        left: 50%;
        bottom: calc(var(--gzt-title-row) + var(--gzt-node-row) + var(--gzt-date-row) + 14px);
        width: var(--gzt-card-w);
        max-width: calc(100vw - 36px);
        z-index: 30;
        background: var(--gzt-card-bg);
        border: 1px solid var(--gzt-card-border);
        border-radius: var(--gzt-card-r);
        box-shadow: var(--gzt-card-shadow);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(calc(-50% + var(--gzt-shift, 0px)), 16px);
        transition:
                opacity 0.28s ease,
                transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.28s ease,
                box-shadow 0.3s ease;
}

.gzt-item.gzt-open {
        z-index: 6;
}

.gzt-item.gzt-open .gzt-card {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(calc(-50% + var(--gzt-shift, 0px)), 0);
        box-shadow: var(--gzt-card-shadow-hover);
}

/* دنبالهٔ کارت به سمت نقطه */
.gzt-card::after {
        content: "";
        position: absolute;
        bottom: -7px;
        left: 50%;
        width: 13px;
        height: 13px;
        background: var(--gzt-card-bg);
        border-right: 1px solid var(--gzt-card-border);
        border-bottom: 1px solid var(--gzt-card-border);
        transform: translateX(calc(-50% + var(--gzt-shift, 0px))) rotate(45deg);
}

/* فلش‌های اسکرول */
.gzt-arrow {
        position: absolute;
        z-index: 40;
        top: calc(100% - var(--gzt-title-row) - var(--gzt-node-row) / 2);
        transform: translateY(-50%);
        inset-inline-start: 4px;
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        padding: 0;
        border-radius: 50%;
        border: 1px solid var(--gzt-card-border);
        background: rgba(16, 16, 16, 0.88);
        color: #CFCFCF;
        cursor: pointer;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.gzt-arrow.gzt-next {
        inset-inline-end: 4px;
        inset-inline-start: auto;
}

.gzt-arrow:hover {
        border-color: var(--gzt-accent);
        color: #FFFFFF;
        box-shadow: 0 0 20px rgba(197, 34, 31, 0.35);
}

.gzt-arrow svg {
        width: 20px;
        height: 20px;
}

.gzt-arrow.gzt-hidden {
        opacity: 0;
        pointer-events: none;
}

.gzt-timeline.gzt-rtl .gzt-arrow svg {
        transform: scaleX(-1);
}

/* ==========================================================================
   ۳) حالت عمودی
   ========================================================================== */
.gzt-vertical .gzt-vlist {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 30px;
}

/* محور عمودی کنار صفحه */
.gzt-vertical .gzt-vlist::before {
        content: "";
        position: absolute;
        top: 12px;
        bottom: 12px;
        inset-inline-start: calc(var(--gzt-vmarker-w) / 2 - var(--gzt-line-h) / 2);
        width: var(--gzt-line-h);
        background: var(--gzt-line);
        border-radius: var(--gzt-line-h);
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
}

.gzt-vitem {
        position: relative;
        display: grid;
        grid-template-columns: var(--gzt-vmarker-w) 1fr;
        column-gap: 20px;
}

.gzt-vmarker {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding-top: 14px;
}

.gzt-vdate {
        color: var(--gzt-date-c);
        font-size: var(--gzt-date-s);
        font-weight: var(--gzt-date-w);
        text-align: center;
        line-height: 1.7;
}

.gzt-vnode {
        width: var(--gzt-node-size);
        height: var(--gzt-node-size);
        border-radius: 50%;
        border: 2px solid var(--gzt-node-border);
        background: radial-gradient(circle at 32% 28%, #B4B4B4, var(--gzt-node) 58%, #2C2C2C);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16), 0 3px 8px rgba(0, 0, 0, 0.55);
        transition:
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease;
}

.gzt-vitem:hover .gzt-vnode,
.gzt-vitem.gzt-open .gzt-vnode {
        transform: scale(1.4);
        border-color: var(--gzt-accent);
        background: radial-gradient(circle at 32% 28%, #E5484D, var(--gzt-accent) 55%, var(--gzt-accent-2));
        box-shadow:
                0 0 0 5px rgba(197, 34, 31, 0.16),
                0 0 22px rgba(197, 34, 31, 0.45),
                inset 0 1px 1px rgba(255, 255, 255, 0.28);
}

/* بدنهٔ کارت عمودی */
.gzt-vbody {
        position: relative;
        background: var(--gzt-card-bg);
        border: 1px solid var(--gzt-card-border);
        border-radius: var(--gzt-card-r);
        box-shadow: var(--gzt-card-shadow);
        overflow: hidden;
        transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.gzt-vitem:hover .gzt-vbody {
        box-shadow: var(--gzt-card-shadow-hover);
}

.gzt-vitem.gzt-open .gzt-vbody {
        border-color: rgba(197, 34, 31, 0.55);
}

.gzt-vhead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        padding: 16px 20px;
        cursor: pointer;
}

.gzt-vtitle {
        margin: 0;
        color: var(--gzt-title-c);
        font-size: calc(var(--gzt-title-s) + 3px);
        font-weight: var(--gzt-title-w);
        line-height: 1.7;
        flex: 1 1 220px;
}

.gzt-vtoggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 999px;
        border: 1px solid var(--gzt-card-border);
        background: transparent;
        color: var(--gzt-accent);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: border-color 0.25s ease, background 0.25s ease;
}

.gzt-vtoggle:hover {
        border-color: var(--gzt-accent);
        background: rgba(197, 34, 31, 0.08);
}

.gzt-vtoggle svg {
        width: 14px;
        height: 14px;
        transition: transform 0.32s ease;
}

.gzt-vitem.gzt-open .gzt-vtoggle svg {
        transform: rotate(180deg);
}

/* پنل بازشونده (آکاردئون) */
.gzt-vpanel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gzt-vitem.gzt-open .gzt-vpanel {
        grid-template-rows: 1fr;
}

.gzt-vinner {
        overflow: hidden;
}

.gzt-vcontent {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 0 20px 20px;
}

.gzt-vcontent .gzt-card-media {
        border-radius: 10px;
}

.gzt-vcontent .gzt-card-media::after {
        border-radius: 10px;
}

/* ==========================================================================
   ۴) اجزای مشترک کارت
   ========================================================================== */
.gzt-card-media {
        position: relative;
        height: var(--gzt-img-h);
        flex: 0 0 auto;
        background: #1A1A1A;
        overflow: hidden;
}

.gzt-card-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.45s ease;
}

.gzt-card-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(10, 10, 10, 0) 42%, rgba(10, 10, 10, 0.6));
        pointer-events: none;
}

.gzt-item.gzt-open .gzt-card-media img {
        transform: scale(1.05);
}

.gzt-card-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px 16px;
}

.gzt-card-title {
        margin: 0;
        color: var(--gzt-title-c);
        font-size: calc(var(--gzt-title-s) + 2px);
        font-weight: var(--gzt-title-w);
        line-height: 1.7;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.gzt-card-desc {
        margin: 0;
        color: var(--gzt-desc-c);
        font-size: var(--gzt-desc-s);
        font-weight: var(--gzt-desc-w);
        line-height: 1.95;
        display: -webkit-box;
        -webkit-line-clamp: var(--gzt-clamp);
        line-clamp: var(--gzt-clamp);
        -webkit-box-orient: vertical;
        overflow: hidden;
}

/* دکمهٔ مطالعه بیشتر */
.gzt-more {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        align-self: flex-start;
        padding: 10px 20px;
        border-radius: var(--gzt-btn-r);
        background: linear-gradient(135deg, var(--gzt-btn-bg), var(--gzt-btn-bg2));
        color: var(--gzt-btn-c);
        font-family: inherit;
        font-size: var(--gzt-btn-s);
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        box-shadow: 0 6px 18px rgba(197, 34, 31, 0.3);
        transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.gzt-more:hover,
.gzt-more:focus-visible {
        color: var(--gzt-btn-c);
        transform: translateY(-2px);
        box-shadow: 0 11px 26px rgba(197, 34, 31, 0.42);
        filter: brightness(1.07);
}

.gzt-more svg {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        transition: translate 0.25s ease;
}

.gzt-timeline.gzt-rtl .gzt-more svg {
        transform: scaleX(-1);
}

.gzt-more:hover svg {
        translate: 4px 0;
}

.gzt-timeline.gzt-rtl .gzt-more:hover svg {
        translate: -4px 0;
}

/* ==========================================================================
   ۵) انیمیشن ورود (Progressive Enhancement)
   ========================================================================== */
.gzt-js .gzt-item,
.gzt-js .gzt-vitem {
        opacity: 0;
        transform: translateY(22px);
}

.gzt-js .gzt-item.gzt-reveal-in,
.gzt-js .gzt-vitem.gzt-reveal-in {
        opacity: 1;
        transform: none;
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   ۶) فوکوس و دسترس‌پذیری
   ========================================================================== */
.gzt-node:focus-visible,
.gzt-arrow:focus-visible,
.gzt-vtoggle:focus-visible,
.gzt-scroller:focus-visible {
        outline: 2px solid var(--gzt-accent);
        outline-offset: 3px;
}

/* ==========================================================================
   ۷) واکنش‌گرایی
   ========================================================================== */
@media (max-width: 640px) {
        .gzt-timeline {
                --gzt-track-h: 580px;
                --gzt-item-w: 208px;
                --gzt-date-row: 52px;
                --gzt-vmarker-w: 84px;
        }

        .gzt-arrow {
                display: none;
        }

        .gzt-card {
                max-width: calc(100vw - 32px);
        }

        .gzt-vhead {
                padding: 14px;
        }

        .gzt-vcontent {
                padding: 0 14px 14px;
        }
}

/* حرکت کاهش‌یافته */
@media (prefers-reduced-motion: reduce) {
        .gzt-timeline *,
        .gzt-timeline *::before,
        .gzt-timeline *::after {
                transition-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
        }

        .gzt-js .gzt-item,
        .gzt-js .gzt-vitem {
                opacity: 1;
                transform: none;
        }
}