/* public/css/pages/socials.css - REVISED STRUCTURE */

html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    box-sizing: border-box; /* Ensures padding (like your mobile padding-top) is included in height calculations */
}

.content-area-below-navbar {
    display: flex; /* This will be the flex row for the two sections */
    flex-grow: 1; /* Takes all available vertical space below navbar */
    overflow: hidden; /* No scroll on this container itself */
    padding: 20px; /* Space around the two main sections */
    gap: 20px;     /* Space between the two main sections */
}

.tiktok-section {
    flex: 0 0 700px; 
    height: 100%; /* Make section take full height of its container */
    background-color: #1A1A1A; /* This is the card background */
    border-radius: 8px;
    padding: 20px; /* ADDED padding to create the card inset for the iframe */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    display: flex; /* Use flex to make iframe fill space */
    flex-direction: column; /* Align iframe vertically */
    overflow: hidden; 
    box-sizing: border-box; /* Added for better height management */
}

/* Remove styles for .tiktok-section .tiktok-embed and .tiktok-section .tiktok-embed section */
/* as blockquote is no longer used */

.tiktok-section iframe {
    width: 100% !important;  
    height: 100% !important; 
    border: none !important; 
    display: block !important; /* Ensure it takes up space */
    flex-grow: 1; /* Critical for iframe to fill flex parent .tiktok-section */
    background-color: #000000 !important; /* Set a black background for the iframe itself */
}

.tiktok-section .tiktok-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: #888; /* Lighter text for fallback */
    background-color: #1A1A1A; 
    font-style: italic;
    padding: 20px; 
    text-align: center;
}

.feed-section {
    flex: 1; /* Takes remaining horizontal space */
    overflow-y: auto; /* Allows this section's content to scroll if needed */
    background-color: #1A1A1A; 
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    display: flex; 
    flex-direction: column;
    height: 100%; /* Added for explicit full height */
    box-sizing: border-box; /* Added for better height management */
}

/* Content within Feed Section */
.feed-section h1 { /* "Our Socials" title */
    color: #F5F5F5;
    text-align: center;
    margin-top: 0; /* Removed top margin as section has padding */
    margin-bottom: 20px; 
    font-size: 2.3em; 
    font-weight: 700;
    flex-shrink: 0;
}

.feed-section .social-intro-text {
    text-align: center;
    font-size: 1.1em;
    color: #BDBDBD;
    margin-bottom: 30px; 
    flex-shrink: 0;
}

.feed-section .social-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Adjusted minmax */
    gap: 20px; 
    flex-shrink: 0; /* Added to prevent shrinking */
    /* flex-grow: 1; Let the parent .feed-section handle scrolling */
}

.social-link-card { /* These are the smaller cards within the .feed-section */
    background-color: #2C2C2C; 
    border-radius: 8px;
    padding: 20px; 
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}

.social-link-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.6);
}

.social-link-card h2 {
    color: #FFFFFF;
    font-size: 1.6em; 
    margin-top: 0;
    margin-bottom: 15px;
}

.social-link-card p {
    color: #BDBDBD;
    font-size: 0.95em;
    flex-grow: 1; 
    margin-bottom: 20px; 
}

.button-social {
    display: inline-block;
    background-color: #FFAB40; 
    color: #121212; 
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9em;
    transition: background-color 0.2s ease, transform 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.button-social:hover,
.button-social:focus {
    background-color: #FFC107; 
    color: #000000;
    transform: scale(1.03);
    outline: none;
}

/* Specific platform styles for cards within .feed-section */
.social-link-card.tiktok h2 { color: #00f2ea; }
.social-link-card.tiktok .button-social { background-color: #00f2ea; color: #000000; }
.social-link-card.tiktok .button-social:hover { background-color: #69c9d0; }
.social-link-card.adverts h2 { color: #AED581; }
.social-link-card.adverts .button-social { background-color: #AED581; color: #1A231B; }
.social-link-card.adverts .button-social:hover { background-color: #9CCC65; }
.social-link-card h2 i { margin-right: 10px; font-size: 1.1em; vertical-align: middle; }

/* Responsive adjustments */
@media (max-width: 992px) { /* Point at which columns might stack */
    .content-area-below-navbar {
        flex-direction: column; /* Stack the main sections */
        padding: 15px;
        gap: 15px;
    }
    .tiktok-section, .feed-section {
        flex-basis: auto; /* Allow sections to size based on content when stacked */
        width: 100%;
    }
    .tiktok-section {
        max-height: 50vh; /* Constrain TikTok section height when stacked */
        min-height: 300px; /* Ensure it's not too small */
    }
    .feed-section {
        overflow-y: auto; /* Ensure feed section still scrolls if needed */
        max-height: none; /* Allow it to take remaining space or scroll */
    }
}

@media (max-width: 768px) {
    .feed-section .social-links-grid {
        grid-template-columns: 1fr; /* Single column for social cards on smaller screens */
    }
    .feed-section h1 {
        font-size: 2em;
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 60px; 
    }
    .content-area-below-navbar {
        padding: 10px;
        gap: 10px;
    }
    .tiktok-section, .feed-section {
        padding: 15px;
    }
    .feed-section h1 {
        font-size: 1.8em;
    }
    .feed-section .social-intro-text {
        font-size: 1em;
    }
    .social-link-card h2 {
        font-size: 1.5em;
    }
}

/* Discord Carousel Styles */
.discord-carousel-section {
    background-color: #1A1A1A; /* Consistent with other sections */
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px; /* Space above this section */
    display: flex; /* Added */
    flex-direction: column; /* Added */
    flex-grow: 1; /* Added to take available space in .feed-section */
    min-height: 0; /* Added for flex-grow in some scenarios */
}

.discord-carousel-section h2 {
    color: #F5F5F5;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 2em;
    font-weight: 600;
    flex-shrink: 0; /* Added to prevent shrinking */
}

.carousel-container {
    position: relative;
    width: 100%; /* Ensures it takes full width of parent */
    overflow: hidden;
    border-radius: 8px; /* Rounded corners for the image area */
    flex-grow: 1; /* Added to take available vertical space */
    display: flex; /* Added for child track */
    height: 100%; /* Explicitly set height to fill parent */
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%; /* Added for full height */
}

.carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
    height: 100%; /* Added for full height */
    display: flex; /* For centering image if needed */
    align-items: center; /* For centering image if needed */
    justify-content: center; /* For centering image if needed */
}

.carousel-slide img {
    width: 100%;
    height: 100%; /* Changed from auto to 100% */
    display: block;
    object-fit: contain; /* Changed from cover to contain to see whole image */
}

.carousel-button {
    position: absolute;
    top: 0; /* Changed for auto margin centering */
    bottom: 0; /* Added for auto margin centering */
    margin-top: auto; /* Added for auto margin centering */
    margin-bottom: auto; /* Added for auto margin centering */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    /* padding: 10px 15px; */ /* Replaced by width/height and flex centering */
    width: 44px; /* Explicit width */
    height: 44px; /* Explicit height */
    padding: 0; /* Using width/height for size */
    cursor: pointer;
    border-radius: 50%;
    /* font-size: 1.5em; */ /* Adjusted for new button size */
    font-size: 1.2em; /* Adjusted icon size */
    transition: background-color 0.2s ease;
    z-index: 10;
    display: flex; /* For centering icon */
    align-items: center; /* For centering icon */
    justify-content: center; /* For centering icon */
    box-sizing: border-box; /* Include padding/border in element's total width and height */
}

.carousel-button:hover,
.carousel-button:focus {
    background-color: rgba(0, 0, 0, 0.8);
    outline: none !important; /* Prevent browser default outline */
    border: none; /* Ensure no border is added */
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

.carousel-button i {
    display: inline-block;
    line-height: 1;
    /* vertical-align: middle; */ /* Not needed with flex parent */
    font-size: 20px !important; /* Fixed size, !important */
    font-weight: normal !important; /* Override any hover changes */
    font-style: normal !important; /* Override any hover changes */
    text-decoration: none !important; /* Prevent underline or other decor */
}

/* Carousel Dot Styles */
.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.carousel-dot {
    width: 8px; /* Even smaller size */
    height: 8px; /* Even smaller size */
    border-radius: 50%; /* Ensures circular */
    background-color: rgba(255, 255, 255, 0.3); /* Restored transparency */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Restored transform transition */
    flex-shrink: 0; /* Prevent squashing/stretching by flex container */
    padding: 0; /* Remove default button padding */
    border: none; /* Remove default button border */
    box-sizing: border-box; /* Ensure padding/border are included in width/height */
    line-height: 0; /* Prevent text content from affecting size if any */
    font-size: 0; /* Prevent text content from affecting size if any */
}

.carousel-dot.active {
    background-color: rgba(255, 255, 255, 0.7); /* Restored transparency for active state */
    transform: scale(1.1); /* Restored scale for active state */
}

/* Responsive adjustments for carousel */
@media (max-width: 992px) {
    .discord-carousel-section {
        margin-top: 15px; /* Adjust spacing when stacked */
    }
    .content-area-below-navbar {
        /* Ensure carousel section is also part of the column flow */
        /* This might require adding the carousel inside the .feed-section or adjusting flex */
    }
}

@media (max-width: 768px) {
    .discord-carousel-section h2 {
        font-size: 1.8em;
    }
    .carousel-slide img {
        max-height: 450px;
    }
}

@media (max-width: 480px) {
    .discord-carousel-section {
        padding: 15px;
    }
    .discord-carousel-section h2 {
        font-size: 1.6em;
    }
    .carousel-slide img {
        max-height: 300px;
    }
    .carousel-button {
        padding: 8px 12px;
        font-size: 1.2em;
    }
}