/*
 Theme Name: Yogamo Child
 Template: yogamo
*/
.wp-block-getwid-media-text-slider-slide-content
 {
    max-width: 80%;
    width: 100%;
    min-height: 850px;
    display: flex;
    align-items: center;
    justify-content: right;
}

@media (min-width: 992px) {
    .site-main {
        padding-left: 60px;
        padding-right: 60px;
        padding-top: 130px;
    }
    .home .site-header {
    /* background: transparent; */
    position: fixed;
    z-index: 29;
    width: 100%;
    background: #fff;
}
}
h3.wp-block-getwid-price-box__title {
    text-align: center;
}
.whatsapp-icon {
    margin: 0 20px;
}
.max-icon {
    margin: 0px 20px;
}
.desctope-header-social-phone {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
}
.header-social-phone {
    display: none;
    flex-direction: column; /* іконки зверху, телефон знизу */
    align-items: center;    /* вирівнювання по центру */
    gap: 00px;              /* відступ між іконками і телефоном */
}
.mobile-header-social-phone{
    display: none;
}
.whatsapp-icon::before {
    content: "\f232"; /* код іконки WhatsApp у Font Awesome */
    font-family: "Font Awesome 5 Brands";
    font-size: 34px;
    color: #25D366;
}
.desctope-header-social-phone .whatsapp-icon::before {
  
    font-size: 22px;
 
}
.mobile-header-social-phone  .whatsapp-icon::before {
    font-size: 18px;
}

.telegram-icon::before {
    content: "\f2c6"; /* код іконки Telegram */
    font-family: "Font Awesome 5 Brands";
    font-size: 34px;
    color: #0088cc;
}
.desctope-header-social-phone .telegram-icon::before {
font-size: 22px;
}
.mobile-header-social-phone .telegram-icon::before {
font-size: 18px;
}
.max-icon::before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 34px;
    background-image: url(/wp-content/themes/yogamo-child/img/max-messenger-sign-logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: text-bottom;
}
.desctope-header-social-phone .max-icon::before {
    width: 22px;
    height: 22px;
}
.mobile-header-social-phone .max-icon::before {
    width: 18px;
    height: 18px;
}
.main-navigation a {
    text-transform: uppercase;
}
.entry-meta .byline {
    display: none;
}
.post-navigation {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.post-thumbnail,
.entry-footer,
.entry-header,
.page-header {
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
}
.post .post-thumbnail-wrap,
.tax-mpa_service_category .post-thumbnail-wrap {
  max-width: 1100px;
  margin: auto;
  position: relative;
}
.tax-mpa_service_category article {
  max-width: 1100px;
  margin: 0 auto;
}
.comments-area {
  max-width: 1100px;
  margin: 70px auto 80px;
}
.entry-summary > *,
.entry-content > * {
  max-width: 1100px;
  margin-bottom: 1.5em;
  margin-left: auto;
  margin-right: auto;
}
figcaption.wp-element-caption a {
    font-size: 25px;
}
.wp-block-column:not(:only-child) > *:last-child {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.wp-block-getwid-tabs__tab-content {
    border: none;
}
.wp-block-getwid-tabs__nav-link {
    margin: 0;
    border:0;
    border-bottom: 2px solid #f8eaf3;
}
.wp-block-getwid-tabs__nav-link.ui-tabs-active {
    border-color: #2da272;
    background:none;
}
/* .wp-block-getwid-tabs__nav-links {
      flex-wrap: nowrap;
} */
.wp-block-getwid-tabs__nav-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0 0 -1px;
}
.site-header .menu-toggle {
    padding: 20px 0 0;
}
.desctope-header-social-phone .header-phone, .mobile-header-social-phone .header-phone{
    font-weight: bold;
}
.wp-block-column:not(:only-child) > *:last-child
 {
    /* padding: 0 0 50px; */
}

div#ivy-reviews-widget {
    max-width: 1200px;
    text-align: center;
    margin: 0 auto !important;
}
div#ivy-reviews-widget {
    background: #f6fbf6 !important;
}
@media (min-width: 768px) {
    .wp-block-column:not(:only-child):nth-child(2n), .wp-block-column:not(:only-child):not(:first-child) {
        align-items: stretch;
    }
}
/* @media (max-width:1400px){
    .main-navigation a {
    font-size: 18px;
}
} */
/* Для мобільних екранів */
@media (min-width: 992px) {
   .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-9d6595d7.wp-block-columns-is-layout-flex .wp-block-button__link {
    min-width: 320px;
}
}
@media (max-width: 768px) {
    .desctope-header-social-phone{
        display: none;
    }
    .mobile-header-social-phone {
    position: absolute;
    top: 0px;
    right: 20px;
    /* left: 50%;
    transform: translateX(-50%); */
    display: flex;
    /* gap: 10px;
    width: max-content; */
    }
    .header-social-phone{
        display: flex;
    }
    .wp-block-getwid-tabs__nav-links {
        flex-direction: column;   /* робимо вертикальний список */
        align-items: stretch;     /* розтягуємо на всю ширину */
    }

    .wp-block-getwid-tabs__nav-links li {
        width: 100%;              /* кожен пункт займає всю ширину */
        text-align: center;       /* вирівнювання тексту */
        margin: 0;                /* прибираємо зайві відступи */
    }

}

    .template-canvas .entry-content > *.alignfull {
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 576px) {
 .wp-block-getwid-media-text-slider-slide-content {
    max-width: 80%;
    width: 100%;
    min-height: 450px;
    display: block;
}
figcaption.wp-element-caption a {
    font-size: 16px;
}
.site-footer .footer-info-cont {
    background: #f6fbf6;
    padding: 40px;
    max-width: 90%;
    width: 100%;
    line-height: 1.45;
    letter-spacing: 0.5px;
}
.wp-block-getwid-section__content h2:first-child {
    margin-top: 30px;
    margin-bottom: 80px;
    text-align: center;
}
}




/* 1. Заокруглюємо кути обкладинки та ховаємо гострі краї картинки */
.rounded-cover {
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* 2. Змушуємо внутрішній контейнер обкладинки працювати як Flexbox і центрувати все */
.custom-yoga-card .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Центрування по вертикалі */
    align-items: center !important;    /* Центрування по горизонталі */
    height: 100% !important; 
    /* min-height: 200px !important; */
}
.custom-yoga-cardes .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: start !important; /* Центрування по вертикалі */
    align-items: center !important;    /* Центрування по горизонталі */
    height: 100% !important; 
    /* min-height: 200px !important; */
     padding: 60px 0 0;     /*  Тут можна задати бажану висоту картки */
}
.custom-yoga-prices  .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: end !important; /* Центрування по вертикалі */
    align-items: center !important;    /* Центрування по горизонталі */
    height: 100% !important;
  /*  min-height: 280px !important;        Тут можна задати бажану висоту картки */
}
.tat-main-2{
    padding: 0 0 10px;
}

/* 3. Скидаємо зайві розтягування внутрішньої групи */
.custom-yoga-card .wp-block-group {
    width: auto !important;
    margin: 0 auto !important;
}

/* 4. Робимо невеликий відступ між іконкою та текстом, щоб вони не злипалися */
.custom-yoga-card .uagb-icon-wrapper {
    margin-bottom: 12px !important;
    display: flex !important;
    justify-content: center !important;
}

/* Ефект плавного збільшення картинки при наведенні */

/* 1. Плавне збільшення картинки для обох блоків */
.custom-yoga-card .wp-block-cover__image-background, 
.custom-yoga-prices .wp-block-cover__image-background {
    transition: transform 0.5s ease-in-out !important;
}

/* Ефект наведення (працює примусово для обох класів) */
.custom-yoga-card:hover .wp-block-cover__image-background, 
.custom-yoga-prices:hover .wp-block-cover__image-background {
    transform: scale(1.08) !important;
}

/* 2. Робимо обкладинки відносними контейнерами */
.custom-yoga-card, 
.custom-yoga-prices {
    position: relative !important;
}

/* 3. Універсальне розтягування лінку */
/* Шукаємо БУДЬ-ЯКЕ посилання всередині цих обкладинок і розтягуємо псевдоелемент на всю картку */
.custom-yoga-card a::after, 
.custom-yoga-prices a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99 !important; /* Гарантовано кладемо клікабельну зону поверх усіх груп */
}
/* ========================================== */
/* 1. ЗАГАЛЬНІ СТИЛІ (ПРАЦЮЮТЬ НА ВСІХ ПРИСТРОЯХ) */
/* ========================================== */

/* Головний контейнер обкладинки */
.hover-reveal-card {
    overflow: hidden !important;
    position: relative !important;
}

/* Плавність для картинки */
.hover-reveal-card .wp-block-cover__image-background {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    filter: grayscale(100%) !important;
}

/* Внутрішній контейнер з текстом та іконкою */
.hover-reveal-card .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Розташування вмісту внизу */
    align-items: center !important;        /* Центрування по горизонталі */
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 25px !important;       /* Робимо відступ від нижнього краю */
}

/* Забезпечуємо центрування тексту */
.hover-reveal-card .wp-block-cover__inner-container * {
    text-align: center !important;
}

/* Розтягування посилання на весь блок картки */
.hover-reveal-card a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99 !important;
}


/* ========================================== */
/* 2. ЕФЕКТИ ЛИШЕ ДЛЯ ДЕСКТОПІВ (ЕКРАНИ ВІД 1025px) */
/* ========================================== */
@media (min-width: 1025px) {
    
    /* Ховаємо текст за замовчуванням */
    .hover-reveal-card .wp-block-cover__inner-container {
        opacity: 0 !important;
        transform: translateY(40px) !important;
        transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* При наведенні мишки на десктопі: */
    
    /* 1. Збільшуємо фонову картинку */
    .hover-reveal-card:hover .wp-block-cover__image-background {
        transform: scale(1.08) !important;
    }

    /* 2. Плавно підіймаємо та показуємо текст знизу */
    .hover-reveal-card:hover .wp-block-cover__inner-container {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}


/* ========================================== */
/* 3. ДЛЯ МОБІЛЬНИХ ТА ПЛАНШЕТІВ (ЕКРАНИ ДО 1024px) */
/* ========================================== */
@media (max-width: 1024px) {
    
    /* Текст завжди видимий і знаходиться на своєму місці внизу */
    .hover-reveal-card .wp-block-cover__inner-container {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* На телефонах краще не збільшувати картинку сильно, 
       або можна взагалі вимкнути ефект, щоб не було мікро-гальмувань */
    .hover-reveal-card .wp-block-cover__image-background {
        transform: scale(1) !important;
    }
}

/* 4. РОЗТЯГУВАННЯ ПОСИЛАННЯ НА ВЕСЬ БЛОК */
/* Шукаємо посилання всередині обкладинки та створюємо "невидимий плащ" поверх усієї картки */
.hover-reveal-card a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99 !important; /* Клікабельна зона лежить поверх усього вмісту */
}

/* ========================================== */
/* ЕФЕКТ ПРИ НАВЕДЕННІ МИШКИ (HOVER)          */
/* ========================================== */

/* Картинка плавно збільшується */
.hover-reveal-card:hover .wp-block-cover__image-background {
    transform: scale(1.08) !important;
    filter: grayscale(0%) !important; /* Повертаємо рідні кольори */
}

/* Текст магічно підіймається і проявляється чітко по центру */
.hover-reveal-card:hover .wp-block-cover__inner-container {
    opacity: 1 !important; /* Робимо видимим */
    transform: translateY(0) !important; /* Повертаємо в точний центр (0 пікселів зміщення) */
}

.wp-block-columns {
    gap: 10px !important;
}

.wp-block-getwid-section__wrapper {
    padding: 0 !important;
}

@media (max-width: 781px) {
    .tat-main-1 {
        flex-wrap: nowrap !important;
        gap: 1rem;
    }

    .tat-main-1 > .wp-block-column {
        flex-basis: 50% !important;
        min-width: 0 !important;
    }
    .custom-yoga-card  .uagb-svg-wrapper{
        display: none !important;
    }
    .custom-yoga-card .wp-block-group .wp-block-group__inner-container > *:last-child {
    margin-bottom: 0;
    font-size: 20px !important;
}
/* 1. Налаштовуємо контейнер колонок */
.tat-main-1 {
    display: flex !important;
    align-items: stretch !important; /* Гарантуємо рівну висоту колонок */
}

/* 2. Налаштовуємо самі колонки, щоб їхній вміст міг розтягуватися */
.tat-main-1 .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 3. Змушуємо обкладинки (карти) мати фіксовану висоту та заповнювати колонку */
.tat-main-1 .custom-yoga-card {
    flex-grow: 1 !important;
    height: 320px !important; /* Задайте тут бажану висоту карток (наприклад, 300px чи 350px) */
    min-height: 300px !important;
}

/* 4. Забезпечуємо правильне масштабування фонових зображень всередині обкладинок */
.tat-main-1 .custom-yoga-card .wp-block-cover__image-background {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important; /* Картинка красиво обріжеться під задану висоту 320px */
}

}


/* ========================================== */
/* СУТЬО ДЛЯ ПЛАНШЕТІВ (ЕКРАНИ ВІД 600px ДО 1024px) */
/* ========================================== */
@media (min-width: 600px) and (max-width: 1024px) {
    
    /* Робимо батьківський контейнер гнучким і дозволяємо перенос карток */
    .tat-main-3.wp-block-columns, .tat-main-4.wp-block-columns  {
        display: flex !important;
        flex-wrap: wrap !important; 
        gap: 24px !important; /* Проміжок між картками (можна змінити на свій смак) */
        justify-content: center !important;
    }

    /* Примусово вибудовуємо колонки по 2 в ряд */
    .tat-main-3.wp-block-columns .wp-block-column, .tat-main-4.wp-block-columns .wp-block-column {
        /* calc(50% - 12px) ділить рядок навпіл за вирахуванням половини нашого gap (24px / 2 = 12px) */
        flex: 1 1 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        
        /* Скидаємо десктопні відступи WordPress, щоб блоки не злітали */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important; /* Додатковий відступ між першим та другим рядком карток */
    }
}