/* Modern CSS Revision for .single-agenda */

.single-agenda {
   /* Global-ish variables for this scope */
  --transition-speed: 0.3s;
  --transition-timing: ease-in-out;
  --brand-blue-shadow: rgba(37, 45, 113, 0.1);
  --brand-blue-shadow-inner: rgba(37, 45, 113, 0.04);

  /* ---------- YouTube box (Modern Aspect Ratio) ---------- */
  .yt-lite {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Replaces padding-bottom hack */
    background: #000 center/cover no-repeat;
    border-radius: 12px;
    overflow: hidden;

    iframe, .yt-fallback, .yt-play {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    &.is-loaded { background-image: none; }
  }

  .yt-play {
    margin: auto;
    width: 68px;
    height: 48px;
    border-radius: 12px;
    background: rgb(0 0 0 / 60%);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--transition-speed) var(--transition-timing);

    &:hover { background: rgb(0 0 0 / 72%); }
  }

  .yt-play-icon {
    width: 0;
    height: 0;
    border-left: 16px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin-left: 3px;
  }

  /* ---------- Feather Carousel ---------- */
  .fe-carousel {
    position: relative;
    overflow: hidden;

    &-track {
      display: flex;
      gap: 1rem;
      will-change: transform;
      transition: transform 0.35s ease;
    }

    &-item {
      flex: 0 0 auto;
      width: 100%;
    }

    .card-img-top {
      object-fit: cover;
      height: 140px;
    }
  }

  #sessionsCarousel .card-img-top {
    @media (min-width: 992px) { height: 160px; }
  }

  .carousel-controls {
    display: flex;
    gap: 6px;
  }

  /* ---------- Transcript States (Smoothed) ---------- */
  .transcript-collapsed {
    max-height: 250px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s var(--transition-timing), padding 0.5s ease;

    &::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0; /* Modern shorthand for bottom/left/right: 0 */
      height: 80px;
      background: linear-gradient(transparent, rgba(240, 244, 255, 1));
      pointer-events: none;
      transition: opacity 0.3s ease;
      opacity: 1;
    }
  }

  .transcript-expanded {
    max-height: 5000px; /* Large enough for content, small enough for smooth animation */
    &::after { opacity: 0; }
  }

  /* ---------- Hero & Sections ---------- */
  .hero-section {
    background: linear-gradient(38deg, transparent 51.08%, rgba(50, 61, 184, 0.3) 100%),
                url("../../img/pattern-randomized.svg") center/cover;
    align-content: center;

    .event-card .event-thumb {
      width: 90px;
      height: 90px;
    }
  }

  /* ---------- Speaker List ---------- */
  .speaker-list {
    row-gap: 1rem;
    list-style: none;

    li {
      .img-section {
        position: relative; 
        /* Context for absolute linkedin icon */

        .speaker-img {
          display: block;
          width: 70px;
          height: 70px;
          border: 2px solid transparent;
          transition: border-color var(--transition-speed) ease;
        }

        .linkedin {
          position: absolute;
          bottom: 0;
          right: -10%;
          opacity: 0;
          transition: all 200ms ease-in-out;
        }

        &:hover {
          .linkedin { opacity: 1; }
          .speaker-img { border-color: var(--bs-ascent-100); }
        }
      }

      .speaker-detail {
        .designation, .company { font-size: 14px; line-height: 19px; margin: 0; }
        .company { color: #7d7d7d; }

        .identity {
          font-size: 10px;
          border-radius: 4px;
          padding: 1px 6px;
          text-transform: uppercase;
          display: inline-block;
          line-height: 15px;
          align-self: start;

          &.speaker, &.panelist, &.judge {
            background-color: #b1ecf7;
            color: #222dd0;
          }

          &.moderator, &.keynote {
            background-color: color-mix(in srgb, var(--bs-ascent-50), transparent 50%);
            color: var(--bs-ascent-200);
          }
        }
      }
    }
  }

  /* ---------- Suggestion Cards ---------- */
  .agenda-suggestion-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    .title, .excerpt {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .title { -webkit-line-clamp: 2; }
    .excerpt { -webkit-line-clamp: 3; }

    &:hover {
      box-shadow: 0 20px 25px -5px var(--brand-blue-shadow),
                  0 10px 10px -5px var(--brand-blue-shadow-inner) !important;
      transform: translateY(-2px);
    }
  }
}