/* ============================================================
   Timeline (хронология жизни) — стили отдельной страницы
   Подключается в views/memorial/timeline.php:
     <link rel="stylesheet" href="/css/timeline.css">
   Этот файл грузится ТОЛЬКО на странице Timeline, поэтому правила
   на body здесь безопасны и ни с чем на сайте не конфликтуют.
   ============================================================ */

*{box-sizing:border-box;}
body{
    margin:0;
    font-family:Arial, sans-serif;
    background:#f7f4ee;
    color:#2a2a2a;
    -webkit-font-smoothing:antialiased;
}

/* ── Hero-шапка (как .pg-hero на сайте) ── */
.pg-wrap{max-width:1000px;margin:0 auto;padding:24px 20px 0;}
.pg-hero{
    text-align:center;
    padding:40px 24px;
    margin-bottom:40px;
    border-radius:6px;
    background:#2d2d2d url('/images/icons/element.png') repeat;
    background-size:40px 50px;
}
.pg-hero h1{color:#b89b5e;font-size:48px;margin:0 0 15px;}
.pg-hero .subtitle{color:#ccc;max-width:640px;margin:0 auto;font-size:20px;line-height:1.6;}
.pg-hero .tl-years{margin-top:10px;font-size:15px;color:#b0b0b0;letter-spacing:1px;}

/* ── Дорожка born→события→died ── */
.tl{max-width:900px;margin:0 auto;padding:16px 16px 50px;}
.tl-track{position:relative;}
.tl-track::before{
    content:'';position:absolute;left:50%;
    top:42px;bottom:42px;width:4px;
    background:#d8c79b;transform:translateX(-50%);z-index:0;
}

.tl-dot{
    position:relative;
    width:72px;height:72px;border-radius:50%;
    background:#b89b5e;color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:15px;
    box-shadow:0 0 0 7px #f7f4ee;
    flex:0 0 auto;
}
.tl-dot--lg{width:84px;height:84px;font-size:17px;}

/* ── Концы: рождение / смерть ── */
.tl-end{position:relative;z-index:1;display:flex;justify-content:center;}
.tl-born{margin-bottom:30px;}
.tl-died{margin-top:30px;}
.tl-endlabel{
    position:absolute;left:50%;transform:translateX(-50%);
    color:#b89b5e;font-weight:700;letter-spacing:2px;
    text-transform:uppercase;font-size:13px;white-space:nowrap;
}
.tl-born .tl-endlabel{bottom:100%;margin-bottom:10px;}
.tl-died .tl-endlabel{top:100%;margin-top:10px;}

/* ── Событие ── */
.tl-ev{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1fr 84px 1fr;
    align-items:center;margin:32px 0;
}
.tl-dotcell{grid-column:2;grid-row:1;display:flex;justify-content:center;}
.tl-side{display:flex;flex-direction:column;}
.tl-photo{
    width:210px;max-width:100%;height:auto;
    border-radius:8px;box-shadow:0 3px 12px rgba(0,0,0,.22);display:block;
}
.tl-title{margin-top:8px;font-size:16px;font-weight:700;color:#222;line-height:1.35;}

.tl-ev--left  .tl-side{grid-column:1;grid-row:1;align-items:flex-end;text-align:right;padding-right:18px;}
.tl-ev--right .tl-side{grid-column:3;grid-row:1;align-items:flex-start;text-align:left;padding-left:18px;}

/* ── Веточка от кружка события к фото ── */
.tl-ev--left  .tl-dot::before,
.tl-ev--right .tl-dot::after{
    content:'';position:absolute;top:50%;
    width:12px;height:2px;background:#d8c79b;
    transform:translateY(-50%);
}
.tl-ev--left  .tl-dot::before{right:calc(100% + 9px);}  /* влево к фото */
.tl-ev--right .tl-dot::after {left:calc(100% + 9px);}   /* вправо к фото */

.tl-empty{
    position:relative;z-index:1;text-align:center;color:#999;
    font-style:italic;margin:46px auto 0;max-width:460px;font-size:14px;line-height:1.5;
}

.tl-foot{text-align:center;padding:14px 20px 50px;}
.tl-back{
    display:inline-block;padding:12px 26px;
    border:1px solid #b89b5e;border-radius:6px;
    background:#b89b5e;color:#fff;font-size:15px;font-weight:600;
    text-decoration:none;transition:background .2s,color .2s;
}
.tl-back:hover{background:#fff;color:#b89b5e;}

/* ── Hero на мобиле ── */
@media(max-width:768px){
    .pg-wrap{padding:16px 14px 0;}
    .pg-hero{padding:30px 18px;}
    .pg-hero h1{font-size:36px;margin:0 0 10px;}
    .pg-hero .subtitle{font-size:18px;}
}

/* ── Хронология на мобиле: линия слева, фото всегда справа ── */
@media(max-width:700px){
    .tl{padding:20px 16px 40px;}
    .tl-track::before{left:30px;top:36px;bottom:36px;}

    .tl-dot{width:56px;height:56px;font-size:13px;box-shadow:0 0 0 6px #f7f4ee;}
    .tl-dot--lg{width:72px;height:72px;font-size:15px;}

    .tl-end{justify-content:flex-start;}
    .tl-end .tl-dot{margin-left:30px;transform:translateX(-50%);}
    .tl-endlabel{left:30px;transform:translateX(-50%);}   /* по центру своего кружка */

    .tl-ev{grid-template-columns:1fr;padding-left:84px;margin:24px 0;}
    .tl-dotcell{
        grid-column:auto;grid-row:auto;      /* иначе кружок уезжает в несуществующую 2-ю колонку */
        position:absolute;left:30px;top:28px;transform:translateX(-50%);
    }
    .tl-ev--left  .tl-side,
    .tl-ev--right .tl-side{grid-column:1;align-items:flex-start;text-align:left;padding:0;}
    .tl-photo{width:100%;max-width:300px;}

    /* веточка всегда вправо (фото справа), с отступом от кружка */
    .tl-ev--left  .tl-dot::before{display:none;}
    .tl-ev--left  .tl-dot::after,
    .tl-ev--right .tl-dot::after{
        content:'';position:absolute;top:50%;left:calc(100% + 8px);
        width:14px;height:2px;background:#d8c79b;transform:translateY(-50%);
    }

    .tl-empty{text-align:left;padding-left:84px;}
}