/* ==========================================
   RESPONSIVE — Mobile & Tablet
   RPN Box Office v2 — Matched to Mockup
   ========================================== */

/* ---- TABLET (768px → 1024px) ---- */
@media (max-width: 1024px) {
    .main-content {
        padding: var(--space-5);
    }

    .bento-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }
    .bento-card--social {
        grid-column: 1 / -1;
        min-height: 240px;
    }

    .hero-banner {
        height: 300px;
    }
    .hero-banner__title {
        font-size: 1.5rem;
    }

    .home-section__title {
        font-size: var(--text-xl);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
    }
}

/* ---- MOBILE (≤ 768px) ---- */
@media (max-width: 768px) {
    /* Force full width */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 12px;
        padding-top: 68px; /* header height + spacing */
        overflow-x: hidden;
    }

    /* ---- Mobile Header ---- */
    .mobile-header {
        display: flex;
        padding: 0 12px;
        height: 56px;
        gap: 8px;
        justify-content: space-between;
    }

    .mobile-header__title {
        font-size: 15px;
        font-weight: 700;
    }

    /* ---- Sidebar ---- */
    .sidebar {
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar.open {
        transform: translateX(0);
    }

    /* ---- Hero Banner ---- */
    .hero-banner {
        height: 300px !important;
        border-radius: 12px;
        margin-bottom: 16px;
    }
    /* Pin info to bottom-left, always same position */
    .hero-banner__info {
        padding: 14px 16px;
        gap: 6px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: left;
        align-items: flex-start;
    }
    .hero-banner__title {
        font-size: 1.1rem;
        line-height: 1.3;
        text-align: left;
    }
    .hero-banner__meta {
        font-size: 11px;
        gap: 6px;
    }
    .hero-banner__desc {
        display: none;
    }
    .hero-banner__genre {
        display: none;
    }
    /* Hide poster inside slide — only backdrop */
    .hero-banner__poster {
        display: none !important;
    }
    .hero-banner__content {
        flex-direction: column;
        position: static;
    }
    /* Fix action buttons — ensure visible */
    .hero-banner__actions {
        gap: 8px;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .hero-banner__btn {
        padding: 7px 16px;
        font-size: 12px;
        border-radius: 20px;
        backdrop-filter: blur(8px);
    }
    .hero-banner__btn--trailer {
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.3);
    }
    .hero-banner__btn--book {
        background: var(--brand-red);
        color: #fff;
    }
    .hero-banner__nav {
        bottom: 10px;
        gap: 5px;
    }
    .hero-banner__nav-dot {
        width: 6px;
        height: 6px;
    }

    /* Hide poster thumbnails on mobile — only backdrop */
    .hero-banner__thumbs {
        display: none !important;
    }

    /* ---- Bento Grid — 2x2 compact ---- */
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .bento-card--social {
        grid-column: 1 / -1;
        min-height: 180px;
        order: 3;
    }
    .bento-card--revenue {
        padding: 14px;
        order: 1;
    }
    .bento-card__title {
        font-size: 12px;
        margin-bottom: 4px;
    }
    .bento-card__value {
        font-size: 1.25rem;
    }
    .bento-card__chart {
        height: 50px;
    }
    .bento-card__cta {
        font-size: 11px;
    }
    .bento-card__date {
        font-size: 10px;
    }

    /* Revenue mini chart bars */
    .mini-chart__bar-group {
        gap: 1px;
    }
    .mini-chart__name {
        font-size: 8px;
        color: var(--brand-red) !important;
        font-weight: 700;
        opacity: 1;
    }

    /* Upcoming stack — vertical on mobile for better info display */
    .bento-upcoming-stack {
        flex-direction: column;
        gap: 10px;
        order: 2;
        align-self: stretch; /* match revenue card height */
    }
    .bento-card--upcoming {
        flex: 1; /* stretch to fill equally */
        min-height: 0;
        border-radius: 10px;
    }
    .bento-upcoming__label {
        font-size: 10px;
    }
    .bento-upcoming__badge {
        font-size: 11px;
    }
    .bento-upcoming__hot-label {
        font-size: 9px;
        padding: 2px 6px;
    }

    /* Social overlay */
    .bento-social__overlay {
        border-radius: 10px;
    }

    /* ---- Section Headers ---- */
    .home-section {
        margin-bottom: 28px;
    }
    .home-section__header {
        margin-bottom: 12px;
    }
    .home-section__title {
        font-size: 16px;
        gap: 8px;
    }
    .section-dot {
        width: 8px;
        height: 8px;
    }
    .home-section__viewall {
        font-size: 12px;
        padding: 4px 12px;
    }

    /* ---- Movie Carousel — Mobile ---- */
    /* Convert arc carousel to horizontal scroll on mobile */
    .movie-carousel {
        padding: 10px 0 20px;
        overflow: visible;
    }
    .movie-carousel__track {
        height: auto !important;
        display: flex !important;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 0 4px 8px;
        position: relative;
    }
    .movie-carousel__track::-webkit-scrollbar {
        display: none;
    }

    /* Override JS absolute positioning on mobile */
    .movie-carousel__track > .home-movie-card,
    .movie-carousel__track .home-movie-card {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        opacity: 1 !important;
        width: 130px !important;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* Hide arc carousel arrows on mobile — use swipe */
    .movie-carousel__arrow {
        display: none;
    }

    /* Hide carousel indicators on mobile — swipe only */
    .carousel-indicators {
        display: none;
    }

    /* Movie cards — uniform height + breathing room */
    .home-movie-card {
        padding: 0 2px;
        display: flex;
        flex-direction: column;
    }
    .home-movie-card__poster {
        border-radius: 8px;
        height: 180px;
        flex-shrink: 0;
    }
    .home-movie-card__info {
        padding: 8px 4px 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    /* Fixed 2-line title with ellipsis */
    .home-movie-card__title {
        font-size: 12px;
        line-height: 1.4;
        height: 2.8em; /* exactly 2 lines */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .home-movie-card__genre {
        font-size: 10px;
        padding: 0 2px;
    }
    .home-movie-card__meta {
        font-size: 10px;
        padding: 0 2px;
    }
    .home-movie-card__rating {
        font-size: 10px;
    }

    /* ---- Widgets Row ---- */
    .home-widgets-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* ---- Blog Preview Grid ---- */
    .blog-preview-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .blog-preview-card {
        border-radius: 10px;
    }
    .blog-preview-card__img {
        height: 160px;
    }
    .blog-preview-card__body {
        padding: 12px;
    }
    .blog-preview-card__title {
        font-size: 14px;
    }

    /* ---- Footer ---- */
    .site-footer {
        padding: 24px 16px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    /* Brand/about takes full width */
    .footer-grid > div:first-child {
        grid-column: 1 / -1;
    }
    /* Liên hệ takes full width */
    .footer-grid > div:last-child {
        grid-column: 1 / -1;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .footer-brand__name {
        font-size: 16px;
    }
    .footer-about {
        font-size: 12px;
    }

    /* ---- Auth Modal — Bottom Sheet ---- */
    .auth-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .auth-modal {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 88vh;
    }

    /* ---- Page titles ---- */
    .page-title {
        font-size: 20px;
    }
    .page-description {
        font-size: 12px;
    }

    /* ---- Box Office Dashboard ---- */
    .hero-stats {
        padding: 16px;
        border-radius: 12px;
    }
    .hero-stats__header {
        flex-direction: column;
        gap: 10px;
    }
    .hero-stats__title {
        font-size: 18px;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .stat-card {
        padding: 12px;
    }
    .stat-card__value {
        font-size: 18px;
    }

    /* ---- Blog Article ---- */
    .blog-article__hero { height: 200px; }
    .blog-article__title { font-size: 22px; }
    .blog-article__content {
        font-size: 15px;
        padding: 0 12px;
    }

    /* ---- Contact ---- */
    .contact-form { padding: 16px; }

    /* ---- Movies Grid (full page) ---- */
    .movies-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    /* ---- Social Trend page ---- */
    .social-trend-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ---- SMALL MOBILE (≤ 480px) ---- */
@media (max-width: 480px) {
    .main-content {
        padding: 8px;
        padding-top: 64px;
    }

    .hero-banner {
        height: 180px;
        border-radius: 10px;
    }
    .hero-banner__title {
        font-size: 1.05rem;
    }
    .hero-banner__info {
        padding: 12px;
    }
    .hero-banner__btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    .hero-banner__thumbs {
        display: none;
    }

    /* Carousel cards smaller */
    .movie-carousel__track > .home-movie-card,
    .movie-carousel__track .home-movie-card {
        width: 115px !important;
    }
    .home-movie-card__poster {
        height: 165px;
    }

    /* Bento grid */
    .bento-card--upcoming {
        min-height: 130px;
    }
    .bento-card__value {
        font-size: 1.1rem;
    }
    .bento-card--social {
        min-height: 150px;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .stat-card {
        padding: 10px;
    }
    .stat-card__value {
        font-size: 16px;
    }
    .stat-card__label {
        font-size: 10px;
    }

    .home-section__title {
        font-size: 14px;
    }

    .footer-brand__name {
        font-size: 14px;
    }

    /* Movies full page */
    .movies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- TOUCH DEVICES ---- */
@media (hover: none) and (pointer: coarse) {
    .sidebar__item {
        min-height: 48px;
    }

    /* Disable hover transforms on touch */
    .home-movie-card:hover,
    .bento-card:hover {
        transform: none !important;
    }

    /* Touch scrolling */
    .bento-upcoming-stack,
    .movie-carousel__track {
        -webkit-overflow-scrolling: touch;
    }

    /* Tap highlight */
    .sidebar__item,
    .bento-card,
    .home-movie-card {
        -webkit-tap-highlight-color: rgba(226, 51, 64, 0.08);
    }
}

/* ---- LANDSCAPE PHONE ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .mobile-header { height: 44px; }
    .main-content { padding-top: 52px; }
    .hero-banner { height: 160px; }
}

/* ---- SAFE AREA (iPhone notch/Dynamic Island) ---- */
@supports (padding-top: env(safe-area-inset-top)) {
    .mobile-header {
        padding-top: env(safe-area-inset-top);
        height: calc(56px + env(safe-area-inset-top));
    }
    @media (max-width: 768px) {
        .main-content {
            padding-top: calc(68px + env(safe-area-inset-top));
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
    .sidebar {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}