/*
Theme Name: maxgate_glass2
Theme URI: https://maxgate.io
Description: Independent MaxGate Glass variant. On mobile, only the first title line overlaps the article cover; remaining lines extend the card below the image.
Version: 1.1.0
Author: MaxGate Team
Author URI: https://maxgate.io
Text Domain: maxgateglass2
*/

/*
  Utilities are precompiled into assets/theme-utilities.css. Keep these custom
  overrides separate so updates do not require a browser-side CSS compiler.
*/

/* WordPress Core Alignment Classes */
.alignnone {
    margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 5px 20px 20px 0;
}
a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.maxgate-line-clamp-2,
.maxgate-line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.maxgate-line-clamp-2 {
    -webkit-line-clamp: 2;
}

.maxgate-line-clamp-3 {
    -webkit-line-clamp: 3;
}

.maxgate-line-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 4;
}

/* ============================================================
   Glass theme — card reveal on load (matches dashboard motion)
   ============================================================ */
@keyframes mg-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.mg-reveal {
    animation: mg-card-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.mg-reveal-grid > * {
    animation: mg-card-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.mg-reveal-grid > *:nth-child(1)  { animation-delay: 0.05s; }
.mg-reveal-grid > *:nth-child(2)  { animation-delay: 0.10s; }
.mg-reveal-grid > *:nth-child(3)  { animation-delay: 0.15s; }
.mg-reveal-grid > *:nth-child(4)  { animation-delay: 0.20s; }
.mg-reveal-grid > *:nth-child(5)  { animation-delay: 0.25s; }
.mg-reveal-grid > *:nth-child(6)  { animation-delay: 0.30s; }
.mg-reveal-grid > *:nth-child(n+7) { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
    .mg-reveal,
    .mg-reveal-grid > * {
        animation: none !important;
    }
}

.maxgate-mobile-related-snippet {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep the cover's desktop overlay unchanged. On mobile the caption flows
   below the image, shifted up by exactly one title line. Additional title
   lines grow the card, not the overlay. No title splitting or JS measurement. */
@media (max-width: 767px) {
    .maxgate-glass2-cover {
        --cover-surface: #fff;
        --cover-title-size: 1.875rem;
        --cover-title-line: calc(var(--cover-title-size) * 1.25);
        background: var(--cover-surface);
        isolation: isolate;
    }

    .maxgate-glass2-cover .maxgate-glass2-cover-caption {
        position: relative;
        inset: auto;
        margin-top: calc(-1 * var(--cover-title-line));
        padding: 0 1.5rem 1.5rem;
        background-image: none;
    }

    .maxgate-glass2-cover-caption::before {
        content: '';
        position: absolute;
        inset: -7rem 0 0;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            transparent,
            var(--cover-surface) calc(7rem + var(--cover-title-line))
        );
    }

    .maxgate-glass2-cover-caption > div {
        position: relative;
    }

    .maxgate-glass2-cover-caption h1 {
        margin: 0;
        font-size: var(--cover-title-size);
        line-height: var(--cover-title-line);
        overflow-wrap: anywhere;
    }

    .maxgate-glass2-cover-caption .maxgate-glass2-cover-meta {
        position: absolute;
        inset: auto 0 100%;
        margin: 0 0 0.875rem;
    }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
    .maxgate-glass2-cover {
        --cover-surface: #050505;
    }
}

[data-sidebar-card][hidden] {
    display: none !important;
}

[data-sidebar-card] {
    flex-shrink: 0;
}

/* 1. Сброс всех дефолтных рамок Tailwind Typography */
.prose table,
.prose thead,
.prose tbody,
.prose tr,
.prose th,
.prose td {
    border: none !important;
}

/* 2a. Обёртка для горизонтального скролла широких таблиц */
.prose .table-scroll {
    margin: 2.5rem 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 2. Современные стили для таблиц со скругленными углами */
.prose table {
    width: max-content !important;
    max-width: none !important;
    min-width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    font-size: 0.95rem;
    line-height: 1.6;
    border: none !important;
}

/* Если таблица почему-то не обёрнута скриптом — скроллим её саму */
.prose > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: max-content !important;
    border-radius: 0.75rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 3. Шапка таблицы */
.prose table th {
    background-color: rgba(0, 0, 0, 0.03) !important;
    color: #111827 !important;
    font-weight: 600 !important;
    padding: 1rem 1.25rem !important;
    text-align: left;
    vertical-align: bottom;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 4. Ячейки с данными */
.prose table td {
    padding: 1rem 1.25rem !important;
    vertical-align: top;
    color: #374151 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 5. Убираем "внутренние" правые границы у крайнего правого столбца */
.prose table th:last-child,
.prose table td:last-child {
    border-right: none !important;
}

/* 6. Убираем "внутреннюю" нижнюю границу у самого нижнего ряда */
.prose table tr:last-child td {
    border-bottom: none !important;
}

/* 7. Подсветка строк для визуального удобства */
.prose table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

.prose table tbody tr {
    transition: background-color 0.2s ease;
}

.prose table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* 8. Темная тема (Dark mode) */
@media (prefers-color-scheme: dark) {
    .prose .table-scroll,
    .prose > table {
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .prose table th {
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .prose table td {
        color: #e5e7eb !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .prose table tbody tr:nth-child(even) {
        background-color: rgba(255, 255, 255, 0.02) !important;
    }

    .prose table tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.07) !important;
    }
}