/* Timeline Events - improved layout styles */
.te-timeline {
  position: relative;
  padding: 1rem;
  overflow: visible;
}

/* SVG overlay sits under content but above background line */
.te-svg-overlay {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.te-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ddd;
  z-index: 0;
}

/* Horizontal layout uses flexbox so items don't overlap and wrap nicely */
.te-layout-horizontal {
  display: flex;
  align-items: flex-start;
  /* align at top so nodes line up */
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 2rem 1rem 3rem;
}

.te-layout-horizontal .te-item {
  position: relative;
  z-index: 2;
  flex: 0 0 240px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 4px;
  text-align: left;
}

.te-item .te-title {
  margin: 0 0 .25rem 0;
  font-size: 1rem;
  line-height: 1.2
}

.te-item .te-meta {
  font-size: .95rem;
  color: #666;
  margin-bottom: .5rem;
}

.te-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
  background: #fe4004
}
.te-node {
  left: 50%;
  transform: translateX(-50%);
  top: 6px
}
.te-shortcode-wrapper{
  position:relative;
  /* overlay opacity controlled by --te-shortcode-overlay (0.0 - 1.0) */
  --te-shortcode-overlay: 0.15;
  background-color:#000;
  color:#fff;
  padding: 3rem 2rem 1rem 2rem;
  margin-bottom:1rem;
  /* Desktop background image */
  background-image: url('https://staging.creta24.gr/wp-content/uploads/2026/04/2.png');
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* overlay to improve text contrast - uses CSS variable for easy tuning */
.te-shortcode-wrapper::before{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,var(--te-shortcode-overlay));
  z-index: 0;
}

.te-shortcode-wrapper > *{ position: relative; z-index: 2; }
  .te-shortcode-header{margin:0 0 1rem 0}

.te-excerpt {
  max-height: 6.5rem;
  overflow: hidden
}

.te-excerpt p {
  margin: 0
}

.te-meta time {
  font-weight: 700
}

.te-decorative {
  display: inline-block;
  margin-left: 1rem;
  font-size: .85rem;
  color: #fe4004;
  font-weight: 600
}

/* Titles-only (shortcode) mode: nodes sit on a straight line above cards */
/* .te-timeline.titles-only {
  padding-top: 44px
} */

.te-timeline.titles-only .te-line {
  top: 42px
}

.te-timeline.titles-only .te-item-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative
}

.te-timeline.titles-only .te-item {
  flex: 0 0 auto
}

.te-timeline.titles-only .te-node {
  top: -34px;
  z-index: 44;
}

/* Vertical layout: ensure item wrap positions and cards appear to the right of the vertical line */
.te-layout-vertical .te-item-wrap {
  position: relative;
  display: block;

}

.te-layout-vertical .te-item {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 4px
}

.te-layout-vertical .te-node {
  left: calc(2rem - 6px);
  top: 1rem;
  position: absolute;
  transform: none
}

/* Archive header decorative text */
.te-archive-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: .5rem
}

.te-archive-header .te-decor {
  color: #fe4004;
  font-weight: 700
}

.te-shortcode-header {
  padding-left:2rem ;
  margin-top: 6rem;
  margin-bottom: .5rem
}

.te-shortcode-title {
  color: #ffffff;
  font-weight: 700;
  margin: 0;
  font-size: 1.1rem;
  
}
.te-shortcode-title:hover {
  color: #fe4004;
  text-decoration: underline;
}

.te-shortcode-deco {
  font-size: 0.725rem;
  color: #fe4004;
  font-weight: 700;
  margin-right: .5rem;
}

/* White outline for deco text: stroke on WebKit and multi-shadow fallback */
/* .te-shortcode-deco {
  text-shadow: -1px -1px 0 #0000006b, 1px -1px 0 #0000006b, -1px 1px 0 #0000006b, 1px 1px 0 #0000006b;
} */

/* Small blinking dot shown next to the "LIVE" decorative text */
.te-live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fe4004;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(254,64,4,0.6);
  animation: te-blink 1.2s infinite;
}

@keyframes te-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.15; transform: scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .te-live-dot { animation: none; opacity: 1; }
}

.te-shortcode-header .te-decor {
  color: #fe4004;
  font-weight: 700;
  margin-right: .5rem
}

/* Shortcode specific styles: black background, orange/white text, 4 columns */
.te-shortcode {
  color: #fff;
  padding: 2rem;
  border-radius: 4px
}

.te-shortcode .te-header .te-title-term {
  color: #fff;
  font-size: 1.25rem;
  margin: 0
}

.te-shortcode .te-header {
  margin-bottom: 1rem
}

.te-shortcode.te-layout-horizontal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem
}

.te-shortcode .te-item-wrap {
  flex: 0 0 calc(25% - 1rem);
  max-width: calc(25% - 1rem);
  min-width: 160px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center
}

.te-shortcode .te-item {
  background: transparent;
  border: 0;
  padding: 6px 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center
}

.te-shortcode .te-item .te-title {
  color: #fff
}

.te-shortcode .te-item .te-meta {
  color: #fe4004;
  margin-bottom: 6px;
  font-weight: 700
}

.te-shortcode .te-line {
  background: transparent;
  height: 2px
}

.te-shortcode .te-svg-overlay polyline {
  stroke: #fe4004
}

.te-shortcode .te-dot {
  background: #fe4004
}

@media (max-width:900px) {
  .te-line {
    display: none;
  }
  .te-shortcode .te-item {
    flex: 1 1 100%;
    max-width: 100%
  }
  .te-shortcode .te-item-wrap {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }
  .te-shortcode .te-item {
    padding: 10px 12px;
  }
  .te-shortcode .te-dot {
    display: none;
  }
  .te-shortcode-wrapper {
    padding: 1rem;
  }
  .te-shortcode-header {
    font-size: 1rem;
    margin-top:1rem;
  }

  /* Mobile background image for shortcode wrapper */
  .te-shortcode-wrapper{
    background-image: url('https://staging.creta24.gr/wp-content/uploads/2026/04/3.png');
    background-size: cover;
    background-position: center center;
  }
}

@media (max-width:600px) {
  .te-shortcode-wrapper {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    --te-shortcode-overlay: 0.65;
  }
  .te-shortcode .te-title-shortcode {
    font-size: 1.05rem;
    max-width: 100%;
  }
    
  
}

/* vertical layout */
.te-layout-vertical {
  padding-left: 3rem
}

.te-layout-vertical .te-line {
  left: 2rem;
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto
}

.te-layout-vertical .te-item {
  display: block;
  margin: 1rem 0;
  position: relative;
  padding-left: 1rem
}

.te-layout-vertical .te-node {
  left: calc(2rem - 53px);
  top: 1rem;
  transform: none
}

/* responsive adjustments */
@media (max-width:700px) {
  .te-layout-horizontal {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem
  }

  .te-layout-horizontal .te-item {
    flex: 1 1 auto;
    width: auto
  }

  .te-node {
    left: 1rem;
    top: 1rem
  }
  .te-archive-banner{
    height: 120px;
  }
}

.te-archive-banner{
  /* full-bleed banner across viewport */
  --te-shortcode-overlay: 0.45;
  background-color:#000;
  color:#fff;
  padding:2rem 1rem;
  border-radius:0;
  margin-bottom:0.75rem;
  background-image: url('https://staging.creta24.gr/wp-content/uploads/2026/04/1.png');
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  overflow: hidden;
  height: 160px;
}
.te-archive-banner > *{ position: relative; z-index: 2; }

.te-archive-header {
  text-align: center;
  margin: 1rem 0 1.5rem;
}
.te-archive-header .page-title { margin: 0; font-size: 1.75rem }
.te-archive-header .page-title a { color: inherit; text-decoration: none }
.te-archive-header .page-title a:hover { color: #fe4004; text-decoration: underline }
.te-layout-horizontal .te-item-wrap .te-item,
.te-shortcode .te-item-wrap .te-item,
.te-timeline.titles-only .te-item-wrap .te-item {
  align-items: flex-start;
  text-align: left;
}

.te-layout-horizontal .te-item-wrap .te-node,
.te-shortcode .te-item-wrap .te-node,
.te-timeline.titles-only .te-item-wrap .te-node {
  /* Prefer relative flow placement so node sits at the left of the card
     without absolute centering used elsewhere. */
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  align-self: flex-start;
  margin: 0 0.6rem 0 0;
}