/* CSS Document */
.free-meditations {
    padding: 100px 0 50px;
}
/* ===== Free Meditations – Cards Grid ===== */
.videos-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}

/* each card is a simple <a> link */
.video-card{
  display:block;
  color:#1e1e1e;
  text-decoration:none;
  text-align: center;
}

/* thumbnail with play overlay */
.video-card .thumb{
  display: block;
  position:relative;
  border-radius: 5px;
  overflow:hidden;
  background: #000;
}
.video-card .thumb img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  opacity: .6;
  object-fit:cover;
  display:block;
  transform:scale(1.001);
  transition:transform .35s ease, filter .35s ease;
}
/* centered play badge (white circle + triangle) */
.video-card .thumb::after{
  content:"\f167";
  font-family: 'Font Awesome 6 Brands';
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: #fff;
}

/* hover / focus */
.video-card:hover .thumb img{ transform:scale(1.03); filter:saturate(1.02); }
.video-card:focus-visible{ outline:3px solid #9FBCA6; outline-offset:4px; }

/* text block under the thumbnail */
.video-card .title{
  margin: 10px 0;
  font-weight: 700;
  font-size:18px;
  line-height:1.25;
  color: #231F20;
}
.video-card .meta{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin:0;
  font-size: 14px;
  line-height:1.4;
  color: #7F7F7F;
}
.video-card .meta .channel{ display:block; }
.video-card .meta .time{ display:block; }

/* ===== Load More (simple link styled as pill) ===== */
.videos-load{
  text-align:center;
  margin-top: 50px;
}
.videos-load .load-more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px 12px 48px; /* space for the left icon */
  border-radius:999px;
  background:#E7A269;
  color:#ffffff;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  position:relative;
}
/* plus-in-circle drawn with pseudos so it’s still a plain <a> */
.videos-load .load-more::before{
  content:"";
  position:absolute;
  left:18px; top:50%;
  width:22px; height:22px;
  transform:translateY(-50%);
  background:#ffffff;
  border-radius:50%;
}
.videos-load .load-more::after{
  content:"";
  position:absolute;
  left:18px; top:50%;
  width:22px; height:22px;
  transform:translateY(-50%);
  background:
    linear-gradient(#E7A269,#E7A269) center / 10px 2px no-repeat,
    linear-gradient(#E7A269,#E7A269) center / 2px 10px no-repeat;
  border-radius:50%;
}
.videos-load .load-more:hover{ filter:brightness(1.02); }
.videos-load .load-more:focus-visible{ outline:3px solid #9FBCA6; outline-offset:4px; }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .videos-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .videos-grid{ grid-template-columns:1fr; }
}