/* KPLA Cool Timeline base styles (v1.3.2)
   Theme-specific overrides are injected via admin Settings.
*/

.kpla-tl{position:relative;padding:2.25rem 0;max-width:1100px;margin:0 auto}
.kpla-tl-line{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(0,0,0,.12)}

.kpla-tl-item{position:relative;display:grid;grid-template-columns:1fr 52px 1fr;align-items:start;gap:0;margin:1.25rem 0}
.kpla-tl-side-date{display:none}
.kpla-tl-marker{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}

.kpla-tl-dot{width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:#fff;border:2px solid var(--kpla-accent,#2563eb);box-shadow:0 4px 14px rgba(0,0,0,.10);z-index:2}
.kpla-tl-dot .dashicons{font-size:18px;width:18px;height:18px;color:var(--kpla-accent,#2563eb)}

.kpla-tl-card{background:#fff;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.10);border:1px solid rgba(0,0,0,.08);overflow:hidden;max-width:520px}
.kpla-tl-left .kpla-tl-card{grid-column:1;justify-self:end}
.kpla-tl-right .kpla-tl-card{grid-column:3;justify-self:start}

.kpla-tl-head{padding:1.1rem 1.1rem .75rem;border-left:6px solid var(--kpla-accent,#2563eb);background:rgba(11,18,32,.03)}
.kpla-tl-date{font-size:.9rem;opacity:.75;margin-bottom:.25rem}
.kpla-tl-title{font-size:1.1rem;line-height:1.25;margin:0}
.kpla-tl-sub{margin-top:.35rem;font-size:.95rem;opacity:.85}

.kpla-tl-media img{display:block;width:100%;height:auto}
.kpla-tl-body{padding:.9rem 1.1rem 1.1rem}
.kpla-tl-body p{margin:0 0 .75rem}
.kpla-tl-body ul{margin:0;padding-left:1.1rem}
.kpla-tl-body ul:last-child{margin-bottom:0}
.kpla-tl-body li + li{margin-top:.42rem}

.kpla-tl-empty{padding:1rem 1.1rem;border:1px solid rgba(0,0,0,.1);border-radius:12px}

/* reveal animation */
.kpla-tl-item[data-kpla-reveal]{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.kpla-tl-item.kpla-is-visible{opacity:1;transform:translateY(0)}

/* compact layout */
.kpla-tl-compact .kpla-tl-line{left:22px;transform:none}
.kpla-tl-compact .kpla-tl-item{grid-template-columns:52px 1fr;margin:1rem 0}
.kpla-tl-compact .kpla-tl-marker{grid-column:1}
.kpla-tl-compact .kpla-tl-card{grid-column:2;max-width:none}

/* responsive */
@media (max-width:860px){
  .kpla-tl-line{left:22px;transform:none}
  .kpla-tl-item{grid-template-columns:52px 1fr}
  .kpla-tl-left .kpla-tl-card,.kpla-tl-right .kpla-tl-card{grid-column:2;justify-self:stretch;max-width:none}
}
CSS


/* === Badge theme built-in (ensures layout even if admin theme CSS is empty) === */
.kpla-tl-theme-badge{max-width:980px;--kpla-date-col:160px;--kpla-marker-col:92px;--kpla-year-bg:#0f766e;--kpla-line:rgba(0,0,0,.35)}
.kpla-tl-theme-badge .kpla-tl-line{left:calc(var(--kpla-date-col) + (var(--kpla-marker-col) / 2));transform:none;background:var(--kpla-line)}
.kpla-tl-theme-badge .kpla-tl-item{grid-template-columns:var(--kpla-date-col) var(--kpla-marker-col) 1fr;align-items:start;margin:2.1rem 0}
.kpla-tl-theme-badge .kpla-tl-side-date{display:block;grid-column:1;justify-self:end;padding-right:18px;font-size:1.05rem;font-weight:700;color:var(--kpla-accent,#2563eb)}
.kpla-tl-theme-badge .kpla-tl-marker{grid-column:2;gap:0;position:relative;justify-content:flex-start;padding-top:.35rem}
.kpla-tl-theme-badge .kpla-tl-dot{width:14px;height:14px;border-radius:999px;background:var(--kpla-accent,#2563eb);border:0;box-shadow:none}
.kpla-tl-theme-badge .kpla-tl-dot .dashicons{display:none}
.kpla-tl-theme-badge .kpla-tl-card{grid-column:3;justify-self:start;max-width:none;border:0;box-shadow:none;border-radius:0;background:transparent;overflow:visible}
.kpla-tl-theme-badge .kpla-tl-head{border-left:none;background:transparent;color:#0b1220;position:relative;padding:.2rem 0 0}
.kpla-tl-theme-badge .kpla-tl-date{display:none}
.kpla-tl-theme-badge .kpla-tl-title{display:inline-block;color:#fff;font-weight:900;letter-spacing:.2px;padding:.7rem 1rem;border-radius:8px;line-height:1.2}
.kpla-tl-theme-badge .kpla-alt-1 .kpla-tl-title{background:#1e293b}
.kpla-tl-theme-badge .kpla-alt-2 .kpla-tl-title{background:#0f766e}
.kpla-tl-theme-badge .kpla-tl-body{padding:.85rem 1.1rem 0}
.kpla-tl-theme-badge .kpla-tl-media{margin-top:.6rem}
/* year row */
.kpla-tl-theme-badge .kpla-tl-year-item{margin:1.6rem 0 1.2rem}
.kpla-tl-theme-badge .kpla-tl-year-item .kpla-tl-side-date{opacity:0}
.kpla-tl-theme-badge .kpla-tl-year-item .kpla-tl-card{display:none}
.kpla-tl-theme-badge .kpla-tl-year-marker{height:84px}
.kpla-tl-theme-badge .kpla-tl-year-badge{position:absolute;right:calc(50% + 14px);top:50%;transform:translateY(-50%);width:72px;height:72px;border-radius:999px;background:var(--kpla-year-bg);color:#fff;display:grid;place-items:center;font-size:1.2rem;font-weight:900;letter-spacing:.5px}
.kpla-tl-theme-badge .kpla-tl-year-marker:after{content:'';position:absolute;right:50%;top:50%;transform:translateY(-50%);width:14px;height:4px;background:var(--kpla-line)}

/* connectors: side date -> timeline dot */
.kpla-tl-theme-badge .kpla-tl-side-date{position:relative}
.kpla-tl-theme-badge .kpla-tl-right .kpla-tl-side-date::after,
.kpla-tl-theme-badge .kpla-tl-left .kpla-tl-side-date::after{
  content:'';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:1px;
  background:var(--kpla-line);
  width:18px;
}
.kpla-tl-theme-badge .kpla-tl-right .kpla-tl-side-date::after{right:-18px}
.kpla-tl-theme-badge .kpla-tl-left .kpla-tl-side-date::after{left:-18px}
.kpla-tl-theme-badge .kpla-tl-year-item .kpla-tl-side-date::after{display:none}

/* mobile: reduce left gutter further */
@media (max-width:860px){
  .kpla-tl-theme-badge{--kpla-date-col:0px;--kpla-marker-col:34px;padding-left:12px;padding-right:12px}
  .kpla-tl-theme-badge .kpla-tl-line{left:18px;transform:none}
  .kpla-tl-theme-badge .kpla-tl-item{grid-template-columns:34px 1fr;margin:1.15rem 0}
  .kpla-tl-theme-badge .kpla-tl-side-date{display:none}
  .kpla-tl-theme-badge .kpla-tl-marker{grid-column:1;padding-top:.45rem}
  .kpla-tl-theme-badge .kpla-tl-card{grid-column:2}
  .kpla-tl-theme-badge .kpla-tl-date{display:block;color:rgba(15,23,42,.72);opacity:1;margin:0 0 .45rem;font-weight:700}
  .kpla-tl-theme-badge .kpla-tl-year-badge{right:auto;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;font-size:1.0rem}
  .kpla-tl-theme-badge .kpla-tl-year-marker:after{display:none}
}