/* blog-links.css — Blog funnel components for games.traders-rx.com (v172)
   Components: bl-carousel (article carousel) + bl-ftcard (ForexTester promo card)
   Standalone-safe: all CSS vars have hardcoded fallbacks for pages without tokens.css */

/* -----------------------------------------------------------------------
   1. Shared custom-property fallbacks (scoped to component roots)
   ----------------------------------------------------------------------- */
.bl-carousel,
.bl-ftcard {
  --bl-bg:          var(--bg,          #f4f6f9);
  --bl-card:        var(--card,        #ffffff);
  --bl-ink:         var(--ink,         #1c2737);
  --bl-ink-2:       var(--ink-2,       #38465a);
  --bl-muted:       var(--muted,       #6b7785);
  --bl-line:        var(--line,        #e2e8f0);
  --bl-navy:        var(--navy,        #0c1933);
  --bl-blue:        var(--blue,        #2563eb);
  --bl-blue-600:    var(--blue-600,    #1d4ed8);
  --bl-blue-tint:   var(--blue-tint,   #eaf1fe);
  --bl-gold:        var(--gold,        #b08433);
  --bl-gold-2:      var(--gold-2,      #d8b45a);
  --bl-gold-tint:   var(--gold-tint,   #f7efdc);
  --bl-r-sm:        var(--r-sm,        8px);
  --bl-r-md:        var(--r-md,        12px);
  --bl-r-lg:        var(--r-lg,        16px);
  --bl-r-pill:      var(--r-pill,      999px);
  --bl-sh-1:        var(--sh-1,        0 1px 2px rgba(16,33,66,.06),0 1px 3px rgba(16,33,66,.05));
  --bl-sh-2:        var(--sh-2,        0 2px 8px rgba(16,33,66,.07),0 8px 24px rgba(16,33,66,.05));
  --bl-sh-3:        var(--sh-3,        0 8px 28px rgba(16,33,66,.12),0 2px 6px rgba(16,33,66,.06));
  --bl-ff:          var(--ff,          "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif);
}

/* -----------------------------------------------------------------------
   2. .blog-carousel-host — section/div container
   ----------------------------------------------------------------------- */
.blog-carousel-host {
  margin-top: 32px;
}

/* -----------------------------------------------------------------------
   3. .bl-carousel — wrapper
   ----------------------------------------------------------------------- */
.bl-carousel {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

/* -----------------------------------------------------------------------
   4. .bl-carousel__head, __heading, __sub
   ----------------------------------------------------------------------- */
.bl-carousel__head {
  margin-bottom: 14px;
  padding: 0 2px;
}

.bl-carousel__heading {
  font-family: var(--bl-ff);
  font-size: 13px;
  font-weight: 800;
  color: var(--bl-ink-2, #38465a);
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}

.bl-carousel__sub {
  font-family: var(--bl-ff);
  font-size: 12px;
  font-weight: 400;
  color: var(--bl-muted, #6b7785);
  line-height: 1.6;
  margin: 0;
}

/* -----------------------------------------------------------------------
   5. .bl-carousel__wrap + ::after (edge fade on desktop)
   ----------------------------------------------------------------------- */
.bl-carousel__wrap {
  position: relative;
  overflow: visible;
}

@media (min-width: 900px) {
  .bl-carousel__wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 14px; /* matches rail bottom padding */
    width: 48px;
    background: linear-gradient(to right, transparent, var(--bl-bg, #f4f6f9));
    pointer-events: none;
    z-index: 1;
    transition: opacity 150ms;
  }
  .bl-carousel__wrap.is-end::after {
    opacity: 0;
  }
}

/* -----------------------------------------------------------------------
   6. .bl-carousel__rail (scroll container)
   ----------------------------------------------------------------------- */
.bl-carousel__rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 14px 4px;
  margin: 0 -4px;
  list-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bl-carousel__rail::-webkit-scrollbar {
  display: none;
}

/* keyboard-focus ring on the scrollable rail (it carries tabindex="0") */
.bl-carousel__rail:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.32);
  border-radius: 8px;
}

/* -----------------------------------------------------------------------
   7. .bl-carousel__item (list item)
   ----------------------------------------------------------------------- */
.bl-carousel__item {
  flex-shrink: 0;
  scroll-snap-align: start;
  /* Default width for tablet and PC */
  width: 220px;
}

/* -----------------------------------------------------------------------
   8. .bl-card, .bl-card:hover
   ----------------------------------------------------------------------- */
.bl-card {
  display: flex;
  flex-direction: column;
  background: var(--bl-card, #ffffff);
  border: 1px solid var(--bl-line, #e2e8f0);
  border-radius: var(--bl-r-md, 12px);
  box-shadow: var(--bl-sh-1, 0 1px 2px rgba(16,33,66,.06),0 1px 3px rgba(16,33,66,.05));
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 150ms ease, transform 150ms ease;
  height: 100%;
}

@media (hover: hover) {
  .bl-card:hover {
    box-shadow: var(--bl-sh-2, 0 2px 8px rgba(16,33,66,.07),0 8px 24px rgba(16,33,66,.05));
    transform: translateY(-2px);
  }
  .bl-card:hover .bl-card__img {
    transform: scale(1.03);
  }
}

/* -----------------------------------------------------------------------
   9. .bl-card__img-wrap, .bl-card__img
   ----------------------------------------------------------------------- */
.bl-card__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef1f5;
}

.bl-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 200ms ease;
}

/* -----------------------------------------------------------------------
   10. .bl-card__body, __tag, __title, __attr
   ----------------------------------------------------------------------- */
.bl-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.bl-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--bl-r-pill, 999px);
  background: var(--bl-blue-tint, #eaf1fe);
  color: var(--bl-blue-600, #1d4ed8);
  letter-spacing: 0.02em;
  align-self: flex-start;
}

/* Tag color variants */
.bl-card__tag--navy {
  background: rgba(12,25,51,.08);
  color: #0c1933;
}

.bl-card__tag--gold {
  background: #f7efdc;
  color: #8a6520;
}

.bl-card__title {
  font-family: var(--bl-ff);
  font-size: 13px;
  font-weight: 700;
  color: var(--bl-ink, #1c2737);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.bl-card__attr {
  font-size: 11px;
  font-weight: 700;
  color: var(--bl-blue, #2563eb);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* -----------------------------------------------------------------------
   11. .bl-carousel__arrow, --prev, --next, :hover, :focus-visible
   ----------------------------------------------------------------------- */
.bl-carousel__arrow {
  display: none; /* mobile: hidden */
}

@media (min-width: 900px) {
  .bl-carousel__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bl-card, #ffffff);
    border: 1px solid var(--bl-line, #e2e8f0);
    box-shadow: var(--bl-sh-2, 0 2px 8px rgba(16,33,66,.07),0 8px 24px rgba(16,33,66,.05));
    color: var(--bl-ink-2, #38465a);
    cursor: pointer;
    z-index: 2;
    transition: background 150ms, box-shadow 150ms, color 150ms;
  }
  .bl-carousel__arrow:hover {
    background: var(--bl-blue, #2563eb);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37,99,235,.32);
    border-color: transparent;
  }
  .bl-carousel__arrow:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.32);
  }
  .bl-carousel__arrow--prev {
    left: -18px;
  }
  .bl-carousel__arrow--next {
    right: -18px;
  }
  /* hidden attribute must override position:absolute display */
  .bl-carousel__arrow[hidden] {
    display: none !important;
  }
}

/* -----------------------------------------------------------------------
   12. .bl-carousel__dots, .bl-carousel__dot, .is-active
   ----------------------------------------------------------------------- */
.bl-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.bl-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bl-line, #e2e8f0);
  transition: background 200ms, transform 200ms;
}

.bl-carousel__dot.is-active {
  background: var(--bl-blue, #2563eb);
  transform: scale(1.4);
}

/* Dots are mobile-only; arrows serve same purpose on desktop */
@media (min-width: 900px) {
  .bl-carousel__dots {
    display: none;
  }
}

/* -----------------------------------------------------------------------
   13. .bl-ftcard, :hover
   ----------------------------------------------------------------------- */
.bl-ftcard {
  margin-top: 20px;
  margin-bottom: 8px;
  border-radius: var(--bl-r-lg, 16px);
  overflow: hidden;
  border-left: 3px solid var(--bl-gold, #b08433);
  box-shadow: var(--bl-sh-2, 0 2px 8px rgba(16,33,66,.07),0 8px 24px rgba(16,33,66,.05));
  background: var(--bl-card, #ffffff);
  border: 1px solid rgba(176,132,51,.28);
  border-left: 3px solid var(--bl-gold, #b08433);
  transition: box-shadow 150ms ease;
}

.bl-ftcard:hover {
  box-shadow: var(--bl-sh-3, 0 8px 28px rgba(16,33,66,.12),0 2px 6px rgba(16,33,66,.06));
}

/* -----------------------------------------------------------------------
   14. .bl-ftcard__divider
   ----------------------------------------------------------------------- */
.bl-ftcard__divider {
  border: none;
  border-top: 1px solid var(--bl-line, #e2e8f0);
  margin: 0 0 16px;
}

/* -----------------------------------------------------------------------
   15. .bl-ftcard__inner, :focus-visible
   ----------------------------------------------------------------------- */
.bl-ftcard__inner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.bl-ftcard__inner:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.40);
}

@media (min-width: 640px) {
  .bl-ftcard__inner {
    flex-direction: row;
    align-items: stretch;
  }
}

/* -----------------------------------------------------------------------
   16. .bl-ftcard__img-wrap, .bl-ftcard__img
   ----------------------------------------------------------------------- */
.bl-ftcard__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef1f5;
  flex-shrink: 0;
}

.bl-ftcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 640px) {
  .bl-ftcard__img-wrap {
    width: 180px;
    aspect-ratio: unset;
    flex-shrink: 0;
  }
}

/* -----------------------------------------------------------------------
   17. .bl-ftcard__content, __kicker, __title, __body, __cta
   ----------------------------------------------------------------------- */
.bl-ftcard__content {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.bl-ftcard__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #8a6520; /* darkened gold — 4.6:1 on white (AA); --bl-gold (#b08433) is only 3.5:1 */
  text-transform: uppercase;
  display: block;
}

.bl-ftcard__title {
  font-family: var(--bl-ff);
  font-size: 15px;
  font-weight: 800;
  color: var(--bl-ink, #1c2737);
  line-height: 1.4;
  margin: 0;
}

.bl-ftcard__body {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--bl-ink-2, #38465a);
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 640px) {
  .bl-ftcard__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

.bl-ftcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--bl-card, #ffffff);
  background: var(--bl-navy, #0c1933);
  border-radius: var(--bl-r-sm, 8px);
  padding: 8px 14px;
  min-height: 36px;
  letter-spacing: 0.01em;
}

.bl-ftcard__cta::after {
  content: " →";
}

/* -----------------------------------------------------------------------
   18. Responsive breakpoints
   ----------------------------------------------------------------------- */

/* Mobile (<600px): card width from viewport, showing peek of next card */
@media (max-width: 599px) {
  .bl-carousel__item {
    width: calc(80vw - 24px);
    min-width: 200px;
    max-width: 260px;
  }
}

/* Tablet (600–899px): fixed card width */
@media (min-width: 600px) and (max-width: 899px) {
  .bl-carousel__item {
    width: 220px;
  }
}

/* PC (>=900px): fixed card width + inline head layout */
@media (min-width: 900px) {
  .bl-carousel__item {
    width: 220px;
  }
  .bl-carousel__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
  }
  .bl-carousel__heading {
    font-size: 14.5px;
  }
  .bl-carousel__sub {
    font-size: 13px;
  }
}

/* -----------------------------------------------------------------------
   19. prefers-reduced-motion — disable all animation
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bl-carousel__rail {
    scroll-behavior: auto !important;
  }
  .bl-card,
  .bl-card__img,
  .bl-ftcard {
    transition: none !important;
  }
  .bl-carousel__dot {
    transition: none !important;
  }
}