.elementor-551 .elementor-element.elementor-element-1d8419e{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-ccdf69c *//* =========================================================
   SOLSTICIO BLOG SUBMISSION SYSTEM
========================================================= */

/* =========================================================
   START SESSION
========================================================= */

add_action('init', function(){

    if(!session_id()){
        session_start();
    }

});

/* =========================================================
   SHORTCODE
========================================================= */

add_shortcode('solsticio_blog_form', 'solsticio_blog_form_shortcode');

function solsticio_blog_form_shortcode(){

    ob_start();

    /* =========================================================
       LOGIN PASSWORD
    ========================================================= */

    if(isset($_POST['solsticio_access_password'])){

        if($_POST['solsticio_access_password'] === 'Solsticio2026*'){

            $_SESSION['solsticio_blog_access'] = true;

        }

    }

    $has_access = isset($_SESSION['solsticio_blog_access']) && $_SESSION['solsticio_blog_access'] === true;

    /* =========================================================
       PASSWORD SCREEN
    ========================================================= */

    if(!$has_access){

        ?>

        <div class="solsticio-password-wrapper">

            <div class="solsticio-password-box">

                <span>
                    ACCESO PRIVADO
                </span>

                <h2>
                    Panel de publicaciones
                </h2>

                <p>
                    Ingresa la contraseña para acceder al sistema de publicaciones de Solsticio.
                </p>

                <form method="POST">

                    <input
                        type="password"
                        name="solsticio_access_password"
                        placeholder="Contraseña"
                        required>

                    <button type="submit">
                        Acceder
                    </button>

                </form>

            </div>

        </div>

        <?php

        return ob_get_clean();

    }

    /* =========================================================
       HANDLE FORM SUBMISSION
    ========================================================= */

    if(isset($_POST['solsticio_blog_submit'])){

        $title = sanitize_text_field($_POST['blog_title']);

        $content = wp_kses_post($_POST['blog_content']);

        $post_id = wp_insert_post([
            'post_title'   => $title,
            'post_content' => $content,
            'post_status'  => 'publish',
            'post_type'    => 'post'
        ]);

        if($post_id){

            /* =========================================================
               CATEGORY
            ========================================================= */

            $category = get_category_by_slug('blog');

            if($category){
                wp_set_post_categories($post_id, [$category->term_id]);
            }

            /* =========================================================
               FEATURED IMAGE
            ========================================================= */

            if(!empty($_FILES['featured_image']['name'])){

                require_once(ABSPATH . 'wp-admin/includes/image.php');
                require_once(ABSPATH . 'wp-admin/includes/file.php');
                require_once(ABSPATH . 'wp-admin/includes/media.php');

                $featured_id = media_handle_upload('featured_image', $post_id);

                if(!is_wp_error($featured_id)){
                    set_post_thumbnail($post_id, $featured_id);
                }

            }

            /* =========================================================
               GALLERY
            ========================================================= */

            if(!empty($_FILES['gallery_images']['name'][0])){

                $gallery_ids = [];

                $files = $_FILES['gallery_images'];

                foreach($files['name'] as $key => $value){

                    if($files['name'][$key]){

                        $file = [
                            'name'     => $files['name'][$key],
                            'type'     => $files['type'][$key],
                            'tmp_name' => $files['tmp_name'][$key],
                            'error'    => $files['error'][$key],
                            'size'     => $files['size'][$key]
                        ];

                        $_FILES['single_gallery_image'] = $file;

                        $attachment_id = media_handle_upload('single_gallery_image', $post_id);

                        if(!is_wp_error($attachment_id)){
                            $gallery_ids[] = $attachment_id;
                        }

                    }

                }

                if(!empty($gallery_ids)){
                    update_post_meta($post_id, 'solsticio_gallery', $gallery_ids);
                }

            }

            echo '<div class="solsticio-success">Publicación creada correctamente.</div>';

        }

    }

    ?>

    <div class="solsticio-blog-form-wrapper">

        <div class="solsticio-blog-form-header">

            <span>
                NUEVA PUBLICACIÓN
            </span>

            <h2>
                Crear artículo para Solsticio
            </h2>

        </div>

        <form
            class="solsticio-blog-form"
            method="POST"
            enctype="multipart/form-data">

            <!-- TITLE -->

            <div class="solsticio-field">

                <label>
                    Título del artículo
                </label>

                <input
                    type="text"
                    name="blog_title"
                    placeholder="Escribe el título"
                    required>

            </div>

            <!-- FEATURED IMAGE -->

            <div class="solsticio-field">

                <label>
                    Banner / Imagen destacada
                </label>

                <input
                    type="file"
                    name="featured_image"
                    accept="image/*"
                    required>

            </div>

            <!-- GALLERY -->

            <div class="solsticio-field">

                <label>
                    Galería de imágenes
                </label>

                <input
                    type="file"
                    name="gallery_images[]"
                    accept="image/*"
                    multiple>

            </div>

            <!-- CONTENT -->

            <div class="solsticio-field">

                <label>
                    Contenido del artículo
                </label>

                <textarea
                    name="blog_content"
                    rows="12"
                    placeholder="Escribe el contenido del artículo..."
                    required></textarea>

            </div>

            <!-- BUTTON -->

            <button
                type="submit"
                name="solsticio_blog_submit"
                class="solsticio-submit-btn">

                Publicar artículo

            </button>

        </form>

    </div>

    <?php

    return ob_get_clean();

}

/* =========================================================
   GALLERY IN POSTS
========================================================= */

add_filter('the_content', function($content){

    if(is_single()){

        $gallery = get_post_meta(get_the_ID(), 'solsticio_gallery', true);

        if(!empty($gallery) && is_array($gallery)){

            $gallery_html = '<div class="solsticio-post-gallery">';

            foreach($gallery as $image_id){

                $image = wp_get_attachment_image_url($image_id, 'large');

                $gallery_html .= '
                    <a href="'.$image.'" target="_blank">
                        <img src="'.$image.'">
                    </a>
                ';

            }

            $gallery_html .= '</div>';

            $content .= $gallery_html;

        }

    }

    return $content;

});
```

---

# CSS

```css
/* =========================================================
   PASSWORD SCREEN
========================================================= */

.solsticio-password-wrapper{

    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px;

    background:
        radial-gradient(
            circle at top,
            rgba(212,175,55,.12),
            transparent 40%
        ),
        #050505;
}

/* BOX */

.solsticio-password-box{

    width:100%;
    max-width:520px;

    padding:50px;

    border-radius:32px;

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(14px);
}

/* LABEL */

.solsticio-password-box span{

    color:#d4af37;

    font-size:11px;
    font-weight:800;

    letter-spacing:3px;
}

/* TITLE */

.solsticio-password-box h2{

    color:#fff;

    font-size:52px;

    line-height:.95;

    margin:22px 0;

    text-transform:uppercase;
}

/* TEXT */

.solsticio-password-box p{

    color:#a0a0a0;

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;
}

/* FORM */

.solsticio-password-box form{

    display:flex;
    flex-direction:column;

    gap:18px;
}

/* INPUT */

.solsticio-password-box input{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    background:
        rgba(255,255,255,.05);

    padding:0 20px;

    color:#fff;

    font-size:16px;
}

/* BUTTON */

.solsticio-password-box button{

    height:60px;

    border:none;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #caa54e,
            #e0c46f
        );

    color:#000;

    font-size:13px;
    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;

    cursor:pointer;
}

/* =========================================================
   BLOG FORM
========================================================= */

.solsticio-blog-form-wrapper{

    max-width:1100px;

    margin:auto;

    padding:120px 20px;
}

/* HEADER */

.solsticio-blog-form-header{

    margin-bottom:50px;
}

.solsticio-blog-form-header span{

    color:#d4af37;

    font-size:11px;
    font-weight:800;

    letter-spacing:3px;
}

.solsticio-blog-form-header h2{

    color:#fff;

    font-size:72px;

    line-height:.92;

    margin-top:20px;

    text-transform:uppercase;
}

/* FORM */

.solsticio-blog-form{

    display:flex;
    flex-direction:column;

    gap:30px;

    padding:50px;

    border-radius:34px;

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(255,255,255,.05);
}

/* FIELD */

.solsticio-field{

    display:flex;
    flex-direction:column;

    gap:14px;
}

/* LABEL */

.solsticio-field label{

    color:#fff;

    font-size:14px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

/* INPUT */

.solsticio-field input,
.solsticio-field textarea{

    width:100%;

    border:none;

    border-radius:20px;

    background:
        rgba(255,255,255,.05);

    padding:20px;

    color:#fff;

    font-size:16px;
}

/* TEXTAREA */

.solsticio-field textarea{

    resize:vertical;

    min-height:260px;

    line-height:1.9;
}

/* FILE */

.solsticio-field input[type="file"]{

    padding:18px;

    cursor:pointer;
}

/* BUTTON */

.solsticio-submit-btn{

    height:64px;

    border:none;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #caa54e,
            #e0c46f
        );

    color:#000;

    font-size:13px;
    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;

    cursor:pointer;

    margin-top:10px;
}

/* SUCCESS */

.solsticio-success{

    max-width:1100px;

    margin:40px auto 0;

    padding:24px;

    border-radius:20px;

    background:
        rgba(34,197,94,.12);

    border:
        1px solid rgba(34,197,94,.2);

    color:#86efac;

    font-weight:700;
}

/* =========================================================
   GALLERY IN POSTS
========================================================= */

.solsticio-post-gallery{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));

    gap:20px;

    margin-top:60px;
}

/* IMAGE */

.solsticio-post-gallery img{

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:22px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:768px){

    .solsticio-password-box,
    .solsticio-blog-form{

        padding:28px;
    }

    .solsticio-password-box h2,
    .solsticio-blog-form-header h2{

        font-size:38px;
    }

    .solsticio-blog-form-wrapper{

        padding:90px 20px;
    }

}/* End custom CSS */