{% load wagtailcore_tags wagtailembeds_tags %}

{% block block_render %}
<div class="enap-embed-container">
    <div class="embed-responsive">
        {% embed self.url %}
    </div>
</div>

<style>
/* =======================================
   CONTAINER PRINCIPAL DO EMBED
   ======================================= */
.enap-embed-container {
    max-width: 1142px;
    width: 100%;
    margin: 2.5rem auto;
    padding: 0 1rem;
    position: relative;
}

/* =======================================
   WRAPPER RESPONSIVO PARA VÍDEOS
   ======================================= */
.embed-responsive {
    position: relative;
    width: 100%;
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.05),
        0 10px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.embed-responsive:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 15px rgba(0, 0, 0, 0.1),
        0 20px 40px rgba(0, 0, 0, 0.15);
}

/* =======================================
   ESTILOS PARA IFRAME E VÍDEOS
   ======================================= */
.embed-responsive iframe,
.embed-responsive video,
.embed-responsive embed,
.embed-responsive object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
    border-radius: 12px;
    background: #000;
}

/* Aspect ratio 16:9 para vídeos */
.embed-responsive::before {
    content: "";
    display: block;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

/* =======================================
   LOADING STATE
   ======================================= */
.embed-responsive::after {
    content: "Carregando vídeo...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: 1rem;
    font-weight: 500;
    z-index: 1;
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* =======================================
   ESTILOS PARA DIFERENTES PLATAFORMAS
   ======================================= */

/* YouTube */
.embed-responsive iframe[src*="youtube.com"],
.embed-responsive iframe[src*="youtu.be"] {
    border-radius: 12px;
}

/* Vimeo */
.embed-responsive iframe[src*="vimeo.com"] {
    border-radius: 12px;
}

/* Twitter */
.embed-responsive iframe[src*="twitter.com"] {
    border-radius: 8px;
    background: white;
}

/* Instagram */
.embed-responsive iframe[src*="instagram.com"] {
    border-radius: 8px;
    background: white;
}

/* =======================================
   RESPONSIVIDADE
   ======================================= */

/* Tablets */
@media (max-width: 1200px) {
    .enap-embed-container {
        padding: 0 2rem;
        margin: 2rem auto;
    }
}

/* Mobile Large */
@media (max-width: 768px) {
    .enap-embed-container {
        padding: 0 1.5rem;
        margin: 1.5rem auto;
    }
    
    .embed-responsive {
        border-radius: 8px;
        box-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.1),
            0 8px 16px rgba(0, 0, 0, 0.1);
    }
    
    .embed-responsive:hover {
        transform: none; /* Remove hover em mobile */
        box-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.1),
            0 8px 16px rgba(0, 0, 0, 0.1);
    }
}

/* Mobile Small */
@media (max-width: 480px) {
    .enap-embed-container {
        padding: 0 1rem;
        margin: 1rem auto;
    }
    
    .embed-responsive {
        border-radius: 6px;
    }
    
    .embed-responsive iframe,
    .embed-responsive video {
        border-radius: 6px;
    }
}

/* =======================================
   ACESSIBILIDADE
   ======================================= */

/* Foco para navegação por teclado */
.embed-responsive:focus-within {
    outline: 3px solid #4299e1;
    outline-offset: 2px;
}

/* Redução de movimento para usuários sensíveis */
@media (prefers-reduced-motion: reduce) {
    .embed-responsive,
    .embed-responsive:hover {
        transition: none;
        transform: none;
    }
    
    .embed-responsive::after {
        animation: none;
    }
}

/* =======================================
   MODO ESCURO
   ======================================= */
@media (prefers-color-scheme: dark) {
    .embed-responsive {
        background: #2d3748;
        box-shadow: 
            0 4px 6px rgba(0, 0, 0, 0.2),
            0 10px 25px rgba(0, 0, 0, 0.3);
    }
    
    .embed-responsive:hover {
        box-shadow: 
            0 8px 15px rgba(0, 0, 0, 0.3),
            0 20px 40px rgba(0, 0, 0, 0.4);
    }
    
    .embed-responsive::after {
        color: #a0aec0;
    }
}

/* =======================================
   UTILIDADES EXTRAS
   ======================================= */

/* Para embeds que não são vídeos (ex: posts sociais) */
.enap-embed-container.social-embed .embed-responsive::before {
    padding-bottom: 0; /* Remove aspect ratio fixo */
}

.enap-embed-container.social-embed .embed-responsive {
    height: auto;
    min-height: 200px;
}

.enap-embed-container.social-embed iframe {
    position: static;
    height: auto !important;
    min-height: 200px;
}
</style>
{% endblock %}