/* Page-specific styles for read_news.php */
/* --- Scrollbar - Blue palette --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #EFF6FF, #DBEAFE);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #60A5FA, #3B82F6, #2563EB);
    border-radius: 4px;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body)::-webkit-scrollbar-track {
    background: #0f172a;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body)::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #60A5FA, #3B82F6, #2563EB);
}

/* --- GLightbox - Blue palette --- */
.glightbox-container {
    background: rgba(15, 23, 42, .97) !important;
    backdrop-filter: blur(20px);
}

.glightbox-container .gslide-image img {
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.glightbox-container .gslide {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.glightbox-container .gslide-inner-content {
    -webkit-overflow-scrolling: touch;
}

.glightbox-container .gnext,
.glightbox-container .gprev {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, rgba(96, 165, 250, .2), rgba(59, 130, 246, .2)) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(96, 165, 250, .3) !important;
    border-radius: 50% !important;
}

.glightbox-container .gclose {
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, .2), rgba(220, 38, 38, .2)) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(239, 68, 68, .3) !important;
    border-radius: 50% !important;
}

@media (max-width: 768px) {
    .glightbox-container .gslide-image img {
        border-radius: 8px !important;
    }

    .glightbox-container .gnext,
    .glightbox-container .gprev {
        width: 44px !important;
        height: 44px !important;
    }

    .glightbox-container .gclose {
        width: 40px !important;
        height: 40px !important;
    }
}

/* --- Gallery Slide (GPU-accelerated, no flicker) --- */
.gallery-slide {
    position: absolute;
    inset: 0;
    transition: opacity .5s ease-in-out;
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* --- Hide scrollbar on mobile thumbnails --- */
@media (max-width: 768px) {
    #thumbnail-container::-webkit-scrollbar {
        display: none;
    }

    #thumbnail-container {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* --- Focus Visible (A11Y) - Blue --- */
:focus-visible {
    outline: 3px solid #3B82F6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Match read-news content width with the shared navbar container. */
.read-news-container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 576px) {
    .read-news-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* --- Article typography --- */
.news-article-body {
    color: #334155;
    font-size: 1.02rem;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.news-article-body :where(p, ul, ol, blockquote, table, figure, iframe) {
    margin-top: 1.15rem;
    margin-bottom: 1.15rem;
}

.news-article-body :where(h2, h3, h4) {
    color: #0f172a;
    line-height: 1.35;
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.news-article-body h2 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.news-article-body h3 {
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
}

.news-article-body a {
    border-bottom: 1px solid rgba(37, 99, 235, .25);
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
}

.news-article-body a:hover {
    border-bottom-color: currentColor;
    color: #1e40af;
}

.news-article-body :where(ul, ol) {
    padding-left: 1.5rem;
}

.news-article-body ul {
    list-style: disc;
}

.news-article-body ol {
    list-style: decimal;
}

.news-article-body li + li {
    margin-top: .35rem;
}

.news-article-body img {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(37, 99, 235, .14);
}

.news-article-body iframe {
    width: 100%;
    border-radius: 14px;
    background: #0f172a;
}

.news-article-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    border-radius: 12px;
}

.news-article-body :where(th, td) {
    border: 1px solid #dbeafe;
    padding: .65rem .8rem;
}

.news-article-body th {
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 700;
}

.news-article-body blockquote {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(90deg, rgba(219, 234, 254, .65), rgba(255, 255, 255, 0));
    color: #1e3a8a;
    padding: .85rem 1rem;
    border-radius: 0 12px 12px 0;
}

/* --- Dark Mode: readable article surface system --- */
:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) {
    --rn-bg: #0b1220;
    --rn-surface: #111c2e;
    --rn-surface-strong: #16243a;
    --rn-border: rgba(96, 165, 250, .22);
    --rn-border-strong: rgba(125, 211, 252, .34);
    --rn-text: #e5eefb;
    --rn-muted: #9aa9bd;
    --rn-link: #7dd3fc;
    --rn-link-hover: #bae6fd;
    background:
        radial-gradient(circle at 15% 10%, rgba(56, 189, 248, .13), transparent 34rem),
        radial-gradient(circle at 86% 18%, rgba(37, 99, 235, .12), transparent 30rem),
        linear-gradient(180deg, #0b1220 0%, #0e1728 46%, #0b1220 100%) !important;
    color: var(--rn-text);
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) main {
    background:
        linear-gradient(180deg, rgba(11, 18, 32, .96), rgba(14, 23, 40, .98)),
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, .12), transparent 28rem) !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) main :where(.text-gray-900, .text-gray-800, .text-gray-700) {
    color: var(--rn-text) !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) main :where(.text-gray-600, .text-gray-500, .text-gray-400) {
    color: var(--rn-muted) !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body {
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--rn-border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(17, 28, 46, .96), rgba(15, 23, 42, .94));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
    color: #d7e3f4;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body :where(p, li, td) {
    color: #d7e3f4 !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body :where(h2, h3, h4, strong) {
    color: #f8fafc !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body a {
    border-bottom-color: rgba(125, 211, 252, .42);
    color: var(--rn-link) !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body a:hover {
    color: var(--rn-link-hover) !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body img {
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body :where(th, td) {
    border-color: var(--rn-border);
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body th {
    background: rgba(30, 64, 175, .3);
    color: #bfdbfe;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body table {
    background: rgba(15, 23, 42, .72);
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body blockquote {
    border-left-color: #38bdf8;
    background: linear-gradient(90deg, rgba(14, 165, 233, .16), rgba(15, 23, 42, .12));
    color: #cfe8ff;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) section[aria-label="แกลเลอรี่ภาพกิจกรรม"] {
    padding: clamp(1rem, 2vw, 1.25rem);
    border: 1px solid var(--rn-border) !important;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(17, 28, 46, .92), rgba(15, 23, 42, .9));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) section[aria-label="แกลเลอรี่ภาพกิจกรรม"] .rounded-xl.overflow-hidden.shadow-xl {
    border-color: var(--rn-border) !important;
    background: rgba(15, 23, 42, .94) !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) section[aria-label="แกลเลอรี่ภาพกิจกรรม"] .bg-white {
    background-color: rgba(17, 28, 46, .96) !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) #thumbnail-container {
    scrollbar-color: rgba(96, 165, 250, .5) rgba(15, 23, 42, .7);
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .gallery-thumb {
    border-color: rgba(148, 163, 184, .28) !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .gallery-thumb[aria-selected="true"] {
    border-color: #60a5fa !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .34);
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) aside[aria-label="ข่าวล่าสุด"] {
    align-self: start;
    padding: 1rem;
    border: 1px solid var(--rn-border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(17, 28, 46, .94), rgba(15, 23, 42, .9));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) aside[aria-label="ข่าวล่าสุด"] a {
    border: 1px solid transparent;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) aside[aria-label="ข่าวล่าสุด"] a:hover {
    border-color: var(--rn-border-strong);
    background: rgba(30, 41, 59, .72) !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) aside[aria-label="ข่าวล่าสุด"] h4 {
    color: #eef6ff !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) aside[aria-label="ข่าวล่าสุด"] a:hover h4 {
    color: var(--rn-link-hover) !important;
}

@media (max-width: 640px) {
    .news-article-body {
        font-size: .98rem;
        line-height: 1.85;
    }

    :is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) .news-article-body,
    :is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) section[aria-label="แกลเลอรี่ภาพกิจกรรม"],
    :is(body.dark-mode, html.dark-mode body, html.dark body, [data-theme="dark"] body) aside[aria-label="ข่าวล่าสุด"] {
        padding: .9rem;
        border-radius: 12px;
    }
}

@media (hover: none) {
    .group:hover img,
    .gallery-thumb:hover,
    .mobile-gallery-trigger:hover {
        transform: none !important;
    }
}

/* --- Lightweight toast --- */
.read-news-toast {
    position: fixed;
    left: 50%;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 10000;
    transform: translate3d(-50%, 16px, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.read-news-toast.is-visible {
    transform: translate3d(-50%, 0, 0);
    opacity: 1;
}

.read-news-toast__body {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: calc(100vw - 2rem);
    padding: .75rem 1rem;
    border: 1px solid rgba(59, 130, 246, .28);
    border-radius: 999px;
    background: rgba(15, 23, 42, .94);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .28);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
}

.read-news-toast__icon {
    display: inline-flex;
    width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #22c55e;
    color: #fff;
    font-size: .78rem;
}

/* --- Custom Mobile Gallery Viewer --- */
#mobile-viewer {
    -webkit-tap-highlight-color: transparent;
}

#mobile-viewer.active {
    display: block;
    animation: mvFadeIn .2s ease-out;
}

#mobile-viewer.closing {
    animation: mvFadeOut .15s ease-in forwards;
    pointer-events: none;
}

/* Virtual slides: 3 panels, GPU-composited */
#mv-prev,
#mv-curr,
#mv-next {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout style paint;
}

#mv-prev {
    transform: translate3d(-100%, 0, 0);
}

#mv-curr {
    transform: translate3d(0, 0, 0);
}

#mv-next {
    transform: translate3d(100%, 0, 0);
}

#mv-prev img,
#mv-curr img,
#mv-next img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

.mv-snapping {
    transition: transform .28s cubic-bezier(.25, .46, .45, .94) !important;
}

@keyframes mvFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes mvFadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .gallery-slide {
        transition: none !important;
    }

    .animate-pulse,
    [class*="transition-transform"] {
        animation: none !important;
        transition: none !important;
    }
}