/* Дополнительные стили поверх Tailwind */

/* Типографика для тела статьи (Tailwind Typography через CDN не подгружается,
   делаем минимум руками) */
.article-body h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}
.article-body h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.article-body h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote {
    margin-bottom: 1.1rem;
    line-height: 1.75;
}
.article-body ul,
.article-body ol {
    padding-left: 1.5rem;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.35rem; }

.article-body a {
    color: #16a34a;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.article-body a:hover { color: #22c55e; }

.dark .article-body a { color: #22c55e; }
.dark .article-body a:hover { color: #4ade80; }

.article-body strong { font-weight: 600; }

.article-body blockquote {
    border-left: 3px solid #22c55e;
    padding-left: 1rem;
    color: #475569;
    font-style: italic;
}
.dark .article-body blockquote { color: #94a3b8; }

/* Inline-код */
.article-body :not(pre) > code {
    font-family: 'JetBrains Mono', Menlo, monospace;
    font-size: 0.875em;
    padding: 0.15em 0.4em;
    border-radius: 0.25rem;
    background: #f1f5f9;
    color: #be185d;
}
.dark .article-body :not(pre) > code {
    background: #1e293b;
    color: #f472b6;
}

/* Блоки кода — codehilite */
.article-body pre,
.article-body .highlight {
    font-family: 'JetBrains Mono', Menlo, monospace;
    font-size: 0.875rem;
    line-height: 1.55;
    padding: 1rem 1.15rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    max-width: 100%;
    box-sizing: border-box;
}
.dark .article-body pre,
.dark .article-body .highlight {
    background: #0b1220;
    border-color: #1e293b;
}
.article-body pre code,
.article-body .highlight code {
    display: block;
    min-width: 0;
    width: auto;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
}

/* Обёртка для блока кода + кнопка Copy */
.article-body .code-block-wrap {
    position: relative;
}
.article-body .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: #475569;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.15s, transform 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.article-body .code-block-wrap:hover .copy-btn,
.article-body .copy-btn:focus-visible {
    opacity: 1;
    transform: translateY(0);
}
.article-body .copy-btn:hover {
    color: #16a34a;
    border-color: #22c55e;
}
.article-body .copy-btn.copied {
    color: #16a34a;
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    opacity: 1;
}

.dark .article-body .copy-btn {
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.85);
    border-color: #334155;
}
.dark .article-body .copy-btn:hover {
    color: #4ade80;
    border-color: #22c55e;
}
.dark .article-body .copy-btn.copied {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.15);
}

/* На мобильных кнопку показываем всегда */
@media (hover: none) {
    .article-body .copy-btn { opacity: 0.7; }
}

/* Таблицы */
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
.article-body th,
.article-body td {
    border: 1px solid #e2e8f0;
    padding: 0.55rem 0.85rem;
    text-align: left;
}
.article-body th {
    background: #f8fafc;
    font-weight: 600;
}
.dark .article-body th,
.dark .article-body td { border-color: #1e293b; }
.dark .article-body th { background: #0f172a; }

/* Pygments / codehilite — нейтральная подсветка, нормально в обеих темах */
.highlight .k,  .highlight .kd { color: #db2777; font-weight: 600; } /* keyword */
.highlight .s,  .highlight .s1, .highlight .s2 { color: #15803d; } /* string */
.highlight .c1, .highlight .cm, .highlight .c  { color: #64748b; font-style: italic; } /* comment */
.highlight .nf { color: #0369a1; } /* function name */
.highlight .mi, .highlight .mf, .highlight .il { color: #b45309; } /* number */
.highlight .nc { color: #1d4ed8; font-weight: 600; } /* class name */
.highlight .o  { color: #475569; } /* operator */

.dark .highlight .k,  .dark .highlight .kd { color: #f472b6; }
.dark .highlight .s,  .dark .highlight .s1, .dark .highlight .s2 { color: #86efac; }
.dark .highlight .c1, .dark .highlight .cm, .dark .highlight .c  { color: #64748b; }
.dark .highlight .nf { color: #60a5fa; }
.dark .highlight .mi, .dark .highlight .mf, .dark .highlight .il { color: #fbbf24; }
.dark .highlight .nc { color: #93c5fd; }
.dark .highlight .o  { color: #cbd5e1; }

/* Intro на главной */
.prose-intro strong { font-weight: 600; color: inherit; }
html,
body {
    overflow-x: hidden;
}

/* ============================================================
   Картинки внутри статей
   ============================================================ */
.article-body img {
    max-width: min(100%, 560px);  /* в статье компактно, не «банер» во всю ширину */
    max-height: 400px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 1.75rem auto;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* На мобильном картинка пусть будет на всю доступную ширину */
@media (max-width: 640px) {
    .article-body img {
        max-width: 100%;
        max-height: 60vh;
    }
}
.dark .article-body img {
    border-color: #1e293b;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
}
.article-body img.zoomable {
    cursor: zoom-in;
}
.article-body img.zoomable:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 12px 32px rgba(34,197,94,0.18);
}

/* подпись после картинки (italic первый абзац после img) */
.article-body img + em,
.article-body p > img + em {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

/* ============================================================
   Lightbox overlay
   ============================================================ */
.lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.92);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.lb-overlay.open {
    display: flex;
    opacity: 1;
    animation: lb-fade 0.2s ease;
}
@keyframes lb-fade { from { opacity: 0 } to { opacity: 1 } }

.lb-figure {
    margin: 0;
    width: 92vw;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.lb-image {
    width: 92vw;             /* принудительно растянуть на 92% viewport */
    height: 82vh;            /* и до 82% высоты */
    max-width: none;
    max-height: none;
    object-fit: contain;     /* пропорции сохраняются, картинка вписывается */
    border-radius: 0.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: lb-zoom 0.22s ease;
}
@keyframes lb-zoom {
    from { transform: scale(0.97); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
.lb-caption {
    color: #cbd5e1;
    font-size: 0.85rem;
    text-align: center;
    max-width: 92vw;
}

.lb-overlay button {
    position: fixed;
    z-index: 110;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s, background 0.15s, border-color 0.15s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    -webkit-tap-highlight-color: rgba(34, 197, 94, 0.35);
}
.lb-overlay button:hover,
.lb-overlay button:focus-visible {
    background: rgba(34, 197, 94, 0.85);
    border-color: #22c55e;
    color: #fff;
    transform: scale(1.05);
    outline: none;
}
.lb-close { top: 1rem;  right: 1rem;  font-size: 1.75rem; width: 3rem; height: 3rem; }
.lb-prev  { left: 1rem;  top: 50%;     transform: translateY(-50%); font-size: 2.5rem; width: 3rem; height: 3rem; }
.lb-next  { right: 1rem; top: 50%;     transform: translateY(-50%); font-size: 2.5rem; width: 3rem; height: 3rem; }
.lb-prev:hover, .lb-prev:focus-visible { transform: translateY(-50%) scale(1.05); }
.lb-next:hover, .lb-next:focus-visible { transform: translateY(-50%) scale(1.05); }

/* Мобильный — кнопки крупнее, картинка чуть меньше */
@media (max-width: 640px) {
    .lb-close { width: 3.25rem; height: 3.25rem; font-size: 1.85rem; top: 0.75rem; right: 0.75rem; }
    .lb-prev  { width: 3rem;    height: 3rem;    font-size: 2.25rem; left: 0.5rem; }
    .lb-next  { width: 3rem;    height: 3rem;    font-size: 2.25rem; right: 0.5rem; }
    .lb-image { width: 96vw; height: 70vh; }
}

/* ============================================================
   Тонкие анимации интерфейса
   ============================================================ */

main { animation: page-fade 0.4s ease; }
@keyframes page-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

section a[class*="rounded-lg"][class*="border"] {
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
section a[class*="rounded-lg"][class*="border"]:hover {
    transform: translateY(-2px);
}

header a[href="/"] span.bg-accent {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}