/* Global Styles (Vanilla) */

/* ================================
   HERO FULL WIDTH - fix Bootstrap row margins
   ================================ */
main#main-content {
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden;
}

/* Neutraliza el gutter negativo de Bootstrap en heroes */
.video-section.item-slide {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.video-section.item-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ===== Altura completa para body/html ===== */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.container {
    max-width: 100%;   /* ancho completo */
    width: 100%;       /* fuerza que siempre sea 100% */
    margin: 0 auto;
    padding: 0 15px;   /* padding horizontal mínimo */
    box-sizing: border-box; /* evita que padding "expanda" más allá del ancho */
}

.text-center { text-align: center; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.pt-5 { padding-top: 3rem; }
.mt-5 { margin-top: 3rem; }

/* Pagination */
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 10px;
    justify-content: center;
}

.page-link {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background 0.2s;
}

.page-link:hover:not(.disabled) {
    background-color: #f8f9fa;
}

.page-item.active .page-link {
    background-color: #800020;
    color: white;
    border-color: #800020;
}

.page-link.disabled {
    color: #ccc;
    cursor: default;
}


/* ===========================
   QUILL / EDITOR IMAGES FIX
=========================== */

/* Imágenes dentro del editor (crear/editar) */
.ql-editor img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: contain;
}

/* Evita recorte horizontal */
.ql-editor {
    overflow-x: hidden;
}

/* ===========================
   CONTENIDO NOTICIA (FRONT)
=========================== */

/* por si Quill guarda contenido en estas clases */
.article-content img,
.block-text img,
.ck-content img,
#editor-cuerpo-es img,
#editor-cuerpo-eu img,
#editor-cuerpo-en img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: contain;
}

/* evita que el contenedor corte imágenes en mobile */
.article-content,
.block-text,
.ck-content {
    max-width: 100%;
    overflow-x: hidden;
}

/* ===========================
   EXTRA SEGURIDAD MOBILE
=========================== */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
}
/* ===============================
   SISTEMA GLOBAL BOTONES (FIX DEFINITIVO)
   =============================== */

/* SOLO CTA REALES (NO Bootstrap base .btn global) */
.card-button,
a.button,
.boton-inscripcion,
.ver-noticias a,
.ver-todas-noticias,
.inscribete-btn,
#toggle-videos {
    background-color: #a31e33 !important;
    color: #fff !important;
    border: 1px solid #a31e33 !important;

    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, background, color;
}

/* HOVER CTA */
.card-button:hover,
a.button:hover,
.boton-inscripcion:hover,
.ver-noticias a:hover,
.ver-todas-noticias:hover,
.inscribete-btn:hover,
#toggle-videos:hover {
    background: #fff !important;
    color: #a31e33 !important;
    border: 1px solid #a31e33 !important;

    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
/* ===============================
   INSCRIPCIÓN CTA (FIX DEFINITIVO)
   =============================== */

.inscripcion-cta__btn {
    background-color: #a31e33 !important;
    color: #fff !important;
    border: 1px solid #a31e33 !important;

    display: inline-block;
    text-decoration: none;

    font-weight: 800;
    padding: 1rem 2.5rem;
    border-radius: 6px;

    transition: all 0.3s ease;
}

.inscripcion-cta__btn:hover {
    background-color: #fff !important;
    color: #a31e33 !important;
    border: 1px solid #a31e33 !important;

    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
/* ================================
   VIEW TRANSITIONS — Wine Run
   ================================ */

/* Navegaciones normales: fade suave */
::view-transition-old(root) {
    animation: vt-fade-out 200ms ease forwards;
}
::view-transition-new(root) {
    animation: vt-fade-in 300ms ease forwards;
}

@keyframes vt-fade-out {
    to { opacity: 0; }
}
@keyframes vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Desde card: root invisible — el clon hace el trabajo visual */
/* El startViewTransition solo gestiona el swap, no la animación */
html.vt-hero::view-transition-old(root),
html.vt-hero::view-transition-new(root) {
    animation: none;
    opacity: 1;
}