/* Social Media Cards Styling for Banner Section */
.social-media-cards-container {
    display: flex;
    justify-content: center; /* Center the card container horizontally */
    width: 100%;
    padding: 0 15px; /* Add some side padding */
    margin: 50px auto 30px;
}

/* Define CSS variables for easier calculation */
:root {
    --row-height: 55px; /* Estimated height of a single row */
    --row-gap: 0px;     /* No gap needed if using borders */
    --visible-rows: 6;
    --container-padding-y: 5px; /* Reduced vertical padding */
}

.social-media-cards {
    position: relative;
    width: 100%;
    max-width: 480px; /* Max width as requested */
    /* Calculate height: 6 rows + 0 gaps + 2*padding */
    height: calc(var(--visible-rows) * var(--row-height) + (var(--visible-rows) - 1) * var(--row-gap) + 2 * var(--container-padding-y));
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.05); /* Slight background tint */
    padding: var(--container-padding-y) 0; /* Apply vertical padding */
}

/* Fade effects */
.social-media-cards::before,
.social-media-cards::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 25px; /* Slightly adjust fade height if needed */
    z-index: 5; /* Ensure fades are above rows */
}

.social-media-cards::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), transparent); /* Stronger fade */
}

.social-media-cards::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.98), transparent); /* Stronger fade */
}

/* Banner text block styling */
.text-block {
    text-align: left !important; /* Ensure left alignment */
    display: flex;
    flex-direction: column;
    align-items: flex-start !important; /* Ensure left alignment */
}

.text-block .subtitle {
    margin-bottom: 15px;
    font-size: 1.25em; /* Use em for relative sizing */
    width: 100%; /* Ensure full width for alignment */
    text-align: left !important;
}

.text-block .title {
    margin-bottom: 20px;
    line-height: 1.2;
    font-size: 4.5em; /* 300% larger title */
    width: 100%; /* Ensure full width for alignment */
    text-align: left !important; /* Force left alignment */
}

.text-block .description {
    margin-bottom: 40px; /* Increased spacing before buttons further */
    line-height: 1.5;
    font-size: 1.15em; /* Use em */
    width: 100%; /* Ensure full width for alignment */
    text-align: left !important;
}

.text-block .buttons-container {
    display: flex;
    gap: 20px;
    align-self: flex-start; /* Left-align buttons by default */
    margin-top: 15px; /* Adjusted margin */
    width: 100%; /* Ensure container takes width for mobile centering */
    justify-content: flex-start; /* Explicitly start alignment */
}

.text-block .btn {
    margin: 0;
}

/* Specific style for the outline button */
.text-block .btn--outline-base {
    background-color: transparent !important;
    border: 2px solid var(--base-color, #0d6efd) !important;
    color: var(--base-color, #0d6efd) !important;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Hover effect for the outline button */
.text-block .btn--outline-base:hover {
    background-color: #ffffff !important; /* White background on hover */
    color: var(--base-color, #0d6efd) !important; /* Retain text color */
    border-color: #ffffff !important; /* Match background */
}

/* Gradient text for "BT Boost Top" - ensure it overrides theme */
.text-block .title .text--base, /* Target specifically within the title */
.text--base { /* General fallback */
    background: linear-gradient(to right, #ff4500, #ff8c00) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
}

/* Simple static layout with no transforms */
.social-media-cards-inner {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap); /* Apply gap (0px) between rows */
    /* Apply the animation */
    animation: scrollUp 18s linear infinite; /* Adjust duration as needed */
}

/* Stop animation on hover */
.social-media-cards:hover .social-media-cards-inner {
    animation-play-state: paused;
}

/* Keyframes for the escalator animation */
@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        /* Translate upwards by the height of 6 rows + 6 gaps (gaps are 0) */
        transform: translateY(calc(-1 * (var(--visible-rows) * var(--row-height) + var(--visible-rows) * var(--row-gap))));
    }
}

/* Show all rows with fixed dimensions */
.metrics-card {
    /* Remove card-specific styling */
    /* background: #fff; */
    /* border-radius: 10px; */
    /* box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); */
    /* margin: 0 auto; */ 
    padding: 10px 15px; /* Adjust padding for row content */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Row takes full width of inner container */
    height: var(--row-height); /* Use the variable for height */
    box-sizing: border-box; 
    flex-shrink: 0; 
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Demarcation line */
    position: relative; /* Needed if using pseudo-elements on rows */
}

/* Remove border from the very first item in the list */
.social-media-cards-inner > .metrics-card:first-child {
    border-top: none;
}

.metrics-card .platform {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.metrics-card .platform i {
    margin-right: 10px;
    font-size: 20px;
    width: 20px; /* Ensure icon takes consistent space */
    text-align: center;
}

.metrics-card .metrics {
    display: flex;
    gap: 8px; /* Space between buttons if multiple exist */
}

.metric-btn {
    background-color: #eee; /* Light grey background */
    color: #333;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap; /* Prevent button text wrapping */
}

.metric-btn:hover {
    background-color: #007bff; /* Primary blue on hover */
    color: #fff; /* White text on hover */
}

/* Specific Platform Icon Colors */
.twitch-card .platform i { color: #9146FF; }
.instagram-card .platform i { color: #E1306C; }
.twitter-card .platform i { color: #1DA1F2; }
.youtube-card .platform i { color: #FF0000; }
.facebook-card .platform i { color: #1877F2; }
.spotify-card .platform i { color: #1DB954; }

/* Responsive Adjustments (Optional - Adjust breakpoints as needed) */
@media (max-width: 768px) {
    .banner-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .text-block .subtitle {
        margin-bottom: 10px;
    }
    
    .text-block .title {
        margin-bottom: 10px;
    }
    
    .text-block .description {
        margin-bottom: 20px;
    }
    
    .text-block .buttons-container {
        gap: 10px;
    }
    
    :root {
        --row-height: 50px; /* Slightly smaller rows on smaller screens */
    }
    .social-media-cards {
        max-width: 90%;
         /* Recalculate height for smaller rows */
         height: calc(var(--visible-rows) * var(--row-height) + (var(--visible-rows) - 1) * var(--row-gap) + 2 * var(--container-padding-y));
    }
    .metrics-card {
        padding: 8px 12px;
    }
    .metrics-card .platform {
        font-size: 14px;
    }
     .metrics-card .platform i {
        font-size: 18px;
    }
    .metric-btn {
        font-size: 11px;
        padding: 4px 8px;
    }
}

@media (max-width: 576px) {
    .banner-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .text-block .subtitle {
        margin-bottom: 8px;
        font-size: 1.1em; /* Adjusted mobile size */
    }
    
    .text-block .title {
        margin-bottom: 10px; /* Slightly more space */
        font-size: 2.8em; /* Adjusted for significantly larger mobile title */
    }
    
    .text-block .description {
        margin-bottom: 25px; /* Adjusted mobile space */
        font-size: 1em; /* Base size on mobile */
    }
    
    .text-block .buttons-container {
        gap: 10px; /* Reduced gap for mobile */
        justify-content: center; /* Center buttons ONLY on mobile */
        align-self: center; /* Helps with centering */
    }
    
    .text-block .btn {
        font-size: 14px;
        padding: 8px 14px;
    }
    
    :root {
        --row-height: 45px; /* Even smaller */
         --container-padding-y: 3px;
    }
     .social-media-cards {
        max-width: 95%;
         /* Recalculate height again */
         height: calc(var(--visible-rows) * var(--row-height) + (var(--visible-rows) - 1) * var(--row-gap) + 2 * var(--container-padding-y));
    }
    .metrics-card {
        padding: 6px 10px;
    }
     .metrics-card .platform {
        font-size: 13px;
    }
     .metrics-card .platform i {
        font-size: 16px;
        margin-right: 8px;
    }
    .metric-btn {
        font-size: 10px;
        padding: 3px 6px;
        gap: 5px;
    }
    .metrics-card .metrics {
        gap: 5px;
    }
}

@media (max-width: 991px) {
    .social-media-cards-container {
        margin-top: 40px;
        max-width: 450px;
    }
    
    .social-media-cards {
        height: 500px !important;
    }
    
    .metrics-card {
        height: 55px;
        padding: 10px 15px;
    }
}

@media (max-width: 767px) {
    .social-media-cards-container {
        max-width: 400px;
        margin-top: 30px;
        padding: 0 10px;
    }
    
    .social-media-cards {
        height: 480px !important;
    }
    
    .metrics-card {
        padding: 10px 12px;
        height: 50px;
        width: 90%;
        margin-bottom: 8px !important;
    }
    
    .metrics-card .platform {
        font-size: 14px;
    }
    
    .metrics-card .platform i {
        font-size: 18px;
    }
    
    .metric-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .social-media-cards {
        height: 460px !important;
    }
    
    .metrics-card {
        height: 45px;
        padding: 8px 12px;
        margin-bottom: 7px !important;
    }
    
    .metrics-card .platform {
        font-size: 13px;
    }
    
    .metrics-card .platform i {
        font-size: 16px;
    }
    
    .metric-btn {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    .metrics-card .metrics {
        gap: 4px;
    }
}

.banner-section {
    padding-top: 60px; /* Reduced top padding - adjust as needed */
    padding-bottom: 60px; /* Keep bottom padding consistent */
}