/*
* AGCC Blog Styles
* Includes specific timeline adjustments and Image Processing logic
*/

/* Timeline custom line gradient replaced by solid color */
.timeline-line {
    background: rgba(255, 85, 0, 0.3) !important;
    width: 2px !important;
}

@keyframes timelinePulse {
    0% {
        opacity: 0.4;
        filter: drop-shadow(0 0 2px rgba(255, 85, 0, 0.3));
    }

    100% {
        opacity: 0.8;
        filter: drop-shadow(0 0 10px rgba(255, 85, 0, 0.7));
    }
}

.glow-accent {
    border-color: #ff5500 !important;
    border-width: 1px !important;
    box-shadow: 0 0 15px rgba(255, 85, 0, 0.4);
    animation: circlePulse 2s ease-in-out infinite alternate;
}

/* Light mode: white ball */
.timeline-node-bg {
    background-color: #ffffff !important;
}

/* Dark mode: dark ball */
@media (prefers-color-scheme: dark) {
    .timeline-node-bg {
        background-color: #111111 !important;
    }
}

/* Also support explicit .dark class (Tailwind) */
html.dark .timeline-node-bg {
    background-color: #111111 !important;
}

@keyframes circlePulse {
    0% {
        box-shadow: 0 0 10px rgba(255, 85, 0, 0.3);
    }

    100% {
        box-shadow: 0 0 25px rgba(255, 85, 0, 0.8);
    }
}

/* SMART IMAGE EDITOR (Light/Dark mode responsive)
-------------------------------------------------- */

/* Base transition for smooth fading between modes */
.smart-image {
    transition: all 0.5s ease;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* DEFAULT: Light Mode */
.smart-image {
    filter: contrast(1.05) saturate(1.1);
    opacity: 1;
}

/* DARK MODE: Tactical, desaturated, integrated into the dark theme */
@media (prefers-color-scheme: dark) {
    .smart-image {
        filter: grayscale(25%) brightness(0.88);
        opacity: 0.95;
        mix-blend-mode: normal;
    }

    .group:hover .smart-image {
        filter: grayscale(0%) brightness(1);
        opacity: 1;
        mix-blend-mode: normal;
    }
}

/* Also support explicit .dark class (Tailwind) */
html.dark .smart-image {
    filter: grayscale(25%) brightness(0.88);
    opacity: 0.95;
    mix-blend-mode: normal;
}

html.dark .group:hover .smart-image {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    mix-blend-mode: normal;
}

/* Read More Transition Block */
#public-timeline [id^="content-"] {
    animation: fadeInDown 0.4s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =====================================================
   SHARED ARTICLE TIMELINE LAYOUT
   Used by both blog-public.html and blog-admin.html
   ===================================================== */

.admin-article {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 5rem;
    position: relative;
    width: 100%;
}

.admin-article-img,
.admin-article-txt {
    width: 100%;
    padding-left: 3.5rem;
}

.admin-article-img { order: 1; }
.admin-article-txt { order: 2; text-align: left; }

.admin-timeline-line {
    position: absolute;
    left: 1.5rem;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 0;
}

.admin-timeline-node {
    position: absolute;
    left: 1.5rem;
    top: 3rem;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    z-index: 10;
}

@media (min-width: 768px) {
    .admin-article {
        flex-direction: row;
        gap: 0;
    }
    .admin-article-img,
    .admin-article-txt {
        width: 50%;
        padding-left: 0;
    }
    .admin-article.align-left .admin-article-txt {
        order: 1;
        padding-right: 3rem;
        text-align: right;
    }
    .admin-article.align-left .admin-article-img {
        order: 2;
        padding-left: 3rem;
    }
    .admin-article.align-right .admin-article-img {
        order: 1;
        padding-right: 3rem;
    }
    .admin-article.align-right .admin-article-txt {
        order: 2;
        padding-left: 3rem;
        text-align: left;
    }
    .admin-timeline-line { left: 50%; }
    .admin-timeline-node {
        left: 50%;
        top: 50%;
        width: 3rem;
        height: 3rem;
    }
}

.admin-article-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    word-break: break-word;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .admin-article-title { font-size: 1.5rem; }
}

.admin-article-summary,
.admin-article-content {
    margin-bottom: 0.75rem;
    line-height: 1.625;
    font-size: 1rem;
}

.admin-article-btn {
    color: #f96b06;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}
.admin-article-btn:hover { opacity: 0.8; }

.admin-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-article-tag {
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-family: monospace;
    border-radius: 4px;
    border: 1px solid rgba(249, 107, 6, 0.3);
    background: rgba(249, 107, 6, 0.1);
    color: #f96b06;
}