/*!
Theme Name: Site Theme
Text Domain: svetitheme
Version: 1.0.44
*/

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ
   ========================================================================== */
:root {
	--color-pink: #ff0072;
	--color-orange: #ff573b;
	--color-dark: #28292a;
	--color-light: #ffffff;
	--font-family-base: 'Open Sans', sans-serif;
	--font-size-heading: clamp(2.5rem, 5vw + 1rem, 4rem);
	--font-size-subheading: clamp(1.5rem, 3vw + 1rem, 2.25rem);
	--font-size-normal: 1rem;
	--font-size-small: 0.875rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-family-base); font-size: var(--font-size-normal); font-weight: 400; line-height: 1.6; color: var(--color-dark); background-color: var(--color-light); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
a { text-decoration: none; color: inherit; }

/* ==========================================================================
   2. КОМПОНЕНТЫ И УТИЛИТЫ
   ========================================================================== */
.container { max-width: 1400px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.button { display: inline-block; padding: 1rem 2.5rem; border: 2px solid transparent; border-radius: 50px; font-weight: 700; text-align: center; transition: all 0.3s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); text-decoration: none; }
.button-primary { background-color: var(--color-pink); color: var(--color-light); }
.button-primary:hover { background-color: var(--color-orange); }
.button-secondary { background-color: transparent; color: var(--color-pink); border-color: var(--color-pink); }
.button-secondary:hover { background-color: var(--color-pink); color: var(--color-light); }
.section-subtitle { display: block; font-size: var(--font-size-small); font-weight: 700; color: var(--color-orange); text-transform: uppercase; margin-bottom: 1rem; }
.section-intro { max-width: 600px; margin: 1rem auto 3rem auto; font-size: 1.125rem; color: #666; text-align: center; }
.section-footer { text-align: center; margin-top: 4rem; }
.text-heading { font-size: var(--font-size-heading); font-weight: 800; line-height: 1.2; color: inherit; }
.text-subheading { font-size: var(--font-size-subheading); font-weight: 700; line-height: 1.3; color: inherit; }

/* ==========================================================================
   3. ШАПКА И НАВИГАЦИЯ
   ========================================================================== */
.site-header { padding: 1.5rem 0; position: absolute; width: 100%; z-index: 10; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.site-branding .custom-logo { max-width: 150px; }
.logo-link img { max-height: 60px; width: auto; display: block; }
.site-branding .site-title a { font-size: 1.75rem; font-weight: 700; color: var(--color-dark); }
.main-navigation ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 2.5rem; }
.main-navigation a { font-weight: 600; color: var(--color-dark); position: relative; padding-bottom: 5px; }
.main-navigation a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-pink); transition: width 0.3s ease; }
.main-navigation a:hover::after { width: 100%; }

/* Контекстные цвета текста в шапке для главных страниц */
.home .main-navigation a,
.single-post .main-navigation a,
.single-training .main-navigation a { color: var(--color-light); }
.single-post .site-branding .site-title a,
.single-training .site-branding .site-title a { color: var(--color-light); }

/* Переключатель языков */
ul.lang-switcher { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 1.5rem; }
ul.lang-switcher li a { font-weight: 600; color: var(--color-dark); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.45; transition: opacity 0.2s ease; }
ul.lang-switcher li.current-lang a { opacity: 1; }
ul.lang-switcher li a:hover { opacity: 0.75; }
.home ul.lang-switcher li a,
.single-post ul.lang-switcher li a,
.single-training ul.lang-switcher li a,
.single-expert ul.lang-switcher li a { color: var(--color-light); }
ul.lang-switcher.lang-switcher--mobile { display: none; }

/* Бургер-меню */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 6px; padding: 4px; z-index: 1100; }
.menu-toggle span { display: block; width: 28px; height: 2px; background-color: var(--color-dark); border-radius: 2px; transition: transform 0.3s, opacity 0.3s, background-color 0.3s; }
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); background-color: var(--color-pink); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); background-color: var(--color-pink); }

/* ==========================================================================
   4. ГЛАВНЫЙ ЭКРАН И СЕКЦИИ
   ========================================================================== */
.hero {
    position: relative;
    min-height: 80vh;
    background: url('https://test.sveti.info/wp-content/uploads/2026/08/b12beba81d50cf25a7b114fa42a6311bc04367aa.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    padding: 140px 20px 80px;
}
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}
.hero-fullscreen__content { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.hero-fullscreen .hero-subtitle { color: rgba(255,255,255,0.8); }
.hero-text { font-size: 1.25rem; line-height: 1.7; margin: 1.5rem 0 2.5rem 0; color: rgba(255,255,255,0.85); }

.page-header { background-color: #F9FAFB; padding-top: 10rem; padding-bottom: 4rem; text-align: center; }

/* Последняя статья */
.latest-post-section { padding: 4rem 0; }
.latest-post-card {
    max-width: 680px;
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    min-height: 380px;
    background-size: cover;
    background-position: center;
    background-color: #28292a;
    display: flex;
    align-items: flex-end;
}
.latest-post-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.80) 40%, rgba(0,0,0,0.15) 100%); }
.latest-post-card__content { position: relative; z-index: 2; padding: 2rem; color: #fff; width: 100%; }
.latest-post-card__label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-pink); display: block; margin-bottom: 0.5rem; }
.latest-post-card__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.75rem; line-height: 1.3; }
.latest-post-card__title a { color: #fff; }
.latest-post-card__title a:hover { opacity: 0.85; }
.latest-post-card__excerpt { opacity: 0.8; margin-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.6; }

/* О проекте / Особенности */
.about-section { padding: 4rem 0; text-align: center; }
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 4rem; text-align: left; }
.feature-card { background-color: var(--color-light); padding: 2.5rem; border-radius: 1rem; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05); }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #FFF0ED; border-radius: 50%; margin-bottom: 1.5rem; }
.feature-icon svg { color: var(--color-orange); }
.feature-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.feature-card p { color: #666; line-height: 1.8; }

/* Эксперты (сетка) */
.experts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1272px; margin: 0 auto; }
.experts-grid .expert-card { background: #ffffff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; height: 100%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); }
.experts-grid .expert-image { width: 100%; height: 431px; overflow: hidden; }
.experts-grid .expert-image img { width: 100%; height: 100%; object-fit: cover; }
.experts-grid .expert-info { padding: 24px 28px 28px 28px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; text-align: left; }
.experts-grid .expert-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.experts-grid .expert-text h3 { order: 1; font-size: 18px; font-weight: 600; color: #28292A; margin: 0 0 6px 0; }
.experts-grid .expert-text span,
.experts-grid .expert-card .expert-info span { order: 2; color: #28292a; font-size: 14px; display: block; margin-bottom: 0; }
.experts-grid .expert-theses { display: none; }
.experts-grid .button-secondary { order: 3; display: inline-block; margin-top: 20px; width: 100%; padding: 14px 28px; text-align: center; border-radius: 16px; border: none; background: var(--color-pink); color: #ffffff; font-weight: 500; transition: all 0.3s ease; }
.experts-grid .button-secondary:hover { background: var(--color-orange); color: #ffffff; }

/* Страница эксперта */
.expert-profile-section { padding: 10rem 0 4rem 0; }
.expert-profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; align-items: flex-start; }
.expert-sidebar { text-align: center; }
.expert-sidebar-photo img { width: 100%; max-width: 300px; height: auto; border-radius: 1rem; }
.expert-sidebar-name { font-size: 2rem; font-weight: 700; margin: 1.5rem 0 0.5rem 0; }
.expert-sidebar-profession { color: var(--color-pink); font-weight: 600; margin-bottom: 2rem; }
.expert-main-content .expert-theses-long { background-color: #F9FAFB; padding: 2rem; border-radius: 0.5rem; margin-bottom: 2rem; line-height: 1.8; }
.expert-description { line-height: 1.8; }
.expert-description h1, .expert-description h2, .expert-description h3 { margin-bottom: 1rem; font-weight: 700; }
.expert-description p { margin-bottom: 1.5rem; }
.expert-description ul, .expert-description ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }

/* CTA-блок */
.cta-section { background-color: #FFF0ED; color: var(--color-dark); padding: 0; overflow: hidden; }
.cta-container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
.cta-content { padding: 4rem 0; }
.cta-content .text-subheading { color: var(--color-dark); }
.cta-content p { color: #555; margin-bottom: 2rem; }
.cta-image img { width: 100%; height: 100%; object-fit: cover; }

/* Лента новостей и посты */
.news-feed-section { padding: 4rem 0; }
.news-feed-list { display: grid; gap: 4rem; }
.news-feed-item { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: center; }
.news-feed-item__image img { border-radius: 0.5rem; width: 100%; height: 180px; object-fit: cover; }
.news-feed-item__title { font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; }
.news-feed-item__title a:hover { color: var(--color-pink); }
.news-feed-item__excerpt { color: #666; }
.news-feed-item__meta { font-size: var(--font-size-small); color: #888; margin-top: 1.5rem; }
.news-feed-item__meta a { font-weight: 600; color: var(--color-dark); }
.news-feed-item__meta a:hover { text-decoration: underline; }

.news-header { position: relative; min-height: 400px; display: flex; align-items: center; text-align: center; background-size: cover; background-position: center; }
.news-header__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); }
.news-header .container { position: relative; z-index: 2; }
.news-header .text-heading { color: var(--color-light); }
.news-content-container { max-width: 800px; }
.news-lead { font-size: 1.5rem; font-weight: 300; color: var(--color-orange); margin: 4rem 0; line-height: 1.6; text-align: center; }
.news-content { line-height: 1.8; }
.news-content h2, .news-content h3 { font-weight: 700; margin: 2.5rem 0 1rem 0; }
.news-content p { margin-bottom: 1.5rem; }
.news-content ul, .news-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }

.news-author-box { display: flex; align-items: center; gap: 1.5rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid #eee; }
.news-author-box__photo { flex-shrink: 0; }
.news-author-box__photo img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; display: block; }
.news-author-box__label { font-size: var(--font-size-small); color: #888; }
.news-author-box__name { font-size: 1.5rem; font-weight: 700; margin: 0.25rem 0; }
.news-author-box__name a:hover { color: var(--color-pink); }
.news-author-box__profession { color: #666; margin: 0; }

/* Мероприятия */
.events-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.event-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: relative; transition: transform 0.3s ease; display: flex; flex-direction: column; }
.event-card:hover { transform: translateY(-5px); }
.event-card.is-past .event-card__image,
.event-card.is-past .event-card__date-badge { filter: grayscale(100%); opacity: 0.7; }
.event-card__image img { width: 100%; height: 220px; object-fit: cover; }
.event-card__date-badge { position: absolute; top: 15px; left: 15px; background: #fff; padding: 5px 12px; border-radius: 8px; text-align: center; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.1); line-height: 1.2; color: var(--color-dark); z-index: 2; }
.event-card__date-badge .day { font-size: 1.2rem; display: block; color: var(--color-pink); }
.event-card__date-badge .month { font-size: 0.8rem; text-transform: uppercase; }
.event-card__content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.event-title { font-size: 1.25rem; margin-bottom: 0.5rem; line-height: 1.3; }
.event-title a:hover { color: var(--color-pink); }
.event-excerpt { font-size: 0.9rem; color: #666; margin-bottom: 1.5rem; flex-grow: 1; }
.button-small { padding: 0.5rem 1.2rem; font-size: 0.9rem; }
.event-footer { margin-top: auto; border-top: 1px solid #eee; padding-top: 1rem; display: flex; justify-content: space-between; align-items: flex-end; }
.event-prices-list { display: flex; flex-direction: column; gap: 0.25rem; }
.price-tag { font-weight: 700; font-size: 1rem; color: var(--color-dark); }
.price-tag.free { color: var(--color-pink); text-transform: uppercase; font-size: 0.875rem; }

.news-content-container-wide { max-width: 1100px; width: 100%; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.event-top-bar { background-color: #fff; border-radius: 1rem; padding: 2.5rem 3rem; margin-top: -5rem; margin-bottom: 4rem; position: relative; z-index: 10; box-shadow: 0 15px 40px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }
.event-top-bar__info { display: flex; gap: 4rem; align-items: center; }
.event-meta-item { display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
.event-meta-item:not(:last-child)::after { content: ''; position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); height: 40px; width: 1px; background-color: #e0e0e0; }
.meta-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: #999; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.meta-label::before { content: ''; display: block; width: 6px; height: 6px; background-color: var(--color-pink); border-radius: 50%; }
.meta-value { font-size: 1.75rem; font-weight: 800; color: var(--color-dark); line-height: 1.1; }
.prices-row { display: flex; align-items: baseline; gap: 0; }
.prices-row span { margin-right: 12px; font-feature-settings: "tnum"; }
.prices-row span:not(:last-child)::after { content: '/'; color: #ddd; font-weight: 300; margin-left: 12px; font-size: 1.25rem; }
.event-top-bar__action .button { padding: 1.2rem 3rem; font-size: 1.1rem; }
.event-body-grid { display: grid; grid-template-columns: 1fr 300px; gap: 4rem; align-items: flex-start; }
.event-body-content { font-size: 1.1rem; line-height: 1.8; color: #444; }

.sidebar-expert-card { background: #F9FAFB; padding: 2rem; border-radius: 1rem; text-align: center; position: sticky; top: 2rem; border: 1px solid #eee; }
.sidebar-expert-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: #888; margin-bottom: 1.5rem; font-weight: 700; }
.sidebar-expert-link { text-decoration: none; display: block; transition: transform 0.2s; }
.sidebar-expert-link:hover { transform: translateY(-3px); }
.sidebar-expert-link img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem auto; box-shadow: 0 8px 20px rgba(0,0,0,0.1); border: 3px solid #fff; }
.sidebar-expert-link .name { font-size: 1.25rem; font-weight: 700; color: var(--color-dark); margin-bottom: 0.5rem; }
.sidebar-expert-link .prof { font-size: 0.9rem; color: #666; margin-bottom: 1.2rem; line-height: 1.4; display: block; }
.sidebar-expert-link .link-text { font-size: 0.85rem; color: var(--color-pink); font-weight: 700; text-transform: uppercase; }

/* Магазин */
.shop-section { background-color: var(--color-orange); padding: 4rem 0; }
.shop-filter { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 3rem; }
.filter-btn { display: inline-block; padding: 0.55rem 1.5rem; border: 2px solid rgba(255,255,255,0.6); border-radius: 50px; background-color: transparent; color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.25s ease; }
.filter-btn:hover { border-color: #fff; background-color: rgba(255,255,255,0.15); transform: translateY(-2px); }
.filter-btn.active { background-color: #fff; border-color: #fff; color: var(--color-orange); }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.product-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.05); text-align: center; transition: 0.3s; display: flex; flex-direction: column; border: 1px solid #ffeef5; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.product-image img { width: 100%; height: 250px; object-fit: cover; }
.product-info { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; text-align: left; }
.product-text { flex-grow: 1; }
.product-info h3 { font-size: 1.2rem; margin-bottom: 0.5rem; font-weight: 700; }
.product-desc { font-size: 0.9rem; color: #666; margin-bottom: 1.0rem; line-height: 1.4; }
.product-price { font-size: 1.25rem; font-weight: 800; color: var(--color-pink); margin-bottom: 1.5rem; }

/* Плавающая корзина и модальные окна */
.floating-cart { position: fixed; bottom: 30px; right: 30px; background: var(--color-dark); color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: 0.3s; }
.floating-cart:hover { transform: scale(1.1); background: var(--color-pink); }
.cart-icon { font-size: 24px; line-height: 1; }
.cart-count { position: absolute; top: -5px; right: -5px; background: var(--color-pink); color: #fff; font-size: 12px; font-weight: bold; min-width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

.custom-modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(5px); align-items: center; justify-content: center; }
.custom-modal-content { background-color: #fff; padding: 2.5rem; border-radius: 1.5rem; width: 90%; max-width: 450px; position: relative; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.close-modal { position: absolute; top: 15px; right: 20px; font-size: 2rem; line-height: 1; color: #ccc; cursor: pointer; transition: 0.2s; }
.close-modal:hover { color: var(--color-pink); }
.messengers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.messenger-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: transform 0.2s, box-shadow 0.2s; color: var(--color-dark); background: #f9f9f9; cursor: pointer; }
.messenger-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.messenger-btn img { width: 32px; height: 32px; margin-bottom: 8px; }

/* ==========================================================================
   5. ФУТЕР (В ТОЧНОСТИ КАК НА НОВОМ САЙТЕ)
   ========================================================================== */
.site-footer { 
    background-color: #f7d2e3; 
    color: #4a2535;             
    padding-top: 15px;          
    padding-bottom: 15px;       
    margin-top: 0; 
    text-align: center; 
    font-size: 0.85rem;
    border-top: 2px solid #e2007a; 
}
.site-footer a { color: #4a2535; text-decoration: underline; opacity: 0.85; }
.site-footer a:hover { opacity: 1; }

/* ==========================================================================
   6. АДАПТИВ (МЕДИАТЕГИ)
   ========================================================================== */
@media (max-width: 1024px) {
    .experts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .menu-toggle { display: flex; }
    .menu-toggle.active { position: fixed; top: 1.25rem; right: 1rem; z-index: 1200; }
    
    .main-navigation { position: fixed; top: 0; right: -100%; width: 75%; max-width: 300px; height: 100vh; background: #fff; padding: 5rem 1.5rem 2rem; box-shadow: -5px 0 20px rgba(0,0,0,0.15); transition: right 0.3s ease; z-index: 1050; overflow-y: auto; display: flex; flex-direction: column; align-items: center; }
    .main-navigation.active { right: 0; }
    .main-navigation ul { flex-direction: column; gap: 0; align-items: center; width: 100%; }
    .main-navigation ul li { width: 100%; text-align: center; }
    .main-navigation ul li a { display: block; padding: 0.9rem 0; font-size: 1.1rem; color: var(--color-dark); }

    .single-post .main-navigation a,
    .single-training .main-navigation a,
    .single-expert .main-navigation a,
    .home .main-navigation a { color: var(--color-dark); }

    ul.lang-switcher.lang-switcher--mobile { display: flex; justify-content: center; gap: 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #eee; }
    ul.lang-switcher.lang-switcher--mobile li a { font-size: 1rem; color: var(--color-dark); opacity: 0.5; }
    ul.lang-switcher.lang-switcher--mobile li.current-lang a { opacity: 1; }
    ul.lang-switcher--desktop { display: none; }

    .hero-container, .cta-container, .features-grid, .products-grid, .news-feed-item, .expert-profile-grid { grid-template-columns: 1fr; text-align: center; }
    .features-grid { text-align: left; }
}

@media (max-width: 768px) {
    .experts-grid { grid-template-columns: 1fr; }
    .experts-grid .expert-image { height: 350px; }
}

@media (max-width: 576px) { 
    .products-grid { grid-template-columns: 1fr; } 
}

/* ===== CSS moved from front-page.php ===== */


/* --- СТИЛИ КНОПОК ИЗ FIGMA (#F60D73 / hover: #FF20BF) --- */
.button-primary, 
.button-secondary, 
.button {
    background: #F60D73 !important;
    color: #ffffff !important;
    border: none !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.3s ease !important;
    box-sizing: border-box !important;
}

.button-primary:hover, 
.button-secondary:hover, 
.button:hover {
    background: #FF20BF !important;
}

/* Единый стиль основных кнопок */
.button-primary {
    font-size: 15px !important;
    border-radius: 16px !important;
    padding: 10px 20px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Кнопки в карточках экспертов/событий */
.button-secondary {
    font-size: 15px !important;
    border-radius: 16px !important;
    padding: 10px 20px !important;
    height: 42px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- ОБЩИЙ КОНТЕЙНЕР (1200px) --- */
.site-main .container,
.events-three-col-section .container,
.experts-layout-section .experts-container,
.latest-posts-section .container,
.cta-section-wrapper .container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* --- ГЛАВНЫЙ ЭКРАН --- */
.hero-section.hero-fullscreen {
    position: relative !important;
    width: 100% !important;
    min-height: 480px !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background-color: #28292A !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 60px 64px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.hero-section.hero-fullscreen .hero-fullscreen__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.hero-section.hero-fullscreen .hero-fullscreen__content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
}

.hero-section .text-heading {
    font-family: 'Nunito', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 58px !important;
    color: #FFFFFF !important;
    text-align: left !important;
    margin: 0 !important;
}

.hero-section .hero-text {
    font-family: 'Nunito', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #FFFFFF !important;
    text-align: left !important;
    margin: 0 0 8px 0 !important;
    max-width: 540px !important;
}

/* --- ЗАГОЛОВКИ СЕКЦИЙ --- */
.text-subheading-figma {
    font-family: 'Nunito', sans-serif !important;
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    color: #28292A !important;
    text-align: left !important;
    font-weight: 600 !important;
}

/* --- СЕТКА НА 3 КОЛОНКИ --- */
.events-three-col-section,
.experts-layout-section,
.latest-posts-section,
.cta-section-wrapper {
    margin-top: 40px !important;
}

.events-three-col-grid,
.experts-grid-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;
}

/* Карточки событий */
.events-three-col-grid .event-card {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    position: relative !important;
    height: 100% !important;
}

.events-three-col-grid .event-card__image {
    width: 100% !important;
    height: 200px !important;
    position: relative !important;
    overflow: hidden !important;
}
.events-three-col-grid .event-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

.event-card-overlay-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.event-badge-date,
.event-badge-type {
    font-family: 'Nunito', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #28292A;
    background: #ffffff;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.event-badge-date {
    color: #F60D73;
}

.events-three-col-grid .event-card__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    padding: 18px !important;
}

.events-three-col-grid .event-title {
    font-family: 'Nunito', sans-serif !important;
    margin-bottom: 15px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #28292A;
    line-height: 1.35;
}

/* Эксперты */
.experts-sidebar-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    text-align: left;
    height: 100%;
    box-sizing: border-box;
}

.experts-sidebar-card .section-intro {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.45;
    margin-bottom: 20px;
    text-align: left;
}

.experts-sidebar-link {
    font-family: 'Nunito', sans-serif !important;
    display: inline-flex;
    align-items: center;
    color: #F60D73 !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.2s;
}
.experts-sidebar-link:hover {
    opacity: 0.8;
}

.experts-grid-row .expert-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    height: 100%;
}

.experts-grid-row .expert-image {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
}

.experts-grid-row .expert-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

.experts-grid-row .expert-info {
    padding: 18px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.experts-grid-row .expert-text h3 {
    font-family: 'Nunito', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600;
    margin-bottom: 4px;
    color: #28292A;
}

.experts-grid-row .expert-text span {
    font-family: 'Nunito', sans-serif !important;
    display: block;
    color: #555; 
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 12px;
}

/* --- ПОЛЕЗНЫЕ МАТЕРИАЛЫ (КВАДРАТНЫЕ + ОТСТУПЫ СЛЕВА 40px) --- */
.latest-posts-section .container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

.latest-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
}

div.latest-post-card {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    padding: 40px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    position: relative !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    text-decoration: none !important;
    text-align: left !important;
}

div.latest-post-card .latest-post-card__img-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
}

div.latest-post-card .latest-post-card__img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.latest-post-card__overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.65) 100%) !important;
    z-index: 1 !important;
}

.latest-post-card__content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
}

.latest-post-card__title {
    font-family: 'Nunito', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    text-align: left !important;
}
.latest-post-card__title a {
    color: #ffffff !important;
    text-decoration: none !important;
    text-align: left !important;
    display: block !important;
}

.latest-post-card-footer {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-top: 0 !important;
    text-align: left !important;
}

.latest-post-card .button-primary {
    width: auto !important;
    min-width: 110px !important;
    padding: 8px 18px !important;
    height: 38px !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* --- КОМПАКТНЫЙ CTA БЛОК (ПОЛУЧИТЕ ПОМОЩЬ ОНЛАЙН) --- */
.cta-banner {
    position: relative !important;
    width: 100% !important;
    background: url('https://test.sveti.info/wp-content/uploads/2026/08/pomosch_online.jpg') center right 15% / cover no-repeat !important;
    border-radius: 16px !important;
    padding: 36px 40px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(16,16,16,0.92) 0%, rgba(16,16,16,0.75) 45%, rgba(16,16,16,0.3) 75%, transparent 100%);
    z-index: 1;
}

.cta-banner-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.cta-banner-content {
    max-width: 420px;
    width: 100%;
}

.cta-banner-content h2 {
    font-family: 'Nunito', sans-serif !important;
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    text-align: left !important;
    line-height: 1.2 !important;
}

.cta-banner-content p {
    font-family: 'Nunito', sans-serif !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
    text-align: left !important;
    opacity: 0.95;
}

@media (max-width: 992px) {
    .events-three-col-grid,
    .experts-grid-row,
    .latest-posts-grid {
        grid-template-columns: 1fr !important;
        max-width: 500px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .cta-banner {
        background: linear-gradient(180deg, rgba(16,16,16,0.85) 0%, rgba(16,16,16,0.6) 100%), url('https://test.sveti.info/wp-content/uploads/2026/08/pomosch_online.jpg') center/cover no-repeat !important;
        padding: 30px 20px !important;
    }
    .cta-banner::before {
        display: none;
    }
    .cta-banner-content {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   7. HOME DESKTOP — COMPACT FULL-WIDTH HERO + HEADER
   ========================================================================== */
@media (min-width: 993px) {
    .home .hero-section.hero-fullscreen {
        width: 100% !important;
        max-width: none !important;
        min-height: 480px !important;
        height: 480px !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 64px !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center center !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    .home .hero-section.hero-fullscreen .hero-fullscreen__overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.35) !important;
        z-index: 1 !important;
    }

    .home .hero-section.hero-fullscreen .hero-fullscreen__content {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 145px 20px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .home .hero-section .text-heading {
        width: 540px !important;
        max-width: 100% !important;
        font-family: 'Nunito', sans-serif !important;
        font-size: 48px !important;
        font-weight: 700 !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
        color: #ffffff !important;
        margin: 0 0 12px 0 !important;
        text-align: left !important;
    }

    .home .hero-section .hero-text {
        width: 560px !important;
        max-width: 100% !important;
        font-family: 'Nunito', sans-serif !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
        color: #ffffff !important;
        margin: 0 0 22px 0 !important;
        text-align: left !important;
    }

    .home .hero-section .button-primary {
        width: 190px !important;
        min-width: 190px !important;
        height: 50px !important;
        padding: 14px 34px !important;
        border-radius: 16px !important;
        background: #E60073 !important;
        color: #ffffff !important;
        font-family: 'Nunito', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    .home .hero-section .button-primary:hover {
        background: #FF20BF !important;
    }

    /* Header is over the hero. */
    .home .site-header {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 72px !important;
        padding: 0 64px !important;
        background: transparent !important;
        z-index: 20 !important;
        box-sizing: border-box !important;
    }

    /* Logged-in WordPress admin bar is 32px high on desktop. */
    .admin-bar.home .site-header {
        top: 32px !important;
    }

    .home .site-header .header-container {
        width: 100% !important;
        max-width: 1400px !important;
        height: 72px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        display: grid !important;
        grid-template-columns: 130px 1fr auto !important;
        align-items: center !important;
        column-gap: 24px !important;
        box-sizing: border-box !important;
    }

    /* Reserve a permanent place for the future logo. */
    .home .site-branding {
        min-width: 130px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .home .main-navigation {
        justify-self: center !important;
    }

    .home .main-navigation > ul {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .home .main-navigation a {
        display: inline-block !important;
        color: #ffffff !important;
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
        padding: 8px 0 !important;
        white-space: nowrap !important;
        opacity: 1 !important;
    }

    /* Mobile language switcher must never appear on desktop. */
    .home ul.lang-switcher.lang-switcher--mobile {
        display: none !important;
    }

    .home ul.lang-switcher--desktop {
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
        margin: 0 !important;
        justify-self: end !important;
    }

    .home ul.lang-switcher--desktop li a {
        color: #ffffff !important;
        font-size: 12px !important;
        line-height: 20px !important;
        padding: 8px 0 !important;
    }

    .home .site-branding .custom-logo,
    .home .logo-link img {
        max-height: 44px !important;
        width: auto !important;
    }
}

/* ========================================================================== 
   8. HOME DESKTOP — LIGHTER 400PX HERO
   Keeps full-width background, raises content and preserves logo space.
   ========================================================================== */
@media (min-width: 993px) {
    .home .hero-section.hero-fullscreen {
        min-height: 400px !important;
        height: 400px !important;
        padding: 0 64px !important;
        background-position: center center !important;
    }

    .home .hero-section.hero-fullscreen .hero-fullscreen__content {
        max-width: 1400px !important;
        padding: 104px 20px 0 !important;
    }

    .home .hero-section .text-heading {
        width: 500px !important;
        font-size: 42px !important;
        line-height: 1.08 !important;
        margin-bottom: 10px !important;
    }

    .home .hero-section .hero-text {
        width: 520px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 18px !important;
    }

    .home .hero-section .button-primary {
        width: 180px !important;
        min-width: 180px !important;
        height: 46px !important;
        padding: 12px 30px !important;
        font-size: 14px !important;
    }

    .home .site-header,
    .home .site-header .header-container {
        height: 64px !important;
    }

    .home .site-header .header-container {
        grid-template-columns: 140px 1fr auto !important;
    }

    .home .site-branding {
        min-width: 140px !important;
        min-height: 40px !important;
    }

    .home .main-navigation > ul {
        gap: 28px !important;
    }

    .home .main-navigation a {
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .home .site-branding .custom-logo,
    .home .logo-link img {
        max-height: 40px !important;
    }
}

/* ========================================================================== 
   9. HOME DESKTOP — HORIZONTAL BALANCE + LARGER NAVIGATION
   Keeps the 400px hero height, gives the copy more room and improves menu legibility.
   ========================================================================== */
@media (min-width: 993px) {
    /* Move the hero copy slightly inward and give it a wider working area. */
    .home .hero-section.hero-fullscreen .hero-fullscreen__content {
        max-width: 1400px !important;
        padding: 92px 64px 0 !important;
    }

    .home .hero-section .text-heading {
        width: 560px !important;
        max-width: 560px !important;
        font-size: 44px !important;
        line-height: 1.08 !important;
        margin-bottom: 10px !important;
    }

    .home .hero-section .hero-text {
        width: 600px !important;
        max-width: 600px !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        margin-bottom: 18px !important;
    }

    /* The current 13px menu is too small on a desktop screen. */
    .home .main-navigation > ul {
        gap: 30px !important;
    }

    .home .main-navigation a {
        font-size: 15px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
    }

    .home ul.lang-switcher--desktop li a {
        font-size: 13px !important;
        line-height: 20px !important;
    }
}

/* ========================================================================== 
   10. HOME DESKTOP — FINAL HERO COMPOSITION
   - keeps 400px hero height
   - shifts copy ~50px inward
   - keeps clear space for the future logo
   - keeps navigation readable
   - prepares background positioning for the future hero image
   ========================================================================== */
@media (min-width: 993px) {
    /* Text block: move it about 50px to the right compared with the previous version. */
    .home .hero-section.hero-fullscreen .hero-fullscreen__content {
        max-width: 1400px !important;
        padding: 92px 114px 0 !important;
    }

    /* Keep the copy broad enough so it does not look like a small island on the left. */
    .home .hero-section .text-heading {
        width: 580px !important;
        max-width: 580px !important;
    }

    .home .hero-section .hero-text {
        width: 620px !important;
        max-width: 620px !important;
    }

    /* Future hero artwork: use a right-biased focal point.
       With the current temporary yoga image the visible change can be small,
       but this is the intended setting for the replacement artwork. */
    .home .hero-section.hero-fullscreen {
        background-position: 60% center !important;
    }

    /* Keep a real logo slot at the left of the navigation. */
    .home .site-header .header-container {
        grid-template-columns: 150px 1fr auto !important;
        column-gap: 28px !important;
    }

    .home .site-branding {
        min-width: 150px !important;
        min-height: 40px !important;
    }

    /* Navigation stays at the improved readable size. */
    .home .main-navigation > ul {
        gap: 30px !important;
    }

    .home .main-navigation a {
        font-size: 15px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
    }

    .home ul.lang-switcher--desktop li a {
        font-size: 13px !important;
    }
}

/* ========================================================================== 
   11. HOME DESKTOP — UNIFIED 1200PX CONTENT GRID
   - one horizontal system for homepage sections
   - events centered when only two cards are shown
   - experts remain three equal columns
   - useful-material cards stay two per row but become lower/wider
   - CTA uses the same content width
   ========================================================================== */
@media (min-width: 993px) {
    /* One shared desktop content width below the hero. */
    .home .events-three-col-section .container,
    .home .experts-layout-section .experts-container,
    .home .latest-posts-section .container,
    .home .cta-section-wrapper .container {
        width: 100% !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* Events: two Figma-like cards centered inside the common container. */
    .home .events-three-col-section .text-subheading-figma {
        width: 100% !important;
        max-width: 840px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px !important;
    }

    .home .events-three-col-grid {
        width: 100% !important;
        max-width: 840px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
        justify-content: center !important;
        align-items: stretch !important;
    }

    /* If a third event is present, use the full shared width instead of leaving it stranded. */
    .home .events-three-col-grid:has(> :nth-child(3)) {
        max-width: 1160px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    /* Experts: one text card + two experts, all on the same 3-column grid. */
    .home .experts-grid-row {
        width: 100% !important;
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
        align-items: stretch !important;
    }

    /* Useful materials: keep two cards, but make them wide landscape cards instead of squares. */
    .home .latest-posts-grid {
        width: 100% !important;
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }

    .home div.latest-post-card {
        aspect-ratio: auto !important;
        width: 100% !important;
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
        padding: 32px !important;
    }

    .home .latest-post-card__title {
        max-width: 430px !important;
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
    }

    /* CTA aligns exactly with the useful-material/expert grid width. */
    .home .cta-banner {
        width: 100% !important;
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ========================================================================== 
   12. HOME DESKTOP — LEFT-ALIGNED EVENTS + MORE COMPACT LOWER BLOCKS
   - events always use the full 3-column desktop grid and start from the left
   - useful-material cards are reduced in height
   - online-help CTA is made more compact
   ========================================================================== */
@media (min-width: 993px) {
    /* Events: heading and cards align with the same left edge as the other sections. */
    .home .events-three-col-section .text-subheading-figma {
        width: 100% !important;
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px !important;
    }

    .home .events-three-col-grid,
    .home .events-three-col-grid:has(> :nth-child(3)) {
        width: 100% !important;
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
        justify-content: start !important;
        align-items: stretch !important;
    }

    /* Useful materials: still two cards in a row, but substantially less dominant. */
    .home div.latest-post-card {
        aspect-ratio: auto !important;
        width: 100% !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        padding: 28px !important;
    }

    .home .latest-post-card__title {
        max-width: 420px !important;
        font-size: 1.25rem !important;
        line-height: 1.25 !important;
    }

    /* Online-help CTA: lower banner, preserving readable text and the same 1160px grid. */
    .home .cta-banner {
        width: 100% !important;
        max-width: 1160px !important;
        min-height: 190px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 24px 32px !important;
        display: flex !important;
        align-items: center !important;
    }

    .home .cta-banner-content {
        max-width: 460px !important;
    }

    .home .cta-banner-content h2 {
        font-size: 1.35rem !important;
        margin-bottom: 6px !important;
    }

    .home .cta-banner-content p {
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }
}

/* ========================================================================== 
   13. HOME DESKTOP — LIGHTER USEFUL MATERIALS + LIGHTER CTA
   - keep two useful-material cards in a row
   - reduce their height so they visually match the sections above
   - reduce the online-help banner height without changing its width
   ========================================================================== */
@media (min-width: 993px) {
    .home div.latest-post-card {
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
        padding: 24px !important;
    }

    .home .latest-post-card__title {
        max-width: 390px !important;
        font-size: 1.12rem !important;
        line-height: 1.25 !important;
    }

    .home .latest-post-card .button-primary {
        height: 36px !important;
        min-width: 96px !important;
        padding: 7px 16px !important;
        font-size: 13px !important;
    }

    .home .cta-banner {
        min-height: 150px !important;
        padding: 18px 28px !important;
    }

    .home .cta-banner-content {
        max-width: 430px !important;
    }

    .home .cta-banner-content h2 {
        font-size: 1.22rem !important;
        margin-bottom: 5px !important;
    }

    .home .cta-banner-content p {
        font-size: 0.84rem !important;
        line-height: 1.32 !important;
        margin-bottom: 10px !important;
    }

    .home .cta-banner .button-primary {
        height: 38px !important;
        padding: 8px 18px !important;
        font-size: 13px !important;
    }
}

/* ========================================================================== 
   14. HOME DESKTOP — HERO TITLE LINE BREAK
   Keeps the slogan as two meaningful lines:
   "Свети ярко," / "живи с любовью!"
   ========================================================================== */
@media (min-width: 993px) {
    .home .hero-section .text-heading {
        width: 560px !important;
        max-width: 560px !important;
    }
}

/* ========================================================================== 
   15. HOME DESKTOP — COMPACT ONLINE-HELP CTA + UNIFIED BUTTON CORNERS
   - CTA becomes narrower and lighter
   - CTA button moves to the right side
   - expert / useful-material / CTA buttons share one corner radius
   ========================================================================== */
@media (min-width: 993px) {
    .home .cta-banner {
        width: 100% !important;
        max-width: 980px !important;
        min-height: 124px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 18px 24px !important;
        display: flex !important;
        align-items: center !important;
    }

    .home .cta-banner-inner {
        width: 100% !important;
    }

    .home .cta-banner-content {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "title action"
            "text action" !important;
        column-gap: 36px !important;
        row-gap: 4px !important;
        align-items: center !important;
    }

    .home .cta-banner-content h2 {
        grid-area: title !important;
        margin: 0 !important;
        max-width: 520px !important;
        font-size: 1.18rem !important;
        line-height: 1.2 !important;
    }

    .home .cta-banner-content p {
        grid-area: text !important;
        margin: 0 !important;
        max-width: 560px !important;
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
    }

    .home .cta-banner .button-primary {
        grid-area: action !important;
        justify-self: end !important;
        align-self: center !important;
        min-width: 150px !important;
        width: auto !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 9px 20px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* One visual corner system for homepage action buttons. */
    .home .experts-grid-row .button-secondary,
    .home .latest-post-card .button-primary,
    .home .cta-banner .button-primary {
        border-radius: 14px !important;
    }
}


/* ==========================================================================
   16. HOME DESKTOP — LIGHTER LOWER VISUALS
   - keep the current sizes and layout
   - reduce dark overlays on useful materials and online-help CTA
   - preserve white-text readability without making the bottom feel heavy
   ========================================================================== */
@media (min-width: 993px) {
    .home .latest-post-card__overlay {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.20) 0%,
            rgba(0, 0, 0, 0.38) 100%
        ) !important;
    }

    .home .cta-banner::before {
        display: block !important;
        background: linear-gradient(
            90deg,
            rgba(16, 16, 16, 0.68) 0%,
            rgba(16, 16, 16, 0.52) 42%,
            rgba(16, 16, 16, 0.18) 72%,
            rgba(16, 16, 16, 0.04) 100%
        ) !important;
    }
}


/* ========================================================================== 
   17. HOME DESKTOP — FINAL 360PX HERO HEIGHT
   - reduce the hero height without shrinking typography or buttons
   - raise the copy slightly so the next section appears sooner
   - keep the future logo slot and current navigation untouched
   ========================================================================== */
@media (min-width: 993px) {
    .home .hero-section.hero-fullscreen {
        min-height: 360px !important;
        height: 360px !important;
        background-position: 60% center !important;
    }

    .home .hero-section.hero-fullscreen .hero-fullscreen__content {
        padding: 76px 114px 0 !important;
    }
}


/* ========================================================================== 
   18. HOME DESKTOP — HERO COPY RHYTHM + FOOTER BREATHING
   - keep hero at 360px
   - force the second hero sentence onto a new line via markup
   - add breathing room between useful materials and footer
   - replace the strong pink footer slab with a quiet neutral-lilac surface
   ========================================================================== */
@media (min-width: 993px) {
    .home .hero-section .hero-text .hero-text-break {
        display: block !important;
    }

    .home .latest-posts-section {
        margin-bottom: 36px !important;
    }
}

.site-footer {
    background-color: #FAF7F2 !important;
    color: #5A5148 !important;
    border-top: 1px solid #E9E1D7 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.site-footer a {
    color: #756B61 !important;
    opacity: 0.9 !important;
}

.site-footer a:hover {
    color: #E60073 !important;
    opacity: 1 !important;
}

/* ========================================================================== 
   19. HOME — UNIFIED CARD BUTTON GEOMETRY
   - keep the selected warm footer (#FAF7F2)
   - give event, expert, online-help and useful-material buttons the same
     42px height and 14px corner radius so they look equally rounded
   ========================================================================== */
@media (min-width: 993px) {
    .home .events-three-col-grid .button-secondary,
    .home .experts-grid-row .button-secondary,
    .home .latest-post-card .button-primary,
    .home .cta-banner .button-primary {
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .home .latest-post-card .button-primary {
        min-width: 100px !important;
        padding: 9px 18px !important;
    }

    .home .cta-banner .button-primary {
        min-width: 150px !important;
        padding: 9px 20px !important;
    }
}


/* ========================================================================== 
   20. SINGLE EXPERT — RESTORE TABS, PRICES & GALLERIES
   These styles existed in the original site stylesheet and are required for
   the expert page tab interface. Without them all tab panes are shown at once
   and buttons fall back to browser defaults.
   ========================================================================== */
.single-expert .expert-tabs-nav {
    display: flex;
    gap: 2rem;
    border-bottom: 2px solid #eee;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.single-expert .tab-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 600;
    color: #888 !important;
    padding: 0 0 1rem !important;
    margin: 0;
    position: relative;
    cursor: pointer;
    transition: color 0.2s ease;
}

.single-expert .tab-btn:hover {
    color: #E60073 !important;
}

.single-expert .tab-btn.active {
    color: #E60073 !important;
}

.single-expert .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #E60073;
}

.single-expert .tab-pane {
    display: none;
}

.single-expert .tab-pane.active {
    display: block;
}

.single-expert .expert-gallery-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.single-expert .expert-gallery-content img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.single-expert .expert-gallery-content img:hover {
    opacity: 0.85;
}

.single-expert .expert-prices-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.single-expert .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #f9f9f9;
    border-radius: 0.5rem;
}

.single-expert .price-row span {
    color: #888;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
}

.single-expert .price-row b {
    font-size: 1.25rem;
    color: var(--color-dark);
}

@media (max-width: 768px) {
    .single-expert .expert-tabs-nav {
        gap: 10px 16px;
        justify-content: center;
        margin-bottom: 1.5rem;
    }

    .single-expert .tab-btn {
        font-size: 0.95rem;
        padding-bottom: 0.7rem !important;
    }
}

@media (max-width: 600px) {
    .single-expert .expert-gallery-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .single-expert .expert-gallery-content img {
        height: 120px;
    }
}


/* ========================================================================== 
   21. SINGLE EXPERT — COMPACT COURSES & ARTICLES ARCHIVE
   - upcoming courses remain visual cards
   - past courses become compact text rows
   - latest 3 articles remain cards; older articles become compact rows
   ========================================================================== */
.single-expert .expert-content-section + .expert-content-section {
    margin-top: 2rem;
}

.single-expert .expert-content-heading {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-dark);
}

.single-expert .expert-featured-grid {
    margin-bottom: 0;
}

.single-expert .expert-compact-list {
    border-top: 1px solid #ececec;
}

.single-expert .expert-compact-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px 4px;
    border-bottom: 1px solid #ececec;
    color: var(--color-dark);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.single-expert .expert-compact-row:hover {
    background: #fafafa;
    color: #E60073;
}

.single-expert .expert-compact-date {
    color: #8a8a8a;
    font-size: .9rem;
    white-space: nowrap;
}

.single-expert .expert-compact-title {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 600;
}

.single-expert .expert-compact-action {
    color: #E60073;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .single-expert .expert-compact-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 2px;
    }

    .single-expert .expert-compact-action {
        justify-self: start;
    }
}

/* ==========================================================================
   22. SINGLE TRAINING — FINISHED EVENT STATUS
   Past events remain readable, but booking is disabled and visually muted.
   ========================================================================== */
.single-training .event-ended-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 150px !important;
    min-height: 48px !important;
    padding: 10px 24px !important;
    border: 1px solid #CFCFCF !important;
    border-radius: 14px !important;
    background: #D9D9D9 !important;
    color: #666666 !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   23. SINGLE EXPERT — REVIEWS COLLAPSE
   Show the first 8 review images and reveal the rest on demand.
   ========================================================================== */
.single-expert .expert-review-is-hidden {
    display: none !important;
}

.single-expert .expert-reviews-more-wrap {
    margin-top: 24px;
    text-align: center;
}

.single-expert .expert-reviews-toggle {
    appearance: none;
    -webkit-appearance: none;
    min-height: 42px;
    padding: 9px 20px;
    border: 1px solid #E60073;
    border-radius: 14px;
    background: #ffffff;
    color: #E60073;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    line-height: 1.2;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.single-expert .expert-reviews-toggle:hover {
    background: #E60073;
    color: #ffffff;
}

/* ==========================================================================
   24. SINGLE EXPERT — REVIEWS BUTTON POSITION
   Keep the reveal button close to the visible review gallery.
   ========================================================================== */
.single-expert .expert-reviews-more-wrap {
    margin-top: 28px !important;
    margin-bottom: 8px !important;
    text-align: center;
}

.single-expert .expert-reviews-content {
    transition: max-height .25s ease;
}


/* ========================================================================== 
   25. SINGLE EXPERT — REVIEWS IN BATCHES
   The button stays directly under the visible reviews; each click reveals
   only the next batch instead of opening the whole archive at once.
   ========================================================================== */
.single-expert .expert-reviews-content {
    max-height: none !important;
    transition: none !important;
}

.single-expert .expert-reviews-more-wrap {
    margin-top: 24px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
}


/* ==========================================================================
   26. SINGLE EXPERT — REVIEW GRID + LEFT-ALIGNED LOAD BUTTON
   Reviews form their own grid, so hidden WYSIWYG elements cannot leave a
   large empty area. The button sits directly below the grid on the left.
   ========================================================================== */
.single-expert .expert-reviews-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.single-expert .expert-reviews-source[hidden] {
    display: none !important;
}

.single-expert .expert-reviews-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 220px)) !important;
    column-gap: 72px !important;
    row-gap: 12px !important;
    justify-content: start !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-expert .expert-review-grid-item {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-expert .expert-review-grid-item[hidden] {
    display: none !important;
}

.single-expert .expert-review-grid-item > *,
.single-expert .expert-review-grid-item a,
.single-expert .expert-review-grid-item figure {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

.single-expert .expert-review-grid-item img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
}

.single-expert .expert-reviews-more-wrap {
    margin: 18px 0 10px 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

@media (max-width: 768px) {
    .single-expert .expert-reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .single-expert .expert-reviews-more-wrap {
        margin-top: 16px !important;
        text-align: left !important;
    }
}

/* ==========================================================================
   27. SINGLE EXPERT — INDIVIDUAL CONTACT MODAL
   Показываются только заполненные контакты конкретного эксперта.
   ========================================================================== */
body.expert-contact-modal-open {
    overflow: hidden !important;
}

.expert-contact-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.expert-contact-modal.is-open {
    display: flex;
}

.expert-contact-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.58);
    backdrop-filter: blur(4px);
}

.expert-contact-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border-radius: 26px;
    padding: 34px 36px 36px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.expert-contact-modal__close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: #b8b8b8;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.expert-contact-modal__heading {
    text-align: center;
    margin-bottom: 22px;
}

.expert-contact-modal__heading h2 {
    margin: 0 38px 4px;
    font-size: 24px;
    line-height: 1.2;
    color: #28292A;
}

.expert-contact-modal__name {
    font-size: 18px;
    font-weight: 700;
    color: #E60073;
    margin-bottom: 5px;
}

.expert-contact-modal__heading p {
    margin: 0;
    font-size: 16px;
    color: #666;
}

.expert-contact-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.expert-contact-option {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 16px 12px;
    border: 1px solid #f0f0f0;
    border-radius: 18px;
    background: #fafafa;
    color: #28292A !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.expert-contact-option:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.expert-contact-option__icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}

.expert-contact-option__label {
    font-size: 16px;
    font-weight: 700;
}

.expert-contact-option--telegram .expert-contact-option__icon { background: #229ED9; }
.expert-contact-option--whatsapp .expert-contact-option__icon { background: #25D366; }
.expert-contact-option--instagram .expert-contact-option__icon { background: #C13584; }
.expert-contact-option--email .expert-contact-option__icon { background: #EA4335; }
.expert-contact-option--phone .expert-contact-option__icon { background: #60656B; }
.expert-contact-option--viber .expert-contact-option__icon { background: #7360F2; }
.expert-contact-option--signal .expert-contact-option__icon { background: #3A76F0; }

@media (max-width: 600px) {
    .expert-contact-modal {
        padding: 16px;
    }

    .expert-contact-modal__dialog {
        border-radius: 24px;
        padding: 30px 20px 24px;
    }

    .expert-contact-modal__heading h2 {
        font-size: 22px;
    }

    .expert-contact-modal__grid {
        gap: 10px;
    }

    .expert-contact-option {
        min-height: 104px;
        border-radius: 16px;
    }
}



/* ==========================================================================
   28. SINGLE EXPERT — BiP + PERSONAL WEBSITE
   BiP is an optional contact method. The personal website is deliberately
   shown as a quieter text link so it does not compete with direct booking.
   ========================================================================== */
.expert-contact-option--bip .expert-contact-option__icon {
    background: #18A8E0;
    font-weight: 800;
}

.expert-contact-modal__website {
    margin-top: 16px;
    text-align: center;
}

.expert-contact-modal__website a {
    display: inline-block;
    color: #6F6870;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.expert-contact-modal__website a:hover {
    color: #E60073;
}


/* ==========================================================================
   29. SINGLE EXPERT — LANGUAGE SWITCHER
   Expert pages have a light header, so language links must be dark.
   ========================================================================== */
.single-expert ul.lang-switcher li a {
    color: var(--color-dark) !important;
}

.single-expert ul.lang-switcher li.current-lang a {
    opacity: 1 !important;
}


/* ==========================================================================
   30. SINGLE EXPERT — EVENTS + FEATURED MATERIALS
   Courses, trainings, games and retreats share one "Мероприятия" tab.
   ========================================================================== */
.single-expert .expert-event-card {
    position: relative;
}

.single-expert .expert-event-type-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    color: #E60073;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    font-size: .76rem;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.single-expert .expert-event-dates-text {
    margin: 0 0 8px;
    color: #888;
    font-size: .85rem;
    line-height: 1.3;
}

.single-expert .expert-compact-row--event {
    grid-template-columns: 150px 105px minmax(0, 1fr) auto;
}

.single-expert .expert-compact-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 9px;
    background: #F7F2F5;
    color: #B44576;
    font-size: .78rem;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .single-expert .expert-compact-row--event {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .single-expert .expert-event-type-badge {
        top: 12px;
        right: 12px;
        font-size: .72rem;
    }
}


/* ==========================================================================
   31. SINGLE EXPERT — CLEAN PAST EVENTS
   Past events are a quiet archive: date + title + one explicit link.
   Only "Подробнее" is clickable.
   ========================================================================== */
.single-expert .expert-compact-row--event {
    grid-template-columns: 150px minmax(0, 1fr) auto !important;
    cursor: default !important;
}

.single-expert .expert-compact-row--event:hover {
    background: #fafafa;
    color: var(--color-dark) !important;
}

.single-expert .expert-compact-row--event .expert-compact-action {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    color: #E60073;
    text-decoration: none;
    font-weight: 700;
    transition: opacity .2s ease;
}

.single-expert .expert-compact-row--event .expert-compact-action:hover {
    opacity: .72;
}

@media (max-width: 768px) {
    .single-expert .expert-compact-row--event {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    .single-expert .expert-compact-row--event .expert-compact-action {
        justify-self: start;
        margin-top: 2px;
    }
}


/* ==========================================================================
   32. SINGLE EXPERT — SERVICES + ONE-CURRENCY PRICE VIEW
   One selected currency at a time; service rows remain compact and readable.
   ========================================================================== */
.single-expert .expert-cost-panel {
    width: 100%;
}

.single-expert .expert-currency-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
}

.single-expert .expert-currency-toolbar__label {
    color: #777;
    font-size: 14px;
    font-weight: 600;
}

.single-expert .expert-currency-switcher {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid #ECE8EA;
    border-radius: 13px;
    background: #F7F6F7;
}

.single-expert .expert-currency-button {
    appearance: none;
    min-width: 58px;
    min-height: 36px;
    padding: 7px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #817B7F;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.single-expert .expert-currency-button:hover {
    color: #E60073;
}

.single-expert .expert-currency-button.is-active {
    background: #FFFFFF;
    color: #E60073;
    box-shadow: 0 2px 8px rgba(40, 41, 42, .08);
}

.single-expert .expert-services-list {
    display: grid;
    gap: 12px;
}

.single-expert .expert-service-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
    align-items: center;
    gap: 24px;
    min-height: 96px;
    padding: 18px 22px;
    border: 1px solid #F0ECEE;
    border-radius: 14px;
    background: #FAF9FA;
}

.single-expert .expert-service-card__info {
    min-width: 0;
}

.single-expert .expert-service-card__title {
    margin: 0 0 5px;
    color: #28292A;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
}

.single-expert .expert-service-card__description {
    margin: 0;
    color: #666166;
    font-size: 14px;
    line-height: 1.45;
}

.single-expert .expert-service-card__format {
    display: inline-block;
    margin-top: 8px;
    color: #8B8589;
    font-size: 13px;
    line-height: 1.3;
}

.single-expert .expert-service-card__prices {
    min-width: 0;
    text-align: right;
}

.single-expert .expert-service-price[hidden] {
    display: none !important;
}

.single-expert .expert-service-price.is-active {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
}

.single-expert .expert-service-price strong {
    color: #28292A;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
}

.single-expert .expert-service-price > span:not(.expert-service-price__empty) {
    color: #28292A;
    font-size: 17px;
    font-weight: 700;
}

.single-expert .expert-service-price__empty,
.single-expert .expert-cost-empty {
    color: #9A9498;
    font-size: 14px;
    font-weight: 500;
}

.single-expert .expert-cost-empty {
    padding: 22px;
    border-radius: 14px;
    background: #FAF9FA;
}

@media (max-width: 768px) {
    .single-expert .expert-currency-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .single-expert .expert-currency-switcher {
        max-width: 100%;
        overflow-x: auto;
    }

    .single-expert .expert-currency-button {
        flex: 0 0 auto;
    }

    .single-expert .expert-service-card {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 17px 18px;
    }

    .single-expert .expert-service-card__prices {
        text-align: left;
    }

    .single-expert .expert-service-price.is-active {
        justify-content: flex-start;
    }
}


/* ==========================================================================
   33. SINGLE EXPERT — LARGER CURRENCY SWITCHER
   Currency is a secondary control, but it must be easy to read and tap.
   ========================================================================== */
.single-expert #tab-prices .expert-currency-toolbar {
    justify-content: flex-start !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
}

.single-expert #tab-prices .expert-currency-toolbar__label {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    font-size: 15px !important;
}

.single-expert #tab-prices .expert-currency-switcher {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px !important;
    border: 1px solid #E9E4E7 !important;
    border-radius: 15px !important;
    background: #F7F5F6 !important;
}

.single-expert #tab-prices .expert-currency-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-width: 68px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #6F696D !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.single-expert #tab-prices .expert-currency-button:hover {
    border-color: #EBC8D8 !important;
    background: #FFFFFF !important;
    color: #E60073 !important;
}

.single-expert #tab-prices .expert-currency-button.is-active {
    border-color: #E60073 !important;
    background: #FFFFFF !important;
    color: #E60073 !important;
    box-shadow: 0 2px 8px rgba(40, 41, 42, .07) !important;
}

@media (max-width: 768px) {
    .single-expert #tab-prices .expert-currency-toolbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 7px !important;
    }

    .single-expert #tab-prices .expert-currency-toolbar__label {
        min-height: 0 !important;
    }

    .single-expert #tab-prices .expert-currency-button {
        min-width: 64px !important;
        height: 42px !important;
    }
}


/* ==========================================================================
   34. SINGLE EXPERT — SHARED EVENT CURRENCY + BRAND CONTACT ICONS
   ========================================================================== */

/* Один и тот же крупный переключатель валют в Стоимости и Мероприятиях. */
.single-expert #tab-courses .expert-currency-toolbar {
    justify-content: flex-start !important;
    gap: 16px !important;
    margin: 0 0 18px !important;
}

.single-expert #tab-courses .expert-currency-toolbar__label {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    font-size: 15px !important;
}

.single-expert #tab-courses .expert-currency-switcher {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px !important;
    border: 1px solid #E9E4E7 !important;
    border-radius: 15px !important;
    background: #F7F5F6 !important;
}

.single-expert #tab-courses .expert-currency-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-width: 68px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #6F696D !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.single-expert #tab-courses .expert-currency-button:hover {
    border-color: #EBC8D8 !important;
    background: #FFFFFF !important;
    color: #E60073 !important;
}

.single-expert #tab-courses .expert-currency-button.is-active {
    border-color: #E60073 !important;
    background: #FFFFFF !important;
    color: #E60073 !important;
    box-shadow: 0 2px 8px rgba(40, 41, 42, .07) !important;
}

.single-expert .expert-event-prices {
    min-height: 24px;
}

.single-expert .expert-event-price[hidden] {
    display: none !important;
}

.single-expert .expert-event-price.is-active {
    display: inline-block !important;
    font-weight: 700;
}

/* Брендовые пиктограммы сервисов связи */
.single-expert .expert-contact-option__icon {
    color: #fff !important;
}

.single-expert .expert-contact-option__icon svg {
    display: block;
    width: 28px;
    height: 28px;
    fill: currentColor;
    color: #fff;
}

.single-expert .expert-contact-option--telegram .expert-contact-option__icon {
    background: #229ED9 !important;
}

.single-expert .expert-contact-option--whatsapp .expert-contact-option__icon {
    background: #25D366 !important;
}

.single-expert .expert-contact-option--instagram .expert-contact-option__icon {
    background: radial-gradient(circle at 30% 105%, #fdf497 0 8%, #fd5949 32%, #d6249f 58%, #285AEB 100%) !important;
}

.single-expert .expert-contact-option--viber .expert-contact-option__icon {
    background: #7360F2 !important;
}

.single-expert .expert-contact-option--signal .expert-contact-option__icon {
    background: #3A76F0 !important;
}

.single-expert .expert-contact-option--bip .expert-contact-option__icon {
    background: #00A6E7 !important;
}

.single-expert .expert-contact-option--email .expert-contact-option__icon {
    background: #EA4335 !important;
}

.single-expert .expert-contact-option--phone .expert-contact-option__icon {
    background: #646B73 !important;
}

@media (max-width: 768px) {
    .single-expert #tab-courses .expert-currency-toolbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 7px !important;
    }

    .single-expert #tab-courses .expert-currency-toolbar__label {
        min-height: 0 !important;
    }

    .single-expert #tab-courses .expert-currency-button {
        min-width: 64px !important;
        height: 42px !important;
    }
}


/* ==========================================================================
   35. SINGLE TRAINING — ONE-CURRENCY PRICE SWITCHER
   ========================================================================== */

.single-training .event-price-meta-item {
    min-width: 310px;
}

.single-training .event-single-currency-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.single-training .event-single-currency-switcher {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 1px solid #E9E4E7;
    border-radius: 13px;
    background: #F7F5F6;
}

.single-training .event-single-currency-button {
    appearance: none;
    -webkit-appearance: none;
    min-width: 54px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #6F696D;
    box-shadow: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.single-training .event-single-currency-button:hover {
    border-color: #EBC8D8;
    background: #FFFFFF;
    color: #E60073;
}

.single-training .event-single-currency-button.is-active {
    border-color: #E60073;
    background: #FFFFFF;
    color: #E60073;
}

.single-training .event-single-price-values {
    min-height: 31px;
}

.single-training .event-single-price[hidden] {
    display: none !important;
}

.single-training .event-single-price.is-active {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.single-training .event-single-price strong {
    font-size: 1.75rem;
    font-weight: 800;
}

.single-training .event-single-price > span {
    font-size: 1.35rem;
    font-weight: 700;
}

.single-training .event-single-free-price {
    min-height: 31px;
}

@media (max-width: 900px) {
    .single-training .event-price-meta-item {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .single-training .event-single-currency-button {
        min-width: 52px;
        height: 36px;
        line-height: 34px;
    }
}


/* ==========================================================================
   36. SINGLE TRAINING — CURRENCY + PRICE IN ONE ROW
   Desktop: switcher on the left, selected price immediately to the right.
   Mobile: wraps cleanly if there is not enough width.
   ========================================================================== */

.single-training .event-single-currency-panel {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
}

.single-training .event-single-price-values {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    margin: 0 !important;
}

.single-training .event-single-price.is-active {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

.single-training .event-single-price strong {
    font-size: 1.65rem !important;
    line-height: 1 !important;
}

.single-training .event-single-price > span {
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

@media (max-width: 768px) {
    .single-training .event-single-currency-panel {
        flex-wrap: wrap !important;
        gap: 10px 14px !important;
    }

    .single-training .event-single-price-values {
        min-height: 36px !important;
    }

    .single-training .event-single-price strong {
        font-size: 1.45rem !important;
    }

    .single-training .event-single-price > span {
        font-size: 1.05rem !important;
    }
}


/* ==========================================================================
   37. SINGLE TRAINING — EVENT USES THE LEADING EXPERT'S OWN CONTACTS
   ========================================================================== */

.single-training .event-expert-contact-modal .expert-contact-option__icon {
    color: #fff !important;
}

.single-training .event-expert-contact-modal .expert-contact-option__icon svg {
    display: block;
    width: 28px;
    height: 28px;
    fill: currentColor;
    color: #fff;
}

.single-training .event-expert-contact-modal .expert-contact-option--telegram .expert-contact-option__icon {
    background: #229ED9 !important;
}

.single-training .event-expert-contact-modal .expert-contact-option--whatsapp .expert-contact-option__icon {
    background: #25D366 !important;
}

.single-training .event-expert-contact-modal .expert-contact-option--instagram .expert-contact-option__icon {
    background: radial-gradient(circle at 30% 105%, #fdf497 0 8%, #fd5949 32%, #d6249f 58%, #285AEB 100%) !important;
}

.single-training .event-expert-contact-modal .expert-contact-option--viber .expert-contact-option__icon {
    background: #7360F2 !important;
}

.single-training .event-expert-contact-modal .expert-contact-option--signal .expert-contact-option__icon {
    background: #3A76F0 !important;
}

.single-training .event-expert-contact-modal .expert-contact-option--bip .expert-contact-option__icon {
    background: #00A6E7 !important;
}

.single-training .event-expert-contact-modal .expert-contact-option--email .expert-contact-option__icon {
    background: #EA4335 !important;
}

.single-training .event-expert-contact-modal .expert-contact-option--phone .expert-contact-option__icon {
    background: #646B73 !important;
}


/* ==========================================================================
   38. SINGLE EXPERT — MOBILE LAYOUT POLISH
   - removes excessive empty space above the expert photo
   - centers and enlarges the photo within the mobile content width
   - left-aligns the expert's name, profession and content text
   - keeps the tab navigation centered
   - reduces the vertical gap before the tabs
   ========================================================================== */

@media (max-width: 768px) {

    /* Much less empty space below the mobile header. */
    .single-expert .expert-profile-section {
        padding-top: 6rem !important;
        padding-bottom: 3rem !important;
    }

    /* One-column mobile layout with a tighter gap between profile and tabs. */
    .single-expert .expert-profile-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: left !important;
    }

    /* Expert intro: left-aligned text. */
    .single-expert .expert-sidebar {
        width: 100% !important;
        text-align: left !important;
    }

    /* Photo fills the available mobile content width and stays perfectly centered. */
    .single-expert .expert-sidebar-photo {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .single-expert .expert-sidebar-photo img {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
    }

    .single-expert .expert-sidebar-name {
        margin: 1.25rem 0 0.45rem !important;
        text-align: left !important;
        line-height: 1.15 !important;
    }

    .single-expert .expert-sidebar-profession {
        margin: 0 0 1.5rem !important;
        text-align: left !important;
        line-height: 1.45 !important;
    }

    /* Booking button follows the same left edge as the text. */
    .single-expert .expert-sidebar .button-primary {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Main tab content reads naturally from the left on a phone. */
    .single-expert .expert-main-content {
        text-align: left !important;
    }

    /* Navigation itself remains centered. */
    .single-expert .expert-tabs-nav {
        justify-content: center !important;
        text-align: center !important;
        gap: 10px 16px !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    .single-expert .tab-btn {
        text-align: center !important;
    }

    /* Service text is easier to scan left-aligned on narrow screens. */
    .single-expert .expert-service-card,
    .single-expert .expert-service-card__info,
    .single-expert .expert-service-card__title,
    .single-expert .expert-service-card__description,
    .single-expert .expert-service-card__format {
        text-align: left !important;
    }

    .single-expert .expert-service-card__prices {
        text-align: left !important;
    }
}

@media (max-width: 480px) {
    .single-expert .expert-profile-section {
        padding-top: 5.5rem !important;
    }

    .single-expert .expert-profile-grid {
        gap: 1.75rem !important;
    }

    .single-expert .expert-sidebar-name {
        font-size: 2rem !important;
    }
}


/* ==========================================================================
   39. SINGLE EXPERT — MOBILE EVENTS + ARTICLES
   On phones, cards must not remain in the desktop 3-column grid.
   Use one full-width readable card per row.
   ========================================================================== */

@media (max-width: 768px) {

    /* Events and featured articles: one card per row. */
    .single-expert .expert-events-grid,
    .single-expert .expert-featured-grid--articles {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .single-expert .expert-events-grid > .event-card,
    .single-expert .expert-featured-grid--articles > .event-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    /* Large, readable image instead of a narrow desktop column. */
    .single-expert .expert-events-grid .event-card__image,
    .single-expert .expert-featured-grid--articles .event-card__image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
    }

    .single-expert .expert-events-grid .event-card__image img,
    .single-expert .expert-featured-grid--articles .event-card__image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .single-expert .expert-events-grid .event-card__content,
    .single-expert .expert-featured-grid--articles .event-card__content {
        padding: 18px !important;
        min-width: 0 !important;
    }

    .single-expert .expert-events-grid .event-title,
    .single-expert .expert-featured-grid--articles .event-title {
        margin: 0 0 14px !important;
        font-size: 1.2rem !important;
        line-height: 1.35 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .single-expert .expert-events-grid .event-footer,
    .single-expert .expert-featured-grid--articles .event-footer {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding-top: 14px !important;
    }

    .single-expert .expert-events-grid .button-small,
    .single-expert .expert-featured-grid--articles .button-small {
        width: auto !important;
        min-width: 132px !important;
        padding: 10px 18px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Keep event badges compact and readable on the wider mobile card. */
    .single-expert .expert-events-grid .event-card__date-badge {
        top: 12px !important;
        left: 12px !important;
    }

    .single-expert .expert-events-grid .expert-event-type-badge {
        top: 12px !important;
        right: 12px !important;
    }
}

@media (max-width: 480px) {
    .single-expert .expert-events-grid,
    .single-expert .expert-featured-grid--articles {
        gap: 16px !important;
    }

    .single-expert .expert-events-grid .event-card__content,
    .single-expert .expert-featured-grid--articles .event-card__content {
        padding: 16px !important;
    }

    .single-expert .expert-events-grid .event-title,
    .single-expert .expert-featured-grid--articles .event-title {
        font-size: 1.12rem !important;
    }
}


/* ==========================================================================
   40. SINGLE EXPERT — FINAL MOBILE ALIGNMENT
   - expert name centered under the photo
   - profession and booking CTA remain left-aligned
   - upcoming event CTA aligns left like article CTAs
   ========================================================================== */

@media (max-width: 768px) {

    /* The name behaves like a visual title under the photo. */
    .single-expert .expert-sidebar-name {
        width: 100% !important;
        text-align: center !important;
    }

    /* Keep the descriptive line and primary CTA on the content's left edge. */
    .single-expert .expert-sidebar-profession {
        text-align: left !important;
    }

    .single-expert .expert-sidebar .button-primary {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Upcoming event: price (if present) and CTA start from the same left edge. */
    .single-expert .expert-events-grid .event-footer {
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .single-expert .expert-events-grid .event-prices-list {
        width: 100% !important;
        text-align: left !important;
    }

    .single-expert .expert-events-grid .button-small {
        align-self: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Article CTA stays left too, for a consistent mobile rhythm. */
    .single-expert .expert-featured-grid--articles .event-footer {
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .single-expert .expert-featured-grid--articles .button-small {
        align-self: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}


/* ==========================================================================
   41. SINGLE EXPERT — MOBILE PROFILE HEADER CENTERED
   Keep the expert's visual intro consistent with the desktop version:
   name, profession and primary booking CTA are centered under the photo.
   Content inside tabs remains left-aligned for readability.
   ========================================================================== */

@media (max-width: 768px) {

    .single-expert .expert-sidebar {
        text-align: center !important;
    }

    .single-expert .expert-sidebar-name {
        text-align: center !important;
    }

    .single-expert .expert-sidebar-profession {
        max-width: 620px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .single-expert .expert-sidebar .button-primary {
        display: inline-flex !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Do not center the actual tab content: longer text reads better from the left. */
    .single-expert .expert-main-content,
    .single-expert .expert-service-card,
    .single-expert .expert-service-card__info,
    .single-expert .expert-service-card__title,
    .single-expert .expert-service-card__description,
    .single-expert .expert-service-card__format {
        text-align: left !important;
    }

    /* Tab navigation itself stays centered. */
    .single-expert .expert-tabs-nav {
        text-align: center !important;
        justify-content: center !important;
    }
}


/* ==========================================================================
   42. SINGLE EXPERT — PROFESSION COLOR
   Keep the profession line neutral so pink stays reserved for actions
   and active navigation states.
   ========================================================================== */

.single-expert .expert-sidebar-profession {
    color: #4A4A4A !important;
}


/* ==========================================================================
   43. HOME — FEATURED + RECENT EXPERT ARTICLES
   Two large editor-selected articles + six latest compact articles.
   ========================================================================== */

.home .home-articles-section .text-subheading-figma {
    margin-bottom: 20px !important;
}

/* Keep the two promoted articles exactly in the established large-card style. */
.home .home-featured-articles-grid {
    margin-bottom: 34px !important;
}

/* Recent articles */
.home .home-recent-articles {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

.home .home-recent-articles__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.home .home-recent-articles__heading {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: #28292A;
}

.home .home-recent-articles__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.home .home-recent-article-card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 112px;
    overflow: hidden;
    border: 1px solid #ECE8EA;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 3px 14px rgba(0,0,0,0.035);
}

.home .home-recent-article-card__image {
    display: block;
    width: 132px;
    height: 100%;
    min-height: 112px;
    overflow: hidden;
    background: #F7F5F6;
}

.home .home-recent-article-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 112px;
    object-fit: cover;
}

.home .home-recent-article-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 112px;
    background: #F5F3F4;
}

.home .home-recent-article-card__body {
    min-width: 0;
    padding: 14px 16px 13px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home .home-recent-article-card__author {
    margin-bottom: 5px;
    color: #8B8589;
    font-size: 0.76rem;
    line-height: 1.2;
}

.home .home-recent-article-card__title {
    margin: 0 0 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
    color: #28292A;
}

.home .home-recent-article-card__title a {
    color: inherit;
    text-decoration: none;
}

.home .home-recent-article-card__title a:hover {
    color: #E60073;
}

.home .home-recent-article-card__read {
    margin-top: auto;
    color: #E60073;
    font-size: 0.85rem;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
}

.home .home-recent-article-card__read:hover {
    text-decoration: underline;
}

.home .home-all-articles-link-wrap {
    margin-top: 20px;
}

.home .home-all-articles-link {
    color: #E60073;
    font-size: 0.95rem;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
}

.home .home-all-articles-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .home .home-featured-articles-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 28px !important;
    }

    .home .home-featured-articles-grid .latest-post-card {
        width: 100% !important;
        min-height: 280px !important;
        height: 280px !important;
        max-height: 280px !important;
        aspect-ratio: auto !important;
        padding: 22px !important;
    }

    .home .home-recent-articles__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home .home-recent-article-card {
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 104px;
    }

    .home .home-recent-article-card__image,
    .home .home-recent-article-card__image img,
    .home .home-recent-article-card__placeholder {
        width: 112px;
        min-height: 104px;
    }

    .home .home-recent-article-card__body {
        padding: 12px 13px;
    }

    .home .home-recent-article-card__title {
        font-size: 0.96rem;
    }
}

@media (max-width: 420px) {
    .home .home-recent-article-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .home .home-recent-article-card__image,
    .home .home-recent-article-card__image img,
    .home .home-recent-article-card__placeholder {
        width: 96px;
    }
}


/* ==========================================================================
   44. HOME ARTICLES — THREE-COLUMN DESKTOP RHYTHM
   Matches the 3-column rhythm used for experts and events on the homepage.
   ========================================================================== */

@media (min-width: 769px) {

    /* Three promoted articles in one row. */
    .home .home-featured-articles-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }

    .home .home-featured-articles-grid .latest-post-card {
        width: 100% !important;
        min-width: 0 !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        aspect-ratio: auto !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .home .home-featured-articles-grid .latest-post-card__img-wrap,
    .home .home-featured-articles-grid .latest-post-card__img-wrap img {
        width: 100% !important;
        height: 100% !important;
    }

    .home .home-featured-articles-grid .latest-post-card__img-wrap img {
        object-fit: cover !important;
    }

    /* Six latest articles = 3 columns x 2 rows. */
    .home .home-recent-articles__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px 20px !important;
    }

    .home .home-recent-article-card {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        min-height: 112px !important;
    }

    .home .home-recent-article-card__image,
    .home .home-recent-article-card__image img,
    .home .home-recent-article-card__placeholder {
        width: 112px !important;
        min-height: 112px !important;
    }
}

/* Tablet: keep things readable instead of squeezing 3 columns. */
@media (min-width: 769px) and (max-width: 1050px) {
    .home .home-featured-articles-grid,
    .home .home-recent-articles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ==========================================================================
   45. HOME — FIX PROMOTED ARTICLE CARDS
   The new markup uses <article>, not <div>. Make the image truly full-bleed,
   remove the accidental black empty area, and keep title/button inset left.
   ========================================================================== */

.home .home-featured-articles-grid article.home-featured-article-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #F3F0F2 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
}

.home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__img-wrap {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__img-wrap img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(
        180deg,
        rgba(20,20,20,0.10) 0%,
        rgba(20,20,20,0.20) 42%,
        rgba(20,20,20,0.68) 100%
    ) !important;
}

.home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__content {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 72px !important;
    z-index: 2 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__title {
    max-width: 92% !important;
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-align: left !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.28) !important;
}

.home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__title a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.home .home-featured-articles-grid article.home-featured-article-card .latest-post-card-footer {
    position: absolute !important;
    left: 22px !important;
    right: auto !important;
    bottom: 20px !important;
    z-index: 3 !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.home .home-featured-articles-grid article.home-featured-article-card .button-primary {
    width: auto !important;
    min-width: 104px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
}

/* 3 cards on a wide desktop, matching experts and events. */
@media (min-width: 1051px) {
    .home .home-featured-articles-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
}

/* 2 cards on tablet. */
@media (min-width: 769px) and (max-width: 1050px) {
    .home .home-featured-articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 1 large readable card on phone. */
@media (max-width: 768px) {
    .home .home-featured-articles-grid article.home-featured-article-card {
        height: 270px !important;
        min-height: 270px !important;
        max-height: 270px !important;
        padding: 0 !important;
    }

    .home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__content {
        left: 18px !important;
        right: 18px !important;
        bottom: 70px !important;
    }

    .home .home-featured-articles-grid article.home-featured-article-card .latest-post-card-footer {
        left: 18px !important;
        bottom: 18px !important;
    }

    .home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__title {
        font-size: 1.08rem !important;
    }
}


/* ==========================================================================
   46. HOME — UNIFY "ВСЕ ЭКСПЕРТЫ" / "ВСЕ СТАТЬИ" LINKS
   Same font, size, weight, underline and pink accent.
   ========================================================================== */

.home .experts-sidebar-link,
.home .home-all-articles-link {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: #F60D73 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 1px !important;
    transition: opacity 0.2s ease !important;
}

.home .experts-sidebar-link:hover,
.home .home-all-articles-link:hover {
    opacity: 0.8 !important;
    text-decoration: underline !important;
}


/* ==========================================================================
   47. HOME — HELP CTA
   Make the help block visually distinct from article cards.
   ========================================================================== */

.home .cta-banner--help {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.10) !important;
}

.home .cta-banner--help .cta-banner-inner {
    position: relative;
}

.home .cta-banner--help .cta-banner-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(18,18,18,0.76) 0%,
        rgba(18,18,18,0.62) 48%,
        rgba(18,18,18,0.36) 100%
    );
    pointer-events: none;
}

.home .cta-banner--help .cta-banner-content {
    position: relative;
    z-index: 1;
}

.home .cta-help-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 0 0 10px;
    padding: 5px 11px;
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.01em;
    backdrop-filter: blur(4px);
}

.home .cta-banner--help h2 {
    margin-bottom: 8px !important;
}

.home .cta-banner--help p {
    max-width: 640px;
    margin-bottom: 18px !important;
}

.home .cta-banner--help .button-primary {
    min-width: 190px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

@media (max-width: 768px) {
    .home .cta-banner--help {
        border-radius: 18px !important;
    }

    .home .cta-banner--help .cta-banner-inner::before {
        background: linear-gradient(
            180deg,
            rgba(18,18,18,0.68) 0%,
            rgba(18,18,18,0.58) 55%,
            rgba(18,18,18,0.46) 100%
        );
    }

    .home .cta-help-eyebrow {
        margin-bottom: 12px;
        font-size: 0.74rem;
    }

    .home .cta-banner--help h2 {
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
    }

    .home .cta-banner--help p {
        margin-bottom: 20px !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .home .cta-banner--help .button-primary {
        width: auto !important;
        min-width: 0 !important;
        padding: 12px 20px !important;
    }
}


/* ==========================================================================
   48. HOME — "СВЕТИ!" PREMIUM LIGHT POLISH
   Light, airy, editorial. Pink is reserved for actions and active accents.
   ========================================================================== */

/* ---------- Global homepage rhythm ---------- */

.home {
    background: #FBFAF9 !important;
    color: #28292A;
}

.home .events-three-col-section,
.home .experts-layout-section,
.home .cta-section-wrapper,
.home .home-articles-section {
    position: relative;
}

.home .events-three-col-section,
.home .experts-layout-section,
.home .home-articles-section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    margin-top: 0 !important;
}

/* Subtle alternating surfaces: barely visible, but gives the page depth. */
.home .events-three-col-section {
    background: #FBFAF9;
}

.home .experts-layout-section {
    background: #F7F5F6;
}

.home .home-articles-section {
    background: #FBFAF9;
}

.home .cta-section-wrapper {
    margin-top: 0 !important;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
    background: #F7F5F6;
}

/* ---------- Typography ---------- */

.home .text-subheading-figma {
    margin-bottom: 24px !important;
    color: #242326 !important;
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    letter-spacing: -0.015em !important;
}

.home .section-intro {
    color: #69656A !important;
    line-height: 1.65 !important;
}

/* ---------- Hero: lighter, cleaner, not "black-banner" ---------- */

.home .hero-section.hero-fullscreen .hero-fullscreen__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(32, 27, 30, 0.43) 0%,
            rgba(32, 27, 30, 0.26) 58%,
            rgba(32, 27, 30, 0.12) 100%
        ) !important;
}

.home .hero-section .text-heading {
    letter-spacing: -0.025em !important;
    text-shadow: 0 2px 14px rgba(0,0,0,0.16) !important;
}

.home .hero-section .hero-text {
    color: rgba(255,255,255,0.94) !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.12) !important;
}

/* ---------- Cards: less shadow, more refined borders ---------- */

.home .events-three-col-grid .event-card,
.home .experts-grid-row .expert-card,
.home .home-featured-articles-grid article.home-featured-article-card,
.home .home-recent-article-card {
    border: 1px solid #EDE9EB !important;
    box-shadow: 0 5px 18px rgba(39, 30, 35, 0.045) !important;
    border-radius: 16px !important;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}

@media (hover: hover) {
    .home .events-three-col-grid .event-card:hover,
    .home .experts-grid-row .expert-card:hover,
    .home .home-featured-articles-grid article.home-featured-article-card:hover,
    .home .home-recent-article-card:hover {
        transform: translateY(-2px) !important;
        border-color: #E4DDE0 !important;
        box-shadow: 0 10px 28px rgba(39, 30, 35, 0.065) !important;
    }
}

/* ---------- Buttons: a consistent premium primary action ---------- */

.home .button.button-primary {
    border-radius: 12px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

@media (hover: hover) {
    .home .button.button-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(246, 13, 115, 0.16) !important;
    }
}

/* ---------- Experts ---------- */

.home .expert-card {
    background: #FFFFFF !important;
}

.home .expert-card h3 {
    color: #28272A !important;
    letter-spacing: -0.01em !important;
}

.home .expert-card .profession,
.home .expert-card .expert-profession {
    color: #69656A !important;
}

/* ---------- Featured article cards ---------- */

/* A softer editorial overlay: image stays visible, no heavy black field. */
.home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(25,22,24,0.02) 0%,
            rgba(25,22,24,0.08) 42%,
            rgba(25,22,24,0.60) 100%
        ) !important;
}

.home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__title {
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.18) !important;
}

/* ---------- "All experts / all articles" ---------- */

.home .experts-sidebar-link,
.home .home-all-articles-link {
    font-weight: 650 !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 5px !important;
}

/* ==========================================================================
   49. HOME — LIGHT PREMIUM HELP CTA
   This deliberately overrides the darker CTA from section 47.
   ========================================================================== */

.home .cta-banner--help {
    border: 1px solid #EAE3E6 !important;
    border-radius: 20px !important;
    background: #FFFBFC !important;
    box-shadow: 0 8px 26px rgba(55, 38, 45, 0.055) !important;
}

.home .cta-banner--help .cta-banner-inner {
    min-height: 250px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    border-radius: inherit !important;

    /* Keep the existing photograph, but wash it with a light premium veil. */
    background-position: center !important;
    background-size: cover !important;
}

.home .cta-banner--help .cta-banner-inner::before {
    background:
        linear-gradient(
            90deg,
            rgba(255, 251, 252, 0.98) 0%,
            rgba(255, 251, 252, 0.95) 46%,
            rgba(255, 251, 252, 0.72) 68%,
            rgba(255, 251, 252, 0.18) 100%
        ) !important;
}

.home .cta-banner--help .cta-banner-content {
    width: min(650px, 72%) !important;
    padding: 38px 42px !important;
    color: #28272A !important;
}

.home .cta-help-eyebrow {
    min-height: 28px !important;
    margin-bottom: 12px !important;
    padding: 5px 11px !important;
    border: 1px solid #F2C9DB !important;
    background: #FFF1F7 !important;
    color: #D90C67 !important;
    backdrop-filter: none !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
}

.home .cta-banner--help h2 {
    margin: 0 0 10px !important;
    color: #28272A !important;
    font-size: 2rem !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    text-shadow: none !important;
}

.home .cta-banner--help p {
    max-width: 570px !important;
    margin: 0 0 20px !important;
    color: #615D61 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    text-shadow: none !important;
}

.home .cta-banner--help .button-primary {
    min-width: 196px !important;
    min-height: 44px !important;
    padding: 11px 22px !important;
}

/* ---------- Desktop content spacing ---------- */

@media (min-width: 1051px) {
    .home .events-three-col-grid,
    .home .experts-grid-row,
    .home .home-featured-articles-grid {
        gap: 24px !important;
    }

    .home .events-three-col-grid .event-card,
    .home .experts-grid-row .expert-card,
    .home .home-featured-articles-grid article.home-featured-article-card {
        overflow: hidden !important;
    }
}

/* ---------- Mobile: keep it light and calm ---------- */

@media (max-width: 768px) {

    .home .events-three-col-section,
    .home .experts-layout-section,
    .home .home-articles-section {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    .home .cta-section-wrapper {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    .home .text-subheading-figma {
        margin-bottom: 18px !important;
        font-size: 1.35rem !important;
    }

    .home .cta-banner--help .cta-banner-inner {
        min-height: 340px !important;
        align-items: flex-end !important;
    }

    .home .cta-banner--help .cta-banner-inner::before {
        background:
            linear-gradient(
                180deg,
                rgba(255,251,252,0.12) 0%,
                rgba(255,251,252,0.50) 32%,
                rgba(255,251,252,0.96) 66%,
                rgba(255,251,252,0.99) 100%
            ) !important;
    }

    .home .cta-banner--help .cta-banner-content {
        width: 100% !important;
        padding: 24px 22px 26px !important;
    }

    .home .cta-banner--help h2 {
        font-size: 1.65rem !important;
    }

    .home .cta-banner--help p {
        font-size: 0.96rem !important;
        line-height: 1.5 !important;
    }

    /* Hover-like movement is unnecessary on touch screens. */
    .home .events-three-col-grid .event-card,
    .home .experts-grid-row .expert-card,
    .home .home-featured-articles-grid article.home-featured-article-card,
    .home .home-recent-article-card {
        transform: none !important;
    }
}


/* ==========================================================================
   50. HOME — COMPACT PREMIUM HELP CTA
   Same light premium style, but smaller and denser.
   Desktop: text left + button right, no large empty area.
   ========================================================================== */

.home .cta-section-wrapper {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.home .cta-banner--help {
    width: calc(100% - 48px) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.home .cta-banner--help .cta-banner-inner {
    min-height: 155px !important;
}

.home .cta-banner--help .cta-banner-content {
    width: 100% !important;
    max-width: none !important;
    padding: 22px 26px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 28px !important;
    row-gap: 4px !important;
    align-items: center !important;
}

.home .cta-banner--help .cta-help-eyebrow {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: max-content !important;
    min-height: 25px !important;
    margin: 0 0 2px !important;
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
}

.home .cta-banner--help h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 1.55rem !important;
    line-height: 1.12 !important;
}

.home .cta-banner--help p {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-width: 540px !important;
    margin: 4px 0 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
}

.home .cta-banner--help .button-primary {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;

    min-width: 180px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    white-space: nowrap !important;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1050px) {
    .home .cta-banner--help {
        max-width: 760px !important;
    }

    .home .cta-banner--help .cta-banner-content {
        column-gap: 20px !important;
        padding: 20px 22px !important;
    }

    .home .cta-banner--help .button-primary {
        min-width: 165px !important;
    }
}

/* Phone: compact stacked version */
@media (max-width: 768px) {
    .home .cta-section-wrapper {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .home .cta-banner--help {
        width: calc(100% - 32px) !important;
        max-width: 560px !important;
    }

    .home .cta-banner--help .cta-banner-inner {
        min-height: 235px !important;
        align-items: flex-end !important;
    }

    .home .cta-banner--help .cta-banner-content {
        display: block !important;
        padding: 20px 20px 22px !important;
    }

    .home .cta-banner--help .cta-help-eyebrow {
        margin-bottom: 8px !important;
    }

    .home .cta-banner--help h2 {
        margin-bottom: 8px !important;
        font-size: 1.45rem !important;
    }

    .home .cta-banner--help p {
        margin-bottom: 16px !important;
        font-size: 0.94rem !important;
        line-height: 1.45 !important;
    }

    .home .cta-banner--help .button-primary {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 10px 18px !important;
    }
}

/* ==========================================================================
   51. PREMIUM BUTTON HOVER + CLEAN HELP CTA
   - primary pink buttons stay in the same raspberry family on hover
   - remove the inherited dark frame around the light help CTA
   ========================================================================== */

/* The old global hover used orange. Keep the interaction elegant and tonal. */
.button-primary:hover,
.button-primary:focus-visible {
    background-color: #D90C67 !important;
    color: #FFFFFF !important;
    border-color: #D90C67 !important;
}

.button-primary:active {
    background-color: #C90A5E !important;
    border-color: #C90A5E !important;
}

@media (hover: hover) {
    .home .button.button-primary:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 16px rgba(217, 12, 103, 0.18) !important;
    }
}

/* The dark rim came from an older CTA overlay/padding. Remove it completely. */
.home .cta-banner--help {
    padding: 0 !important;
    background: #FFFBFC !important;
}

.home .cta-banner--help::before {
    display: none !important;
    content: none !important;
}

.home .cta-banner--help .cta-banner-inner {
    width: 100% !important;
    border-radius: 20px !important;
}


/* ==========================================================================
   52. HOME FINAL — FIVE EXPERTS + COURSES LINK
   1 info card + up to 5 promoted experts = two clean rows of three on desktop.
   ========================================================================== */

/* Match the courses link to "Все эксперты" / "Все статьи". */
.home .home-all-trainings-link {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: #F60D73 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 1px !important;
    transition: opacity 0.2s ease !important;
}

.home .home-all-trainings-link:hover {
    opacity: 0.8 !important;
    color: #D90C67 !important;
    text-decoration: underline !important;
}

.home .home-all-trainings-link-wrap {
    margin-top: 18px !important;
}

/* Five expert cards plus the intro card naturally form 3 + 3 on desktop. */
@media (min-width: 993px) {
    .home .experts-grid-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
        align-items: stretch !important;
    }

    .home .experts-grid-row > * {
        min-width: 0 !important;
    }
}

@media (max-width: 992px) {
    .home .home-all-trainings-link-wrap {
        max-width: 500px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ==========================================================================
   53. HOME — SOFTER PINK HOVER + SECONDARY HELP CTA
   - primary buttons stay in the same pink family on hover, only ~8–10% deeper
   - the "Подобрать специалиста" button becomes a light secondary CTA
   ========================================================================== */

/* Main pink buttons: subtle hover, no strong dark jump. */
.home .button.button-primary {
    background: #F60D73 !important;
    border-color: #F60D73 !important;
    color: #FFFFFF !important;
}

@media (hover: hover) {
    .home .button.button-primary:hover {
        background: #E80D6E !important;
        border-color: #E80D6E !important;
        color: #FFFFFF !important;
        box-shadow: 0 5px 14px rgba(246, 13, 115, 0.13) !important;
    }
}

.home .button.button-primary:active {
    background: #DC0C68 !important;
    border-color: #DC0C68 !important;
    color: #FFFFFF !important;
}

/* Help block: intentionally different from the repeated expert/event/article CTAs. */
.home .cta-banner--help .button-primary {
    background: #FFF4F8 !important;
    border: 1px solid #F60D73 !important;
    color: #D90C67 !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    .home .cta-banner--help .button-primary:hover {
        background: #F60D73 !important;
        border-color: #F60D73 !important;
        color: #FFFFFF !important;
        box-shadow: 0 5px 14px rgba(246, 13, 115, 0.12) !important;
    }
}

.home .cta-banner--help .button-primary:active {
    background: #E80D6E !important;
    border-color: #E80D6E !important;
    color: #FFFFFF !important;
}


/* ==========================================================================
   54. HELP CTA — HOVER FIX
   Do not depend on @media (hover: hover): some Windows/hybrid devices report
   hover capability inconsistently. The explicit :hover selector below has
   higher specificity than the light default state.
   ========================================================================== */

.home .cta-banner--help .button.button-primary:hover,
.home .cta-banner--help .button.button-primary:focus-visible {
    background: #F60D73 !important;
    background-color: #F60D73 !important;
    border: 1px solid #F60D73 !important;
    border-color: #F60D73 !important;
    color: #FFFFFF !important;
    box-shadow: 0 5px 14px rgba(246, 13, 115, 0.12) !important;
    transform: translateY(-1px) !important;
}

.home .cta-banner--help .button.button-primary:active {
    background: #E80D6E !important;
    background-color: #E80D6E !important;
    border-color: #E80D6E !important;
    color: #FFFFFF !important;
}


/* ==========================================================================
   55. HOME — FINAL MOBILE POLISH
   - desktop keeps 5 experts
   - phone shows only 3 of those 5
   - expert and article cards use the same calm max-width as the help CTA
   - slightly shorter media areas for a more compact, premium mobile rhythm
   - equal visual spacing around the help CTA
   ========================================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------------------------
       Experts: info card + only the first 3 expert cards on phone.
       Child 1 = intro card, children 2–4 = three experts.
       Children 5–6 are the 4th and 5th experts and are hidden only
       on mobile. Desktop is completely unchanged.
       ------------------------------------------------------------ */
    .home .experts-grid-row > .expert-card:nth-child(n + 5) {
        display: none !important;
    }

    /* One shared mobile width for intro, experts, help CTA and articles. */
    .home .experts-grid-row {
        width: 100% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 18px !important;
    }

    .home .experts-sidebar-card,
    .home .experts-grid-row > .expert-card {
        width: 100% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Expert portraits are a little less dominant than before.
       object-fit crops; it does not stretch the image. */
    .home .experts-grid-row .expert-image {
        height: 290px !important;
        aspect-ratio: auto !important;
    }

    .home .experts-grid-row .expert-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 22% !important;
    }

    .home .experts-grid-row .expert-info {
        padding: 16px !important;
    }

    .home .experts-sidebar-card {
        padding: 20px !important;
    }

    /* ------------------------------------------------------------
       Help CTA: exact same maximum width and balanced outer rhythm.
       ------------------------------------------------------------ */
    .home .cta-section-wrapper {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .home .cta-banner--help {
        width: 100% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home .cta-banner--help .cta-banner-inner {
        min-height: 225px !important;
    }

    /* ------------------------------------------------------------
       Featured articles: same width as experts/help, slightly shorter.
       ------------------------------------------------------------ */
    .home .home-featured-articles-grid {
        width: 100% !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 16px !important;
    }

    .home .home-featured-articles-grid article.home-featured-article-card {
        width: 100% !important;
        max-width: 560px !important;
        height: 245px !important;
        min-height: 245px !important;
        max-height: 245px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home .home-featured-articles-grid article.home-featured-article-card .latest-post-card__content {
        left: 18px !important;
        right: 18px !important;
        bottom: 66px !important;
    }

    .home .home-featured-articles-grid article.home-featured-article-card .latest-post-card-footer {
        left: 18px !important;
        bottom: 16px !important;
    }

    /* Keep section headings aligned with the same visual column. */
    .home .experts-layout-section .container,
    .home .home-articles-section .container {
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .home .experts-grid-row .expert-image {
        height: 265px !important;
    }

    .home .home-featured-articles-grid article.home-featured-article-card {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
    }

    .home .cta-banner--help .cta-banner-inner {
        min-height: 215px !important;
    }
}


/* ==========================================================================
   56. HOME — EXPERTS TRUST NOTE + "ALL EXPERTS" AFTER CARDS
   The catalog link now follows the expert cards, matching events/articles.
   The intro card carries a small transparency message for clients.
   ========================================================================== */

.home .experts-sidebar-card {
    justify-content: flex-start !important;
}

.home .experts-sidebar-card .section-intro {
    margin-bottom: 18px !important;
}

.home .experts-trust-note {
    position: relative;
    margin-top: 18px;
    padding: 14px 15px 14px 40px;
    border: 1px solid #F1DDE6;
    border-radius: 12px;
    background: #FFF8FB;
}

.home .experts-trust-note::before {
    content: "✓";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FFF0F6;
    color: #D90C67;
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 800;
}

.home .experts-trust-note__title {
    display: block;
    margin-bottom: 4px;
    color: #363236;
    font-family: 'Nunito', sans-serif;
    font-size: 0.83rem;
    line-height: 1.25;
    font-weight: 700;
}

.home .experts-trust-note__text {
    display: block;
    color: #716B70;
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    line-height: 1.45;
    font-weight: 400;
}

.home .home-all-experts-link-wrap {
    margin-top: 18px;
}

.home .home-all-experts-link {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: #F60D73 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 1px !important;
}

.home .home-all-experts-link:hover {
    color: #E80D6E !important;
    opacity: 0.85 !important;
}

/* Mobile: after the 3 visible expert cards, exactly like "Все статьи". */
@media (max-width: 768px) {
    .home .experts-sidebar-card {
        padding: 20px !important;
    }

    .home .experts-trust-note {
        margin-top: 16px;
        padding: 13px 14px 13px 38px;
    }

    .home .experts-trust-note::before {
        left: 13px;
        top: 13px;
    }

    .home .experts-trust-note__title {
        font-size: 0.84rem;
    }

    .home .experts-trust-note__text {
        font-size: 0.80rem;
    }

    .home .home-all-experts-link-wrap {
        width: 100%;
        max-width: 560px;
        margin: 18px auto 0 !important;
    }
}


/* ==========================================================================
   57. HOME — CLEAN PAYMENT NOTE IN EXPERT INTRO CARD
   Same typography as the original intro text; no separate label or badge.
   ========================================================================== */

.home .experts-sidebar-card .experts-trust-note {
    display: none !important;
}

.home .experts-sidebar-card .experts-payment-note {
    margin: 16px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid #ECE8EA !important;
    color: #69656A !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

@media (max-width: 768px) {
    .home .experts-sidebar-card .experts-payment-note {
        margin-top: 16px !important;
        padding-top: 14px !important;
    }
}


/* ==========================================================================
   58. HOME — UNIFIED INTRO CARD TYPOGRAPHY
   Both paragraphs in the expert intro card use exactly the same type size.
   ========================================================================== */

.home .experts-sidebar-card .section-intro,
.home .experts-sidebar-card .experts-payment-note {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: #69656A !important;
    text-align: left !important;
}

.home .experts-sidebar-card .section-intro {
    margin: 0 !important;
}

.home .experts-sidebar-card .experts-payment-note {
    margin: 16px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid #ECE8EA !important;
}

@media (max-width: 768px) {
    .home .experts-sidebar-card .section-intro,
    .home .experts-sidebar-card .experts-payment-note {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
}


/* ==========================================================================
   59. HOME — EXPERT PROFESSION TEXT
   Slightly larger and easier to read, especially on mobile.
   ========================================================================== */

.home .experts-grid-row .expert-card .expert-info .expert-text > span {
    font-family: 'Nunito', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    color: #69656A !important;
    margin-top: 2px !important;
}

@media (max-width: 768px) {
    .home .experts-grid-row .expert-card .expert-info .expert-text > span {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-top: 4px !important;
    }
}


/* ==========================================================================
   60. HOME — EXPERT INTRO CARD BALANCE
   Restore a cleaner two-part layout on desktop:
   intro text + visible divider + payment note.
   ========================================================================== */

.home .experts-sidebar-card {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 28px !important;
}

.home .experts-sidebar-card > div {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.home .experts-sidebar-card .section-intro,
.home .experts-sidebar-card .experts-payment-note {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: #666166 !important;
}

.home .experts-sidebar-card .section-intro:not(.experts-payment-note) {
    margin: 0 !important;
    padding: 0 !important;
}

.home .experts-sidebar-card .experts-payment-note {
    position: relative !important;
    margin: 22px 0 0 !important;
    padding: 22px 0 0 !important;
    border-top: 1px solid #DDD6DA !important;
}

@media (max-width: 768px) {
    .home .experts-sidebar-card {
        padding: 24px !important;
        justify-content: flex-start !important;
    }

    .home .experts-sidebar-card > div {
        justify-content: flex-start !important;
    }

    .home .experts-sidebar-card .section-intro,
    .home .experts-sidebar-card .experts-payment-note {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .home .experts-sidebar-card .experts-payment-note {
        margin-top: 18px !important;
        padding-top: 18px !important;
        border-top-color: #E4DEE1 !important;
    }
}


/* ==========================================================================
   61. HOME — TEXT SIZE BALANCE
   Make the expert intro card and expert professions easier to read on desktop,
   closer in visual weight to the event-card text above.
   ========================================================================== */

/* Intro/payment card: larger text so the card no longer feels half-empty. */
.home .experts-sidebar-card .section-intro,
.home .experts-sidebar-card .experts-payment-note {
    font-family: 'Nunito', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.52 !important;
    font-weight: 400 !important;
    color: #5F5B60 !important;
}

/* Keep the two parts clearly separated. */
.home .experts-sidebar-card > div > div[aria-hidden="true"] {
    margin: 20px 0 !important;
    background: #DDD6DA !important;
}

/* Profession under expert name: larger and more readable. */
.home .experts-grid-row .expert-card .expert-info .expert-text > span {
    font-family: 'Nunito', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    color: #666166 !important;
    margin-top: 3px !important;
    margin-bottom: 12px !important;
}

/* Mobile already has more room vertically; give it one extra pixel. */
@media (max-width: 768px) {
    .home .experts-sidebar-card .section-intro,
    .home .experts-sidebar-card .experts-payment-note {
        font-size: 17px !important;
        line-height: 1.55 !important;
    }

    .home .experts-grid-row .expert-card .expert-info .expert-text > span {
        font-size: 17px !important;
        line-height: 1.48 !important;
    }
}