/* Card block wrapper for scroll arrows */
.card-block {
  position: relative;
}

.card-block-grid {
    display: flex;
    gap: 25px;
    padding: 20px 0 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    flex-wrap: nowrap; /* keep cards on one row for scrolling */
    scroll-behavior: smooth;
    scroll-padding-left: 0;
    scroll-padding-right: 0;
  }

  /* Scroll navigation arrows */
  .card-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: var(--bm-color-bg-secondary);
    border: 2px solid var(--bm-color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }
  
  /* Left arrow should always start hidden */
  .card-scroll-arrow.left {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  .card-scroll-arrow.left.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .card-scroll-arrow.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .card-scroll-arrow:hover {
    background: var(--bm-color-accent);
    transform: translateY(-50%) scale(1.1);
  }

  .card-scroll-arrow.left {
    left: -60px;
  }

  .card-scroll-arrow.right {
    right: -60px;
  }
  
  /* On mobile, position arrows centered below the cards */
  @media (max-width: 768px) {
    /* Add padding to card block to make space for arrows */
    .card-block {
      padding-bottom: 80px;
    }
    
    .card-scroll-arrow {
      width: 44px;
      height: 44px;
      top: auto;
      bottom: 20px; /* position within the padding area */
      transform: none;
      background: transparent;
      border: 2px solid var(--bm-color-accent);
    }
    
    .card-scroll-arrow.left {
      left: calc(50% - 50px); /* left arrow, centered */
      margin-left: 0;
    }
    
    .card-scroll-arrow.right {
      right: calc(50% - 50px); /* right arrow, centered */
      left: auto;
      margin-left: 0;
    }
    
    .card-scroll-arrow::before {
      width: 10px;
      height: 10px;
      border-top: 2px solid var(--bm-color-accent);
      border-right: 2px solid var(--bm-color-accent);
    }
    
    .card-scroll-arrow:hover {
      background: var(--bm-color-accent);
      transform: scale(1.1);
    }
    
    .card-scroll-arrow:hover::before {
      border-color: #fff;
    }
  }

  .card-scroll-arrow::before {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--bm-color-accent);
    border-right: 3px solid var(--bm-color-accent);
  }

  .card-scroll-arrow:hover::before {
    border-color: #fff;
  }

  .card-scroll-arrow.left::before {
    transform: rotate(-135deg);
    margin-left: 4px;
  }

  .card-scroll-arrow.right::before {
    transform: rotate(45deg);
    margin-right: 4px;
  }
  
  /* Hide scrollbar by default, show on hover */
  .card-block-grid::-webkit-scrollbar {
    height: 8px;
  }
  .card-block-grid::-webkit-scrollbar-track {
    background: transparent;
  }
  .card-block-grid::-webkit-scrollbar-thumb {
    background: var(--bm-color-bg-primary);
    border-radius: 4px;
    transition: background 0.3s ease;
  }
  .card-block-grid:hover::-webkit-scrollbar-thumb {
    background: var(--bm-color-bg-secondary);
  }
  .card-block-grid::-webkit-scrollbar-thumb:hover {
    background: var(--bm-color-bg-secondary);
  }
  /* Individual card styling */
  .card-block-grid .card {
    background: var(--bm-color-bg-secondary);
    border-radius: 12px;
    padding: 20px;
    transition: box-shadow 0.2s ease;
    scroll-snap-align: start;
    /* Revert to previous size: three cards per row with horizontal scroll */
    flex: 0 0 calc((100% - 50px) / 3);
    min-width: min(350px, calc(100% - 40px));
    display: flex;
    flex-direction: column;
  }

/* Content inside a card */
  .card-block-grid .card .card-content {
    color: var(--bm-color-text-primary);
    line-height: 1.6;
    --card-clamp-height: 350px; /* max high of the cards */
    max-height: var(--card-clamp-height);
    overflow: hidden;
    position: relative;
    transition: max-height 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    align-self: stretch;
    text-align: left;
  }

  /* Gradient fade effect at the bottom when collapsed */
  .card-block-grid .card:not(.is-expanded) .card-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--bm-color-bg-secondary));
    pointer-events: none;
  }

  /* Remove gradient when expanded */
  .card-block-grid .card.is-expanded .card-content::after {
    display: none;
  }

  
  /* Headings inside cards */
  .card-block-grid .card h3,
  .card-block-grid .card h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
  
  /* Toggle button */
  .card-block-grid .card .card-toggle {
    margin: 12px auto 0;
    background: transparent;
    border: 1px solid var(--bm-color-text-secondary); 
    color: var(--bm-color-text-secondary);
    padding: 0.5em 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: center;
    
  }
  .card-block-grid .card .card-toggle:hover {
    background-color: var(--bm-color-accent); 
    color: var(--bm-color-text-primary  );
    border: none;
  }

  /* CTA inside the gray card, centered at the bottom */
  .card-block-grid .card .card-cta {
    margin-top: auto;            /* push CTA to the bottom of the card */
    display: flex;
    flex-direction: column;      /* stack countdown over button */
    align-items: center;         /* center horizontally */
    justify-content: center;     /* center vertically within area */
    gap: var(--bm-space-3);      /* space between countdown and button */
    padding-top: 12px;           /* small gap above CTA */
  }
  /* Counter inside gray card, centered over CTA */
  .card-block-grid .card .card-countdown {
    margin: 12px auto 12px;
    background: transparent;
    border: 1px solid var(--bm-color-text-secondary); 
    color: var(--bm-color-text-secondary);
    padding: 0.5em 1rem;
    border-radius: 6px;
    cursor: default;
    pointer-events: none;
    font-size: 0.9rem;
    text-align: center;
    
  }

  /* Mobile styles - prevent text cutoff on all card blocks */
  @media (max-width: 1024px) {
    .card-block-grid {
      padding-left: 0;
      padding-right: 0;
      scroll-padding-left: 0;
      scroll-padding-right: 0;
    }
    
    .card-block-grid .card {
      flex: 0 0 calc(100% - 24px);
      min-width: calc(100% - 24px);
    }
  }

  /* Mobile vertical stacking option */
  @media (max-width: 768px) {
    .card-block.mobile-stack-vertical .card-block-grid {
      flex-direction: column;
      overflow-x: visible;
      scroll-snap-type: none;
      gap: 25px; /* same gap as horizontal */
      padding: 0; /* remove padding to align with title */
    }
    
    .card-block.mobile-stack-vertical .card-block-grid .card {
      flex: 0 0 auto;
      min-width: unset;
      width: 100%;
      max-width: 100%;
      background: var(--bm-color-bg-secondary);
      border-radius: 12px;
      padding: 20px;
    }

    /* Hide scroll arrows on mobile when stacked vertically */
    .card-block.mobile-stack-vertical .card-scroll-arrow {
      display: none;
    }
  }