/* =========================================================
   MADCTY YouTube Feed (Pro) — Styling Layer
   Scoped to: body.madcty-yt-pro-active.madcty-yt-pro-styling
   ========================================================= */

/* =========================================================
   GRID (Pro Styling)
   ========================================================= */

body.madcty-yt-pro-active.madcty-yt-pro-styling .madcty-yt-grid {
  display: grid !important;

  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--madcty-pro-grid-card-width, 260px), 1fr)
  ) !important;

  gap: var(--madcty-pro-grid-gap, 14px) !important;
  justify-content: start;
}

body.madcty-yt-pro-active.madcty-yt-pro-styling .madcty-yt-grid .madcty-yt-card {
  width: 100%;
  box-sizing: border-box;

  background: var(--madcty-pro-grid-card-bg, #ffffff);
  border-style: solid;
  border-width: var(--madcty-pro-grid-border-width, 1px);
  border-color: var(--madcty-pro-grid-border-color, rgba(0,0,0,0.12));

  border-radius: var(--madcty-pro-grid-radius, 14px);

  /* Shadow built from component vars */
  box-shadow: 0
    var(--madcty-pro-grid-shadow-y, 8px)
    var(--madcty-pro-grid-shadow-blur, 18px)
    rgba(0,0,0, calc(var(--madcty-pro-grid-shadow-alpha, 0.15) * var(--madcty-pro-grid-shadow-enabled, 0)));

  /* ✅ match your inline var name */
  padding: var(--madcty-pro-grid-padding, 12px);

  overflow: hidden;
}

body.madcty-yt-pro-active.madcty-yt-pro-styling .madcty-yt-grid .madcty-yt-thumb {
  margin-bottom: 8px;
  border-radius: calc(var(--madcty-pro-grid-radius, 14px) * 0.75);
  overflow: hidden;
}

body.madcty-yt-pro-active.madcty-yt-pro-styling .madcty-yt-grid .madcty-yt-card-title {
  color: var(--madcty-pro-grid-title-color, #111111);
  font-size: var(--madcty-pro-grid-title-size, 15px);
  font-weight: var(--madcty-pro-grid-title-weight, 600);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--madcty-pro-grid-title-lines, 2);
  overflow: hidden;

  margin: 0;
}

/* =========================================================
   CAROUSEL (Pro Styling — margin based spacing)
   ========================================================= */

body.madcty-yt-pro-active.madcty-yt-pro-styling .madcty-yt-carousel-track {
  display: flex !important;
  align-items: stretch;
}

body.madcty-yt-pro-active.madcty-yt-pro-styling
.madcty-yt-carousel-track > .madcty-yt-card.is-carousel {
  background: var(--madcty-pro-car-card-bg, #ffffff);

  border-style: solid;
  border-width: var(--madcty-pro-car-border-width, 1px);
  border-color: var(--madcty-pro-car-border-color, rgba(0,0,0,0.12));

  border-radius: var(--madcty-pro-car-radius, 14px);

  /* Shadow built from component vars */
  box-shadow: 0
    var(--madcty-pro-car-shadow-y, 8px)
    var(--madcty-pro-car-shadow-blur, 18px)
    rgba(0,0,0, calc(var(--madcty-pro-car-shadow-alpha, 0.15) * var(--madcty-pro-car-shadow-enabled, 0)));

  flex: 0 0 var(--madcty-pro-car-card-width, 260px) !important;
  width: var(--madcty-pro-car-card-width, 260px) !important;
  max-width: var(--madcty-pro-car-card-width, 260px) !important;

  /* ✅ match your inline var name */
  padding: var(--madcty-pro-car-padding, 12px);

  box-sizing: border-box;
  overflow: hidden;

  /* Gap control */
  margin-right: var(--madcty-pro-car-gap, 14px);
}

body.madcty-yt-pro-active.madcty-yt-pro-styling
.madcty-yt-carousel-track > .madcty-yt-card.is-carousel:last-child {
  margin-right: 0;
}

body.madcty-yt-pro-active.madcty-yt-pro-styling
.madcty-yt-card.is-carousel .madcty-yt-thumb {
  margin-bottom: 8px;
  border-radius: calc(var(--madcty-pro-car-radius, 14px) * 0.75);
  overflow: hidden;
}

body.madcty-yt-pro-active.madcty-yt-pro-styling
.madcty-yt-card.is-carousel .madcty-yt-card-title {
  color: var(--madcty-pro-car-title-color, #111111);
  font-size: var(--madcty-pro-car-title-size, 15px);
  font-weight: var(--madcty-pro-car-title-weight, 600);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--madcty-pro-car-title-lines, 2);
  overflow: hidden;

  margin: 0;
}

/* =========================================================
   Hide Carousel Scrollbar (still scrollable)
   Requires body class: .madcty-yt-hide-carousel-scrollbar
   ========================================================= */

body.madcty-yt-pro-active.madcty-yt-pro-styling.madcty-yt-hide-carousel-scrollbar .madcty-yt-carousel-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.madcty-yt-pro-active.madcty-yt-pro-styling.madcty-yt-hide-carousel-scrollbar .madcty-yt-carousel-track::-webkit-scrollbar {
  display: none;
}