/* =============================================================
   BBI - YouTube Sections (Shorts + Videos)
   assets/css/yt-sections.css

   Shared styles for YouTube Shorts and Videos carousel sections.
   Used on home, category, single (article), and author archives.

   Figma: Shorts row of 4 vertical thumbnails (397x706, rounded
   30px) with the YouTube glyph centred on each. Below: 3
   horizontal video thumbnails (~536x340). Black square arrow
   buttons live at the far left/right edges of the section, one
   pair per row.
   ============================================================= */

.bbi-section-yt {
  position: relative;
  padding-block: var(--space-12);
}

.bbi-section-global + .bbi-section-yt {
  margin-top: 120px;
  padding-top: 0;
}

.bbi-section-yt--shorts {
  padding-bottom: 60px;
}

.bbi-section-yt--shorts .container {
  position: relative;
}

.bbi-section-yt--shorts .container::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: -60px;
  height: 0.5px;
  background-color: var(--color-youtube-section-divider);
  pointer-events: none;
}

.bbi-section-yt--videos {
  padding-top: 60px;
  padding-bottom: 60px;
}

.bbi-section-yt--videos .container {
  position: relative;
}

.bbi-section-yt--videos .container::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: -60px;
  height: 0.5px;
  background-color: var(--color-youtube-section-divider);
  pointer-events: none;
}

/* Tablet + desktop — full content rail (viewport minus side gutters). */
@media (min-width: 768px) {
  .bbi-section-yt--shorts .container::after,
  .bbi-section-yt--videos .container::after {
    left: 0;
    right: auto;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--site-chrome-inline);
    box-sizing: border-box;
    background-clip: content-box;
  }
}

.bbi-section-yt__header {
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.bbi-section-yt__header .bbi-section-heading {
  margin: 0;
}

.bbi-section-yt__viewport {
  position: relative;
  padding-inline: 56px;
  overflow: hidden;
  max-width: 100%;
}

.bbi-carousel {
  overflow: hidden;
}

.bbi-carousel__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--grid-gap);
  width: 100%;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.bbi-carousel__item {
  flex: 0 0 calc((100% - (var(--carousel-visible, 4) - 1) * var(--grid-gap)) / var(--carousel-visible, 4));
  max-width: calc((100% - (var(--carousel-visible, 4) - 1) * var(--grid-gap)) / var(--carousel-visible, 4));
  min-width: 0;
}

.bbi-carousel__item[hidden] {
  display: none !important;
}

/* Black square 39x54 arrow button, centred over the row edge. */
.bbi-section-yt__prev,
.bbi-section-yt__next {
  position: absolute;
  top: 50%;
  width: 39px;
  height: 54px;
  background-color: var(--color-text);
  color: var(--color-background);
  border-radius: 0;
  z-index: 3;
  transform: translateY(-50%);
}

.bbi-section-yt__prev:not(:disabled),
.bbi-section-yt__next:not(:disabled) {
  opacity: 1;
  visibility: visible;
}

.bbi-section-yt__prev {
  left: 0;
}

.bbi-section-yt__next {
  right: 0;
}

.bbi-section-yt__prev:disabled,
.bbi-section-yt__next:disabled {
  background-color: var(--color-gray-300) !important;
  color: var(--color-background) !important;
  cursor: not-allowed;
}

/* Shorts row: vertical 9:16 thumbnails with 30px rounded corners. */
.bbi-section-yt--shorts .bbi-section-yt__item .bbi-aspect {
  aspect-ratio: 9 / 16;
  border-radius: var(--thumb-radius);
  overflow: hidden;
}

.bbi-section-yt--shorts .bbi-section-yt__header {
  margin-bottom: 40px;
}

.bbi-section-yt--shorts .bbi-section-yt__viewport {
  padding-left: 0;
  padding-right: 0;
}

.bbi-section-yt--shorts .container {
  padding-right: 0;
}

.bbi-section-yt--shorts .bbi-carousel__track {
  gap: 20px;
}

.bbi-section-yt--shorts .bbi-carousel__track::after {
  content: "";
  flex: 0 0 40px;
}

.bbi-section-yt--videos .bbi-section-yt__item .bbi-aspect {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
}

.bbi-section-yt--videos .bbi-section-yt__viewport {
  padding-left: 0;
  padding-right: 0;
}

.bbi-section-yt__item iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: inherit;
}

/* Pagination dots (mobile swipe hint) — built by yt-carousel.js. */
.bbi-carousel__dots {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}

.bbi-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #6b6b6b;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.bbi-carousel__dot.is-active {
  background-color: var(--color-accent-blue);
}

.bbi-carousel__dot:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

.bbi-section-yt--shorts .bbi-carousel {
  --carousel-visible: 4;
}

.bbi-section-yt--shorts .bbi-carousel__item {
  flex: 0 0 397px;
  max-width: 397px;
}

.bbi-section-yt--shorts .bbi-section-yt__item .bbi-aspect {
  width: 397px;
  height: 706px;
  aspect-ratio: auto;
  border-radius: 30px;
}

.bbi-section-yt--videos .bbi-carousel {
  --carousel-visible: 3;
}

.bbi-section-yt--videos .bbi-carousel__item {
  flex: 0 0 675px;
  max-width: 675px;
}

.bbi-section-yt--videos .bbi-section-yt__item .bbi-aspect {
  width: 675px;
  height: 378px;
  aspect-ratio: auto;
}

/* Tablet — Figma `BBI_Homepage_Tab` `Tab_Youtube` (944×807):
     - 4 shorts (221×393, gap 20px) → 4*221 + 3*20 = 944 exact fit.
     - 3 horizontal videos (≈301×189) below, gap 20px. */
@media (max-width: 1199px) {
  .bbi-section-global + .bbi-section-yt {
    margin-top: 60px;
  }

  .bbi-section-yt--shorts {
    padding-bottom: 40px;
  }

  .bbi-section-yt--shorts .container::after {
    bottom: -40px;
  }

  .bbi-section-yt--videos {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .bbi-section-yt--videos .container::after {
    bottom: -40px;
  }

  .bbi-section-yt .bbi-section-heading {
    font-size: 30px;
    letter-spacing: -0.02em;
  }

  .bbi-section-yt--shorts .bbi-carousel {
    --carousel-visible: 4;
  }

  .bbi-section-yt--shorts .bbi-carousel__item {
    flex-basis: calc((100% - (var(--carousel-visible, 4) - 1) * 20px) / var(--carousel-visible, 4));
    max-width: calc((100% - (var(--carousel-visible, 4) - 1) * 20px) / var(--carousel-visible, 4));
  }

  .bbi-section-yt--shorts .bbi-section-yt__item .bbi-aspect {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: var(--thumb-radius);
  }

  .bbi-section-yt--videos .bbi-carousel {
    --carousel-visible: 3;
  }

  .bbi-section-yt--videos .bbi-carousel__item {
    flex-basis: calc((100% - (var(--carousel-visible, 3) - 1) * var(--grid-gap)) / var(--carousel-visible, 3));
    max-width: calc((100% - (var(--carousel-visible, 3) - 1) * var(--grid-gap)) / var(--carousel-visible, 3));
  }

  .bbi-section-yt--videos .bbi-section-yt__item .bbi-aspect {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 1023px) {
  .bbi-section-yt--shorts .bbi-carousel {
    --carousel-visible: 3;
  }

  .bbi-section-yt--shorts .bbi-carousel__item {
    flex-basis: calc((100% - (var(--carousel-visible, 3) - 1) * 20px) / var(--carousel-visible, 3));
    max-width: calc((100% - (var(--carousel-visible, 3) - 1) * 20px) / var(--carousel-visible, 3));
  }

  .bbi-section-yt--videos .bbi-carousel {
    --carousel-visible: 2;
  }

  .bbi-section-yt--videos .bbi-carousel__item {
    flex-basis: calc((100% - (var(--carousel-visible, 2) - 1) * var(--grid-gap)) / var(--carousel-visible, 2));
    max-width: calc((100% - (var(--carousel-visible, 2) - 1) * var(--grid-gap)) / var(--carousel-visible, 2));
  }

  .bbi-section-yt__viewport {
    padding-inline: 44px;
  }

  .bbi-section-yt--shorts .bbi-section-yt__viewport {
    padding-left: 0;
    padding-right: 0;
  }

  .bbi-section-yt--shorts .container {
    padding-right: 0;
  }
}

/* Mobile (≤767px) — 2-up Shorts, 1-up Videos; horizontal swipe (no arrows). */
@media (max-width: 767px) {
  .bbi-section-global + .bbi-section-yt {
    margin-top: var(--space-20); /* 80px — Global News cards → YouTube Shorts heading */
  }

  .bbi-section-yt {
    padding-block: var(--space-8);
  }

  /* 40px rhythm between Shorts / divider / Videos / divider (Figma mobile). */
  .bbi-section-yt--shorts {
    padding-bottom: 40px;
  }

  .bbi-section-yt--videos {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .bbi-section-yt--shorts .container::after,
  .bbi-section-yt--videos .container::after {
    bottom: -40px;
    height: 0;
    background-color: transparent;
    border-top: 0.5px solid #C9C9C9;
  }

  .bbi-section-yt .bbi-section-heading {
    font-size: 30px;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
  }

  /* Shorts: 40px from heading to carousel (Figma mobile). */
  .bbi-section-yt--shorts .bbi-section-yt__header {
    margin-bottom: 40px;
  }

  .bbi-section-yt--shorts .bbi-section-yt__header .bbi-section-heading {
    margin-bottom: 0;
  }

  /* Shorts: align with heading gutters; 2-up fills content width (9:16). */
  .bbi-section-yt--shorts .container {
    padding-right: var(--container-padding);
  }

  .bbi-section-yt--shorts .container::after,
  .bbi-section-yt--videos .container::after {
    left: var(--container-padding);
    right: var(--container-padding);
  }

  .bbi-section-yt--shorts .bbi-section-yt__viewport {
    padding-inline: 0;
  }

  .bbi-section-yt--shorts .bbi-carousel {
    --carousel-visible: 2;
    --yt-shorts-gap: 10px;
    width: 100%;
    container-type: inline-size;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
  }

  .bbi-section-yt--shorts .bbi-carousel::-webkit-scrollbar {
    display: none;
  }

  .bbi-section-yt--shorts .bbi-carousel__track {
    gap: var(--yt-shorts-gap);
    width: max-content;
    transform: none !important;
    transition: none;
  }

  .bbi-section-yt--shorts .bbi-carousel__track::after {
    display: none;
  }

  .bbi-section-yt--shorts .bbi-carousel__item {
    flex: 0 0 calc((100cqw - var(--yt-shorts-gap)) / 2);
    max-width: calc((100cqw - var(--yt-shorts-gap)) / 2);
  }

  /* Snap by page — JS marks the first short of each page (incl. lone last short). */
  .bbi-section-yt--shorts .bbi-carousel__item--page-start {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .bbi-section-yt--shorts .bbi-carousel__item:not(.bbi-carousel__item--page-start) {
    scroll-snap-align: none;
  }

  .bbi-section-yt--shorts .bbi-section-yt__item .bbi-aspect {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: var(--thumb-radius);
  }

  /* Swipe slider — arrows hidden on mobile; dots shown below carousel. */
  .bbi-section-yt__prev,
  .bbi-section-yt__next {
    display: none !important;
  }

  .bbi-section-yt__viewport .bbi-carousel__dots {
    display: flex;
  }

  /* Videos: heading gutters; 1-up fills content width (16:9). */
  .bbi-section-yt--videos .bbi-section-yt__viewport {
    padding-inline: 0;
  }

  .bbi-section-yt--videos .bbi-carousel {
    --carousel-visible: 1;
    width: 100%;
    container-type: inline-size;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
  }

  .bbi-section-yt--videos .bbi-carousel::-webkit-scrollbar {
    display: none;
  }

  .bbi-section-yt--videos .bbi-carousel__track {
    width: max-content;
    min-width: 100%;
    transform: none !important;
    transition: none;
  }

  .bbi-section-yt--videos .bbi-carousel__item {
    flex: 0 0 100cqw;
    max-width: 100cqw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .bbi-section-yt--videos .bbi-section-yt__item .bbi-aspect {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Tiny phones — slightly smaller short corners. */
@media (max-width: 359px) {
  .bbi-section-yt--shorts .bbi-section-yt__item .bbi-aspect {
    border-radius: 16px;
  }
}