.hpp-timeline{--hpp-accent:#c72638;--hpp-ink:#172132;--hpp-muted:#687484;--hpp-line:#dce2e8;--hpp-soft:#f6f7f9;font-family:inherit;color:var(--hpp-ink);max-width:880px;margin:1.4rem auto 2rem;padding:0;box-sizing:border-box}
.hpp-timeline *{box-sizing:border-box}
.hpp-timeline__heading{border-top:3px solid var(--hpp-accent);padding-top:20px;margin-bottom:20px}
.hpp-timeline__eyebrow{display:block;letter-spacing:.11em;text-transform:uppercase;font:700 .72rem/1.5 system-ui,sans-serif;color:var(--hpp-accent);margin-bottom:7px}
.hpp-timeline__title{margin:0!important;font-size:clamp(1.4rem,2.7vw,2rem)!important;line-height:1.26!important;letter-spacing:-.025em;color:var(--hpp-ink)}
.hpp-timeline__hint{margin:9px 0 0!important;font:400 .92rem/1.55 system-ui,sans-serif;color:var(--hpp-muted)}
.hpp-timeline__events{position:relative;display:grid;gap:0;margin:20px 0 16px}
.hpp-timeline__events:before{content:"";position:absolute;left:12px;top:15px;bottom:15px;width:2px;background:var(--hpp-line);pointer-events:none}
.hpp-timeline__event{position:relative;appearance:none;display:grid;grid-template-columns:24px minmax(120px,178px) minmax(0,1fr);align-items:center;column-gap:14px;min-height:51px;padding:8px 8px 8px 0;border:0;background:transparent;color:var(--hpp-ink);text-align:left;cursor:pointer;font:400 .95rem/1.4 system-ui,sans-serif;transition:background .15s ease}
.hpp-timeline__event:hover{background:#f8f9fb}
.hpp-timeline__event:focus-visible{outline:2px solid var(--hpp-accent);outline-offset:2px;border-radius:3px}
.hpp-timeline__dot{position:relative;z-index:1;display:block;width:14px;height:14px;border:2px solid #c7cdd4;background:#fff;border-radius:50%;margin-left:6px;transition:all .15s ease}
.hpp-timeline__event.is-active .hpp-timeline__dot{height:22px;width:22px;margin-left:2px;background:var(--hpp-accent);border-color:var(--hpp-accent);box-shadow:0 0 0 6px #f7dfe3}
.hpp-timeline__date{font-weight:650;color:#7a8390;font-size:.87rem;white-space:normal;font-variant-numeric:tabular-nums}
.hpp-timeline__event-title{font-weight:470}
.hpp-timeline__event.is-active .hpp-timeline__date{color:var(--hpp-accent)}
.hpp-timeline__event.is-active .hpp-timeline__event-title{font-weight:750}

.hpp-timeline__panel{background:var(--hpp-soft);padding:22px 24px;border-left:4px solid var(--hpp-accent);border-radius:0 10px 10px 0;box-shadow:0 5px 25px rgba(27,41,59,.045)}
.hpp-timeline__panel[hidden]{display:none!important}
.hpp-timeline__panel-date{font:700 .78rem/1.5 system-ui,sans-serif;color:var(--hpp-muted);margin:0 0 4px!important}
.hpp-timeline__panel-title{font-size:1.2rem!important;font-weight:750!important;margin:0 0 11px!important;line-height:1.4!important;color:var(--hpp-ink)}
.hpp-timeline__description{font-size:1rem;line-height:1.65}
.hpp-timeline__description p{margin:0 0 11px!important}
.hpp-timeline__description p:last-child{margin-bottom:0!important}
.hpp-timeline__figure{margin:13px 0 17px!important}
.hpp-timeline__image{display:block;max-width:100%;width:auto;height:auto;max-height:400px;object-fit:contain;border-radius:8px}
.hpp-timeline__figure figcaption{font:.8rem/1.5 system-ui,sans-serif;color:var(--hpp-muted);padding-top:6px}
.hpp-timeline__source{display:inline-flex;gap:4px;align-items:center;margin-top:13px;font:650 .86rem/1.45 system-ui,sans-serif;color:var(--hpp-accent)!important;text-decoration:underline;text-underline-offset:3px}
.hpp-timeline__source:hover{text-decoration-thickness:2px}
@media(max-width:560px){.hpp-timeline__event{grid-template-columns:24px minmax(83px,110px) minmax(0,1fr);gap:9px;font-size:.86rem;min-height:59px}.hpp-timeline__date{font-size:.79rem}.hpp-timeline__panel{padding:17px 18px}.hpp-timeline__title{font-size:1.48rem!important}}
@media(prefers-reduced-motion:reduce){.hpp-timeline__event,.hpp-timeline__dot{transition:none}}

/* v0.2: opis lijevo, mala ilustracija desno */
.hpp-timeline__content{display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:20px;align-items:start}
.hpp-timeline__text{min-width:0}
.hpp-timeline__figure{margin:0!important;max-width:148px}
.hpp-timeline__image{display:block;width:100%;height:auto;max-height:152px;object-fit:contain;border-radius:7px;background:#e9edf1}
.hpp-timeline__figure figcaption{font:.74rem/1.45 system-ui,sans-serif;color:var(--hpp-muted);padding-top:5px}
.hpp-timeline__related{font:.9rem/1.55 system-ui,sans-serif;margin:12px 0 0!important}
.hpp-timeline__related>span{display:block;font-weight:700;color:var(--hpp-muted);font-size:.8rem}
.hpp-timeline__related>a{color:var(--hpp-accent)!important;text-decoration:underline;text-underline-offset:3px}
@media(max-width:480px){.hpp-timeline__content{grid-template-columns:minmax(0,1fr) 94px;gap:12px}.hpp-timeline__figure{max-width:94px}.hpp-timeline__image{max-height:110px}}
@media(max-width:340px){.hpp-timeline__content{display:block}.hpp-timeline__figure{max-width:150px;margin-top:12px!important}}


/* v0.4: jasno omeđeno povijesno razdoblje, bez footera */
.hpp-timeline__period-group{--period-ink:#194c78;--period-surface:#edf5fc;--period-border:#74a8cf;position:relative;display:grid;gap:0;margin:12px 0 16px;padding:0 9px 2px 9px;border:1px solid var(--period-border);border-left:4px solid var(--period-ink);border-radius:9px;background:var(--period-surface);isolation:isolate}
.hpp-timeline__period-group--green{--period-ink:#266850;--period-surface:#edf8f2;--period-border:#87bba3}
.hpp-timeline__period-group--amber{--period-ink:#86531c;--period-surface:#fff8e8;--period-border:#d7b575}
.hpp-timeline__period-group--violet{--period-ink:#694b96;--period-surface:#f6f1fd;--period-border:#b49ad2}
.hpp-timeline__period-group:before{content:"";position:absolute;top:73px;bottom:66px;left:14px;background:var(--period-border);width:2px;pointer-events:none;z-index:0}
.hpp-timeline__period-boundary{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px;row-gap:3px;padding:12px 7px 11px 32px;color:var(--period-ink);font:.85rem/1.5 system-ui,sans-serif}
.hpp-timeline__period-boundary--start{border-bottom:1px solid var(--period-border)}
.hpp-timeline__period-boundary--end{border-top:1px solid var(--period-border)}
.hpp-timeline__period-caption{display:block;width:100%;font-weight:800;font-size:.67rem;letter-spacing:.07em}
.hpp-timeline__period-boundary strong{font-weight:750}
.hpp-timeline__period-boundary>span:last-child{font-weight:700}
.hpp-timeline__period-group .hpp-timeline__event{z-index:1;border-radius:5px}
.hpp-timeline__period-group .hpp-timeline__event:hover{background:rgba(255,255,255,.7)}
.hpp-timeline__period-group .hpp-timeline__dot{border-color:var(--period-ink)}
.hpp-timeline__period-group .hpp-timeline__event.is-active .hpp-timeline__dot{background:var(--hpp-accent);border-color:var(--hpp-accent)}
.hpp-timeline__period-uncertain{font-size:.72rem;font-weight:600;line-height:1.5;color:#79501d;margin-top:3px}
.hpp-timeline__event--overlap .hpp-timeline__dot{border-style:dashed}
.hpp-timeline__period-empty{padding:12px 33px!important;color:var(--period-ink);font-size:.86rem}
@media(max-width:560px){.hpp-timeline__period-group{padding:0 5px}.hpp-timeline__period-boundary{padding-left:28px}.hpp-timeline__period-group:before{left:10px}.hpp-timeline__period-caption{font-size:.63rem}}

/* v0.5: dvije jasno odvojene vrste poveznica uz događaj. */
.hpp-timeline__external{font:.9rem/1.55 system-ui,sans-serif;margin:10px 0 0!important}
.hpp-timeline__external>span{display:block;font-weight:700;color:var(--hpp-muted);font-size:.8rem}
.hpp-timeline__external>a{color:#374151!important;text-decoration:underline;text-underline-offset:3px}
.hpp-timeline__external>a:hover,.hpp-timeline__related>a:hover{text-decoration-thickness:2px}

/* v0.6: panel unutar kronologije, neposredno ispod povezanog događaja. */
.hpp-timeline__event{grid-template-columns:24px minmax(120px,178px) minmax(0,1fr) 17px;width:100%;z-index:1}
.hpp-timeline__toggle{display:block;width:9px;height:9px;border-right:2px solid var(--hpp-muted);border-bottom:2px solid var(--hpp-muted);transform:rotate(45deg);transition:transform .15s ease;justify-self:center;margin-top:-4px}
.hpp-timeline__event[aria-expanded="true"] .hpp-timeline__toggle{transform:rotate(225deg);margin-top:4px;border-color:var(--hpp-accent)}
.hpp-timeline__panel{position:relative;z-index:2;min-width:0;margin:5px 5px 14px 38px;padding:19px 20px;max-width:none}
.hpp-timeline__period-group .hpp-timeline__panel{background:#fff;border-left-color:var(--period-ink);margin-left:33px;margin-right:4px;box-shadow:0 2px 14px rgba(25,76,120,.07)}
.hpp-timeline__period-group .hpp-timeline__event[aria-expanded="true"] .hpp-timeline__date{color:var(--period-ink)}
.hpp-timeline__period-group .hpp-timeline__event[aria-expanded="true"] .hpp-timeline__toggle{border-color:var(--period-ink)}
.hpp-timeline__event-title{min-width:0;overflow-wrap:anywhere}
.hpp-timeline__period-uncertain{display:block}
@media(max-width:560px){
 .hpp-timeline__event{grid-template-columns:24px minmax(77px,108px) minmax(0,1fr) 14px;column-gap:8px}
 .hpp-timeline__panel{margin:5px 2px 13px 28px;padding:15px 15px}
 .hpp-timeline__period-group .hpp-timeline__panel{margin-left:27px;margin-right:1px}
 .hpp-timeline__content{grid-template-columns:minmax(0,1fr);gap:12px}
 .hpp-timeline__figure,.hpp-timeline__period-group .hpp-timeline__figure{max-width:min(100%,210px);margin:5px 0 0!important}
 .hpp-timeline__image{max-height:180px}
}
@media(prefers-reduced-motion:reduce){.hpp-timeline__toggle{transition:none}}

/* v0.7: Chrome sam upravlja položajem dokumenta; bez dvostrukog sidrenja. */
.hpp-timeline{overflow-anchor:none}