/* ==========================================================================
   Video Block Component
   Video with poster, heading, body text, and collapsible transcript.
   ========================================================================== */

@layer utilities {

  /* --------------------------------------------------------------------------
     Layout: two-column (video + text) on desktop, stacked on mobile
     -------------------------------------------------------------------------- */

  .video-block {
    width: 100%;
    position: relative;
  }

  .video-block__content {
    gap: var(--space-3, 0.75rem);
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'video' 'text';

    @media (min-width: 1024px) {
      grid-template-columns: 462px 1fr;
      grid-template-rows: auto;
      grid-template-areas: 'video text';
      gap: var(--space-5, 1.25rem) clamp(var(--space-5), 14.423vw - 127.69px, 80px);
    }

    .video-block--has-transcript & {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas: 'video' 'transcript' 'text';

      @media (min-width: 1024px) {
        grid-template-columns: 0.57fr 0.43fr;
        grid-template-rows: auto;
        grid-template-areas: 'video text' 'transcript transcript';
        gap: var(--space-5, 1.25rem) clamp(var(--space-5), 9.615vw - 78.46px, 60px);
      }
    }

    .video-block--desktop-column & {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas: 'video' 'text';
      gap: var(--space-2, 0.5rem);
    }

    .video-block--media-only & {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas: 'video' 'transcript';
      gap: var(--space-4, 1rem);
    }

    .video-block--media-only.video-block--chapterized & {
      grid-template-columns: 100%;
      grid-template-rows: auto;
      grid-template-areas: 'video' 'chapters' 'transcript';
      gap: var(--space-4, 1rem);
    }
  }

  /* --------------------------------------------------------------------------
     Floating image variants (optional) — image floats left or right of text on desktop
     -------------------------------------------------------------------------- */

  .video-block--floating-image--branches-1 .video-block__media::before {
    content: "";
    position: absolute;
    top: calc(100% - 55px);
    left: -8px;
    width: 40px;
    height: 62px;
    background-image: url(/themes/custom/livmarli/images/video-block/img-video-branches-1.png);
    background-size: 100% auto;
  }

  .video-block--floating-image--branches-2 .video-block__media::before {
    content: "";
    position: absolute;
    top: calc(100% - 77px);
    left: -8px;
    width: 40px;
    height: 77px;
    background-image: url(/themes/custom/livmarli/images/video-block/img-video-branches-2.png);
    background-size: 100% auto;
  }

  .video-block--floating-image--branches-3 .video-block__media::before {
    content: "";
    position: absolute;
    top: calc(100% - 64px);
    left: -8px;
    width: 40px;
    height: 44px;
    background-image: url(/themes/custom/livmarli/images/video-block/img-video-branches-3.png);
    background-size: 100% auto;
  }

  .video-block--floating-image--branches-4 .video-block__media::before {
    content: "";
    position: absolute;
    top: calc(100% - 64px);
    left: -8px;
    width: 40px;
    height: 44px;
    background-image: url(/themes/custom/livmarli/images/video-block/img-video-branches-4.png);
    background-size: 100% auto;
  }

  .video-block--floating-image--branches-5 .video-block__media::before {
    content: "";
    position: absolute;
    top: calc(100% - 64px);
    left: -38px;
    width: 42px;
    height: 54px;
    background-image: url(/themes/custom/livmarli/images/video-block/img-video-branches-5--mobile.png);
    background-size: 100% auto;
  }

  @media screen and (max-width: 1023px) {
    .video-block--floating-image--branches-1 .video-block__player-wrapper,
    .video-block--floating-image--branches-2 .video-block__player-wrapper,
    .video-block--floating-image--branches-3 .video-block__player-wrapper,
    .video-block--floating-image--branches-4 .video-block__player-wrapper {
      max-width: calc(100% - 64px);
      margin: 0 auto;
    }
    .video-block--floating-image--branches-5 .video-block__player-wrapper {
      max-width: calc(100% - 8px);
      margin: 0 auto;
    }
    .video-block--floating-image--branches-1 .video-block__transcript-row,
    .video-block--floating-image--branches-2 .video-block__transcript-row,
    .video-block--floating-image--branches-3 .video-block__transcript-row,
    .video-block--floating-image--branches-4 .video-block__transcript-row {
      margin-left: 32px;
      width: calc(100% - 32px);
    }
    .video-block--floating-image--branches-5 .video-block__transcript-row {
      margin-left: 4px;
      width: calc(100% - 4px);
    }
  }

  @media screen and (min-width: 1023px) {
    .video-block--floating-image--branches-5 .video-block__media::before {
      background-image: url(/themes/custom/livmarli/images/video-block/img-video-branches-5.png);
    }
    .video-block--floating-image--branches-1 .video-block__media::before {
      top: calc(100% - 160px);
      left: -107px;
      width: 107px;
      height: 170px;
    }
    .video-block--floating-image--branches-2 .video-block__media::before {
      top: calc(100% - 154px);
      left: -81px;
      width: 81px;
      height: 154px;
    }
    .video-block--floating-image--branches-3 .video-block__media::before {
      top: calc(100% - 154px);
      left: -125px;
      width: 125px;
      height: 137px;
    }
    .video-block--floating-image--branches-4 .video-block__media::before {
      top: calc(100% - 154px);
      left: -135px;
      width: 135px;
      height: 141px;
    }
    .video-block--floating-image--branches-5 .video-block__media::before {
      top: calc(100% - 154px);
      left: -83px;
      width: 83px;
      height: 126px;
    }
  }

  /* --------------------------------------------------------------------------
     Media (Video / Poster)
     -------------------------------------------------------------------------- */

  .video-block__media {
    grid-area: video;
    position: relative;
    flex-shrink: 0;
    width: 100%;
    border-radius: var(--radius-lg, 1rem);
  }

  @media (min-width: 1024px) {
    .video-block__media {
      flex: 1;
      /* width: 60%; */
      max-width: 610px;
    }

    .video-block--media-only .video-block__media,
    .video-block--desktop-column .video-block__media {
      flex: 1;
      width: 100%;
      max-width: none;
    }
  }

  .video-block__player-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;

    @media (min-width: 1024px) {
      border-radius: var(--radius-lg, 1rem);
    }
  }

  .video-block__poster-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  .video-block__poster-overlay[hidden] {
    display: none;
  }

  .video-block__picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .video-block__poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Play button overlay */
  .video-block__play-btn {
    --btn-size: clamp(42px, -0.18px + 11.25vw, 115px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-size);
    height: var(--btn-size);
    padding: 0;
    border: none;
    background-color: rgba(0, 58, 112, 0.7);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--transition-base, 250ms ease);
    z-index: 2;
  }

  .video-block__play-btn:hover,
  .video-block__play-btn:focus {
    background-color: rgba(0, 58, 112, 0.9);
  }

  .video-block__play-btn:focus-visible {
    outline: 2px solid var(--color-white, #FFFFFF);
    outline-offset: 2px;
  }

  .video-block__play-icon {
    --icon-width: clamp(17px, -0.94px + 4.78vw, 48px);
    --icon-height: clamp(26px, -1.16px + 7.24vw, 73px);
    width: var(--icon-width) !important;
    height: var(--icon-height) !important;
    color: var(--color-white, #FFFFFF);
  }

  /* Inline player (iframe or video element) */
  .video-block__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .video-block__player[hidden] {
    display: none;
  }

  .video-block__iframe,
  .video-block__video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* --------------------------------------------------------------------------
     Text Content
     -------------------------------------------------------------------------- */

  .video-block__text {
    grid-area: text;
    /* flex: 1; */
    min-width: 0;
    align-self: center;
    margin-top: var(--space-3, 0.75rem);

    @media (min-width: 1024px) {
      max-width: 470px;
      margin-top: 0;

      .video-block--has-text:not(.video-block--desktop-column) & {
        max-width: 408px;
      }

      .video-block--desktop-column & {
        flex: 1;
        width: 100%;
      }
    }

    .video-block--has-text & {
      margin-top: var(--space-1, 0.25rem);
    }

    .video-block--has-transcript & {
      margin-top: var(--space-3, 0.75rem);

      @media (min-width: 1024px) {
        max-width: 470px !important;
      }

      /* @media (max-width: 1023.98px) {
        width: calc(100% - 32px);
        margin-inline: auto;
      } */
    }
  }

  .video-block__heading {
    line-height: var(--theme-line-height);
    margin-bottom: var(--space-4, 1rem);
    padding-right: var(--space-1);
  }

  .video-block__body {
    font-size: var(--theme-font-size, 18px);
    line-height: 1.2;
    color: var(--color-text-primary, #313131);
  }

  .video-block__body p {
    line-height: var(--theme-line-height);
    margin-bottom: .8em;
  }

  .video-block__body p:last-child {
    margin-bottom: 0;
  }

  .video-block__body a {
    color: var(--color-blue-dark, #003A70);
    text-decoration: underline;
  }

  .video-block__body a:visited {
    color: var(--color-blue-dark, #003A70);
  }

  .video-block__body a:hover,
  .video-block__body a:focus,
  .video-block__body a:focus-visible {
    color: var(--color-blue-light, #0055B8);
  }

  .video-block__ctas {
    margin-top: var(--space-6, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    flex-wrap: wrap;

    @media (min-width: 768px) {
      margin-top: var(--space-3, 0.75rem);
      flex-direction: row;
      align-items: center;
    }

    .video-block--has-text & {
      margin-top: var(--space-3, 0.75rem);
    }
  }

  .video-block__ctas--column {
    flex-direction: column;
    align-items: flex-start;
  }

  .video-block__share-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    margin-left: auto;
    color: var(--color-blue-dark, #003A70);
  }

  .video-block__share-button--cta {
    margin-left: 0;
  }

  .video-block__share-button:hover,
  .video-block__share-button:focus,
  .video-block__share-button:focus-visible {
    color: var(--color-blue-light, #0055B8);
  }

  @media (hover: none) {
    .video-block__share-button:hover {
      opacity: 1;
    }
  }

  .video-block__share-icon {
    display: block;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }

  .video-block__share-label {
    font-size: 18px;
    font-weight: 400;
    line-height: 120%;
    color: inherit;
    font-feature-settings: 'liga' off, 'clig' off;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

  /* --------------------------------------------------------------------------
     Transcript Section (unified transcript + share row)
     -------------------------------------------------------------------------- */

  .video-block__transcript-section {
    grid-area: transcript;
  }

  .video-block__transcript-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-4, 1rem);

    @media (max-width: 1023.98px) {
      max-width: calc(100% - 56px);
      margin: 0 auto;
    }

    .video-block--media-only & {
      max-width: none;
    }
  }

  .video-block__transcript-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--theme-font-size, 18px);
    font-weight: 400;
    color: var(--color-blue-dark, #003A70);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast, 150ms ease);
    margin-left: var(--space-1);

    @media (min-width: 1024px) {
      margin-left: var(--space-2);
    }
  }

  @media (hover: hover) {
    .video-block__transcript-toggle:hover {
      color: var(--color-blue-light, #0055B8);
    }
  }

  .video-block__transcript-toggle:focus-visible {
    outline: 2px solid var(--color-blue, #0077C8);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Label text: show/hide states */
  .video-block__transcript-label-hide {
    display: none;
  }

  .video-block__transcript-section--expanded .video-block__transcript-label-show {
    display: none;
  }

  .video-block__transcript-section--expanded .video-block__transcript-label-hide {
    display: inline;
  }

  /* Toggle icon: expand/collapse states */
  .video-block__toggle-icon {
    width: 20px;
    height: 20px;
    color: var(--color-blue-dark, #003A70);

    @media (min-width: 1024px) {
      width: 24px;
      height: 24px;
    }
  }

  .video-block__transcript-icon-collapse {
    display: none;
  }

  .video-block__transcript-section--expanded .video-block__transcript-icon-expand {
    display: none;
  }

  .video-block__transcript-section--expanded .video-block__transcript-icon-collapse {
    display: flex;
  }

  /* --------------------------------------------------------------------------
     Transcript Body (collapsible)
     -------------------------------------------------------------------------- */

  .video-block__transcript-body {
    overflow: hidden;
    transition: max-height 300ms ease-out;
    margin-top: var(--space-4, 1rem);

    @media (min-width: 1024px) {
      margin-top: var(--space-5, 1.25rem);
    }
  }

  .video-block__transcript-body[hidden] {
    display: block;
    max-height: 0;
    visibility: hidden;
  }

  .video-block__transcript-body:not([hidden]) {
    visibility: visible;
  }

  .video-block__transcript-content {
    padding: var(--space-5, 1.25rem);
    font-size: var(--theme-font-size, 18px);
    line-height: 1.3;
    color: var(--color-text-primary, #313131);
    background: var(--color-white, #FFFFFF);
    border: 1px solid var(--Border-Subtle, rgba(25, 25, 25, 0.20));
    border-radius: 10px;
    max-height: 260px; /* 400px */
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .video-block__transcript-content[hidden] {
    display: none;
  }

  /* WYSIWYG typography support */
  .video-block__transcript-content p {
    margin-bottom: 1em;
  }

  .video-block__transcript-content p:last-child {
    margin-bottom: 0;
  }

  .video-block__transcript-content strong {
    font-weight: 700;
  }

  .video-block__transcript-content em {
    font-style: italic;
  }

  .video-block__transcript-content h2,
  .video-block__transcript-content h3,
  .video-block__transcript-content h4,
  .video-block__transcript-content h5,
  .video-block__transcript-content h6 {
    font-weight: 700;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    line-height: 1.3;
  }

  .video-block__transcript-content h2:first-child,
  .video-block__transcript-content h3:first-child,
  .video-block__transcript-content h4:first-child,
  .video-block__transcript-content h5:first-child,
  .video-block__transcript-content h6:first-child {
    margin-top: 0;
  }

  .video-block__transcript-content ul,
  .video-block__transcript-content ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
  }

  .video-block__transcript-content ul ul,
  .video-block__transcript-content ol ol {
    padding-left: 48px;
  }

  .video-block__transcript-content li {
    list-style-type: disc;
    margin-bottom: 0.5em;
  }

  .video-block__transcript-content ul,
  .video-block__transcript-content ol {
    margin-top: 0.5em;
  }

  .video-block__transcript-content li li {
    list-style-type: '– ';
  }

  .video-block__transcript-content a {
    color: var(--color-brand-primary, #003A70);
    text-decoration: underline;
  }

  .video-block__transcript-content a:hover {
    color: var(--color-blue-light, #0055B8);
  }

  /* --------------------------------------------------------------------------
     Chapter Filmstrip Carousel
     -------------------------------------------------------------------------- */

  /* Outer frame wrapping heading + chapter row */
  .video-block__chapters-frame {
    grid-area: chapters;
    border: 4px solid var(--header-gradient, #E0E0E0);
    border-radius: 20px;
    padding: var(--space-3) 0 var(--space-5);
  }

  /* Header row: "Chapters" heading left, nav arrows right */
  .video-block__chapters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3, 0.75rem);
  }

  .video-block__chapters-heading {
    margin: 0 0 0 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 120%;
    color: var(--color-blue-dark, #003A70);
    font-feature-settings: 'liga' off, 'clig' off;

    @media (width < 1024px) {
      margin-left: var(--space-3, 0.75rem);
    }
  }

  .video-block__chapters-nav-group {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
  }

  .video-block__chapters-track-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  @media (min-width: 1024px) {
    .video-block__chapters-track-wrapper {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .video-block__chapters-track-wrapper::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
  }

  .video-block__chapters-track {
    display: flex;
    gap: 8px;
    transition: transform 300ms ease;
  }

  .video-block__chapters-track::before,
  .video-block__chapters-track::after {
    content: "";
    flex: 0 0 12px;
  }

  @media (width < 1024px) {
    .video-block__chapters-track::before,
    .video-block__chapters-track::after {
      flex-basis: var(--space-1, 0.25rem);
    }
  }

  /* Nav arrows */
  .video-block__chapters-nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-blue-dark, #003A70);
    cursor: pointer;
    transition: color 150ms ease;
  }

  .video-block__chapters-nav:hover:not(:disabled) {
    color: var(--color-blue, #0077C8);
  }

  .video-block__chapters-nav:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .video-block__chapters-nav:focus-visible {
    outline: 2px solid var(--color-blue, #0077C8);
    outline-offset: 2px;
  }

  /* Individual chapter tile — 134px, no border, no border-radius */
  .video-block__chapter {
    flex-shrink: 0;
    width: 144px;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
  }

  @media (hover: hover) and (pointer: fine) {
    .video-block__chapter:hover .video-block__chapter-info {
      background-color: #ECF8FF;
    }
  }

  .video-block__chapter--active .video-block__chapter-info {
    background-color: #ECF8FF;
  }

  .video-block__chapter:focus-visible {
    outline: 2px solid var(--color-blue, #0077C8);
    outline-offset: 2px;
  }

  /* Chapter thumbnail — no border-radius */
  .video-block__chapter-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .video-block__chapter-thumb--placeholder {
    background: var(--color-gray-100, #F5F5F5);
  }

  /* Chapter info — fixed height for consistent filmstrip cells */
  .video-block__chapter-info {
    height: 145px;
    padding: var(--space-2, 0.5rem) var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 150ms ease;
  }

  .video-block__chapter-title {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    color: var(--color-blue-dark, #003A70);
    font-feature-settings: 'liga' off, 'clig' off;
    overflow: hidden;
  }

  .video-block__chapter--active .video-block__chapter-title {
    font-weight: var(--font-weight-semibold);
  }

  .video-block__chapter-timestamp {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    color: var(--color-blue-dark, #003A70);
    font-feature-settings: 'liga' off, 'clig' off;
    flex-shrink: 0;
  }

  /* --------------------------------------------------------------------------
     Responsive: chapters
     -------------------------------------------------------------------------- */

  @media (max-width: 767px) {
    .video-block__chapters-frame {
      padding: var(--space-3, 0.75rem) 0 var(--space-5, 1.25rem);
    }

    .video-block__chapter {
      width: 120px;
    }

    .video-block__chapter-info {
      height: 110px;
    }

    .video-block__chapter-title {
      font-size: 14px;
    }

    .video-block__chapter-timestamp {
      font-size: 14px;
    }
  }
}