/* =========================================
   Beautified Video Cards (no markup changes)
   Fix: accent spine now uses border-left (no clearfix conflict)
========================================= */

.tta-video-cards{
  counter-reset: ttaStep;
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  margin:0;
  padding:0;
}

/* Card base */
.tta-video-card{
  position:relative;
  background-color:#ffffff;

  /* Main border */
  border:1px solid rgba(0,0,0,0.08);

  /* Accent spine lives here now */
  border-left-width:7px;
  border-left-style:solid;
  border-left-color:#f57c00;

  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 28px rgba(0,0,0,0.06);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
  overflow:hidden;

  /* Soft header wash without pseudo-elements */
  background-image:linear-gradient(180deg, rgba(245,124,0,0.11), rgba(245,124,0,0) 96px);
  background-repeat:no-repeat;
}

.tta-video-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,0.10);
}

/* Alternate accents per card */
.tta-video-cards > li:nth-child(4n+1).tta-video-card{
  border-left-color:#f57c00;
  background-image:linear-gradient(180deg, rgba(245,124,0,0.11), rgba(245,124,0,0) 96px);
}

.tta-video-cards > li:nth-child(4n+2).tta-video-card{
  border-left-color:#2a7f9e;
  background-image:linear-gradient(180deg, rgba(42,127,158,0.11), rgba(42,127,158,0) 96px);
}

.tta-video-cards > li:nth-child(4n+3).tta-video-card{
  border-left-color:#6b5ca5;
  background-image:linear-gradient(180deg, rgba(107,92,165,0.11), rgba(107,92,165,0) 96px);
}

.tta-video-cards > li:nth-child(4n+4).tta-video-card{
  border-left-color:#2e7d32;
  background-image:linear-gradient(180deg, rgba(46,125,50,0.11), rgba(46,125,50,0) 96px);
}

/* Inner column */
.tta-video-card-inner{
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;

  /* left gutter for the badge */
  padding-left:56px;
}

/* Title */
.tta-video-title{
  margin:0;
  font-size:24px;
  line-height:1.3;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}

/* Larger step badge */
.tta-video-title::before{
  counter-increment: ttaStep;
  content: counter(ttaStep);

  position:absolute;
  left:-56px;
  top:0;

  width:38px;
  height:38px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  background:rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.10);
}

/* Badge tint per card */
.tta-video-cards > li:nth-child(4n+1) .tta-video-title::before{ background:rgba(245,124,0,0.12); border-color:rgba(245,124,0,0.22); }
.tta-video-cards > li:nth-child(4n+2) .tta-video-title::before{ background:rgba(42,127,158,0.12); border-color:rgba(42,127,158,0.22); }
.tta-video-cards > li:nth-child(4n+3) .tta-video-title::before{ background:rgba(107,92,165,0.12); border-color:rgba(107,92,165,0.22); }
.tta-video-cards > li:nth-child(4n+4) .tta-video-title::before{ background:rgba(46,125,50,0.12); border-color:rgba(46,125,50,0.22); }

/* Meta as a pill */
.tta-video-meta{
  margin:0;
  display:inline-flex;
  width:fit-content;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:0.2px;
  background:rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.06);
  opacity:0.92;
}

/* Meta pill tint per card */
.tta-video-cards > li:nth-child(4n+1) .tta-video-meta{ background:rgba(245,124,0,0.10); border-color:rgba(245,124,0,0.18); }
.tta-video-cards > li:nth-child(4n+2) .tta-video-meta{ background:rgba(42,127,158,0.10); border-color:rgba(42,127,158,0.18); }
.tta-video-cards > li:nth-child(4n+3) .tta-video-meta{ background:rgba(107,92,165,0.10); border-color:rgba(107,92,165,0.18); }
.tta-video-cards > li:nth-child(4n+4) .tta-video-meta{ background:rgba(46,125,50,0.10); border-color:rgba(46,125,50,0.18); }

/* Embed frame */
.tta-video-embed{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(0,0,0,0.10);
  box-shadow:0 10px 22px rgba(0,0,0,0.12);
}

.tta-video-embed iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

/* Description */
.tta-video-desc{
  margin:0;
  line-height:1.7;
  max-width:78ch;
}

/* Small screens */
@media (max-width:480px){
  .tta-video-card{ padding:18px; border-radius:14px; }
  .tta-video-title{ font-size:18px; }
  .tta-video-embed{ border-radius:14px; }

  .tta-video-card-inner{
    padding-left:0;
  }

  .tta-video-title::before{
    position:static;
    margin-right:10px;
  }

  .tta-video-title{
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
}
/* Reduce space between section header and first card */
.section-header{
  margin-bottom:10px !important;
}

.section-header h2{
  margin-bottom:10px !important;
}

.blog-wrapper{
  padding-top:40px !important;
}