/* ============================================================
   RESPONSIVE — AnimeVerse  (single source of truth for all layouts)
   Breakpoints: 1200 → 1024 → 900 → 768 → 600 → 480 → 380
============================================================ */

/* ========================
   ANIME SINGLE PAGE
======================== */

/* 3-col → 1-col at 1024 */
@media (max-width: 1024px) {
    .anime-layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .anime-left,
    .anime-right {
        width: 100% !important;
    }
    .anime-cover {
        max-width: 320px;
        margin: 0 auto;
    }
    .anime-right {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .anime-right > * {
        flex: 1 1 280px;
    }
}

@media (max-width: 768px) {

    .anime-title {
        font-size: 28px;
        letter-spacing: -.5px;
    }

    .anime-title-row {
        flex-direction: column;
        gap: 12px;
    }

    .add-to-list-btn {
        width: 100%;
        text-align: center;
    }

    .anime-badges {
        gap: 8px;
    }

    .anime-badge {
        font-size: 12px;
        padding: 5px 12px;
    }

    .anime-right {
        flex-direction: column;
    }

    .characters-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .arcs-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .related-anime-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .watch-order-row {
        gap: 8px;
    }

    .watch-order-arrow {
        font-size: 14px;
    }

    .mini-anime-card {
        width: 100px;
    }

    .content-section {
        margin-bottom: 28px;
    }

    .content-section-title {
        font-size: 20px;
    }

    .section-heading-text {
        font-size: 18px;
    }

    .trailer-embed {
        border-radius: 14px;
    }

    /* Episodes table — hide air date on mobile */
    .episodes-table-head,
    .episodes-table-row {
        grid-template-columns: 40px 1fr !important;
        padding: 11px 14px;
    }

    .episodes-table-head span:last-child,
    .episodes-table-row .ep-date {
        display: none;
    }

    .view-all-episodes-btn {
        padding: 12px;
        font-size: 14px;
    }

    /* FAQ */
    .faq-item {
        padding: 14px 16px;
    }

    /* Rating card */
    .rating-card {
        padding: 16px;
    }

    .rating-score {
        font-size: 36px;
    }

    /* Watch links */
    .watch-link {
        padding: 12px 14px;
        font-size: 14px;
        border-radius: 12px;
    }

    /* Breadcrumbs */
    .breadcrumbs {
        font-size: 12px;
        gap: 4px;
        flex-wrap: wrap;
        margin-top: 14px;
    }
}

@media (max-width: 480px) {

    .anime-title {
        font-size: 22px;
    }

    .anime-cover {
        max-width: 240px;
    }

    .characters-row,
    .related-anime-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .rating-score {
        font-size: 30px;
    }
}

/* ========================
   EPISODE SINGLE PAGE
======================== */

@media (max-width: 1100px) {
    .ep-layout {
        grid-template-columns: 200px 1fr !important;
    }
    .ep-right {
        grid-column: 1 / -1;
    }
    .ep-right > div {
        position: static !important;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px;
    }
    .ep-nav-card {
        flex: 1;
        min-width: 140px;
    }
}

@media (max-width: 768px) {
    .ep-layout {
        grid-template-columns: 1fr !important;
    }
    .ep-left {
        position: static !important;
    }
    .ep-cover {
        aspect-ratio: 16/9;
        border-radius: 14px;
    }
}

/* ========================
   ARC / FILLER / RELEASE / CHARACTER SINGLE
   (all use anime-layout or character-layout)
======================== */

@media (max-width: 900px) {
    .anime-layout[style] {
        grid-template-columns: 1fr !important;
    }
}

/* ========================
   NEWS SINGLE
======================== */

@media (max-width: 1024px) {
    .news-single-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .news-related-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================
   ARCHIVE HERO + FILTER BAR
======================== */

@media (max-width: 768px) {

    .archive-hero {
        padding: 32px 0 20px;
        margin-bottom: 20px;
    }

    .archive-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .archive-hero-title {
        font-size: 28px;
    }

    .archive-count-pill {
        font-size: 13px;
        padding: 8px 16px;
    }

    .filter-bar {
        padding: 14px 16px;
        gap: 10px;
        border-radius: 14px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .filter-select {
        flex: 1;
        min-width: 0;
        font-size: 14px;
    }

    .filter-tag-group {
        gap: 6px;
        flex-wrap: wrap;
    }

    .filter-tag {
        padding: 7px 12px;
        font-size: 12px;
    }

    .anime-context-banner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px;
        border-radius: 14px;
        margin-bottom: 18px;
    }

    .anime-context-title {
        font-size: 17px;
    }

    .anime-context-back {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .archive-hero-title {
        font-size: 22px;
    }
}

/* ========================
   ARCHIVE EPISODE TABLE — responsive columns
======================== */

@media (max-width: 860px) {
    /* Episode archive: hide Anime + Air Date columns */
    .archive-list-head.ep-head,
    .archive-list-row.ep-row {
        grid-template-columns: 44px 1fr 90px !important;
    }
}

@media (max-width: 540px) {
    .archive-list-head.ep-head,
    .archive-list-row.ep-row {
        grid-template-columns: 36px 1fr !important;
    }
}

/* ========================
   ARCHIVE RELEASE TABLE
======================== */

@media (max-width: 860px) {
    .archive-list-head.release-head,
    .archive-list-row.release-row {
        grid-template-columns: 1fr 100px !important;
    }
}

/* ========================
   ARCHIVE PAGINATION
======================== */

@media (max-width: 480px) {
    .archive-pagination {
        gap: 5px;
        margin-top: 24px;
    }
    .archive-pagination .page-numbers {
        width: 34px;
        height: 34px;
        font-size: 13px;
        border-radius: 10px;
    }
}

/* ========================
   HOMEPAGE
======================== */

@media (max-width: 1100px) {
    .hp-quick-nav {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    .hp-stats-inner {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    .hp-section {
        padding: 36px 0;
    }

    .hp-quick-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 20px 0;
    }

    .hp-nav-tile {
        padding: 14px 10px;
        border-radius: 14px;
        gap: 8px;
    }

    .hp-nav-tile-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border-radius: 12px;
    }

    .hp-nav-tile-label {
        font-size: 11px;
    }

    .hp-nav-tile-sub {
        display: none;
    }

    .hp-dual-col {
        grid-template-columns: 1fr !important;
        gap: 36px;
    }

    .hp-news-grid {
        grid-template-columns: 1fr !important;
    }

    .hp-news-featured .pcard-thumb {
        aspect-ratio: 16/7 !important;
    }

    .hp-char-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px;
    }

    .hp-filler-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .hp-stats-inner {
        grid-template-columns: repeat(3, 1fr);
    }

    .hp-stat-item {
        padding: 24px 12px;
    }

    .hp-stat-num {
        font-size: 22px;
    }

    .hp-stat-icon {
        font-size: 20px;
    }

    .hp-ranked-row {
        padding: 10px 12px;
        gap: 10px;
    }

    .hp-ranked-num {
        font-size: 18px;
        min-width: 22px;
    }

    .section-heading {
        margin-bottom: 18px;
    }

    /* Hero */
    .hero {
        padding: 48px 0 36px;
    }

    .hero-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    .hero-subtitle {
        font-size: 15px !important;
    }

    .hero-search {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .hero-search input,
    .hero-search button {
        border-radius: 14px !important;
        width: 100% !important;
        height: 52px !important;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 20px;
    }
}

@media (max-width: 480px) {

    .hp-quick-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .hp-char-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hp-filler-grid {
        grid-template-columns: 1fr !important;
    }

    .hp-stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .hp-stat-item:nth-child(2n) {
        border-right: none;
    }

    .hp-stat-item:nth-child(n+3) {
        border-top: 1px solid rgba(124, 92, 255, .15);
    }

    .hero-title {
        font-size: 26px !important;
    }
}

@media (max-width: 360px) {
    .hp-quick-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}

/* ========================
   SIDEBAR WIDGETS
======================== */

@media (max-width: 768px) {
    .sidebar-widget {
        border-radius: 14px;
    }
    .sidebar-list-thumb {
        width: 40px;
        height: 54px;
    }
}

/* ========================
   TYPOGRAPHY / PROSE
======================== */

@media (max-width: 768px) {
    .prose h2 {
        font-size: 20px;
    }
    .prose h3 {
        font-size: 17px;
    }
    .section-heading-text {
        font-size: 18px;
    }
    .section-heading-bar {
        display: none;
    }
}

/* ========================
   GENERAL UTILITY
======================== */

@media (max-width: 768px) {
    /* Prevent any element from causing horizontal scroll */
    .anime-layout,
    .ep-layout,
    .character-layout,
    .archive-list,
    .episodes-table,
    .pcard,
    .card {
        max-width: 100%;
        overflow-x: hidden;
    }
}