/* ==== Bootbox / Bootstrap modal tweaks (beautify) ==== */
.bootbox.modal .modal-dialog{
  max-width: 520px;
  margin: 1.5rem auto;
}

@media (max-width: 576px){
  .bootbox.modal .modal-dialog{
    max-width: calc(100% - 24px);
    margin: 12px auto;
  }
}
.project-content a{
  color:#0aa37f;
  text-decoration: underline;
  cursor: pointer;
}
.project-content a:hover{
  filter: brightness(0.85);
}

.bootbox.modal .modal-content{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  border: 0;
}

.bootbox.modal .modal-header{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.bootbox.modal .modal-title{
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.bootbox.modal .modal-body{
  padding: 14px 18px 18px;
}

.bootbox.modal .bootbox-body{
  font-size: 15px;
  line-height: 1.45;
}

.bootbox.modal .modal-footer{
  padding: 0 18px 18px;
  border-top: 0;
  gap: 10px;
}

.bootbox.modal .btn{
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 600;
  min-width: 120px;
}

/*************************************************
  HOME PAGE WIDTH FIX (search + main content)
**************************************************/

/* Никогда не даём странице стать шире экрана */
html, body { overflow-x: hidden !important; }

/* Чуть бокового воздуха на ПК */
.content-wrapper.bg-image{
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* У Bootstrap .row часто есть отрицательные margin — из-за них вылезает */
.content-wrapper.bg-image > .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ПК/планшет: расширяем центральные колонки */
@media (min-width: 992px){
  .content-wrapper.bg-image > .row.justify-content-center{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .content-wrapper.bg-image > .row.justify-content-center > .col-lg-7,
  .content-wrapper.bg-image > .row.justify-content-center > .col-lg-8,
  .content-wrapper.bg-image > .row.justify-content-center > .col-lg-9{
    flex: 0 0 auto !important;
    width: min(1320px, 92vw) !important;
    max-width: min(1320px, 92vw) !important;
  }
}

/* МОБИЛКА: НИКАКИХ vw — только 100% */
@media (max-width: 991.98px){
  .content-wrapper.bg-image{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .content-wrapper.bg-image > .row.justify-content-center > [class*="col-"]{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/***********************
  BACKGROUND: дизайнерский (свет + волны)
************************/
html, body { height: 100%; }

body {
  background-color: #f6f7fb !important;

  /* 1) мягкие световые пятна */
  background-image:
    radial-gradient(900px 520px at 12% 12%, rgba(16,185,129,.14), transparent 60%),
    radial-gradient(820px 520px at 88% 18%, rgba(59,130,246,.12), transparent 62%),
    radial-gradient(760px 560px at 40% 92%, rgba(168,85,247,.10), transparent 60%),

    /* 2) повторяющийся SVG с кривыми линиями (очень мягко) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2310b981' stop-opacity='.22'/%3E%3Cstop offset='.5' stop-color='%233b82f6' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%23a855f7' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2'%3E%3Cpath d='M-40 120 C 140 10, 260 220, 430 120 S 720 220, 940 90'/%3E%3Cpath d='M-60 260 C 120 130, 320 360, 520 240 S 780 120, 980 260'/%3E%3Cpath d='M-80 420 C 120 520, 260 300, 460 420 S 760 560, 980 420'/%3E%3Cpath d='M-40 560 C 160 640, 320 480, 520 560 S 760 660, 980 560'/%3E%3C/g%3E%3Cg opacity='.10'%3E%3Ccircle cx='120' cy='80' r='2' fill='%23111827'/%3E%3Ccircle cx='260' cy='160' r='1.6' fill='%23111827'/%3E%3Ccircle cx='520' cy='110' r='1.8' fill='%23111827'/%3E%3Ccircle cx='740' cy='210' r='1.5' fill='%23111827'/%3E%3Ccircle cx='680' cy='520' r='1.7' fill='%23111827'/%3E%3Ccircle cx='340' cy='540' r='1.4' fill='%23111827'/%3E%3C/g%3E%3C/svg%3E");

  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 900px 700px;
  background-position: center, center, center, 0 0;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* Уберем чужие фоны у обёрток, чтобы не перебивали */
body .container-scroller,
body .page-body-wrapper,
body .main-panel,
body .content-wrapper {
  background: transparent !important;
  background-image: none !important;
}

/* ===== FORCE FULL WIDTH ON MOBILE (col-11 -> 100%) ===== */
html, body { overflow-x: hidden !important; }

@media (max-width: 575.98px){

  /* чтобы не было отрицательных margin у .row */
  .content-wrapper.bg-image .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* центральные блоки (поиск и контент) */
  .content-wrapper.bg-image .row.justify-content-center > .col-11,
  .content-wrapper.bg-image .row.justify-content-center > .col-10,
  .content-wrapper.bg-image .row.justify-content-center > .col-9,
  .content-wrapper.bg-image .row.justify-content-center > [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0 !important; /* важно для нормального переноса текста */
  }

  /* небольшой внутренний отступ, чтобы не липло к краям */
  .content-wrapper.bg-image{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/*************************************************
  FIX: mobile "длинная пустая прокрутка" + ширина
**************************************************/

/* Не фиксируем height:100% — это часто ломает mobile viewport */
html, body { min-height: 100%; }
body { overflow-x: hidden; }

/* =========================
   BACKGROUND (через псевдоэлемент)
   Важно: фон не должен влиять на layout.
   ========================= */
body{
  background: none !important;
  position: relative;
}

/* Фон рисуем отдельным слоем */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-color: #f6f7fb;
  background-image:
    radial-gradient(900px 520px at 12% 12%, rgba(16,185,129,.14), transparent 60%),
    radial-gradient(820px 520px at 88% 18%, rgba(59,130,246,.12), transparent 62%),
    radial-gradient(760px 560px at 40% 92%, rgba(168,85,247,.10), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2310b981' stop-opacity='.22'/%3E%3Cstop offset='.5' stop-color='%233b82f6' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%23a855f7' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2'%3E%3Cpath d='M-40 120 C 140 10, 260 220, 430 120 S 720 220, 940 90'/%3E%3Cpath d='M-60 260 C 120 130, 320 360, 520 240 S 780 120, 980 260'/%3E%3Cpath d='M-80 420 C 120 520, 260 300, 460 420 S 760 560, 980 420'/%3E%3Cpath d='M-40 560 C 160 640, 320 480, 520 560 S 760 660, 980 560'/%3E%3C/g%3E%3Cg opacity='.10'%3E%3Ccircle cx='120' cy='80' r='2' fill='%23111827'/%3E%3Ccircle cx='260' cy='160' r='1.6' fill='%23111827'/%3E%3Ccircle cx='520' cy='110' r='1.8' fill='%23111827'/%3E%3Ccircle cx='740' cy='210' r='1.5' fill='%23111827'/%3E%3Ccircle cx='680' cy='520' r='1.7' fill='%23111827'/%3E%3Ccircle cx='340' cy='540' r='1.4' fill='%23111827'/%3E%3C/g%3E%3C/svg%3E");

  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 900px 700px;
  background-position: center, center, center, 0 0;
}

/* На мобилке fixed-фоны часто дают “пустой скролл”.
   Поэтому на <=768px делаем фон absolute (без бага). */
@media (max-width: 768px){
  body::before{
    position: absolute;
    inset: 0;
  }
}

/* Убираем любые фоновые картинки у обёрток темы */
.bg-image,
body .container-scroller,
body .page-body-wrapper,
body .main-panel,
body .content-wrapper{
  background: transparent !important;
  background-image: none !important;
}

/* =========================
   WIDTH: расширяем поиск + контент
   ========================= */

/* чуть паддинга по краям */
.content-wrapper.bg-image{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ДЕСKTOP: вместо col-lg-7 делаем широкий “контейнер” */
@media (min-width: 992px){
  .content-wrapper.bg-image > .row.justify-content-center > [class*="col-"]{
    flex: 0 0 auto !important;
    width: min(1380px, 94%) !important;
    max-width: min(1380px, 94%) !important;
  }
}

/* MOBILE/TABLET: 100% ширина (БЕЗ vw, чтобы не было багов с viewport) */
@media (max-width: 991.98px){
  .content-wrapper.bg-image > .row.justify-content-center > [class*="col-"]{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================
   FONT: аккуратно, чтобы ничего не “налезало”
   ========================= */
@media (min-width: 992px){
  body{ font-size: 17px; line-height: 1.55; }
}
@media (max-width: 991.98px){
  body{ font-size: 16px; line-height: 1.5; }
}

/* Чтобы длинный текст не выезжал за блоки */
.content-wrapper .rounded-lg,
.content-wrapper .card,
.content-wrapper [class*="col-"]{
  overflow-wrap: anywhere;
  word-break: break-word;
}
img{ max-width: 100%; height: auto; }


/*************************************************
  ONLY project/details: центрируем ТОЛЬКО блок табов
**************************************************/
html.st-route-project-details .st-project-tabs{
  max-width: 1320px !important;   /* ширина блока */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* чтобы хедер табов и контент брали ширину родителя */
html.st-route-project-details .st-project-tabs .mat-tab-header,
html.st-route-project-details .st-project-tabs .mat-tab-body-wrapper{
  width: 100% !important;
}

/* центрируем сами названия табов (внутри уже центрированного блока) */
html.st-route-project-details .st-project-tabs .mat-tab-label-container{
  display: flex !important;
  justify-content: center !important;
}

html.st-route-project-details .st-project-tabs .mat-tab-list{
  flex: 0 0 auto !important;  /* чтобы список табов “сжался” по контенту */
}

html.st-route-project-details .st-project-tabs .mat-tab-labels{
  display: flex !important;
  justify-content: center !important;
}

/* === ST: tabs centering ONLY desktop === */
@media (min-width: 992px){
  html.st-route-project-details .mat-tab-group.st-project-tabs{
    max-width: 1320px !important;
    width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  html.st-route-project-details .st-project-tabs .mat-tab-header,
  html.st-route-project-details .st-project-tabs .mat-tab-body-wrapper{
    width: 100% !important;
  }

  html.st-route-project-details .st-project-tabs .mat-tab-label-container,
  html.st-route-project-details .st-project-tabs .mat-tab-labels{
    justify-content: center !important;
  }
}

/* ==============================
   MOBILE FIX: tabs must fit screen
   (НЕ влияет на desktop)
   ============================== */
@media (max-width: 991.98px){

  /* на всякий случай: ничего не расширяем шире экрана */
  .mat-tab-group,
  .mat-tab-header,
  .mat-tab-body-wrapper{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* убираем “стрелки” и даём скролл пальцем */
  .mat-tab-header-pagination{
    display: none !important;
  }

  .mat-tab-header .mat-tab-label-container{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* чтобы табы не ломались и не резались */
  .mat-tab-label{
    min-width: max-content !important;  /* главное: не 0 и не фикс 160 */
    padding: 0 12px !important;
    white-space: nowrap !important;
  }

  /* прячем скроллбар, но скролл остается */
  .mat-tab-header .mat-tab-label-container::-webkit-scrollbar{
    display: none;
  }
}

/* =========================================================
   /main carousel poster: растём ВВЕРХ+ВЛЕВО, низ на месте
   (через transform, не ломаем layout)
   ========================================================= */

/* tablet + desktop */
@media (min-width: 768px){

  /* чтобы трансформ не резался */
  .carousel-inner,
  .carousel-inner .carousel-item,
  .carousel-inner .carousel-item .row{
    overflow: visible !important;
  }

  /* левая колонка с картинкой: прижать картинку к НИЗУ и ВПРАВО */
  .carousel-inner .carousel-item .stretch-card{
    display: flex !important;
    align-items: flex-end !important;     /* низ фиксируем */
    justify-content: flex-end !important; /* вправо фиксируем (значит рост влево) */
    overflow: visible !important;
  }

  /* сама картинка */
  .carousel-inner .carousel-item img.popular-image{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 18px !important;

    /* ключевое: рост ВВЕРХ+ВЛЕВО */
    transform-origin: 100% 100% !important; /* bottom-right */
    transform: scale(1.22) !important;

    z-index: 2 !important;
  }
}

/* desktop: можно чуть больше */
@media (min-width: 1200px){
  .carousel-inner .carousel-item img.popular-image{
    transform: scale(1.32) !important;
    border-radius: 22px !important;
  }
}


/* ===========================
   PROJECT DETAILS tabs: DESKTOP ONLY (no flicker)
   =========================== */
@media (min-width: 992px){
  html.st-route-project-details .mat-tab-group{
    max-width: 1320px !important;
    width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  html.st-route-project-details .mat-tab-header{
    display: flex !important;
    justify-content: center !important;
  }

  html.st-route-project-details .mat-tab-label-container{
    flex: 0 1 auto !important;
  }
}

/* ===========================
   HOME carousel image: bigger + rounded
   grows UP+LEFT, bottom stays fixed
   =========================== */
@media (min-width: 768px){
  #homeCarousel .carousel-inner,
  #homeCarousel .carousel-item{
    overflow: visible !important;
  }

  #homeCarousel .carousel-item .col-md-5,
  #homeCarousel .carousel-item .stretch-card{
    display: flex !important;
    align-items: flex-end !important;     /* низ на месте */
    justify-content: flex-end !important; /* рост влево */
    overflow: visible !important;
  }

  #homeCarousel img.popular-image{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 18px !important;
    margin-bottom: 0 !important;

    transform-origin: 100% 100% !important; /* bottom-right */
    transform: scale(1.14) !important;      /* tablet */
  }
}

@media (min-width: 992px){
  #homeCarousel img.popular-image{
    transform: scale(1.24) !important;      /* desktop */
    border-radius: 22px !important;
  }
}

/* links inside editor content (TinyMCE/CKEditor-like) */
.mce-content-body a,
.ck-content a,
.project-content a{
  color:#0aa37f !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.mce-content-body a:hover,
.ck-content a:hover,
.project-content a:hover{
  filter: brightness(0.85);
}