/* BBC Modern Timeline — front-end styles */

.bbcmt-timeline{
  --bbcmt-navy:#1c2d4a;
  --bbcmt-navy-deep:#0e1a2d;
  --bbcmt-gold:#b8935a;
  --bbcmt-gold-light:#e0c290;
  --bbcmt-cream:#f6f2e8;
  --bbcmt-white:#ffffff;
  --bbcmt-ink-mid:#666f7f;
  --bbcmt-line:#e6dfcd;

  position:relative;
  max-width:1000px;
  width:100%;
  margin:0 auto;
  padding:20px 20px;
  font-family:'Inter',sans-serif;
  box-sizing:border-box;
}
.bbcmt-timeline *,
.bbcmt-timeline *::before,
.bbcmt-timeline *::after{ box-sizing:border-box; }

.bbcmt-body img{ max-width:100%; height:auto; }

.bbcmt-timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom, var(--bbcmt-gold-light), var(--bbcmt-line) 12%, var(--bbcmt-line) 88%, var(--bbcmt-gold-light));
}

.bbcmt-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr 64px 1fr;
  align-items:start;
  margin-bottom:8px;
}
.bbcmt-row:last-child{ margin-bottom:0; }

.bbcmt-node{
  grid-column:2;
  justify-self:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--bbcmt-navy);
  border:4px solid var(--bbcmt-cream);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1px var(--bbcmt-line);
  position:relative;
  z-index:2;
  margin-top:36px;
}
.bbcmt-node .bbcmt-icon{
  font-family:'Playfair Display',serif;
  font-size:16px;
  color: var(--bbcmt-accent, var(--bbcmt-gold-light));
  line-height:1;
}

.bbcmt-row.is-current .bbcmt-node{
  background:var(--bbcmt-accent, var(--bbcmt-gold));
  animation:bbcmt-pulse 2.4s ease-in-out infinite;
}
.bbcmt-row.is-current .bbcmt-node .bbcmt-icon{ color:var(--bbcmt-navy-deep); }

@keyframes bbcmt-pulse{
  0%,100%{ box-shadow:0 0 0 1px var(--bbcmt-line), 0 0 0 0 rgba(184,147,90,.5); }
  50%{ box-shadow:0 0 0 1px var(--bbcmt-line), 0 0 0 10px rgba(184,147,90,0); }
}

.bbcmt-card{
  background:var(--bbcmt-white);
  border:1px solid var(--bbcmt-line);
  border-radius:16px;
  padding:32px 34px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.bbcmt-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 44px -26px rgba(28,45,74,.35);
  border-color:var(--bbcmt-accent, var(--bbcmt-gold));
}

.bbcmt-row.side-left .bbcmt-card{ grid-column:1; }
.bbcmt-row.side-right .bbcmt-card{ grid-column:3; }
.bbcmt-row.side-left .bbcmt-empty{ grid-column:3; }
.bbcmt-row.side-right .bbcmt-empty{ grid-column:1; }

.bbcmt-year-lbl{
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--bbcmt-accent, var(--bbcmt-gold));
  margin-bottom:10px;
}
.bbcmt-card h3{
  font-family:'Playfair Display',serif;
  font-weight:600;
  font-size:21px;
  color:var(--bbcmt-navy);
  margin:0 0 12px;
}
.bbcmt-body{
  font-size:14px;
  color:var(--bbcmt-ink-mid);
  line-height:1.8;
}
.bbcmt-body p{ margin:0 0 14px; }
.bbcmt-body p:last-child{ margin-bottom:0; }

.bbcmt-empty{ opacity: 0; }

.bbcmt-empty{ visibility:hidden; }

/* ---------- Laptop / small desktop ---------- */
@media(max-width:1024px){
  .bbcmt-timeline{ max-width:880px; padding:18px 16px; }
  .bbcmt-row{ grid-template-columns:1fr 56px 1fr; }
  .bbcmt-node{ width:50px; height:50px; margin-top:32px; }
  .bbcmt-card{ padding:28px 28px; }
  .bbcmt-card h3{ font-size:20px; }
}

/* ---------- Tablet ---------- */
@media(max-width:820px){
  .bbcmt-timeline::before{ left:28px; }
  .bbcmt-row{ grid-template-columns:56px 1fr; gap:0; margin-bottom:0; }
  .bbcmt-node{ grid-column:1; justify-self:start; margin-top:0; width:44px; height:44px; }
  .bbcmt-node .bbcmt-icon{ font-size:13px; }
  .bbcmt-row.side-left .bbcmt-card,
  .bbcmt-row.side-right .bbcmt-card{ grid-column:2; margin-left:20px; margin-bottom:34px; }
  .bbcmt-row .bbcmt-empty{ display:none; }
  .bbcmt-card{ padding:26px 24px; }
}

/* ---------- Small tablet / large phone ---------- */
@media(max-width:600px){
  .bbcmt-timeline{ padding:16px 12px; }
  .bbcmt-timeline::before{ left:22px; }
  .bbcmt-row{ grid-template-columns:40px 1fr; }
  .bbcmt-node{ width:36px; height:36px; border-width:3px; }
  .bbcmt-node .bbcmt-icon{ font-size:12px; }
  .bbcmt-row.side-left .bbcmt-card,
  .bbcmt-row.side-right .bbcmt-card{ margin-left:16px; margin-bottom:28px; }
  .bbcmt-card{ padding:22px 20px; border-radius:14px; }
  .bbcmt-card h3{ font-size:18px; }
  .bbcmt-body{ font-size:13.5px; line-height:1.7; }
}

/* ---------- Mobile phone ---------- */
@media(max-width:480px){
  .bbcmt-timeline{ padding:14px 10px; }
  .bbcmt-timeline::before{ left:18px; }
  .bbcmt-row{ grid-template-columns:32px 1fr; }
  .bbcmt-node{ width:30px; height:30px; border-width:2px; }
  .bbcmt-node .bbcmt-icon{ font-size:11px; }
  .bbcmt-row.side-left .bbcmt-card,
  .bbcmt-row.side-right .bbcmt-card{ margin-left:12px; margin-bottom:22px; }
  .bbcmt-card{ padding:18px 16px; border-radius:12px; }
  .bbcmt-year-lbl{ font-size:9.5px; margin-bottom:8px; }
  .bbcmt-card h3{ font-size:16.5px; margin-bottom:8px; }
  .bbcmt-body{ font-size:13px; line-height:1.65; }
  .bbcmt-body p{ margin:0 0 10px; }
}