/* Стили для фронтенда плагина Custom Gallery */

/* Hike Card Component */
.cg-hike-card-component {
    display: block;
    background: #fff;
    border-radius: 25px;
    overflow: visible;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
    padding: 15px;
    padding-bottom: 5px;
}

.cg-hike-card-component:hover {
    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.2);
}

.cg-hike-card-image {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 15px;
    background-color: #E9E9E9;
}

.cg-hike-card-image-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    transition: transform 0.35s ease;
}

.cg-hike-card-component:hover .cg-hike-card-image-inner {
    transform: scale(1.08);
}

/* Shimmer при загрузке картинки в карточке похода (цвет фона без картинки #E9E9E9) */
.cg-hike-card-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #E9E9E9 5%, #d4d4d4 25%, #E9E9E9 35%);
    background-size: 1000px 100%;
    animation: cg-shimmer 3s infinite;
    transition: opacity 0.35s ease;
    z-index: 1;
    border-radius: 15px;
}
.cg-hike-card-component.cg-hike-card-loaded .cg-hike-card-shimmer {
    opacity: 0;
    pointer-events: none;
}
[data-theme="dark"] .cg-hike-card-shimmer {
    background: linear-gradient(to right, #1a1d23 5%, #252830 25%, #1a1d23 35%);
    background-size: 1000px 100%;
}

.cg-no-image-placeholder {
    font-size: 80px;
    opacity: 0.3;
}

.cg-hike-card-number {
    position: absolute;
    top: 20px;
    left: 10px;
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 36px;
    font-weight: 700;
    padding: 10px 20px;
    line-height: 100%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    text-transform: capitalize;
}


.cg-hike-card-content {
    padding: 20px 10px 10px;
    background: #fff;
}

.cg-hike-card-title {
    font-family: 'Onest', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 15px;
    color: #2c3e50;
    text-align: center;
    line-height: 24px;
}

.cg-hike-card-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    border-top: 1px solid #CFCFCF;
    padding-top: 12px;
}

.cg-hike-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cg-hike-stat .inside {
    font-weight: 400;
    opacity: 0.8;
    font-size: 16px;
}

.cg-hike-card-stats .cg-stat-icon {
    width: 22px;
    height: 22px;
    color: #3498db;
    flex-shrink: 0;
}

.cg-hike-card-stats .cg-stat-distance .cg-stat-icon {
    color: #2196f3;
}

.cg-hike-card-stats .cg-stat-ascent .cg-stat-icon {
    color: #e74c3c;
}

.cg-hike-card-stats .cg-stat-descent .cg-stat-icon {
    color: #27ae60;
}

.cg-hike-stat span {
    font-family: 'Onest', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #222;
    line-height: 100%;
    text-align: center;
}

/* Archive Page Styles */
.cg-archive-page {
    padding: 0px 0;
    background: #f8f9fa;
    min-height: 100vh;
    transition: background 0.3s ease;
}

.cg-archive-header {
    text-align: center;
    margin-bottom: 30px;
}

.cg-archive-title {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #2c3e50;
}

.cg-archive-subtitle {
    font-size: 18px;
    color: #7f8c8d;
    margin: 0;
    padding-bottom: 20px;
}

.cg-hike-card-component.cg-hike-card-hidden {
    display: none !important;
}

.cg-hikes-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

/* Походы и Групповые: >=1100 — 3 колонки, <1100 — 2, до 780 — 1 */
.cg-archive-page-hikes .cg-hikes-archive-grid,
.cg-archive-page-people .cg-hikes-archive-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1099px) {
    .cg-archive-page-hikes .cg-hikes-archive-grid,
    .cg-archive-page-people .cg-hikes-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 780px) {
    .cg-archive-page-hikes .cg-hikes-archive-grid,
    .cg-archive-page-people .cg-hikes-archive-grid {
        grid-template-columns: 1fr;
    }
}

.cg-no-hikes {
    text-align: center;
    font-size: 18px;
    color: #7f8c8d;
    padding: 60px 20px;
    grid-column: 1 / -1;
}

.cg-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.cg-pagination .page-numbers {
    display: inline-block;
    padding: 12px 20px;
    background: #fff;
    color: #2c3e50;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cg-pagination .page-numbers:hover {
    background: #3498db;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.cg-pagination .page-numbers.current {
    background: #3498db;
    color: #fff;
}

.cg-pagination .page-numbers.dots {
    background: transparent;
    box-shadow: none;
}

@media (max-width: 1024px) {
    .cg-hikes-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cg-archive-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .cg-hikes-archive-grid {
        grid-template-columns: 1fr;
    }

    .cg-archive-title {
        font-size: 32px;
    }
}

/* Gallery Photos Grid */
.cg-gallery-photos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.cg-gallery-photo-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: block;
}

.cg-gallery-photo-item:hover {
    transform: scale(1.05);
    z-index: 10;
}

.cg-gallery-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cg-gallery-photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    padding: 20px 15px 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cg-gallery-photo-item:hover .cg-gallery-photo-overlay {
    opacity: 1;
}

.cg-gallery-photo-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .cg-gallery-photos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .cg-gallery-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cg-gallery-container {
    margin: 20px 0;
}

.cg-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.cg-gallery-grid.cg-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cg-gallery-grid.cg-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cg-gallery-grid.cg-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .cg-gallery-grid.cg-columns-2,
    .cg-gallery-grid.cg-columns-3,
    .cg-gallery-grid.cg-columns-4 {
        grid-template-columns: 1fr;
    }
}

.cg-gallery-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cg-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.cg-gallery-item-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #f5f5f5;
}

.cg-gallery-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.cg-gallery-item:hover .cg-gallery-item-image img {
    transform: scale(1.1);
}

.cg-gallery-item-content {
    padding: 15px;
}

.cg-gallery-item-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
}

.cg-gallery-item-title a {
    color: #333;
    text-decoration: none;
}

.cg-gallery-item-title a:hover {
    color: #0073aa;
}

.cg-gallery-item-description {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.cg-gallery-item-meta {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cg-gallery-item-meta span {
    display: block;
}

/* Бейджи тегов */
.cg-gallery-item-badges {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cg-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #f0f0f0;
    color: #666;
    text-decoration: none;
    border-radius: 3px;
    font-size: 12px;
    transition: background 0.2s ease;
}

.cg-gallery-tag:hover {
    background: #0073aa;
    padding: 20px;
}

.cg-single-gallery h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.cg-single-gallery h3 {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.cg-single-featured-image {
    margin: 20px 0;
}

.cg-single-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.cg-single-description {
    margin: 20px 0;
    line-height: 1.8;
    color: #333;
}

.cg-single-images {
    margin: 30px 0;
}

.cg-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.cg-image-link {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background: #f5f5f5;
}

.cg-image-link::after {
    content: '🔍';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cg-image-link:hover::after {
    opacity: 0.8;
}

.cg-image-link img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cg-image-link:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

.cg-single-info {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.cg-single-info h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.cg-single-badges {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cg-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.cg-info-grid p {
    margin: 0;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
    border-left: 3px solid #0073aa;
}

.cg-single-tags {
    margin: 20px 0;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.cg-single-tags strong {
    margin-right: 10px;
}

/* Участники в карточке галереи */
.cg-gallery-item-participants {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
}

.cg-gallery-item-participants strong {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

.cg-participant-link {
    display: inline-block;
    padding: 3px 10px;
    margin: 3px 3px 3px 0;
    background: #e8f4f8;
    color: #0073aa;
    text-decoration: none;
    border-radius: 3px;
    font-size: 12px;
    transition: background 0.2s ease;
}

.cg-participant-link:hover {
    background: #0073aa;
    color: #fff;
}

/* Треки в карточке галереи */
.cg-single-tracks {
    margin: 40px 0;
    padding-top: 30px;
    border-top: 2px solid #e0e0e0;
}

.cg-tracks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.cg-track-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cg-track-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.cg-track-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.cg-track-photo {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f5f5f5;
}

.cg-track-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cg-track-card:hover .cg-track-photo img {
    transform: scale(1.1);
}

.cg-track-info {
    padding: 15px;
}

.cg-track-info h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

.cg-track-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cg-track-stat {
    display: inline-block;
    font-size: 13px;
    color: #666;
    padding: 4px 8px;
    background: #f5f5f5;
    border-radius: 4px;
}

/* Страница участника */
.cg-single-participant {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.cg-single-participant .entry-header {
    margin-bottom: 30px;
}

.cg-single-participant .entry-title {
    font-size: 36px;
    margin-bottom: 10px;
}

.cg-participant-role-title {
    font-size: 20px;
    color: #0073aa;
    margin: 0;
}

.cg-participant-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}

@media (max-width: 768px) {
    .cg-participant-content {
        grid-template-columns: 1fr;
    }
}

.cg-participant-featured-photo {
    grid-column: 1;
    grid-row: 1 / 3;
}

.cg-participant-featured-photo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.cg-participant-description {
    grid-column: 2;
    line-height: 1.8;
    color: #333;
}

.cg-participant-contacts {
    grid-column: 2;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

.cg-participant-contacts h3 {
    margin-top: 0;
    font-size: 20px;
}

.cg-participant-contacts p {
    margin: 10px 0;
}

.cg-participant-contacts a {
    color: #0073aa;
    text-decoration: none;
}

.cg-participant-contacts a:hover {
    text-decoration: underline;
}

.cg-participant-galleries {
    grid-column: 1 / -1;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e0e0e0;
}

.cg-participant-galleries h3 {
    font-size: 28px;
    margin-bottom: 20px;
}

.cg-participant-galleries .cg-gallery-item-title {
    font-size: 16px;
}

/* Галерея фотографий участника */
.cg-participant-photos-gallery {
    grid-column: 1 / -1;
    margin: 30px 0;
}

.cg-participant-photos-gallery h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.cg-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.cg-photo-link {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background: #f5f5f5;
}

.cg-photo-link::after {
    content: '🔍';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cg-photo-link:hover::after {
    opacity: 0.8;
}

.cg-photo-link img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cg-photo-link:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* ТОП-10 рейтинг */
.cg-top10-container {
    margin: 40px 0;
}

.cg-top10-title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.cg-top10-grid {
    display: grid;
    gap: 20px;
}

/* Пороги по расстоянию и участникам: 3 блока по 2 в ряд, равная высота столбцов */
.cg-thresholds-section {
    margin-top: 0;
}
.cg-thresholds-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
}
.cg-threshold-block {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}
.cg-threshold-block .cg-chart-caption {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}
.cg-threshold-list {
    margin: 0;
    padding-left: 20px;
    flex: 1;
}
.cg-threshold-list li {
    margin-bottom: 6px;
    line-height: 1.4;
}
.cg-threshold-bins {
    margin: 0;
    flex: 1;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .cg-thresholds-grid {
        grid-template-columns: 1fr;
    }
}

.cg-top10-item {
    display: grid;
    grid-template-columns: auto 1fr 2fr;
    gap: 20px;
    align-items: start;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cg-top10-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.cg-top10-position-1 {
    border-color: #ffd700;
    background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
}

.cg-top10-position-2 {
    border-color: #c0c0c0;
}

.cg-top10-position-3 {
    border-color: #cd7f32;
}

.cg-top10-number {
    font-size: 48px;
    font-weight: 900;
    color: #0073aa;
    line-height: 1;
    min-width: 60px;
    text-align: center;
}

.cg-top10-position-1 .cg-top10-number {
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.cg-top10-position-2 .cg-top10-number {
    color: #c0c0c0;
}

.cg-top10-position-3 .cg-top10-number {
    color: #cd7f32;
}

.cg-top10-image {
    width: 200px;
    height: 150px;
    overflow: hidden;
    border-radius: 8px;
}

.cg-top10-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cg-top10-item:hover .cg-top10-image img {
    transform: scale(1.1);
}

.cg-top10-content {
    flex: 1;
}

.cg-top10-item-title {
    margin: 0 0 10px 0;
    font-size: 24px;
}

.cg-top10-item-title a {
    color: #333;
    text-decoration: none;
}

.cg-top10-item-title a:hover {
    color: #0073aa;
}

.cg-top10-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 10px 0;
    font-size: 14px;
    color: #666;
}

.cg-top10-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

/* Адаптивность для ТОП-10 */
@media (max-width: 768px) {
    .cg-top10-item {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .cg-top10-image {
        grid-column: 1 / -1;
        width: 100%;
        height: 200px;
    }

    .cg-top10-number {
        font-size: 36px;
        min-width: 50px;
    }
}

/* Блок статистики */
.cg-stats-container {
    border-radius: 16px;
}

.cg-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cg-stat-item {
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    padding: 22px 18px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cg-stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Обёртка иконки на главной: только размер, без фона (один слой фона — у .cg-stat-icon.cg-icon) */
.cg-stats-container .cg-stat-item > .cg-stat-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none !important;
}

/* Сам блок с фоном и иконка внутри */
.cg-stats-container .cg-stat-icon.cg-icon {
    width: 55px;
    height: 55px;
    border-radius: 12px;
}

.cg-stats-container .cg-stat-icon.cg-icon svg {
    width: 36px;
    height: 36px;
}

/* Цвета только у внутреннего блока (.cg-icon), чтобы не было двойного фона */
.cg-stat-hikes .cg-stat-icon.cg-icon {
    background: #e8f5e9;
    color: #4caf50;
}

.cg-stat-participants .cg-stat-icon.cg-icon {
    background: #f3e5f5;
    color: #9c27b0;
}

.cg-stat-distance .cg-stat-icon.cg-icon {
    background: #e3f2fd;
    color: #2196f3;
}

.cg-stat-ascent .cg-stat-icon.cg-icon {
    background: #ffebee;
    color: #e53935;
}

.cg-hike-card-content .cg-stat-distance .cg-stat-icon {
    background-color: transparent;
    color: #2196f3;
}

.cg-stats-container .cg-stat-distance .cg-stat-icon.cg-icon {
    background: #e3f2fd;
    color: #2196f3;
}

.cg-stats-container .cg-stat-distance .cg-stat-icon.cg-icon svg {
    color: #2196f3;
    fill: currentColor;
    stroke: currentColor;
}

.cg-hike-card-content .cg-stat-icon {
    width: 19px;
    height: 19px;
}

.cg-stat-tracks .cg-stat-icon.cg-icon {
    background: #e3f2fd;
    color: #2196f3;
}

.cg-stat-content {
    flex: 1;
}

.cg-stat-label {
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cg-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

/* Компактный стиль статистики */
.cg-stats-compact .cg-stat-item {
    padding: 15px;
}

.cg-stats-compact .cg-stat-icon {
    width: 50px;
    height: 50px;
}

.cg-stats-compact .cg-stat-icon svg {
    width: 30px;
    height: 30px;
}

.cg-stats-compact .cg-stat-value {
    font-size: 28px;
}

.cg-stats-compact .cg-stat-label {
    font-size: 12px;
}

/* Адаптивность для статистики */
@media (max-width: 1024px) {
    .cg-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .cg-stat-item {
        padding: 22px 18px;
        gap: 13px;
    }

    .cg-stats-container .cg-stat-icon {
        width: 55px;
        height: 55px;
    }

    .cg-stats-container .cg-stat-icon svg {
        width: 36px;
        height: 36px;
    }

    .cg-stat-value {
        font-size: 32px;
    }

    .cg-stat-label {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .cg-stats-grid {
        gap: 16px;
    }

    .cg-stat-item {
        padding: 20px 16px;
        gap: 12px;
    }

    .cg-stats-container .cg-stat-icon {
        width: 50px;
        height: 50px;
    }

    .cg-stats-container .cg-stat-icon svg {
        width: 32px;
        height: 32px;
    }

    .cg-stat-value {
        font-size: 28px;
    }

    .cg-stat-label {
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .cg-stats-grid {
        gap: 14px;
    }

    .cg-stats-container {
        padding: 0;
    }

    .cg-stat-item {
        padding: 18px 14px;
        gap: 10px;
    }

    .cg-stats-container .cg-stat-icon {
        width: 45px;
        height: 45px;
    }

    .cg-stats-container .cg-stat-icon svg {
        width: 28px;
        height: 28px;
    }

    .cg-stat-value {
        font-size: 24px;
    }

    .cg-stat-label {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .cg-stats-grid {
        gap: 12px;
    }

    .cg-stat-item {
        padding: 16px 12px;
        gap: 8px;
    }

    .cg-stats-container .cg-stat-icon {
        width: 40px;
        height: 40px;
    }

    .cg-stats-container .cg-stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .cg-stat-value {
        font-size: 22px;
    }

    .cg-stat-label {
        font-size: 10px;
    }
}

/* Стили для главной страницы */
.cg-home-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
}

/* HERO: фикс высота 500px, ширина 100% */
.cg-hero-section{
  position: relative;
  width: 100%;
  height: 60vh;        /* как просил */
    min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Слайдер занимает весь блок */
.cg-hero-slider{
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Слайды — как фон, перекрывают друг друга */
.cg-hero-slide{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  transform: scale(1.03);
  transition: opacity 900ms ease, transform 1500ms ease;
  will-change: opacity, transform;
}

/* Активный слайд — показываем только когда картинка загрузилась */
.cg-hero-slide.active{
  opacity: 0;
  transform: scale(1.03);
}
.cg-hero-slide.active.cg-hero-loaded{
  opacity: 1;
  transform: scale(1);
}

/* Сингл: картинка скрыта до загрузки */
.cg-single-hero-image {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.cg-single-hero-image.cg-hero-loaded {
    opacity: 1;
}

/* Overlay с loader — поверх контента (выше логотипа) */
.cg-hero-loader-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.cg-hero-section .cg-hero-loader-overlay.cg-hero-loaded-hidden,
.cg-single-hero .cg-hero-loader-overlay.cg-hero-loaded-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Маленький circle loader — цвета для светлой/тёмной темы */
.cg-hero-loader {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #888;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}
[data-theme="dark"] .cg-hero-loader {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: #888;
}

/* Оверлей поверх слайдов */
.cg-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.4) 100%)
}

/* Контент сверху всего */
.cg-hero-content{
    width: 100%;
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;

  /* чтобы всё по центру */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Лого по центру */
.cg-hero-logo{
  display: flex;
  justify-content: center;
  align-items: center;
}

.single.cg-hero-logo {
    align-self: flex-start;
    margin-top: 25px;
    z-index: 1000;
    position: relative;
}

.cg-logo-image{
    width: 200px;
    height: 200px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Заголовок/подзаголовок */
.cg-hero-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 20px 0;
}
.cg-hero-title{
  font-size: 34px;
  font-weight: 900;
    line-height: 40px;
  margin: 0;
  text-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.cg-hero-subtitle{
  font-size: 22px;
  letter-spacing: 1.3px;
  margin: 0;
  opacity: 0.95;
  text-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

.cg-hero-adventure-button{
  margin-top: 10px !important;
  white-space: nowrap;
  transition: none;
    background-color: transparent !important;
    color: #fff !important;
    border-color: rgba(255,255,255, 0.6) !important;
    padding: 10px 20px !important;
}

.cg-hero-adventure-button:hover {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #fff !important;
}

.cg-hero-adventure-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
}

.cg-hero-adventure-wrap .cg-hero-adventure-button{
  margin-top: 0;
}

.cg-hero-adventure-cat-wrap{
  width: 65px;
  height: 65px;
  display: block;
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 10px;
  transform: translateY(-50%) translateX(-5px);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 5;
  border-radius: 999px;
  overflow: hidden;
}

.cg-hero-adventure-cat{
  width: 39px;
  height: 66px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-size: 234px 66px;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: auto;
}

.cg-hero-adventure-wrap:hover .cg-hero-adventure-cat-wrap,
.cg-hero-adventure-wrap:focus-within .cg-hero-adventure-cat-wrap{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.cg-hero-adventure-wrap:hover .cg-hero-adventure-cat,
.cg-hero-adventure-wrap:focus-within .cg-hero-adventure-cat{
  animation: cg-cat-walk 1s steps(6) infinite;
}

@keyframes cg-cat-walk{
  from { background-position: 0 0; }
  to { background-position: -234px 0; }
}

/* Stats Section */
.cg-stats-section {
    padding: 20px 0;
    background: #f5f7fa;
}

.cg-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Top 10 Hikes Section */
.cg-top10-section {
    padding: 40px 0;
    background: #fff;
}

.cg-top10-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cg-top10-item {
    display: grid;
    grid-template-columns: auto 300px 1fr;
    gap: 25px;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cg-top10-item:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.cg-top10-number {
    font-size: 48px;
    font-weight: 700;
    color: #3498db;
    min-width: 70px;
    text-align: center;
}

.cg-top10-image {
    width: 300px;
    height: 200px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

.cg-top10-content {
    flex: 1;
}

.cg-top10-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
}

.cg-top10-title a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cg-top10-title a:hover {
    color: #3498db;
}

.cg-top10-meta {
    font-size: 14px;
    color: #95a5a6;
    margin: 0 0 5px;
}

.cg-top10-date {
    font-size: 14px;
    color: #7f8c8d;
    margin: 0 0 12px;
}

.cg-top10-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Photos Gallery Section */
.cg-photos-section {
    padding: 40px 0;
    background: #fff;
}

.cg-photos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.cg-photo-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.cg-photo-item:hover {
    transform: scale(1.05);
    z-index: 1;
}

.cg-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cg-photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cg-photo-item:hover .cg-photo-overlay {
    opacity: 1;
}

.cg-photo-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

/* About Section */
.cg-about-section {
    padding: 40px 0;
    background: #fff;
    color: #fff;
}

.cg-about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cg-about-title {
    color: #666
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 40px;
}

.cg-highlight {
    color: #222;
}

.cg-about-text {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: left;
}

.cg-about-text p {
    margin-bottom: 20px;
}

.cg-about-cta {
    margin-top: 30px;
}

.cg-btn,
.cg-button,
button.cg-btn,
button.cg-button {
    display: inline-block;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.cg-btn-primary {
    background: #fff;
    color: #667eea;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cg-btn-primary:hover {
    background: #ffd700;
    color: #333;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Адаптивность для главной страницы */
@media (max-width: 1024px) {
    .cg-photos-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cg-hero-title {
        font-size: 30px;
        line-height: 32px;
    }

    .cg-hero-subtitle {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .cg-hero-logo {
        margin-top: 20px;
    }
    .cg-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cg-hero-section {
        height: 50vh;
        min-height: 400px;
    }

    .cg-hero-title {
        font-size: 26px;
        line-height: 26px;
    }

    .cg-hero-subtitle {
        font-size: 18px;
    }

    .cg-logo-image {
        width: 140px;
        height: 140px;
    }

    .cg-about-title {
        font-size: 32px;
    }

    .cg-about-text {
        font-size: 16px;
    }

    .cg-photos-section,
    .cg-about-section {
        padding: 40px 0;
    }
}

@media (max-width: 480px) {
    .cg-photos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Section Titles */
.cg-section-title {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #2c3e50;
}

.cg-section-subtitle {
    text-align: center;
    font-size: 18px;
    color: #7f8c8d;
    margin: 0;
    padding-bottom: 30px;
}

.cg-section-cta {
    text-align: center;
    margin-top: 40px;
}
[data-theme="dark"] .cg-section-cta a:hover {
    color: #121418;
}

.cg-footer-menu {
    padding: 24px 0;
    border-top: 1px solid var(--border-color);
}

.cg-front-page .cg-footer-menu,
.cg-front-page-wrap .cg-footer-menu,
.front-page .cg-footer-menu {
    margin-top: 0;
}

.cg-footer-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    justify-content: center;
}

.cg-footer-menu-list a {
    color: var(--nav-text);
    text-decoration: none;
    font-weight: 600;
}

.cg-footer-menu-list a:hover {
    color: var(--nav-text);
    text-decoration: underline;
}

.cg-btn-secondary,
.cg-button-secondary,
button.cg-btn-secondary,
button.cg-button-secondary {
    color: #222;
    border: 1px solid #222;
}

.cg-btn-secondary:hover,
.cg-button-secondary:hover,
button.cg-btn-secondary:hover,
button.cg-button-secondary:hover {
    background: #222;
    color: #fff;
    border: 1px solid transparent;
}

/* Top Tracks Section */
.cg-top-tracks-section {
    padding: 40px 0;
    background: #fff;
}

.cg-top-tracks-grid {
  --card: 230px;
  --gap: 10px;

  display: grid;
  gap: var(--gap);

  grid-template-columns: repeat(5, var(--card));
  justify-content: center;
    align-items: center;

  /* ключ */
  width: fit-content;
  max-width: 100%;

  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;

}

/* по умолчанию */
.cg-top-tracks-grid > * {
  --tx: 0px;           /* текущий сдвиг по X */
  transform: translateX(var(--tx)) scale(1);
}

/* hover меняет только scale */
.cg-top-tracks-grid > *:hover {
  transform: translateX(var(--tx)) scale(1.05);
  z-index: 1000;
}

/* 4 колонки */
@media (max-width: 1240px) {
  .cg-top-tracks-grid { grid-template-columns: repeat(4, var(--card)); }
  .cg-top-tracks-grid > :nth-last-child(1) {
    --tx: 50%;
    grid-column: 2;
  }
}

/* 3 колонки */
@media (max-width: 1000px) {
  .cg-top-tracks-grid { grid-template-columns: repeat(3, var(--card)); }
  .cg-top-tracks-grid > :nth-last-child(1),
  .cg-top-tracks-grid > :nth-last-child(2) {
    --tx: 50%;
  }
}

/* 2 колонки */
@media (max-width: 760px) {
  .cg-top-tracks-grid { grid-template-columns: repeat(2, var(--card)); }
  .cg-top-tracks-grid > :nth-last-child(2) { --tx: 0%; }
  .cg-top-tracks-grid > :nth-last-child(1) { grid-column: 1; }
}

/* 1 колонка */
@media (max-width: 520px) {
  .cg-top-tracks-grid { grid-template-columns: repeat(1, var(--card)); }
  .cg-top-tracks-grid > :nth-last-child(1) { --tx: 0%; }
}


/* Карточка должна быть фиксированной ширины */
.cg-hike-compact-card {
  width: var(--card);
  max-width: var(--card);
  box-sizing: border-box;

  position: relative;

  background: #fff;
  border-radius: 25px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: inherit;
    min-width: 220px;
}

/* каждый следующий ниже */
.cg-hike-compact-card:nth-child(1) { z-index: 100; }
.cg-hike-compact-card:nth-child(2) { z-index: 99; }
.cg-hike-compact-card:nth-child(3) { z-index: 98; }
.cg-hike-compact-card:nth-child(4) { z-index: 97; }
.cg-hike-compact-card:nth-child(5) { z-index: 96; }

.cg-hike-compact-photo {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 15px 15px 7px;
    border-radius: 15px;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0;
}

.cg-hike-compact-photo-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    transition: transform 0.35s ease;
}

.cg-hike-compact-card:hover .cg-hike-compact-photo-inner {
    transform: scale(1.08);
}

/* Shimmer compact-карточки (цвет фона #E9E9E9) */
.cg-hike-compact-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #E9E9E9 5%, #d4d4d4 25%, #E9E9E9 35%);
    background-size: 1000px 100%;
    animation: cg-shimmer 3s infinite;
    transition: opacity 0.35s ease;
    z-index: 1;
    border-radius: 15px;
}
.cg-hike-compact-card.cg-hike-compact-loaded .cg-hike-compact-shimmer {
    opacity: 0;
    pointer-events: none;
}
[data-theme="dark"] .cg-hike-compact-shimmer {
    background: linear-gradient(to right, #1a1d23 5%, #252830 25%, #1a1d23 35%);
    background-size: 1000px 100%;
}

.cg-hike-compact-no-photo {
    background: #E9E9E9;
}

.cg-hike-compact-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 200px;
    padding-bottom: 10px;
}

.cg-hike-compact-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #2c3e50;
    line-height: 1.2;
    padding-bottom: 2px;
}

.cg-hike-compact-number {
    font-size: 14px;
    color: #3498db;
    margin: 0;
    font-weight: 600;
}

.cg-hike-compact-date {
    font-size: 13px;
    color: #7f8c8d;
    margin: 0;
    padding-top: 5px;
    border-top: 1px solid #CFCFCF;
    width: 100%;
}

/* Hikes Section */
.cg-hikes-section {
    padding: 40px 0;
    background: #f8f9fa;
}

.cg-hikes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.cg-hike-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.cg-hike-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.cg-hike-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.cg-hike-number {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    color: #2c3e50;
    font-size: 24px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.cg-hike-badges {
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
}

.cg-hike-info {
    padding: 20px;
}

.cg-hike-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #2c3e50;
}

.cg-hike-date {
    font-size: 14px;
    color: #7f8c8d;
    margin: 0 0 12px;
}

.cg-hike-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cg-stat-badge {
    background: #f1f3f5;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #495057;
    font-weight: 600;
}

/* Team Section */
.cg-team-section {
    padding: 40px 0;
    background: #fff;
}

.cg-team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}

.cg-team-member {
    position: relative;
    text-align: center;
}

.cg-team-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 15px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.cg-team-member:hover .cg-team-avatar {
    transform: scale(1.05);
}

.cg-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cg-team-placeholder {
    width: 100%;
    height: 100%;
    background: #E9E9E9;
}

.cg-team-name {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 5px;
    color: #2c3e50;
}

.cg-team-role {
    font-size: 14px;
    color: #7f8c8d;
    margin: 0;
}

/* Participants Section */
.cg-participants-section {
    padding-bottom: 60px;
    display: flex;
    justify-content: center;
}

.cg-participants-section .cg-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cg-participants-grid {
    max-width: 1100px;
  --step: -8px; /* шаг волны */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 30px;
  justify-items: center;
}

.cg-participants-grid > * {
  position: relative;
  z-index: 1;
  transform: translateY(0);
}

/* волна: -2 -1 0 -1 -2 */
.cg-participants-grid > *:nth-child(5n + 1) { transform: translateY(calc(var(--step) * -2)); z-index: 2; }
.cg-participants-grid > *:nth-child(5n + 2) { transform: translateY(calc(var(--step) * -1)); z-index: 3; }
.cg-participants-grid > *:nth-child(5n + 3) { transform: translateY(0);                     z-index: 4; }
.cg-participants-grid > *:nth-child(5n + 4) { transform: translateY(calc(var(--step) * -1)); z-index: 3; }
.cg-participants-grid > *:nth-child(5n + 5) { transform: translateY(calc(var(--step) * -2)); z-index: 2; }


/* <= 900px: отключаем оверлап, обычный грид 3 колонки */
@media (max-width: 1100px) {
  .cg-participants-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 20px;
    column-gap: 14px;
  }

  .cg-participants-grid > * {
    transform: none !important;
    z-index: auto !important;
  }
}

/* <= 640px: обычный грид 2 колонки */
@media (max-width: 735px) {
  .cg-participants-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* <= 420px: 1 колонка и по центру */
@media (max-width: 420px) {
  .cg-participants-grid {
    grid-template-columns: 1fr;
    justify-items: center;   /* центрирует карточки внутри ячеек */
    justify-content: center; /* центрирует саму сетку (на всякий) */
  }
}

@media (max-width: 1100px) {
  .cg-participants-grid > * {
    order: 10; /* все по умолчанию дальше */
  }

  .cg-participants-grid > *:nth-child(1) { order: 2; } /* станет 3-м */
  .cg-participants-grid > *:nth-child(2) { order: 1; } /* останется 2-м */
  .cg-participants-grid > *:nth-child(3) { order: 0; } /* станет 1-м */
}

.cg-participant-card {
    position: relative;
    background: #fff;
    width: 230px;
    border-top-left-radius: 64px;
    border-top-right-radius: 64px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    padding: 0px;
    padding-bottom: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.cg-participant-card:hover {
    transform: scale(1.05);
    z-index: 1000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.cg-participant-photo {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 15px 0 15px 0;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    overflow: hidden;
    background: #f0f0f0;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.cg-participant-hikes-count {
    position: absolute;
    bottom: 11px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    text-align: center;
}

.cg-participant-no-photo {
    background: #E9E9E9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cg-participant-card-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 7px;
    color: #2c3e50;
    line-height: 1.2;
}

.cg-participant-card-role {
    font-size: 14px;
    color: #7f8c8d;
    margin: 0;
    line-height: 1.3;
    width: 200px;
    border-top: 1px solid #CFCFCF;
    padding-top: 7px;
}

/* ============================================
   COMPACT PARTICIPANT CARD - Компактная версия для внутренних страниц
   ============================================ */

.cg-participant-card-compact {
    position: relative;
    width: 130px;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    padding-bottom: 10px;
}

/* Тултип для карточки Олега — показывается при ховере */
.cg-participant-tooltip {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 6px 12px;
    background: #222;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1001;
}
.cg-participant-card:hover .cg-participant-tooltip,
.cg-participant-card-compact:hover .cg-participant-tooltip,
.cg-team-member:hover .cg-participant-tooltip {
    opacity: 1;
    visibility: visible;
}

.cg-participant-card-compact .cg-participant-photo {
    width: 108px;
    height: 108px;
    margin: 8px 0 8px 0;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}

.cg-participant-card-compact .cg-participant-card-name {
    font-size: 12px;
    margin: 0 0 3px;
}

.cg-participant-card-compact .cg-participant-card-role {
    font-size: 9px;
    width: 108px;
    padding-top: 3px;
}

.cg-participant-card-compact:hover {
    transform: scale(1.03);
}

/* Адаптивность для компактных карточек */

@media (max-width: 480px) {
    .cg-single-stats-cards > * {
        width: calc(50% - 5px);
    }
}

/* Gallery Preview Section */
.cg-gallery-preview-section {
    padding: 60px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    max-width: 1200px;
    align-self: center;
}

.cg-gallery-preview-grid {
    align-self: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px);
    gap: 0;
    justify-content: center;
    max-width: 100%;
}

.cg-gallery-preview-header {
    width: 300px;
    height: 300px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
}

.cg-gallery-preview-title-main {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #2c3e50;
    line-height: 1.2;
}

.cg-gallery-preview-subtitle {
    font-size: 16px;
    color: #7f8c8d;
    margin: 0;
    line-height: 1.5;
}

.cg-gallery-preview-item {
    position: relative;
    display: block;
    overflow: hidden;
    width: 300px;
    height: 300px;
}

.cg-gallery-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Shimmer галереи на главной (цвет placeholder #e8e8e8) */
.cg-gallery-preview-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #e8e8e8 5%, #d0d0d0 25%, #e8e8e8 35%);
    background-size: 1000px 100%;
    animation: cg-shimmer 3s infinite;
    transition: opacity 0.35s ease;
    z-index: 1;
}
.cg-gallery-preview-item.cg-gallery-preview-loaded .cg-gallery-preview-shimmer {
    opacity: 0;
    pointer-events: none;
}
[data-theme="dark"] .cg-gallery-preview-shimmer {
    background: linear-gradient(to right, #2d3139 5%, #3a3d44 25%, #2d3139 35%);
    background-size: 1000px 100%;
}

.cg-gallery-preview-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
    display: block;
}

.cg-gallery-preview-item:hover img {
    transform: scale(1.1);
}

.cg-gallery-preview-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
    padding: 40px 20px 20px;
    pointer-events: none;
}

.cg-gallery-preview-item-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    display: block;
}

.cg-gallery-preview-cta {
    width: 300px;
    height: 300px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cg-gallery-preview-link {
    text-decoration: none;
    color: #2c3e50;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.cg-gallery-preview-link:hover {
    color: #3498db;
}

/* Single Hike Page Component */
.cg-single-hike-page {
    background: #f8f9fa;
}

.cg-single-hike-wrapper #main {
    padding: 0;
    max-width: 100%;
}

.cg-single-hero-title {
    font-size: 56px;
    font-weight: 700;
    text-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.cg-single-hero {
    position: relative;
    height: 60vh;
    min-height: 640px;
    overflow: hidden;
}

.cg-single-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.cg-single-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.25) 100%);
    display: flex;
    align-items: flex-end;
    padding: 60px 0 20px;
}

.cg-single-hero-content {
    color: #fff;
}

.cg-single-hero-number {
    color: #fff;
    opacity: 0.6;
    font-size: 80px;
    font-weight: 900;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    margin: 0;
}

.cg-single-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 18px;
    opacity: 0.95;
}

.cg-single-hero-nav {
    position: absolute;
    top: 100px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    pointer-events: none;
    max-width: 1200px;
    width: calc(100% - 40px);
}

.cg-single-hero-nav-link {
    pointer-events: auto;
    text-decoration: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: none;
    margin: 0;
}

.cg-single-hero-nav-label {
    color: #fff !important;
    text-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.9;
}
.cg-single-hero-nav-label:hover {
    color: #fff;
    text-decoration: underline;
}
.cg-single-hero-nav-card {
    width: 220px;
    height: 130px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cg-single-hero-nav-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
}

.cg-single-hero-nav-title {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.cg-single-hero-nav-link:hover .cg-single-hero-nav-card {
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.cg-single-hero-nav-link:hover  {
    color: #fff;
}

.cg-single-hero-nav-prev {
    align-items: flex-end;
    text-align: right;
}
.cg-single-hero-nav-link .cg-hike-compact-card {
    transform: translate(0, 0);
    background-color: rgba(255,255,255,0.9);
}
.cg-single-hero-nav-link .cg-hike-compact-card:hover {
    background-color: rgba(255,255,255,1);
}

.cg-single-hero-nav-link .cg-hike-compact-card .cg-hike-compact-date{
    display: none;
}
.cg-single-hero-nav-link .cg-hike-compact-card:hover .cg-hike-compact-content{
}
.cg-single-hero-nav-link .cg-hike-compact-card .cg-hike-compact-photo {
  height: 100px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: height 300ms ease; /* анимация по высоте */
  will-change: height;

}

.cg-single-hero-nav-link .cg-hike-compact-card:hover .cg-hike-compact-photo {
  height: 200px;
}

.cg-single-hero-nav-prev .cg-hike-compact-card {
    transform-origin: right center;
}

.cg-single-content-wrapper {
    padding: 0 20px 0px;
}

/* Modern Single Page Layout - No Sidebar */
.cg-single-layout {
    display: block;
    max-width: 900px;
    margin: 0 auto;
}

.cg-single-main {
    min-width: 0;
}

/* Stats Wrapper */
.cg-single-stats-wrapper {
    padding: 30px 20px 30px;
}

.cg-single-stats-empty {
    height: 40px;
}

/* Back Button Wrapper at Bottom */
.cg-single-back-wrapper {
    text-align: center;
}

/* Stats Cards Grid (Modern Design) */
.cg-single-stats-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.cg-single-stats-cards > * {
    flex: 0 0 auto;
    width: 180px;
}

.cg-single-stats-cards:empty {
    display: none;
}

.cg-single-back {
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 20px;
    transition: all 0.3s ease;
    color: #222;
    border: 1px solid #222;
    display: inline-flex;
    align-items: center;
    margin: 0 auto 14px;
}

.cg-single-back:hover {
    background: #222;
    color: #fff;
    border: 1px solid transparent;
    transform: translateY(-2px);
}

.cg-single-stats-section {
    margin-bottom: 60px;
}

.cg-single-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cg-single-stat-card {
    background: var(--card-bg);
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: 0 1px 8px var(--card-shadow);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-light);
    min-width: 0;
}

.cg-single-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--card-shadow-hover);
}

.cg-single-stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.cg-single-stat-icon svg {
    width: 20px;
    height: 20px;
}

.cg-single-stat-icon.cg-stat-icon-distance {
    background: rgba(52, 152, 219, 0.1);
    color: #2196f3;
}

.cg-single-stat-icon.cg-stat-icon-altitude {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
}

.cg-single-stat-card.cg-stat-ascent .cg-single-stat-icon {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.cg-single-stat-card.cg-stat-descent .cg-single-stat-icon {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
}

.cg-single-stat-content {
    flex: 1;
    min-width: 0;
}

.cg-single-stat-label {
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    font-weight: 600;
}

.cg-single-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    white-space: nowrap;
}

.cg-single-stat-value span {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 1px;
}

/* Modern Section Styles */
.cg-single-modern-section {
    margin-bottom: 40px;
}

.cg-section-header {
    margin-bottom: 30px;
}

.cg-section-header.cg-team-header {
    margin-bottom: 20px;
}

.cg-section-subtitle {
    color: var(--text-muted);
    margin: 6px 0 0 0;
}

.cg-single-section-title {
    font-size: 30px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.3;
}

.cg-participants-count {
    font-weight: 400;
    font-size: 24px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.cg-single-section-subtitle {
    font-size: 18px;
    color: #7f8c8d;
    margin: 0;
    padding-bottom: 30px;
}

/* Description Header with inline Meta */
.cg-description-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cg-single-meta-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cg-single-meta-inline:empty {
    display: none;
}

.cg-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.cg-meta-icon {
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cg-meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cg-single-description {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 1px 8px var(--card-shadow);
    border: 1px solid var(--border-light);
    margin-top: 0;
}

.cg-single-description-content {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
}

.cg-single-description-content p {
    margin-bottom: 14px;
}

.cg-single-description-content p:last-child {
    margin-bottom: 0;
}

.cg-single-description-content strong {
    color: var(--text-primary);
    font-weight: 600;
}


.cg-single-gallery-section {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Галерея на всю ширину под контентом */
.cg-gallery-fullwidth {
}

[data-theme="dark"] .cg-gallery-fullwidth {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .cg-hike-compact-no-photo,
[data-theme="dark"] .cg-hike-card-image {
    background-color: #1a1d23;
}

/* ============================================
   BENTO GRID GALLERY - Японская раскладка
   ============================================ */

.cg-bento-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 60px;
    grid-auto-rows: 240px;
    grid-auto-flow: dense;
}

.cg-bento-caption {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    color: #fff;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.cg-bento-gallery .cg-bento-item,
.cg-bento-item {
    position: relative;
    overflow: hidden !important;
    border-radius: 16px !important;
    -webkit-border-radius: 16px !important;
    -moz-border-radius: 16px !important;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    background: #f0f0f0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Ensure border-radius is applied */
.cg-bento-gallery .cg-bento-item * {
    border-radius: inherit;
}

.cg-bento-gallery .cg-bento-item img,
.cg-bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 16px !important;
    -webkit-border-radius: 16px !important;
    -moz-border-radius: 16px !important;
}

.cg-bento-gallery .cg-bento-item:hover,
.cg-bento-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.cg-bento-gallery .cg-bento-item:hover img,
.cg-bento-item:hover img {
    transform: scale(1.04);
}

.cg-loader-text {
    font-size: 12px;
}

/* Размеры элементов Bento Grid */
.cg-bento-large {
    grid-column: span 3;
    grid-row: span 2;
}

.cg-bento-wide {
    grid-column: span 2;
    grid-row: span 1;
}

.cg-bento-tall {
    grid-column: span 1;
    grid-row: span 2;
}

.cg-bento-regular {
    grid-column: span 1;
    grid-row: span 1;
}

/* Overlay (без иконки) */
.cg-bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cg-bento-item:hover .cg-bento-overlay {
    opacity: 1;
}

/* Shimmer placeholder при загрузке фото в галерее (codepen.io/Raphaelakpofure/pen/wvJJpWr) */
.cg-bento-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
    background-size: 1000px 100%;
    animation: cg-shimmer 3s infinite;
    transition: opacity 0.35s ease;
    z-index: 1;
}
.cg-bento-item.cg-bento-loaded .cg-bento-shimmer {
    opacity: 0;
    pointer-events: none;
}
[data-theme="dark"] .cg-bento-shimmer {
    background: linear-gradient(to right, #3a3d44 5%, #4a4d55 25%, #3a3d44 35%);
    background-size: 1000px 100%;
}
@keyframes cg-shimmer {
    from { background-position: -1000px 0; }
    to { background-position: 1000px 0; }
}

.cg-bento-icon {
    display: none; /* Иконка скрыта */
}

/* ============================================
   LIGHTBOX - Полноэкранный просмотр
   ============================================ */

.cg-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease;
}

.cg-lightbox.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.cg-lightbox-content {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cg-lightbox-img-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    margin: -20px 0 0 -20px;
    border-top-color: #888;
    border-radius: 50%;
    animation: cg-lightbox-spin 0.8s linear infinite;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.cg-lightbox-content.cg-lightbox-loading .cg-lightbox-img-loader {
    opacity: 1;
}
.cg-lightbox-content.cg-lightbox-loading .cg-lightbox-image {
    opacity: 0;
}
[data-theme="dark"] .cg-lightbox-img-loader {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: #888;
}

@keyframes cg-lightbox-spin {
    to { transform: rotate(360deg); }
}

.cg-lightbox-image {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    animation: zoomIn 0.4s ease;
    transition: opacity 0.2s;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.cg-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.cg-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.cg-lightbox-prev,
.cg-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.cg-lightbox-prev .cg-lightbox-arrow,
.cg-lightbox-next .cg-lightbox-arrow {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.cg-lightbox-prev {
    left: 16px;
}

.cg-lightbox-next {
    right: 16px;
}

.cg-lightbox-prev:hover,
.cg-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.cg-lightbox-hike-link {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 4px 12px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s;
}
.cg-lightbox-hike-link:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

.cg-lightbox-counter {
    position: absolute;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

.cg-single-hike-page .cg-lightbox-counter {
    bottom: 20px;
}

.cg-lightbox-current {
    color: #ffd700;
}

.cg-single-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.cg-single-gallery-item {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.cg-single-gallery-item:hover {
    transform: scale(1.05);
    z-index: 10;
}

.cg-single-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Wrapper для участников и команды в ряд */
.cg-team-participants-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

/* Блоки участников и команды */
.cg-single-participants-section,
.cg-single-team-section {
    margin: 0;
    height: 100%;
}

.cg-single-team-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Групповое фото участников */
.cg-group-photos-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.cg-group-photo-wrapper {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    line-height: 0;
}

.cg-group-photo-wrapper:nth-last-child(1) {
    margin-bottom: 0;
}

.cg-group-photo-wrapper.cg-lightbox-source {
    cursor: pointer;
}

.cg-group-photo-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

.cg-group-photo {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: top;
    object-fit: cover;
    max-height: 600px;
}

/* Shimmer групповых фото на сингл-странице (цвет фона #f0f0f0) */
.cg-group-photo-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #f0f0f0 5%, #d4d4d4 25%, #f0f0f0 35%);
    background-size: 1000px 100%;
    animation: cg-shimmer 3s infinite;
    transition: opacity 0.35s ease;
    z-index: 1;
    border-radius: 16px;
}
.cg-group-photo-wrapper.cg-group-photo-loaded .cg-group-photo-shimmer {
    opacity: 0;
    pointer-events: none;
}
[data-theme="dark"] .cg-group-photo-shimmer {
    background: linear-gradient(to right, #2d3139 5%, #3a3d44 25%, #2d3139 35%);
    background-size: 1000px 100%;
}

[data-theme="dark"] .cg-group-photo-wrapper {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cg-group-photo-wrapper:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.cg-single-participants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    row-gap: 12px;
    justify-items: center;
}

@media (max-width: 1024px) {
    .cg-team-participants-wrapper {
        gap: 24px;
    }

    .cg-single-participants-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .cg-team-participants-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    /* Порядок: Описание → Команда → Участники */
    .cg-single-participants-section {
        order: 2;
    }
    .cg-single-team-section {
        order: 1;
    }
}

@media (min-width: 700px) and (max-width: 900px) {
    .cg-group-photos-wrapper.cg-group-photos-multi {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .cg-group-photo-wrapper {
        border-radius: 12px;
    }

    .cg-group-photo {
        max-height: 450px;
    }
}

@media (max-width: 480px) {
    .cg-team-participants-wrapper {
        gap: 24px;
    }

    .cg-group-photo-wrapper {
        border-radius: 10px;
    }

    .cg-group-photo {
        max-height: 350px;
    }

}

.cg-single-info-card,
.cg-single-tags-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 24px;
}

.cg-single-info-title {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 16px;
}

.cg-single-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cg-single-info-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: #7f8c8d;
}

.cg-single-info-label {
    color: #95a5a6;
}

.cg-single-info-value {
    color: #2c3e50;
    font-weight: 600;
    text-align: right;
}

.cg-single-photographer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ecf0f1;
    font-size: 14px;
    color: #7f8c8d;
}

@media (max-width: 1024px) {
    .cg-single-stats-cards > * {
        width: 160px;
    }

    .cg-single-hero-nav-link {
        max-width: 200px;
    }

    .cg-single-hero-nav-card {
        width: 200px;
        height: 120px;
    }

    .cg-single-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cg-single-hero-title {
        font-size: 44px;
    }

    .cg-single-hero-number {
        font-size: 60px;
    }

    .cg-single-description {
        padding: 24px 28px;
    }

    .cg-single-section-title {
        font-size: 28px;
    }
    .cg-participants-count {
        font-size: 22px;
    }
    .cg-section-subtitle {
        font-size: 16px;
    }
    .cg-single-section-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .cg-single-stats-cards {
        gap: 10px;
        flex-wrap: wrap;
    }

    .cg-single-stats-cards > * {
        width: calc(50% - 5px);
    }

    .cg-single-stat-card {
        padding: 12px 14px;
    }

    .cg-single-stat-value {
        font-size: 16px;
    }

    .cg-single-stat-label {
        font-size: 8px;
    }

    .cg-single-stat-value span {
        font-size: 10px;
    }

    .cg-single-stat-icon {
        width: 34px;
        height: 34px;
    }

    .cg-single-stat-icon svg {
        width: 17px;
        height: 17px;
    }

    .cg-description-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cg-single-meta-inline {
        gap: 10px;
    }

    .cg-meta-badges {
        margin-left: 0;
        justify-content: center;
    }

    /* На мобильной — только текстовые ссылки «Следующий» и «Предыдущий», карточки скрыты */
    .cg-single-hero-nav {
        position: absolute;
        top: 100px;
        width: calc(100% - 32px);
        left: 16px;
        right: 16px;
        padding: 0;
        pointer-events: auto;
        transition: opacity 0.3s ease;
    }
    /* При открытом меню — скрываем ссылки навигации по походам (навбар и hero-nav внутри .cg-single-hero) */
    .cg-main-nav.cg-nav-open ~ .cg-single-hero-overlay .cg-single-hero-nav {
        opacity: 0;
        pointer-events: none;
    }
    .cg-single-hero-nav-link .cg-hike-compact-card {
        display: none !important;
    }
    .cg-single-hero-nav-label {
        font-size: 12px;
        padding: 8px 12px;
    }

    .cg-single-gallery-grid {
        grid-template-columns: 1fr;
    }

    .cg-single-hero {
        height: 50vh;
        min-height: 400px;
    }

    .cg-single-hero-title {
        font-size: 36px;
        text-align: center;
    }
    .cg-section-subtitle {
        font-size: 14px;
    }

    .cg-single-hero-number {
        font-size: 50px;
    }

    .cg-single-description {
        padding: 20px;
    }

    .cg-single-description-content {
        font-size: 13px;
    }

    .cg-single-content-wrapper {
        padding: 0 16px 0px;
    }

    .cg-single-stats-wrapper {
        padding: 20px 16px 12px;
    }

    .cg-single-back-wrapper {
    }

    .cg-single-section-title {
        font-size: 24px;
    }

    .cg-participants-count {
        font-size: 18px;
    }

    .cg-single-modern-section {
        margin-bottom: 30px;
    }

    .cg-bento-gallery {
        margin-bottom: 40px;
    }

    .cg-single-back {
        padding: 6px 14px;
        font-size: 11px;
    }
}

/* Responsive for new sections */
@media (max-width: 1024px) {
    .cg-top10-item {
        grid-template-columns: auto 250px 1fr;
    }

    .cg-top10-image {
        width: 250px;
        height: 170px;
    }

    .cg-hikes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cg-team-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .cg-gallery-preview-grid {
        grid-template-columns: repeat(3, 300px);
    }
}

@media (max-width: 768px) {
    .cg-top10-item {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        text-align: center;
    }

    .cg-top10-number {
        font-size: 36px;
    }

    .cg-top10-image {
        width: 100%;
        height: 250px;
        grid-column: 1;
        grid-row: 2;
    }

    .cg-top10-content {
        grid-column: 1;
        grid-row: 3;
    }

    .cg-top10-stats {
        justify-content: center;
    }

    .cg-hikes-grid {
        grid-template-columns: 1fr;
    }

    .cg-team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cg-gallery-preview-grid {
        grid-template-columns: repeat(2, 300px);
    }

    .cg-section-title {
        font-size: 36px;
    }

    .cg-hikes-section,
    .cg-team-section,
    .cg-gallery-preview-section,
    .cg-top10-section {
        padding: 40px 0;
    }
    .participants-section {
        padding: 0 40px;

    }
}

@media (max-width: 480px) {
    .cg-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cg-gallery-preview-grid {
        grid-template-columns: 300px;
    }

    .cg-section-title {
        font-size: 28px;
    }

    .cg-single-hero-title {
        font-size: 28px;
        text-align: center;
    }
}

.cg-single-description {
    margin: 20px 0;
    line-height: 1.8;
    color: #333;
}

.cg-single-images {
    margin: 30px 0;
}

.cg-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.cg-image-link {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background: #f5f5f5;
}

.cg-image-link::after {
    content: '🔍';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cg-image-link:hover::after {
    opacity: 0.8;
}

.cg-image-link img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, opacity 0.1s ease;
}

.cg-image-link:hover img {
    transform: scale(1.05);
    opacity: 0.9
}

.cg-single-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.cg-single-info {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.cg-single-info h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.cg-single-badges {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cg-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.cg-info-grid p {
    margin: 0;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
    border-left: 3px solid #0073aa;
}

.cg-single-info p {
    margin: 10px 0;
}

/* ============================================
   THEME SWITCHER - Переключатель темы
   ============================================ */

/* CSS переменные для светлой темы (по умолчанию) */
:root,
html {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f7fa;
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-muted: #95a5a6;
    --border-color: #e0e0e0;
    --border-light: #f0f0f0;
    --border-darker: #CFCFCF;
    --nav-bg: #f8f9fa;
    --nav-text: #222;
    --nav-hover-bg: #222;
    --nav-hover-text: #fff;
    --card-bg: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.08);
    --card-shadow-hover: rgba(0, 0, 0, 0.12);
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(0, 0, 0, 0.3);
    --hero-overlay-start: rgba(0, 0, 0, 0.35);
    --hero-overlay-end: rgba(0, 0, 0, 0.15);
    --info-bg: #f9f9f9;
    --badge-bg: #f0f0f0;
    --participant-link-bg: #e8f4f8;
    --stat-bg: #f1f3f5;
    --gradient-start: #667eea;
    --gradient-end: #764ba2;
}

/* CSS переменные для темной темы */
[data-theme="dark"],
html[data-theme="dark"] {
    --bg-primary: #1a1d23;
    --bg-secondary: #1a1d23;
    --bg-tertiary: #1a1d23;
    --text-primary: #f1f3f4;
    --text-secondary: #b8bdc3;
    --text-muted: #9aa0a6;
    --border-color: #3c4043;
    --border-light: #2d3035;
    --border-darker: #404550;
    --nav-bg: #1a1d23;
    --nav-text: #f1f3f4;
    --nav-hover-bg: #f1f3f4;
    --nav-hover-text: #121418;
    --card-bg: #1f2329;
    --card-shadow: rgba(0, 0, 0, 0.4);
    --card-shadow-hover: rgba(0, 0, 0, 0.6);
    --overlay-dark: rgba(0, 0, 0, 0.85);
    --overlay-light: rgba(0, 0, 0, 0.5);
    --hero-overlay-start: rgba(0, 0, 0, 0.55);
    --hero-overlay-end: rgba(0, 0, 0, 0.35);
    --info-bg: #242830;
    --badge-bg: #2d3139;
    --participant-link-bg: #1e3a47;
    --stat-bg: #242830;
    --gradient-start: #5566d3;
    --gradient-end: #663a93;
    --footer-bg: #1a1d23;
}

/* Применение переменных к элементам */
html {
    background: var(--bg-primary);
}

body {
    background: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Явно указываем фон для темной темы */
[data-theme="dark"] html,
[data-theme="dark"] body {
    background: #1a1d23 !important;
}

/* Плавные переходы только после загрузки страницы */
html.transitions-enabled {
    transition: background-color 0.3s ease;
}

html.transitions-enabled body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cg-archive-page {
    background: var(--bg-primary);
}

/* Чередование фонов секций на главной */
.cg-stats-section,
.cg-hikes-section {
    background: #fff;
    transition: background-color 0.3s ease;
}

.cg-participants-section {
    background-color: #fff;
}

.cg-top-tracks-section,
.cg-group-photo-section{
    background: #f8f9fa;
    transition: background-color 0.3s ease;
}

/* Остальные страницы */
.cg-top10-section,
.cg-photos-section,
.cg-team-section {
    background: var(--bg-primary);
}

.cg-hike-card-component,
.cg-hike-card,
.cg-gallery-item,
.cg-track-card,
.cg-participant-card,
.cg-participant-card-compact,
.cg-hike-compact-card,
.cg-top10-item {
    background: var(--card-bg);
    box-shadow: 0 4px 15px var(--card-shadow);
}

.cg-hike-card-component:hover,
.cg-hike-card:hover,
.cg-gallery-item:hover,
.cg-track-card:hover,
.cg-top10-item:hover {
    box-shadow: 0 8px 25px var(--card-shadow-hover);
}

.cg-hike-card-content,
.cg-gallery-item-content {
    background: var(--card-bg);
}

.cg-hike-card-title,
.cg-gallery-item-title a,
.cg-track-info h4,
.cg-archive-title,
.cg-section-title,
.cg-top10-item-title a,
.cg-team-name,
.cg-participant-card-name,
.cg-hike-compact-title,
.cg-hike-title,
.cg-top10-title a,
.cg-single-section-title,
.cg-single-info-title {
    color: var(--text-primary);
}

.cg-archive-subtitle,
.cg-section-subtitle,
.cg-hike-date,
.cg-top10-meta,
.cg-top10-date,
.cg-team-role,
.cg-participant-card-role,
.cg-hike-compact-date,
.cg-single-stat-label,
.cg-single-info-label,
.cg-single-photographer {
    color: var(--text-secondary);
}

.cg-hike-stat span,
.cg-track-stat,
.cg-gallery-item-description {
    color: var(--text-secondary);
}

.cg-hike-card-stats,
.cg-participant-card-role {
    border-top-color: var(--border-darker);
}

.cg-pagination .page-numbers {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 2px 8px var(--card-shadow);
}

.cg-gallery-item,
.cg-track-card {
    border-color: var(--border-color);
}

.cg-badge {
    background: var(--badge-bg);
    color: var(--text-secondary);
}

.cg-single-info,
.cg-participant-contacts,
.cg-info-bg {
    background: var(--info-bg);
}

.cg-participant-link {
    background: var(--participant-link-bg);
}

.cg-info-grid p {
    background: var(--card-bg);
}

.cg-stat-item,
.cg-single-stat-card,
.cg-single-description,
.cg-single-info-card,
.cg-single-tags-card {
    background: var(--card-bg);
    box-shadow: 0 4px 15px var(--card-shadow);
}

.cg-stat-badge {
    background: var(--stat-bg);
    color: var(--text-secondary);
}

.cg-gallery-item-participants {
    border-top-color: var(--border-light);
}

.cg-single-tracks {
    border-top-color: var(--border-color);
}

.cg-single-stat-value,
.cg-stat-value,
.cg-single-info-value {
    color: var(--text-primary);
}

.cg-single-hike-page,
.cg-archive-page,
body.single,
body.page {
    background: var(--bg-primary);
}

[data-theme="dark"] .cg-single-hike-page,
[data-theme="dark"] .cg-archive-page,
[data-theme="dark"] body.single,
[data-theme="dark"] body.page {
    background: #1a1d23;
}

/* Дополнительные элементы для темной темы */
.cg-gallery-item-title a:hover,
.cg-top10-item-title a:hover,
.cg-top10-title a:hover {
    color: #3498db;
}

.cg-participant-link:hover {
    background: #0073aa;
    color: #fff;
}

.cg-single-back {
    color: var(--nav-text);
    border-color: var(--nav-text);
}

.cg-single-back:hover {
    background: var(--nav-text);
    color: var(--nav-bg);
}

.cg-btn-secondary,
.cg-button-secondary,
button.cg-btn-secondary,
button.cg-button-secondary {
    color: var(--nav-text);
    border-color: var(--nav-text);
}

.cg-btn-secondary:hover,
.cg-button-secondary:hover,
button.cg-btn-secondary:hover,
button.cg-button-secondary:hover {
    background: var(--nav-text);
    color: var(--nav-bg);
}

.cg-no-hikes {
    color: var(--text-secondary);
}

.cg-gallery-item-meta,
.cg-participant-galleries {
    border-top-color: var(--border-color);
}

.cg-single-info-item {
    color: var(--text-secondary);
}

.cg-single-info-label {
    color: var(--text-muted);
}

.cg-single-photographer,
.cg-single-info-card {
    border-top-color: var(--border-light);
}

/* Темная тема для текстовых элементов с улучшенной контрастностью */
[data-theme="dark"] .cg-hike-card-title,
[data-theme="dark"] .cg-gallery-item-title a,
[data-theme="dark"] .cg-track-info h4,
[data-theme="dark"] .cg-archive-title,
[data-theme="dark"] .cg-section-title,
[data-theme="dark"] .cg-top10-item-title a,
[data-theme="dark"] .cg-team-name,
[data-theme="dark"] .cg-participant-card-name,
[data-theme="dark"] .cg-hike-compact-title,
[data-theme="dark"] .cg-hike-title,
[data-theme="dark"] .cg-top10-title a,
[data-theme="dark"] .cg-single-hero-title,
[data-theme="dark"] .cg-single-section-title,
[data-theme="dark"] .cg-single-info-title,
[data-theme="dark"] .cg-gallery-preview-title-main {
    color: #f1f3f4;
}

[data-theme="dark"] .cg-participants-count {
    color: #b0b8c1;
}

/* Улучшенная видимость вторичного текста */
[data-theme="dark"] .cg-archive-subtitle,
[data-theme="dark"] .cg-section-subtitle,
[data-theme="dark"] .cg-hike-date,
[data-theme="dark"] .cg-top10-meta,
[data-theme="dark"] .cg-top10-date,
[data-theme="dark"] .cg-team-role,
[data-theme="dark"] .cg-participant-card-role,
[data-theme="dark"] .cg-hike-compact-date,
[data-theme="dark"] .cg-single-stat-label,
[data-theme="dark"] .cg-single-info-label,
[data-theme="dark"] .cg-single-photographer,
[data-theme="dark"] .cg-gallery-preview-subtitle {
    color: #b8bdc3;
}

[data-theme="dark"] .cg-hike-compact-date {
    border-top-color: var(--border-darker);
}

/* Улучшенные ховеры для темной темы */
[data-theme="dark"] .cg-gallery-item:hover,
[data-theme="dark"] .cg-hike-card:hover,
[data-theme="dark"] .cg-track-card:hover,
[data-theme="dark"] .cg-participant-card:hover,
[data-theme="dark"] .cg-participant-card-compact:hover,
[data-theme="dark"] .cg-hike-compact-card:hover,
[data-theme="dark"] .cg-hike-card-component:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .cg-participant-tooltip {
    background: var(--nav-hover-bg, #f1f3f4);
    color: var(--nav-hover-text, #121418);
}

/* Ссылки в темной теме */
[data-theme="dark"] .cg-gallery-preview-link {
    color: var(--text-primary);
}

[data-theme="dark"] .cg-gallery-preview-link:hover {
    color: #3498db;
}

/* Статистика в темной теме */
[data-theme="dark"] .cg-stat-value,
[data-theme="dark"] .cg-single-stat-value {
    color: #f1f3f4;
}

[data-theme="dark"] .cg-stat-label {
    color: #b8bdc3;
}

/* Бейджи и значки статистики */
[data-theme="dark"] .cg-stat-badge {
    background: var(--stat-bg);
    color: #b8bdc3;
}

[data-theme="dark"] .cg-badge {
    background: var(--badge-bg);
    color: #b8bdc3;
}

/* Контейнер статистики */
[data-theme="dark"] .cg-stats-container {
    background: transparent;
}

/* Элементы статистики: цвета только у .cg-icon (один слой фона) */
[data-theme="dark"] .cg-stat-hikes .cg-stat-icon.cg-icon {
    background: rgba(76, 175, 80, 0.15);
    color: #66bb6a;
}

[data-theme="dark"] .cg-stat-participants .cg-stat-icon.cg-icon {
    background: rgba(156, 39, 176, 0.15);
    color: #ab47bc;
}

[data-theme="dark"] .cg-stat-distance .cg-stat-icon.cg-icon {
    background: rgba(33, 150, 243, 0.18);
    color: #64b5f6;
}

[data-theme="dark"] .cg-stat-ascent .cg-stat-icon.cg-icon {
    background: rgba(229, 57, 53, 0.18);
    color: #ef5350;
}

[data-theme="dark"] .cg-hike-card-content .cg-stat-distance .cg-stat-icon {
    background-color: transparent;
    color: #2196f3;
}

[data-theme="dark"] .cg-stat-distance .cg-stat-icon.cg-icon,
[data-theme="dark"] .cg-stat-max_distance .cg-stat-icon.cg-icon {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
}

[data-theme="dark"] .cg-stats-container .cg-stat-distance .cg-stat-icon.cg-icon {
    background: rgba(33, 150, 243, 0.18);
    color: #64b5f6;
}

[data-theme="dark"] .cg-stats-container .cg-stat-distance .cg-stat-icon.cg-icon svg {
    color: #64b5f6;
    fill: currentColor;
    stroke: currentColor;
}

[data-theme="dark"] .cg-stat-tracks .cg-stat-icon.cg-icon {
    background: rgba(33, 150, 243, 0.15);
    color: #2196f3;
}

/* Страница /stats: тёмная тема для уникальных KPI-иконок */
[data-theme="dark"] .cg-stat-kpi_total_hikes .cg-stat-icon.cg-icon {
    background: rgba(76, 175, 80, 0.15);
    color: #66bb6a;
}
[data-theme="dark"] .cg-stat-kpi_total_distance .cg-stat-icon.cg-icon,
[data-theme="dark"] .cg-stat-kpi_avg_distance .cg-stat-icon.cg-icon {
    background: rgba(33, 150, 243, 0.15);
    color: #2196f3;
}
[data-theme="dark"] .cg-stat-kpi_total_ascent .cg-stat-icon.cg-icon,
[data-theme="dark"] .cg-stat-kpi_avg_ascent .cg-stat-icon.cg-icon,
[data-theme="dark"] .cg-stat-kpi_max_ascent .cg-stat-icon.cg-icon {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
}
[data-theme="dark"] .cg-stat-kpi_avg_participants .cg-stat-icon.cg-icon,
[data-theme="dark"] .cg-stat-kpi_max_participants .cg-stat-icon.cg-icon {
    background: rgba(156, 39, 176, 0.15);
    color: #ab47bc;
}
[data-theme="dark"] .cg-stat-kpi_max_distance .cg-stat-icon.cg-icon {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
}

/* Иконки в карточках походов */

/* Описание в темной теме */
[data-theme="dark"] .cg-single-description-content,
[data-theme="dark"] .cg-single-description-content p,
[data-theme="dark"] .cg-participant-description,
[data-theme="dark"] .cg-about-text,
[data-theme="dark"] .cg-about-text p {
    color: #e0e0e0;
}

/* Плейсхолдеры для фото */
[data-theme="dark"] .cg-team-placeholder,
[data-theme="dark"] .cg-gallery-item-image {
    background: #2d3139;
}

/* Пагинация */
[data-theme="dark"] .cg-pagination .page-numbers.current {
    background: #3498db;
    color: #fff;
}

[data-theme="dark"] .cg-pagination .page-numbers:hover {
    background: #3498db;
    color: #fff;
}

/* Home page специфичные элементы */
.cg-home-page {
    background: var(--bg-primary);
}

/* Секции на главной странице в темной теме - чередование */
[data-theme="dark"] .cg-stats-section,
[data-theme="dark"] .cg-hikes-section,
[data-theme="dark"] .cg-gallery-preview-section,
[data-theme="dark"] .cg-participants-section,
[data-theme="dark"] .cg-top10-section,
[data-theme="dark"] .cg-photos-section {
    background: #1a1d23;
}

[data-theme="dark"] .cg-top-tracks-section,
[data-theme="dark"] .cg-team-section,
[data-theme="dark"] .cg-about-section,
[data-theme="dark"] .cg-group-photo-section {
    background: #23262e;
}

/* Контейнеры на главной странице */
.cg-container {
    color: var(--text-primary);
}

/* Цифры и номера походов */
[data-theme="dark"] .cg-top10-number,
[data-theme="dark"] .cg-hike-number,
[data-theme="dark"] .cg-hike-compact-number {
    color: #222;
}

/* Стили для no-image placeholder */

[data-theme="dark"] .cg-participant-no-photo {
    background: #2d3139;
}

[data-theme="dark"] .cg-about-title {
    color: #888;
}

[data-theme="dark"] .cg-highlight {
    color: #fff;
}


/* Мета информация и даты */
[data-theme="dark"] .cg-gallery-item-meta,
[data-theme="dark"] .cg-gallery-item-meta span,
[data-theme="dark"] .cg-participant-galleries strong {
    color: #b8bdc3;
}

/* Улучшенная видимость статов в темной теме */
[data-theme="dark"] .cg-hike-stat span {
    color: #b8bdc3;
}

/* Цвета иконок статов сохраняем яркими */
[data-theme="dark"] .cg-hike-card-stats .cg-stat-ascent .cg-stat-icon,
[data-theme="dark"] .cg-single-stat-card.cg-stat-ascent .cg-single-stat-icon {
    color: #ef5350;
}

[data-theme="dark"] .cg-hike-card-stats .cg-stat-descent .cg-stat-icon,
[data-theme="dark"] .cg-single-stat-card.cg-stat-descent .cg-single-stat-icon {
    color: #66bb6a;
}

/* Контакты участников */
[data-theme="dark"] .cg-participant-contacts a {
    color: #222;
}

[data-theme="dark"] .cg-participant-contacts a:hover {
    color: #64b5f6;
}

/* Информационный блок */
[data-theme="dark"] .cg-single-info {
    background: var(--info-bg);
}

/* Грид информации */
[data-theme="dark"] .cg-info-grid p {
    background: var(--card-bg);
    border-left-color: #222;
}

/* Треки */
[data-theme="dark"] .cg-track-photo,
[data-theme="dark"] .cg-photo-link {
    background: #2d3139;
}

/* Топ-10 специфичные стили */
[data-theme="dark"] .cg-top10-position-1 {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
}

[data-theme="dark"] .cg-top10-position-2 {
    border-color: #c0c0c0;
}

[data-theme="dark"] .cg-top10-position-3 {
    border-color: #cd7f32;
}

/* Single Hike Page в темной теме */
[data-theme="dark"] .cg-single-hero-meta {
    color: rgba(255, 255, 255, 0.9);
}


[data-theme="dark"] .cg-single-hero-nav-title,
[data-theme="dark"] .cg-single-hero-nav-label {
    color: #fff;
}

[data-theme="dark"] .cg-single-hero-nav-link:hover {
    color: #fff;
}

/* Навигационные карточки в single page */
[data-theme="dark"] .cg-single-hero-nav-link .cg-hike-compact-card {
    background-color: rgba(31, 35, 41, 0.95);
}

[data-theme="dark"] .cg-single-hero-nav-link .cg-hike-compact-card:hover {
    background-color: rgba(31, 35, 41, 1);
}

/* Контент wrapper */
[data-theme="dark"] .cg-single-content-wrapper {
    background: transparent;
}

/* Галерея на single странице */
[data-theme="dark"] .cg-single-gallery-item {
    background: #2d3139;
}

/* Участники и команда на single странице */
[data-theme="dark"] .cg-single-participants-section h2,
[data-theme="dark"] .cg-single-team-section h2,
[data-theme="dark"] .cg-team-participants-wrapper h2 {
    color: #f1f3f4;
}

/* Modern Single Page - Dark Theme */
[data-theme="dark"] .cg-single-stat-card {
    border-color: transparent;
}

[data-theme="dark"] .cg-single-stat-icon.cg-stat-icon-distance {
    background: rgba(66, 165, 245, 0.15);
    color: #2196f3;
}

[data-theme="dark"] .cg-single-stat-icon.cg-stat-icon-altitude {
    background: rgba(171, 71, 188, 0.15);
    color: #ab47bc;
}

[data-theme="dark"] .cg-single-stat-card.cg-stat-ascent .cg-single-stat-icon {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
}

[data-theme="dark"] .cg-single-stat-card.cg-stat-descent .cg-single-stat-icon {
    background: rgba(102, 187, 106, 0.15);
    color: #66bb6a;
}


/* ============================================
   FOOTER - Футер в темной теме
   ============================================ */

/* Футер WordPress - общие стили */
.site-footer,
footer,
#colophon,
.footer,
.wp-block-template-part {
    max-width: 100% !important;
    width: 100% !important;
    display: none;
}

[data-theme="dark"] .site-footer,
[data-theme="dark"] footer,
[data-theme="dark"] #colophon,
[data-theme="dark"] .footer,
[data-theme="dark"] .wp-block-template-part {
    background: #1a1d23 !important;
    color: var(--text-primary);
}

/* Заголовки в футере */
[data-theme="dark"] .site-footer h1,
[data-theme="dark"] .site-footer h2,
[data-theme="dark"] .site-footer h3,
[data-theme="dark"] .site-footer h4,
[data-theme="dark"] .site-footer h5,
[data-theme="dark"] .site-footer h6,
[data-theme="dark"] footer h1,
[data-theme="dark"] footer h2,
[data-theme="dark"] footer h3,
[data-theme="dark"] footer h4,
[data-theme="dark"] footer h5,
[data-theme="dark"] footer h6 {
    color: var(--text-primary);
}

/* Ссылки в футере */
[data-theme="dark"] .site-footer a,
[data-theme="dark"] footer a {
    color: var(--text-secondary);
}

[data-theme="dark"] .site-footer a:hover,
[data-theme="dark"] footer a:hover {
    color: #222;
}

/* Параграфы и текст в футере */
[data-theme="dark"] .site-footer p,
[data-theme="dark"] footer p,
[data-theme="dark"] .site-footer .widget,
[data-theme="dark"] footer .widget {
    color: var(--text-secondary);
}

/* Навигация в футере */
[data-theme="dark"] .footer-navigation,
[data-theme="dark"] .site-footer nav {
    background: transparent;
}

/* Виджеты в футере */
[data-theme="dark"] .footer-widgets,
[data-theme="dark"] .site-footer .widget-area,
[data-theme="dark"] .site-footer .widget,
[data-theme="dark"] footer .widget {
    background: transparent !important;
}

/* Контейнеры внутри футера */
[data-theme="dark"] .site-footer > div,
[data-theme="dark"] footer > div,
[data-theme="dark"] .elementor-location-footer > div {
    background: transparent !important;
}

/* Copyright и дополнительная информация */
[data-theme="dark"] .site-info,
[data-theme="dark"] .copyright,
[data-theme="dark"] .footer-copyright {
    background: #1a1d23 !important;
    color: var(--text-muted);
    border-top-color: var(--border-color);
}

/* Социальные иконки в футере */
[data-theme="dark"] .social-links a,
[data-theme="dark"] .footer-social a {
    color: var(--text-secondary);
}

[data-theme="dark"] .social-links a:hover,
[data-theme="dark"] .footer-social a:hover {
    color: #222;
}

/* Элементы списков в футере */
[data-theme="dark"] .site-footer ul,
[data-theme="dark"] .site-footer ol,
[data-theme="dark"] footer ul,
[data-theme="dark"] footer ol {
    color: var(--text-secondary);
}

/* Границы в футере */
[data-theme="dark"] .site-footer hr,
[data-theme="dark"] footer hr {
    border-color: var(--border-color);
}

/* Elementor Footer */
.elementor-location-footer {
    max-width: 100% !important;
    width: 100% !important;
}

[data-theme="dark"] .elementor-location-footer {
    background: #1a1d23 !important;
    color: var(--text-primary);
}

[data-theme="dark"] .elementor-location-footer .elementor-section {
    background: transparent !important;
}

[data-theme="dark"] .elementor-location-footer .elementor-heading-title {
    color: var(--text-primary);
}

[data-theme="dark"] .elementor-location-footer a {
    color: var(--text-secondary);
}

[data-theme="dark"] .elementor-location-footer a:hover {
    color: #222;
}

/* Основные wrapper'ы и контейнеры */
[data-theme="dark"] #page,
[data-theme="dark"] .site,
[data-theme="dark"] #content,
[data-theme="dark"] .site-content,
[data-theme="dark"] main,
[data-theme="dark"] #main,
[data-theme="dark"] .site-main,
[data-theme="dark"] .content-area {
    background: #1a1d23;
    color: var(--text-primary);
}

/* Футер контейнеры без ограничения ширины */
.site-footer .container,
footer .container,
#colophon .container,
.elementor-location-footer .container,
.elementor-location-footer .elementor-container {
    max-width: 100% !important;
}

/* Убираем padding у элементов футера для полной ширины */
[data-theme="dark"] .site-footer,
[data-theme="dark"] footer,
[data-theme="dark"] #colophon {
    padding-left: 0;
    padding-right: 0;
}

/* Заголовки по всему сайту */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

/* Параграфы и основной текст */
[data-theme="dark"] p {
    color: var(--text-secondary);
}

/* Общие ссылки */
[data-theme="dark"] a {
    color: var(--text-secondary);
}

[data-theme="dark"] a:hover {
    color: #fff;
}

[data-theme="dark"] a.cg-single-back,
[data-theme="dark"] a.cg-btn-secondary {
    border-color: #444;
}

[data-theme="dark"] a.cg-single-back:hover {
    color: var(--nav-bg);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a.cg-btn-secondary:hover {
    border-color: #444;
}

[data-theme="dark"] a.cg-btn-secondary:hover,
[data-theme="dark"] a.cg-button-secondary:hover {
    background: var(--nav-text);
    color: var(--nav-bg);
    border-color: var(--nav-text);
}

/* Input элементы */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Кнопки */
[data-theme="dark"] button,
[data-theme="dark"] .button,
[data-theme="dark"] input[type="submit"] {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Elementor общие стили */
[data-theme="dark"] .elementor-section {
    background: transparent;
}

[data-theme="dark"] .elementor-widget-text-editor {
    color: var(--text-secondary);
}

[data-theme="dark"] .elementor-widget-heading .elementor-heading-title {
    color: var(--text-primary);
}

/* Elementor колонки и контейнеры */
[data-theme="dark"] .elementor-column,
[data-theme="dark"] .elementor-inner-section,
[data-theme="dark"] .elementor-widget-wrap {
    background: transparent !important;
}

/* ============================================
   BENTO GALLERY - Темная тема и адаптивность
   ============================================ */

/* Адаптивность для Bento Grid на планшетах */
@media (max-width: 1024px) {
    .cg-bento-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        grid-auto-rows: 220px;
    }

    .cg-bento-gallery .cg-bento-item,
    .cg-bento-item {
        border-radius: 14px !important;
        -webkit-border-radius: 14px !important;
        -moz-border-radius: 14px !important;
    }

    .cg-bento-gallery .cg-bento-item img,
    .cg-bento-item img {
        border-radius: 14px !important;
        -webkit-border-radius: 14px !important;
        -moz-border-radius: 14px !important;
    }

    .cg-bento-large {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* Адаптивность для Bento Grid на мобильных */
@media (max-width: 768px) {
    .cg-bento-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        grid-auto-rows: 180px;
    }

    .cg-bento-gallery .cg-bento-item,
    .cg-bento-item {
        border-radius: 12px !important;
        -webkit-border-radius: 12px !important;
        -moz-border-radius: 12px !important;
    }

    .cg-bento-gallery .cg-bento-item img,
    .cg-bento-item img {
        border-radius: 12px !important;
        -webkit-border-radius: 12px !important;
        -moz-border-radius: 12px !important;
    }

    .cg-bento-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .cg-bento-wide {
        grid-column: span 2;
        grid-row: span 1;
    }

    .cg-bento-tall {
        grid-column: span 1;
        grid-row: span 1; /* На мобилке не делаем высокие */
    }

    .cg-lightbox-prev {
        left: 10px;
    }

    .cg-lightbox-next {
        right: 10px;
    }

    .cg-lightbox-prev,
    .cg-lightbox-next {
        width: 40px;
        height: 40px;
    }

    .cg-lightbox-prev .cg-lightbox-arrow,
    .cg-lightbox-next .cg-lightbox-arrow {
        width: 18px;
        height: 18px;
    }

    .cg-lightbox-close {
        width: 45px;
        height: 45px;
        font-size: 24px;
        top: 15px;
        right: 15px;
    }

    .cg-lightbox-counter {
        bottom: 65px;
        font-size: 14px;
    }
    .cg-lightbox-hike-link {
        bottom: 20px;
    }
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 480px) {
    .cg-bento-gallery {
        grid-template-columns: 1fr;
        gap: 8px;
        grid-auto-rows: 240px;
    }

    .cg-bento-gallery .cg-bento-item,
    .cg-bento-item {
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
    }

    .cg-bento-gallery .cg-bento-item img,
    .cg-bento-item img {
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
    }

    .cg-bento-large,
    .cg-bento-wide,
    .cg-bento-tall,
    .cg-bento-regular {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Темная тема для Bento Gallery */
[data-theme="dark"] .cg-bento-item {
    background: #2d3139;
}

[data-theme="dark"] .cg-lightbox {
    background: rgba(0, 0, 0, 0.98);
}

[data-theme="dark"] .cg-lightbox-close,
[data-theme="dark"] .cg-lightbox-prev,
[data-theme="dark"] .cg-lightbox-next {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .cg-lightbox-close:hover,
[data-theme="dark"] .cg-lightbox-prev:hover,
[data-theme="dark"] .cg-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .cg-lightbox-hike-link {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
[data-theme="dark"] .cg-lightbox-hike-link:hover {
    background: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .cg-lightbox-counter {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}

/* Анимация для Bento Gallery */
.cg-bento-item {
    animation: fadeIn 0.4s ease forwards;
    opacity: 0;
}

.cg-bento-item:nth-child(1) { animation-delay: 0.05s; }
.cg-bento-item:nth-child(2) { animation-delay: 0.1s; }
.cg-bento-item:nth-child(3) { animation-delay: 0.15s; }
.cg-bento-item:nth-child(4) { animation-delay: 0.2s; }
.cg-bento-item:nth-child(5) { animation-delay: 0.25s; }
.cg-bento-item:nth-child(6) { animation-delay: 0.3s; }
.cg-bento-item:nth-child(7) { animation-delay: 0.35s; }
.cg-bento-item:nth-child(8) { animation-delay: 0.4s; }
.cg-bento-item:nth-child(n+9) { animation-delay: 0.45s; }

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   INFINITE SCROLL LOADER
   ============================================ */

.cg-infinite-loader {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    margin-top: 30px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cg-infinite-loader.active {
    display: flex;
    opacity: 1;
}

/* Лоадер галереи на сингле и странице галереи — по центру */
.cg-gallery-infinite-loader.cg-infinite-loader {
    display: flex;
    opacity: 0.7;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.cg-gallery-infinite-loader.cg-infinite-loader.active {
    opacity: 1;
}

.cg-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 15px;
}

[data-theme="dark"] .cg-spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: #4a9eff;
}

.cg-infinite-loader p {
    font-size: 16px;
    font-weight: 500;
    color: #666;
    margin: 0;
}

[data-theme="dark"] .cg-infinite-loader p {
    color: #999;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.cg-infinite-end {
    display: none;
    text-align: center;
    padding: 40px 20px;
    margin-top: 30px;
}

.cg-infinite-end p {
    font-size: 18px;
    font-weight: 600;
    color: #666;
    margin: 0;
    opacity: 0.8;
}

[data-theme="dark"] .cg-infinite-end p {
    color: #999;
}