/* =====================================================
   CRYSTAL FANSUB RESPONSIVE STYLESHEET by sa1toYuki
   ================================================= */

@media (max-width: 1424px) {
    .main-banner{
        display: none;
    }
}

/* Home — posts + sidebar (tablet e mobile) */
@media (max-width: 1100px) {
    .content-section {
        padding: 32px 20px;
    }

    .container-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .posts-column {
        width: 100%;
        align-items: center;
    }

    .projects-feed {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        justify-items: stretch;
    }

    .card-anime {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .posts-pagination {
        width: 100%;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .sidebar {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        min-width: 0;
    }

    .widget {
        width: 100%;
        min-width: 0;
    }

    .releases-widget {
        min-height: 0;
    }
}

@media (max-width: 768px) {

    /* ESCONDE MENU NORMAL */
    .nav-center-group,
    .actions {
        display: none;
    }

    /* HEADER MOBILE */
    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        flex: 0 0 100%;
        padding: 10px 20px;
        min-height: 75px;
    }

    .mobile-search-bar {
        flex: 0 0 100%;
    }

    .mobile-header picture {
        display: flex;
        align-items: center;
    }

    .mobile-logo {
        width: auto;
        height: 40px;
        object-fit: contain;
    }

    /* MENU MOBILE */
    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        z-index: 98;
        background: #1a1b43;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px);
        box-shadow: none;
        transition:
            max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.32s ease,
            transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.35s ease,
            visibility 0s linear 0.42s;
    }

    .mobile-menu a {
        padding: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        text-decoration: none;
        opacity: 0;
        transform: translateY(-10px);
        transition:
            opacity 0.28s ease,
            transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
            background 0.2s ease;
    }

    .mobile-menu a:hover,
    .mobile-menu a:focus-visible {
        background: rgba(163, 58, 255, 0.15);
    }

    .mobile-menu.active {
        max-height: 480px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        transition:
            max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.28s ease 0.06s,
            transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.35s ease,
            visibility 0s linear 0s;
    }

    .mobile-menu.active a {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-menu.active a:nth-child(1) { transition-delay: 0.08s; }
    .mobile-menu.active a:nth-child(2) { transition-delay: 0.12s; }
    .mobile-menu.active a:nth-child(3) { transition-delay: 0.16s; }
    .mobile-menu.active a:nth-child(4) { transition-delay: 0.20s; }
    .mobile-menu.active a:nth-child(5) { transition-delay: 0.24s; }
    .mobile-menu.active a:nth-child(6) { transition-delay: 0.28s; }
    .mobile-menu.active a:nth-child(7) { transition-delay: 0.32s; }

    .mobile-menu:not(.active) a {
        transition-delay: 0s;
    }

    body.menu-open {
        overflow: hidden;
    }

    /* HAMBURGUER */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
    }

    .hamburger span {
        width: 25px;
        height: 3px;
        background: white;
        display: block;
        border-radius: 2px;
        transform-origin: center;
        transition:
            transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.22s ease,
            width 0.3s ease;
    }

    /* ANIMAÇÃO HAMBURGUER */
    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-menu,
        .mobile-menu a,
        .hamburger span {
            transition-duration: 0.01ms !important;
            transition-delay: 0s !important;
        }

        .mobile-menu.active a:nth-child(n) {
            transition-delay: 0s;
        }
    }

    /* BANNER */
    .main-banner {
        height: auto;
    }

    .banner-overlay {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .character-art {
        flex: none;
        height: 250px;
    }

    .content-section {
        padding: 24px 16px;
    }

    .projects-feed,
    .sidebar,
    .posts-pagination {
        max-width: 100%;
    }

    /* FOOTER */
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
}

/* BLOG */
@media (max-width: 768px) {

    .blog-hero {
        height: 250px;
    }

    .blog-hero h1 {
        font-size: 1.5rem;
        text-align: center;
        padding: 0 10px;
    }

    .blog-meta {
        flex-direction: column;
        gap: 5px;
        font-size: 0.8rem;
    }

    .blog-content {
        padding: 20px;
    }

    .blog-content img {
        width: 100%;
        height: auto;
    }

    .highlight-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .highlight-poster {
        width: 150px;
    }
}

/* PROJECT PAGE */
@media (max-width: 1024px) {
    .project-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-details-inner {
        grid-template-columns: 1fr;
    }

    .project-staff-highlight {
        max-width: 420px;
    }
}

@media (max-width: 900px) {
    .project-hero-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 28px 6% 24px;
        min-height: auto;
    }

    .project-hero-logo {
        flex: 0 0 auto;
        width: min(360px, 88vw);
        margin: 0 auto;
        justify-content: center;
        align-items: center;
    }

    .project-hero-logo > img {
        max-height: 200px;
        margin: 0 auto;
    }

    .project-hero-info {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }

    .project-hero-synopsis {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        text-align: center;
        font-size: 0.9rem;
        line-height: 1.65;
        margin-bottom: 14px;
    }

    .project-hero-title {
        text-align: center;
    }

    .project-hero-stats {
        justify-content: center;
    }

    .project-hero-info .sensitive-content-warning {
        text-align: center;
    }

    .project-staff-highlight {
        max-width: none;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .project-page {
        padding-top: 56px;
    }

    .project-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px 14px;
    }

    .project-hero-stats {
        justify-content: center;
    }

    .episodes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }

    .music-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

@media (max-width: 540px) {
    .episodes-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ep-card-title {
        font-size: 1.05rem;
        min-height: calc(1em * 1.4 * 2);
    }
}


@media (max-width: 480px) {
    .project-meta-grid {
        grid-template-columns: 1fr;
    }

    .project-hero-logo {
        width: min(280px, 85vw);
    }

    .project-hero-logo > img {
        max-height: 170px;
    }
}

/* ANIME DETAILS */
@media (max-width: 768px) {

    .anime-main-info {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .anime-poster {
        margin: 0 auto;
    }

    .anime-text-info h1 {
        font-size: 1.8rem;
        text-align: center;
    }

    .anime-meta {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }

    .anime-sinopse p {
        font-size: 0.9rem;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }

    /* EPISÓDIOS */
    .episode-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ep-thumbnail {
        width: 100%;
        height: auto;
    }

    .ep-thumbnail img {
        height: auto;
    }

    .ep-actions {
        width: 100%;
        text-align: right;
    }
}

/* SEARCH MOBILE — estilos em style.css (.mobile-search-bar) */

/* GRID DE PROJETOS MOBILE */
@media (max-width: 768px) {

    .projects-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 10px;
    }

    .project-item {
        width: 100%;
    }

    .project-poster img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .project-item h3 {
        font-size: 0.9rem;
        text-align: center;
    }

    
}

@media (max-width: 768px) {
    .project-poster {
        height: auto; /* Remove a altura fixa de 300px no celular */
    }

    .project-poster img {
        height: auto; /* Permite que a imagem dite a altura do card */
        aspect-ratio: 2 / 3; /* Força uma proporção padrão de pôster de anime */
        object-fit: cover;
    }
}

/* MODAL +18 MOBILE */
@media (max-width: 768px) {

    .content-gate-overlay,
    #age-check,
    #blocked-message {
        padding: 20px;
        align-items: center;
        justify-content: center;
    }

    .age-modal {
        width: 100%;
        max-width: 320px;
        padding: 20px;
        border-radius: 12px;
        text-align: center;
    }

    .age-modal h2 {
        font-size: 1.4rem;
    }

    .age-modal p {
        font-size: 0.9rem;
    }

    .age-modal button {
        width: 100%;
        margin-top: 10px;
        padding: 12px;
        font-size: 0.9rem;
    }
}

/* EQUIPE MOBILE */
@media (max-width: 768px) {

    .equipe-grid {
        display: grid;
        grid-template-columns: 1fr; /* 1 por linha */
        justify-items: center; /* centraliza os cards */
        gap: 20px;
        padding: 20px 10px;
    }

    .membro-card-espacial {
        width: 100%;
        max-width: 280px; /* controla o tamanho */
    }
}

@media  (max-width: 834px) {
    .status-item img {
        display: none;
    }
}

@media (max-width: 1300px) {
    .navbar .actions .search,
    .navbar .mobile-search-bar {
        display: none !important;
    }

    .filtros-search {
        display: flex;
    }
}