/* ==========================================================================
   Language Club — статична сторінка розмовного клубу.
   Базові класи взяті з теми (main.min.css); нижче тільки те, чого там немає
   або що відрізняється від сторінок-донорів.
   Підключається з page-language-club.php тегом <link> у тілі сторінки, а не
   через wp_enqueue_style: у header.php wp_head() виводиться раніше за
   main.min.css, тому enqueue зламав би каскад.
   ========================================================================== */

.languageClub {
   background: #F7F7F7;
}

/* --- 1. Герой ------------------------------------------------------------ */

.languageClub_hero .repeatedScreen_subtitle {
   font-family: Montserrat, Helvetica, Arial, sans-serif;
   font-weight: 700;
   font-size: 26px;
   line-height: 1.5;
   color: #fff;
   margin: 0 0 25px 0;
}

.languageClub_hero .languageClub_heroCols {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin-bottom: 40px;
}

.languageClub_hero .languageClub_heroCols p {
   -ms-flex-preferred-size: 50%;
   flex-basis: 50%;
   max-width: 620px;
   margin: 0;
   padding-right: 40px;
   font-family: Montserrat, Helvetica, Arial, sans-serif;
   font-weight: 500;
   font-size: 24px;
   line-height: 1.5;
   color: #fff;
}

.languageClub_hero .repeatedScreen_buttons .blueButtonMore {
   text-transform: uppercase;
}

/* --- 2. Формат клубу ----------------------------------------------------- */

.languageClub_format {
   padding: 70px 80px 80px;
}

.languageClub_format .lgSectionTitle {
   margin-bottom: 55px;
}

.languageClub_formatItems {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 0 -12px;
}

.languageClub_formatItem {
   -ms-flex-preferred-size: calc(100% / 3);
   flex-basis: calc(100% / 3);
   max-width: calc(100% / 3);
   padding: 0 12px;
   margin-bottom: 24px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
}

/* Макет: картка 410x74, білa, radius 4, padding 12/16, іконка 50px, відступ 12. */
.languageClub_formatItem span {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   width: 100%;
   background: #fff;
   border-radius: 4px;
   padding: 12px 16px;
   font-family: Montserrat, Helvetica, Arial, sans-serif;
   font-weight: 600;
   font-size: 22px;
   line-height: 1.3;
   color: #333;
   text-transform: uppercase;
}

.languageClub_formatItem img {
   -ms-flex-negative: 0;
   flex-shrink: 0;
   width: 50px;
   height: 50px;
   margin-right: 12px;
   -o-object-fit: contain;
   object-fit: contain;
}

/* --- 3. Для чого потрібен клуб ------------------------------------------- */

.languageClub_purpose {
   padding-top: 70px;
   padding-bottom: 70px;
}

/* Сітка фото йде на всю ширину, тому падінг вішаємо на текстові обгортки —
   так заголовок стає в одну лінію з рештою секцій сторінки. */
.languageClub_purposeHead,
.languageClub_purposeFoot {
   padding-left: 80px;
   padding-right: 80px;
}

.languageClub_purpose .lgSectionTitle {
   margin-bottom: 45px;
}

.languageClub_purposeLead {
   font-family: Montserrat, Helvetica, Arial, sans-serif;
   font-weight: 700;
   font-size: 24px;
   line-height: 1.3;
   color: #333;
   margin-bottom: 30px;
}

.languageClub_purposeNote {
   font-family: Montserrat, Helvetica, Arial, sans-serif;
   font-weight: 500;
   font-size: 20px;
   line-height: 1.5;
   color: #333;
   margin-top: 35px;
   margin-bottom: 0;
}

.languageClub_purpose .toursTripPlan_item {
   height: auto;
   min-height: 237px;
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: flex-end;
   padding: 0;
}

.languageClub_purpose .toursTripPlan_item .info {
   width: 100%;
   padding: 0 0 28px 0;
}

.languageClub_purpose .toursTripPlan_item .info_title {
   text-align: left;
   font-weight: 700;
   font-size: 27px;
   line-height: 1.4;
   margin-bottom: 0;
   padding: 0 28px;
}

/* --- 4. Як проходять заняття --------------------------------------------- */

.languageClub_how {
   padding: 70px 80px 60px;
}

.languageClub_how .lgSectionTitle {
   margin-bottom: 55px;
}

.languageClub_howItems {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 0 -12px;
}

/* Макет: картка 410 шириною, білa, radius 4, padding 20, відступ між картками 24. */
.languageClub_howItem {
   -ms-flex-preferred-size: calc(100% / 3 - 24px);
   flex-basis: calc(100% / 3 - 24px);
   max-width: calc(100% / 3 - 24px);
   margin: 0 12px 24px;
   background: #fff;
   border-radius: 4px;
   padding: 20px;
}

.languageClub_howItem_head {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   margin-bottom: 20px;
}

.languageClub_howItem_head img {
   -ms-flex-negative: 0;
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   margin-right: 18px;
   -o-object-fit: contain;
   object-fit: contain;
}

.languageClub_howItem_head h3 {
   font-family: Montserrat, Helvetica, Arial, sans-serif;
   font-weight: 600;
   font-size: 22px;
   line-height: 1.3;
   color: #333;
   text-transform: uppercase;
   margin: 0;
}

.languageClub_howItem p {
   font-family: Montserrat, Helvetica, Arial, sans-serif;
   font-weight: 500;
   font-size: 20px;
   line-height: 1.3;
   color: #333;
   margin: 0 0 18px 0;
}

.languageClub_howItem p:last-child {
   margin-bottom: 0;
}

.languageClub_howItem p strong {
   font-weight: 700;
}

/* --- 5 і 8. Блоки з фоновим фото ----------------------------------------- */

.languageClub_photoBlock {
   position: relative;
   overflow: hidden;
}

.languageClub_photoBlock .templateBLock_imgBg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /* main.min.css центрує .templateBLock_imgBg через translate(-50%,-50%) — знімаємо */
   -webkit-transform: none;
   transform: none;
   -o-object-fit: cover;
   object-fit: cover;
   z-index: 0;
}

.languageClub_photoBlock:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: #000;
   z-index: 1;
}

.languageClub_photoBlock .container--content {
   position: relative;
   z-index: 2;
}

.languageClub_why:after {
   opacity: .6;
}

.languageClub_cta:after {
   opacity: .45;
}

.languageClub_why {
   padding: 80px 80px 70px;
}

.languageClub_why .lgSectionTitle {
   color: #fff;
   margin-bottom: 45px;
}

.languageClub_whyItems {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 0 -12px 40px;
}

.languageClub_whyItem {
   -ms-flex-preferred-size: 25%;
   flex-basis: 25%;
   max-width: 25%;
   padding: 0 12px;
}

/* Макет: картка 302x268, білa, radius 2, padding 24, тінь 0 4px 4px rgba(0,0,0,.24). */
.languageClub_whyItem_inner {
   height: 100%;
   background: #fff;
   border-radius: 2px;
   padding: 24px;
   -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, .24);
   box-shadow: 0 4px 4px rgba(0, 0, 0, .24);
}

.languageClub_whyItem img {
   width: 34px;
   height: 34px;
   -o-object-fit: contain;
   object-fit: contain;
   margin-bottom: 20px;
}

.languageClub_whyItem h3 {
   font-family: Montserrat, Helvetica, Arial, sans-serif;
   font-weight: 600;
   font-size: 22px;
   line-height: 1.3;
   color: #333;
   text-transform: uppercase;
   margin: 0 0 14px 0;
}

.languageClub_whyItem p {
   font-family: Montserrat, Helvetica, Arial, sans-serif;
   font-weight: 500;
   font-size: 18px;
   line-height: 1.4;
   color: #333;
   margin: 0;
}

.languageClub_cta {
   padding: 80px 80px 90px;
}

.languageClub_cta .lgSectionTitle {
   color: #fff;
   margin-bottom: 35px;
   max-width: 1100px;
}

.languageClub_cta p {
   font-family: Montserrat, Helvetica, Arial, sans-serif;
   font-weight: 600;
   font-size: 28px;
   line-height: 1.3;
   color: #fff;
   max-width: 1280px;
   margin: 0 0 40px 0;
}

/* --- 6. Вартість та умови ------------------------------------------------ */

.languageClub_price .aboutReasonsSection_items {
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
}

.languageClub_price .aboutReasonsSection_item {
   -ms-flex-preferred-size: 47%;
   flex-basis: 47%;
   margin-right: 6%;
}

.languageClub_price .aboutReasonsSection_item:nth-of-type(2n) {
   margin-right: 0;
}

.languageClub_price .aboutReasonsSection_item--full {
   -ms-flex-preferred-size: 100%;
   flex-basis: 100%;
   margin-right: 0;
   padding-bottom: 20px;
}

.languageClub_price .aboutReasonsSection_item p:nth-of-type(1) {
   font-weight: 700;
   font-size: 32px;
   line-height: 1.3;
}

.languageClub_price .aboutReasonsSection_item p:nth-of-type(n+2) {
   font-weight: 500;
   font-size: 24px;
   line-height: 1.3;
   margin-bottom: 15px;
}

.languageClub_price .aboutReasonsSection_item p:last-of-type {
   margin-bottom: 0;
}

/* --- 10. Телеграм-банер --------------------------------------------------
   .join / .join-content / .join-wrapper описані в main.min.css; тут тільки
   те, що на сторінці-донорі лежить в update.css і сюди не доїжджає.        */

.languageClub_join .join-wrapper {
   padding: 0;
}

.languageClub_join .join-wrapper2 .join {
   background: none !important;
   height: 433px;
   position: relative;
   padding-top: 100px;
}

.languageClub_join .join-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   z-index: 0;
}

.languageClub_join .join-content {
   position: relative;
   z-index: 2;
}

.languageClub_join .join-content:before {
   top: 0 !important;
}

/* --- Адаптив ------------------------------------------------------------- */

@media (max-width: 1365px) {
   .languageClub_format,
   .languageClub_how,
   .languageClub_why,
   .languageClub_cta,
   .languageClub_purposeHead,
   .languageClub_purposeFoot {
      padding-left: 40px;
      padding-right: 40px;
   }
   .languageClub_hero .languageClub_heroCols p {
      font-size: 20px;
   }
   .languageClub_formatItem span,
   .languageClub_howItem_head h3,
   .languageClub_whyItem h3 {
      font-size: 18px;
   }
   .languageClub_purpose .toursTripPlan_item .info_title {
      font-size: 22px;
   }
   .languageClub_cta p {
      font-size: 22px;
   }
   .languageClub_price .aboutReasonsSection_item p:nth-of-type(1) {
      font-size: 26px;
   }
   .languageClub_price .aboutReasonsSection_item p:nth-of-type(n+2) {
      font-size: 20px;
   }
}

@media (max-width: 1024px) {
   .languageClub_whyItem {
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
      max-width: 50%;
      margin-bottom: 26px;
   }
   .languageClub_formatItem {
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
      max-width: 50%;
   }
   .languageClub_howItem {
      -ms-flex-preferred-size: calc(50% - 24px);
      flex-basis: calc(50% - 24px);
      max-width: calc(50% - 24px);
   }
   .languageClub_hero .languageClub_heroCols p {
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
      max-width: 100%;
      padding-right: 0;
      margin-bottom: 15px;
   }
   .languageClub_purpose .toursTripPlan_item {
      min-height: 200px;
   }
}

@media (max-width: 767px) {
   .languageClub_format,
   .languageClub_how,
   .languageClub_why,
   .languageClub_cta {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 45px;
      padding-bottom: 45px;
   }
   .languageClub_formatItem,
   .languageClub_whyItem {
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
      max-width: 100%;
   }
   .languageClub_howItem {
      -ms-flex-preferred-size: calc(100% - 24px);
      flex-basis: calc(100% - 24px);
      max-width: calc(100% - 24px);
   }
   .languageClub_format .lgSectionTitle,
   .languageClub_how .lgSectionTitle,
   .languageClub_why .lgSectionTitle,
   .languageClub_purpose .lgSectionTitle {
      margin-bottom: 30px;
   }
   .languageClub_hero .repeatedScreen_subtitle {
      font-size: 20px;
   }
   .languageClub_price .aboutReasonsSection_item,
   .languageClub_price .aboutReasonsSection_item--full {
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
      margin-right: 0;
   }
   .languageClub_cta p {
      font-size: 18px;
   }
   .languageClub_join .join-wrapper2 .join {
      height: auto;
      padding-top: 40px;
      padding-bottom: 40px;
   }
}

/* Тема на ≤780px робить герой світлим (.repeatedScreen_title і
   .repeatedScreen_simpleText → #000). Власні тексти героя ведемо тим самим
   брейкпойнтом — інакше в діапазоні 768–780px вони були б білим по білому. */
@media only screen and (max-width: 780px) {
   .languageClub_hero .repeatedScreen_subtitle,
   .languageClub_hero .languageClub_heroCols p {
      color: #000;
   }
}

/* Тема на ≤640px перебудовує templateBLock: .container--content стає білою
   карткою, оверлей вимикається, а --lightFont перефарбовується в чорний.
   Дублюємо це явно для власних елементів, щоб колір не залежав від того,
   у якому порядку autoptimize склеїть інлайн-стилі з main.min.css. */
@media only screen and (max-width: 640px) {
   .languageClub_why .lgSectionTitle,
   .languageClub_cta .lgSectionTitle,
   .languageClub_cta p {
      color: #000;
   }
}