/* Beo Fantastiko Timeline – Dark Black Premium */

.bf-timeline{
  position:relative;
  --bf-accent:#b88a44; /* gold accent remains */
  --bf-card-bg:#0a0a0a;
  --bf-text:#f5f5f5;
  --bf-black-1:#000000;
  --bf-black-2:#121212;
  --bf-black-3:#1a1a1a;
  color:var(--bf-text);
}

/* Central dashed line */
.bf-timeline-line{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
  bottom:0;
  width:0;
  border-left:2px dashed rgba(184,138,68,.6);
}

/* Layout */
.bf-timeline-items{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.bf-timeline-item{
  display:grid;
  grid-template-columns: 1fr 60px 1fr;
  gap:16px;
  align-items:center;
}

.bf-timeline-center{
  display:flex;
  justify-content:center;
  align-items:center;
}

/* DARKER circle */
.bf-timeline-dot{
  width:56px;
  height:56px;
  border-radius:999px;
  border:2px solid var(--bf-accent);
  background:linear-gradient(145deg, var(--bf-black-1), var(--bf-black-3));
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.bf-timeline-dot:after{
  content:'';
  position:absolute;
  top:-30%;
  left:-40%;
  width:120%;
  height:120%;
  background:linear-gradient(120deg, transparent 45%, rgba(255,255,255,.05), transparent 55%);
  transform:rotate(25deg);
}

.bf-timeline-date{
  font-size:10.5px;
  font-weight:800;
  text-align:center;
  color:#ffffff;
  line-height:1.15;
  max-width:88%;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* Content grid */
.bf-timeline-content{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap:16px;
}

/* DARKER card */
.bf-timeline-card{
  background:linear-gradient(180deg, var(--bf-black-1), var(--bf-black-2));
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:
    0 18px 45px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
}

.bf-timeline-card:before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(120deg, transparent 45%, rgba(255,255,255,.03), transparent 55%);
  transform:rotate(25deg);
  z-index:0;
  pointer-events:none;
}

/* Ensure text is always above the shine overlay */
.bf-timeline-card > *{
  position:relative;
  z-index:1;
}

.bf-timeline-card-head{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:10px;
}

.bf-timeline-card-date{
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.72);
}

.bf-timeline-excerpt{
  margin-top:10px;
  font-size:14px;
  line-height:1.55;
  color:rgba(245,245,245,.86);
}

/* TITLE now FULL BLACK */
.bf-timeline-title{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(180deg, #000000, #111111);
  color:#ffffff;
  font-size:17px;
  font-weight:900;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.8);
}

.bf-timeline-title:hover{
  filter:brightness(1.08);
}

/* Image */
.bf-timeline-image{
  display:block;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 40px rgba(0,0,0,.8);
}

.bf-timeline-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.bf-timeline-image:hover img{
  transform:scale(1.06);
}

/* Responsive */

/* Tablet: keep timeline feel, but tighter */
@media (max-width: 900px){
  .bf-timeline-item{ grid-template-columns: 1fr 60px 1fr; }
  .bf-timeline-content{ grid-template-columns: 1fr 200px; }
}

/* Mobile: stacked card layout (image ABOVE, title+text BELOW) */
@media (max-width: 600px){
  /* One column timeline per item */
  .bf-timeline-item{
    grid-template-columns: 1fr;
    gap:14px;
    align-items:start;
  }

  /* Center dot becomes top badge */
  .bf-timeline-center{
    grid-column:1;
    grid-row:1;
    justify-content:center;
  }

  /* Show only the filled slot, full width */
  .bf-timeline-item--left .bf-timeline-slot--right{ display:none; }
  .bf-timeline-item--right .bf-timeline-slot--left{ display:none; }
  .bf-timeline-item--left .bf-timeline-slot--left,
  .bf-timeline-item--right .bf-timeline-slot--right{
    grid-column:1;
    grid-row:2;
  }

  /* Hide the vertical line on mobile (cleaner) */
  .bf-timeline-line{ display:none; }

  /* Dot sizing so full date fits */
  .bf-timeline-dot{ width:78px; height:78px; }
  .bf-timeline-date{ font-size:12px; line-height:1.1; padding:0 6px; }

  /* Stack image above card */
  .bf-timeline-content{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .bf-timeline-image{ order:1; }
  .bf-timeline-card{ order:2; }

  /* Title slightly smaller to fit */
  .bf-timeline-title{ font-size:16px; }
}