/* Extracted from vlogg1527/rophim src/styles/template.css (schedule section)
   Scoped to .schedule-scope to avoid global conflicts. */

.schedule-scope .wrapper-schedules{ max-width: 1400px; margin: 0 auto;}
.schedule-scope .schedules-layout{ display: flex; flex-direction: column; gap: 2rem; padding: 1rem 0;}

/* Row header basics (avoid relying on global theme) */
.schedule-scope .row-header{
  display:flex;
  align-items:center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.schedule-scope .row-body{ width: 100%; }
.schedule-scope .flex-grow-1{ flex: 1 1 auto; }

/* Icon sizing guard (prevents huge svg on desktop) */
.schedule-scope .inc-icon{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.schedule-scope .inc-icon svg{
  width: 22px !important;
  height: 22px !important;
  display: block;
}
.schedule-scope .text-white{ color: #fff; }
.schedule-scope .category-name{ color: #fff; font-size: 1.35rem; font-weight: 700; margin:0; }

.schedule-scope .sche-slide{ position: relative; }
.schedule-scope .cards-slide-wrapper{ position: relative; }
.schedule-scope .sche-navigation{ display:flex; gap:.5rem; align-items:center; }
.schedule-scope .sw-navigation{ position: relative; display:flex; gap:.5rem; justify-content:flex-end; margin-bottom:.75rem; }
.schedule-scope .sw-button{ width: 34px; height: 34px; border-radius: 999px; border: 1px solid #ffffff20; background: #ffffff08; color: #fff; cursor: pointer; }
.schedule-scope .sw-button:hover{ border-color: #ffffff40; background: #ffffff10; }

.schedule-scope .sche-time{ position: relative; display:flex; gap: 6px; overflow:auto; padding-bottom: 2px; scrollbar-width: none; }
.schedule-scope .sche-time::-webkit-scrollbar{ display:none; }
.schedule-scope .sche-time .item-time{ display: flex; flex-direction: column-reverse; gap: .75rem; font-size: 1em; padding: 1rem 1.2rem; border-radius: 0; background-color: #ffffff06; flex: 1; position: relative; cursor: pointer; min-width: 140px;}
.schedule-scope .sche-time .item-time > div{ line-height: 1; white-space: nowrap;}
.schedule-scope .sche-time .item-time .day{ font-size: 18px; color: #fff; font-weight: 700;}
.schedule-scope .sche-time .item-time .time{ width: 100%; height: 20px; display: flex; align-items: center; justify-content: space-between;}
.schedule-scope .sche-time .item-time .time span{
  font-size: 10px;
  line-height: 1;
  padding: .2rem .3rem;
  color: #FFD875 !important;
  border: 1px solid #FFD875 !important;
  border-radius: .25rem;
  background: transparent !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.schedule-scope .sche-time .item-time.active{ background-color: #ffffff10;}
.schedule-scope .sche-time .item-time.active:before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background-color: #FFD875;}
.schedule-scope .sche-time .item-time.active .day{ color: #FFD875;}

.schedule-scope .sche-timeline{ display: flex; flex-direction: column; width: 100%;}
.schedule-scope .sche-timeline .st-row{ position: relative; display: flex; align-items: flex-start; justify-content: space-between; min-height: 60px;}
.schedule-scope .sche-timeline .st-row:before{ content: ""; position: absolute; left: 0; right: 0; top: 29px; height: 2px; background-color: #ffffff10;}
.schedule-scope .sche-timeline .st-row > div{ position: relative; z-index: 2;}
.schedule-scope .sche-timeline .st-row .clock{ font-size: 16px; font-weight: 600; line-height: 60px; flex-shrink: 0; background-color: #191B24; width: 90px; text-align: center; color:#fff;}
.schedule-scope .sche-timeline .st-row .items{ display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; flex-grow: 1; padding: 1rem;}
.schedule-scope .sche-timeline .st-row .h-item{ padding: 10px 15px 10px 10px; background-color: #363840; border: 1px solid #ffffff20; border-radius: .75rem; font-size: 13px; position: relative; display:flex; gap: 10px; color:#fff; text-decoration:none;}
.schedule-scope .sche-timeline .st-row .h-item:hover{ border-color: #FFD875;}
.schedule-scope .sche-timeline .st-row .h-item .t-pin{ position: absolute; top: -12px; font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 3px; background-color: #191B24; color:#FFD875;}

.schedule-scope .v-thumb-s{ width: 50px; flex-shrink: 0;}
.schedule-scope .v-thumbnail{ width: 100%; padding-bottom: 150%; height: 0; position: relative; border-radius: .2rem; overflow: hidden; display: block; background-color: #2F3346;}
.schedule-scope .v-thumbnail img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.schedule-scope .item-title{ color: #fff; font-size: 1em; font-weight: 600; margin: 0 0 .35rem; line-height: 1.5;}
.schedule-scope .tag-small{ font-size: .9em; color: rgba(255,255,255,.7); white-space: nowrap; }
.schedule-scope .lim-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space: normal !important; }
.schedule-scope .info-line{ display:flex; align-items:center; gap:.6rem; }

@media (max-width: 1199px){
  .schedule-scope .sche-timeline .st-row .items{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .schedule-scope .sche-timeline .st-row{ flex-direction: column; }
  .schedule-scope .sche-timeline .st-row:before{ display:none; }
  .schedule-scope .sche-timeline .st-row .clock{ width: auto; line-height: 1; padding: .5rem .75rem; border-radius: .5rem; margin: .75rem 1rem 0; background-color: #ffffff08; }
  .schedule-scope .sche-timeline .st-row .items{ grid-template-columns: 1fr; padding: 1rem; }
}