/* =========================================
   MOBILE (até 768px)
   ========================================= */

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

@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%;
        padding: 10px 20px;
    }

    .mobile-logo {
        height: 40px;
    }

    /* HAMBURGUER */
    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
    }

    .hamburger span {
        width: 25px;
        height: 3px;
        background: white;
        display: block;
        transition: 0.3s;
    }

    /* MENU MOBILE */
    .mobile-menu {
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        background: #1a1b43;
        display: none;
        flex-direction: column;
        text-align: center;
    }

    .mobile-menu a {
        padding: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        color: white;
        text-decoration: none;
    }

    .mobile-menu.active {
        display: flex;
    }

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

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

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

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

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

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

    /* GRID PRINCIPAL */
    .container-grid {
        grid-template-columns: 1fr;
    }

    /* CARDS */
    .projects-feed {
        grid-template-columns: 1fr;
    }

    /* SIDEBAR */
    .sidebar {
        margin-top: 30px;
    }

    /* 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;
    }
}

/* 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 */
@media (max-width: 768px) {

    .actions {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 10px;
    }

    .search {
        width: 100%;
        max-width: 300px;
        display: flex;
    }

    .search input {
        flex: 1;
        padding: 10px;
    }

    .search button {
        padding: 10px;
    }

    .mobile-logo-pj {
        display: none;
    }
}

/* 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) {

    #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 (min-width: 768px) and (max-width: 1063px) {
  .search {
    display: none;
  }
}