/* ═══════════════════════════════════════════════════════════════
   MATM Timeline Item Block
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --matm-yellow:      #FFBF00;
    --matm-black:       #0D0D0D;
    --matm-white:       #FFFFFF;
    --matm-tl-max:      1400px;   /* max width of full block       */
    --matm-tl-center:   180px;    /* width of the year column      */
    --matm-tl-dash:     120px;    /* length of dashed connector    */
    --matm-tl-gap:      24px;     /* gap between dash and text     */
    --matm-tl-line-h:   64px;     /* height of bottom yellow line  */
}

/* ── Outer wrapper ──────────────────────────────────────────── */
.matm-tl {
    display:         grid;
    grid-template-columns: 1fr 120px 180px 120px 1fr;
    align-items:     center;
    max-width:       var(--matm-tl-max);
    margin-left:     auto;
    margin-right:    auto;
    box-sizing:      border-box;
    padding:         0 24px;
}

/* ── Centre column (year + bottom line) ─────────────────────── */
.matm-tl__center {
    flex:            0 0 var(--matm-tl-center);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
}

.matm-tl__year {
    font-family:     "Montserrat", sans-serif;
    font-size:       64px;
    font-weight:     500;
    line-height:     1.2;
    color:           var(--matm-yellow);
    text-align:      center;
    white-space:     nowrap;
}

.matm-tl__bottom-line {
    width:           1px;
    height:          var(--matm-tl-line-h);
    background:      var(--matm-yellow);
    margin-top:      0;
    opacity: 0.5;
}

/* ── Dashed horizontal connector ────────────────────────────── */
.matm-tl__dash {
    height:          1px;
    margin-top:      0px;
    background-image: repeating-linear-gradient(
        to right,
        #424345 0,
        #424345 3px,
        transparent  3px,
        transparent  6px
    );
    margin-bottom:64px;
}

/* ── Text column ─────────────────────────────────────────────── */
.matm-tl__text {
    flex:            1;
    color:           var(--matm-white);
    font-family:     "Montserrat", sans-serif;
    font-size:       18px;
    line-height:     1.5;
    padding-top:     28px;   /* visual alignment to year cap-height */
}

.matm-tl__text--right {
    padding-top: 0px;
    padding-left:    var(--matm-tl-gap);
    text-align:      left;
    border-left:     1px solid #424345;
    margin-bottom: 64px;
}

.matm-tl__text--left {
    padding-top: 0px;
    padding-right:   var(--matm-tl-gap);
    text-align:      right;
    border-right:    1px solid #424345;
    margin-bottom: 64px;
}

/* RichText / paragraph inside the text column */
.matm-tl__text p,
.matm-tl__description {
    margin:  0;
    padding: 0;
    color:   var(--matm-white);
    font-size: 18px;
    line-height: 1.5;
}

/* ── No-bottom-line modifier ────────────────────────────────── */
.matm-tl--no-bottom-line .matm-tl__bottom-line {
    display:none;
}
.matm-tl--no-bottom-line .matm-tl__year {
    padding-bottom: 64px;
}

/* ═══════════════════════════════════════════════════════════════
   Scroll animation
   ─────────────────────────────────────────────────────────────
   Items start invisible + translated down.
   JS adds .matm-tl--visible when they enter the viewport.
   ═══════════════════════════════════════════════════════════════ */
.matm-tl {
    opacity:    0;
    transform:  translateY(40px);
    transition:
        opacity   1.2s ease,
        transform 1.2s ease;
    transition-delay: 0.3s;
}

.matm-tl--visible {
    opacity:   1;
    transform: translateY(0);
}

/* In the Gutenberg editor we always show blocks fully visible */
.block-editor .matm-tl,
.editor-styles-wrapper .matm-tl {
    opacity:   1;
    transform: none;
    transition: none;
}

.matm-tl__dash--right-placeholder,
.matm-tl__dash--left-placeholder {
    visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive — collapse to single column on mobile
   ═══════════════════════════════════════════════════════════════ */
@media ( max-width: 640px ) {
    .matm-tl {
        display:               grid;
        grid-template-columns: 1fr;
        grid-template-rows:    auto;
        align-items:           center;
    }

    .matm-tl--left {
        flex-direction: column-reverse;
        align-items:    center;
    }

    .matm-tl__dash {
        width:      2px;
        height:     32px;
        flex:       0 0 32px;
        margin-top: 0;
        background-image: repeating-linear-gradient(
            to bottom,
            var(--matm-yellow) 0,
            var(--matm-yellow) 3px,
            transparent       3px,
            transparent       6px
        );
    }

    .matm-tl__text--left,
    .matm-tl__text--right {
        text-align:    center;
        padding-left:  0;
        padding-right: 0;
        padding-top:   16;
    }
     .matm-tl__empty,
    .matm-tl__dash--right-placeholder,
    .matm-tl__dash--left-placeholder,
    .matm-tl__bottom-line {
        display: none;
    }

    .matm-tl__dash {
        width:  1px;
        height: 32px;
        margin: 0 auto;
        background-image: repeating-linear-gradient(
            to bottom,
            #424345 0,
            #424345 3px,
            transparent 3px,
            transparent 6px
        );
    }

    .matm-tl__text--left,
    .matm-tl__text--right {
        text-align:    center;
        padding-left:  16px;
        padding-right: 16px;
        border:        none;
    }

    .matm-tl__center {
        order: 1;
    }

    .matm-tl__dash {
        order: 2;
    }

    .matm-tl__text--left,
    .matm-tl__text--right {
        order: 3;
    }
}