/**
 * Flavor Starter — Responsive Breakpoints
 *
 * All media queries in one place.
 * Desktop default: 5 columns
 *
 * @package Flavor_Starter
 */

/* Tablet & mobile — always 2 columns (like SysShorts, for proportional scaling) */
@media (max-width: 1024px) {
    :root {
        --flavor-grid-columns: 3;
    }

    .flavor-hero-grid {
        grid-template-columns: 1fr 1fr;
    }

    .flavor-hero-grid .flavor-card:first-child {
        grid-row: span 1;
    }

    /* ── Master placement: mobile/tablet layout ── */

    /* Hide desktop hero grid */
    .flavor-master-hero {
        display: none;
    }

    /* Show mobile card grid + filter tabs */
    .flavor-master-grid-wrap {
        display: block;
    }

    .flavor-placement-tabs {
        display: flex;
    }

    /* Hide individual placement sections */
    .flavor-placement-section {
        display: none !important;
    }

    /* ── Always show card info on mobile/tablet (no hover) ── */
    .flavor-card::after {
        opacity: 1;
    }

    .flavor-card-info {
        opacity: 1;
        transform: translateY(0);
    }

    .flavor-card-fav {
        opacity: 1;
    }

    /* Reduce footer gap on mobile/tablet (desktop is 64px) */
    .flavor-footer {
        margin-top: 1.71429rem;  /* 24px */
    }

    /* Hide footer on homepage — hamburger menu has all footer links */
    .home .flavor-footer {
        display: none;
    }

    /* Lock the episode page to the viewport — no scroll, no footer */
    body.flavor-has-player {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }

    /* Hide site footer on drama pages — content lives in hamburger menu */
    body.flavor-has-player .flavor-footer {
        display: none;
    }

    .flavor-page-episode {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        z-index: 50;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--flavor-nav-height));
        height: calc(100dvh - var(--flavor-nav-height));
    }

    .flavor-episode-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        border-radius: 0;
        gap: 0;
        flex: 1;
        min-height: 0;
    }

    .flavor-episode-player {
        min-height: auto;
        aspect-ratio: auto;
    }

    /* Hide desktop episode panel — content lives in the bottom sheet */
    .flavor-episode-info {
        display: none;
    }

    /* Hide desktop-only recommendations */
    .flavor-desktop-only {
        display: none !important;
    }

    /* Show the sheet toggle chevron */
    .flavor-sheet-toggle {
        display: flex;
    }

    .flavor-episode-grid {
        grid-template-columns: repeat(10, 1fr);
    }

    .flavor-episode-btn {
        aspect-ratio: auto;
        padding: 0.71429rem 0;
    }

    /* Title bar — reset to static within the fixed drawer */
    .flavor-episode-title-bar {
        margin-top: 0;
        border-radius: 0;
        background: transparent;
        border-top: none;
        padding: 1rem var(--flavor-container-padding, 1.71429rem);
    }

    /* Bottom sheet drawer — in flow, pushes video up when expanded */
    .flavor-bottom-sheet {
        flex-shrink: 0;
        background: var(--flavor-bg-bottom);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Expandable inner content — hidden when collapsed */
    .flavor-bottom-sheet-inner {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Expanded state — pushes player smaller */
    .flavor-bottom-sheet.open .flavor-bottom-sheet-inner {
        max-height: 50vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .flavor-episode-recs-row {
        flex-direction: column;
    }

    /* Show hamburger */
    .flavor-nav-hamburger {
        display: flex;
    }

    .flavor-nav-links {
        display: none;
    }

    .flavor-nav-actions .flavor-nav-icon-btn {
        display: none;
    }
}

/* Tablet/mobile shared adjustments */
@media (max-width: 768px) {
    :root {
        --flavor-nav-height: 4.28571rem;        
        --flavor-grid-gap: 0.85714rem;
        --flavor-container-padding: 1.14286rem;
        --flavor-section-gap: 2.28571rem;
        --flavor-grid-columns: 2;
    }

    .flavor-nav-logo {
        font-size: 1.85714rem;
    }

    .flavor-nav .flavor-container {
        gap: 1.14286rem;
    }

    .flavor-hero-grid {
        grid-template-columns: 1fr 1fr;
    }

    .flavor-hero-grid .flavor-card:first-child .flavor-card-title {
        font-size: 1.42857rem;  /* 20px at 14px base */
    }

    .flavor-episode-grid {
        grid-template-columns: repeat(8, 1fr);
    }

    .flavor-end-message {
        font-size: 0.85714rem; /* 12px */
    }
}

/* Small mobile tweaks */
@media (max-width: 600px) {
    .flavor-episode-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .flavor-episode-recs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .flavor-footer .flavor-container {
        flex-direction: column;
        text-align: center;
    }

    .flavor-footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Touch devices — disable hover transform effects */
@media (hover: none) {
    .flavor-card:hover {
        transform: none;
        box-shadow: none;
    }

    .flavor-card:hover .flavor-card-img {
        transform: none;
    }

    .flavor-card-play {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}