/* --- TikTok Section --- */
.tiktok-section {
    text-align: center;
    padding: 4rem 2rem;
    /* Background: gradient (#ef372c → #ffe269) */
    background: linear-gradient(135deg, var(--color-accent-danger), var(--color-highlight-fun));
    position: relative;
    overflow: hidden;
    color: var(--color-base-deep);
}

/* Specific styles for the section title within the TikTok section */
.tiktok-section .section-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--color-base-deep); /* Using variable for consistency */
}

/* Specific styles for the section subtitle within the TikTok section */
.tiktok-section .section-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
    color: var(--color-bg-light); /* Using variable for consistency */
    font-family: var(--font-body); /* Ensure font consistency */
}

.tiktok-carousel {
    --carousel-gap: 1rem; /* Define a CSS variable for consistent gap, adjusted to 1rem */
    display: flex;
    flex-wrap: nowrap; /* Keep items in a single row */
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory; /* Snap to elements */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    gap: var(--carousel-gap); /* Spacing between items */
    max-width: 1200px; /* Constrain width on desktop */
    margin: 0 auto; /* Center the carousel itself */
    padding-bottom: 1rem; /* Give space for scrollbar on some systems */

    /* Hide scrollbar visually but keep functionality */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.tiktok-carousel::-webkit-scrollbar {
    display: none;
}

.tiktok-card {
    flex: 0 0 auto; /* Prevent shrinking, maintain natural width */
    scroll-snap-align: start; /* Snap to the start of each item */
    margin: 0 auto; /* Helps center a single item in its view if smaller than 100% */
    border-radius: 1.25rem;
    background: var(--color-bg-light); /* Using variable for consistency */
    padding: 0.5rem;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2); /* Soft pastel shadow */
    overflow: hidden;
    cursor: url('/white_glove_cursor.png'), auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tiktok-card:hover {
    /* Glow hover (#ef372c) */
    transform: scale(1.03); /* Keep scale for engaging hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 0 20px var(--color-accent-danger); /* Intensified shadow + glow */
}

.tiktok-embed-container {
    position: relative;
    width: 100%;
    padding-top: 177.78%; /* Forces 9:16 aspect ratio (16/9 * 100%) */
    height: 0;
    overflow: hidden;
}

.tiktok-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    border: none;
}

/* Reduced Motion for TikTok Section - adapted for static scroll and simplified card effects */
@media (prefers-reduced-motion: reduce) {
    .tiktok-carousel {
        scroll-behavior: auto; /* Disable smooth scroll-snap behavior */
    }
    .tiktok-card:hover {
        transform: scale(1); /* Disable scale on hover */
        box-shadow: 0 6px 16px rgba(0,0,0,0.2); /* Remove glow on hover */
    }
}

/* Responsive adjustments for TikTok carousel */
/* Mobile-specific: 1 video per slide */
@media (max-width: 768px) {
    .tiktok-carousel {
        padding: 0 1rem 1rem 1rem; /* Adjust container padding for mobile */
    }
    .tiktok-card {
        max-width: 90%; /* One card per slide, centered */
        width: 100%; /* Ensure it takes available width within max-width */
    }
}

/* Tablet/Desktop: Multi-card row */
@media (min-width: 769px) {
    .tiktok-card {
        max-width: calc(33.333% - (2 * var(--carousel-gap) / 3)); /* 3 cards per row, accounting for gap */
        width: 100%;
        margin: 0; /* Remove auto margin for multi-card layout */
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .tiktok-card {
        max-width: calc(50% - (1 * var(--carousel-gap) / 2)); /* 2 cards per row, accounting for gap */
    }
}

@media (max-width: 480px) {
    .tiktok-section {
        padding: 3rem 1rem;
    }
}