/**
 * Flavor Starter — Master Placement & Filter Tabs
 *
 * Styles for the master homepage section (all dramas, hero + mobile grid)
 * and the horizontal scrollable placement filter tabs.
 *
 * @package Flavor_Starter
 * @since   1.0.0
 */

/* ==========================================================================
   Master Section
   ========================================================================== */

.flavor-master-section {
    position: relative;
}

/* Mobile card grid — hidden on desktop, shown on mobile/tablet */
.flavor-master-grid-wrap {
    display: none;
}

/* ==========================================================================
   Placement Filter Tabs (mobile/tablet only)
   ========================================================================== */

.flavor-placement-tabs {
    display: none; /* Hidden on desktop; shown via responsive.css */
    gap: 0.57143rem;  /* 8px */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1.14286rem 0 0.57143rem;  /* 16px 0 8px */
    margin-bottom: 0.85714rem;  /* 12px */
}

.flavor-placement-tabs::-webkit-scrollbar {
    display: none;
}

.flavor-placement-tab {
    flex-shrink: 0;
    padding: 0.42857rem 1.28571rem;  /* 6px 18px */
    border-radius: 1.42857rem;  /* 20px */
    font-size: 0.92857rem;  /* 13px at 14px base */
    font-weight: 500;
    color: var(--flavor-text-secondary);
    background: var(--flavor-bg-card);
    border: 1px solid transparent;
    transition: var(--flavor-transition-fast);
    white-space: nowrap;
    cursor: pointer;
}

.flavor-placement-tab:hover {
    color: var(--flavor-text-primary);
    background: var(--flavor-bg-card-hover);
}

.flavor-placement-tab.active {
    color: #fff;
    background: var(--flavor-accent-gradient);
    border-color: transparent;
}

/* ==========================================================================
   Placement Sections (desktop card grids below hero)
   ========================================================================== */

.flavor-placement-section {
    /* Visible on desktop, hidden on mobile via responsive.css */
}

/* ==========================================================================
   Desktop "All" mode — toggled by ALL nav link
   ========================================================================== */

.flavor-master-section.flavor-show-all .flavor-master-hero {
    display: none;
}

.flavor-master-section.flavor-show-all ~ .flavor-placement-section {
    display: none;
}

.flavor-master-section.flavor-show-all .flavor-placement-tabs {
    display: flex;
}

.flavor-master-section.flavor-show-all .flavor-master-grid-wrap {
    display: block;
}