/*
 * Styles for Mobile Stories Frontend (Swiper JS Integration)
 */
/* ... outros estilos do Swiper e do item de story mobile ... */

/* Garante que o contêiner mobile apareça em telas pequenas */
@media (max-width: 768px) { /* Deve ser o mesmo breakpoint acima */
    .lg-mobile-stories-container {
        display: block !important; /* Ou flex, dependendo do Swiper */
    }
}

/* Esconde o contêiner mobile em telas grandes */
@media (min-width: 769px) { /* +1 do breakpoint mobile */
    .lg-mobile-stories-container {
        display: none !important;
    }
}

/* Contêiner principal do slider */
.lg-mobile-stories-container {
    margin: 30px auto;
    padding: 0 10px; /* Padding para o slider não colar nas bordas da tela */
    max-width: 100%; /* Garante que o slider ocupe a largura total disponível */
    overflow: hidden; /* Importante para o Swiper */
}

/* Estilo do item de Story dentro do slider (mantém o visual de bolinha) */
.lg-mobile-stories-container .lg-story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
    width: 80px; /* Largura fixa para cada bolinha no slider */
    flex-shrink: 0; /* Impede que o item encolha no flex */
    padding-bottom: 5px; /* Espaço para o título */
}

.lg-mobile-stories-container .lg-story-item:hover {
    transform: translateY(-5px);
}

/* O círculo com borda colorida (Reutiliza classes do desktop) */
.lg-mobile-stories-container .lg-story-circle-wrapper {
    width: 70px; /* Tamanho da bolinha no mobile */
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(45deg, #FFD700, #FFA500); /* Laranja/Amarelo */
    padding: 2px; /* Borda mais fina */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.lg-mobile-stories-container .lg-story-circle-wrapper.viewed {
    background: linear-gradient(45deg, #28a745, #1d7e35); /* Verde */
}

/* O círculo interno da imagem */
.lg-mobile-stories-container .lg-story-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
.lg-mobile-stories-container .lg-story-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.lg-mobile-stories-container .lg-story-title {
    font-size: 0.8em; /* Fonte menor para mobile */
    font-weight: 500;
    color: #555;
    margin-top: 5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Media query para garantir que o shortcode mobile só apareça em telas pequenas */
@media (min-width: 769px) { /* Esconde a versão mobile em telas maiores */
    .lg-mobile-stories-container {
        display: none !important;
    }
}