/* ===================== CAPACITIES: HERO + BREADCRUMBS ===================== */

/* Hero без жодних верхніх відступів */
.cap-hero.smc-hero{
  margin-top: 0 !important;
  padding-top: 0 !important;
  height: 450px;
  min-height: 450px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.cap-hero.smc-hero::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.5);
}

/* Контейнер всередині hero на всю ширину, без паддингів/центрування */
.cap-hero > .smc-container{
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  margin-top: -80px;
  height: 450px; /* синхрон із hero */
}

/* Позиції елементів у hero */
.cap-hero .cap-bc{
  position: absolute;
  top: 101px;
  left: calc(50% - 650px);
  z-index: 2;
}
.cap-hero .cap-hero__title{
  position: absolute;
  top: 321px;
  left: calc(50% - 650px);
  margin: 0;
  z-index: 2;
}

/* Хлібні крихти — типографіка та кольори */
.cap-bc,
.cap-bc *{
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-align: left;
}

/* “Home” — білий */
.cap-bc li:first-child a{
  color: var(--White, rgba(255, 255, 255, 1));
  text-decoration: none;
}

/* Розділювач — зелений */
.cap-bc li+li::before{
  content: "›";
  color: var(--Green, rgba(1,169,160,1));
  display: inline-block;
  margin: 0 12px;
}

/* Наступні крихти + поточна — зелений */
.cap-bc li:not(:first-child) a,
.cap-bc li span[aria-current="page"]{
  color: var(--Green, rgba(1,169,160,1));
  text-decoration: none;
}
.cap-bc a:hover{ text-decoration: underline; }

/* Заголовок у hero */
.cap-hero__title{
  color: var(--White, #fff);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: left;
}

/* скидання браузерних маржинів для списку крихт у hero (якщо потрібно) */
.cap-hero .cap-bc ol,
.cap-hero .cap-bc .cap-bc__list{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ======================= CAPACITIES → Mission ======================= */
.cap-mission{ padding:80px 0; }

.cap-mission .smc-container{
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 70px !important;
}

.cap-mission .cap-mission__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 166px;          /* як на référці */
  align-items: start;
}

/* Ліва колонка */
.cap-mission__title{
  color: var(--Black, rgba(9,19,17,1));
  font-family: Montserrat, system-ui, Arial;
  font-size:40px;
  font-weight:700;
  line-height:100%;
  letter-spacing:0;
  text-align:left;
  margin:0 0 20px;
}
.cap-mission__left{
  color: var(--Dark-grey, rgba(138,138,138,1));
  font-family: Montserrat, system-ui, Arial;
  font-size:16px;
  font-weight:500;
  line-height:20px;
  letter-spacing:0;
  text-align:left;
  margin-top:80px;
}

/* Права колонка */
.cap-mission__right{
  font-family: Montserrat, system-ui, Arial;
  font-size:32px;
  font-weight:500;
  line-height:100%;
  letter-spacing:0;
  text-align:left;
  color: var(--Black, rgba(9,19,17,1));
}
.cap-mission__right p{ margin:0; margin-right: 70px; }
.cap-mission__right .is-accent{ color: var(--Green, #01A9A0); }

/* Адаптив */
@media (max-width:1200px){
  .cap-mission .cap-mission__grid{ column-gap:80px; }
}
@media (max-width:1024px){
  .cap-mission .cap-mission__grid{
    grid-template-columns:1fr;
    row-gap:28px;
  }
}

/* ======================= CAPACITIES → Blocks ======================= */
.cap-block{ padding: 24px 0; }

.cap-block .smc-container{
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 70px !important;
  display: grid;
  grid-template-columns: 469px 801px;   /* card | image */
  column-gap: 30px;                     /* як у референсі */
  align-items: center;
}

/* reverse: image ліворуч, картка праворуч */
.cap-block.cap-block--reverse .smc-container{
  grid-template-columns: 801px 469px;
}
.cap-block.cap-block--reverse .cap-card{ order:2; }
.cap-block.cap-block--reverse .cap-media{ order:1; }

/* --------- Green card --------- */
.cap-card{
  width:469px; height:400px;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:24px; border-radius:20px;
  background: var(--Green, #01A9A0); color:#fff; overflow:hidden;
}
.cap-card__title{ margin:0 0 6px; font:700 40px/1 Montserrat,system-ui,Arial; }
.cap-card__sub{   margin:0 0 16px; color:var(--Light-Green, #EFF7F6); font:600 24px/1 Montserrat,system-ui,Arial; }
.cap-card__text{  margin:0 0 16px; color:#fff; font:500 16px/20px Montserrat,system-ui,Arial; }
.cap-card__list{  margin:0; padding-left:20px; color:#fff; font:500 16px/20px Montserrat,system-ui,Arial; }

/* --------- Media / Swiper --------- */
.cap-media{ width:801px; height:400px; border-radius:20px; overflow:hidden; }
.cap-media .swiper{ width:100%; height:100%; }
.cap-media .swiper-slide{ width:100%; height:100%; }
.cap-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Пагінація (якщо використовується) */
.cap-pagination{
  position:absolute; left:12px; bottom:16px; z-index:5;
}
.cap-pagination .swiper-pagination-bullet{
  width:8px; height:8px; background:#fff; opacity:.6; margin:0 4px;
}
.cap-pagination .swiper-pagination-bullet-active{ opacity:1; }

/* Кнопки під каруселлю (загальний вигляд кнопок) */
.cap-block__grid{
  display:grid;
  grid-template-columns: 469px 1fr;   /* card + media */
  grid-template-rows: auto auto;      /* 1: контент, 2: кнопки */
  column-gap:30px;
  align-items:start;
}
.cap-card{  grid-column:1; grid-row:1; }
.cap-media{ grid-column:2; grid-row:1; }

.cap-controls{
  grid-column:2;
  grid-row:2;
  justify-self:end;
  display:flex; gap:16px;
  margin-top:16px;      /* відступ від зображення */
}

/* при реверсі — під лівою колонкою */
.cap-block.cap-block--reverse .cap-card{ grid-column:2; }
.cap-block.cap-block--reverse .cap-media{ grid-column:1; }
.cap-block.cap-block--reverse .cap-controls{ grid-column:1; }

/* Універсальний стиль кнопок навігації (використовується і в логістиці) */
.cap-nav__btn{
  width:36px; height:36px; border-radius:50%;
  background:#fff; color:var(--Green,#01A9A0);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2); border:0; cursor:pointer;
}
.cap-nav__btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; }

/* --------- Responsive --------- */
@media (max-width:1280px){
  .cap-block .smc-container{ grid-template-columns: 469px 1fr; }
  .cap-block.cap-block--reverse .smc-container{ grid-template-columns: 1fr 469px; }
  .cap-media{ width:100%; }
}
@media (max-width:1024px){
  .cap-block .smc-container{ grid-template-columns:1fr; row-gap:20px; }
  .cap-card, .cap-media{ width:100%; }
}

/* =================== Capacities: LOGISTICS (cap-log) =================== */

/* Секція */
.cap-log { /* глобальні відступи залишаємо як є */ }

/* Заголовок */
.cap-log .cap-log__title{
  color: var(--Black, #091311);
  font: 700 32px/100% Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  letter-spacing: 0;
  margin: 0 0 24px 0;
}

/* Контейнер логістики */
.cap-log .smc-container{ 
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 70px !important;
}

/* Swiper-обгортка секції логістики */
.cap-log .cap-log__swiper{
  width: 100%;
  overflow: hidden;
}

/* Слайди */
.cap-log .cap-log__swiper .swiper-slide{
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Зображення у слайді: 635×400, із обрізанням */
.cap-log .cap-log__swiper .swiper-slide img{
  display:block; margin:0;
  width: 635px; height: 400px;
  max-width: 100%;
  border-radius: 20px;
  object-fit: cover;
}

/* Ряд з кнопками під каруселлю */
.cap-log .cap-controls-row{ 
  margin-top: 16px; 
  margin-bottom: 140px;
}
.cap-log .cap-controls{
  display: flex; 
  justify-content: flex-end; 
  align-items: center; 
  gap: 16px;
}

/* -------------------- Адаптив (акуратно) -------------------- */
@media (max-width: 1024px){
  .cap-log .cap-log__swiper .swiper-slide img{
    height: 320px;
    width: 100%;
  }
}
@media (max-width: 640px){
  .cap-log .cap-log__title{ font-size: 24px; }
  .cap-log .cap-log__swiper .swiper-slide img{ height: 260px; }
}
/* ====== Mobile (Hero) ====== */
@media (max-width: 480px){
  /* секція hero */
  .cap-hero.smc-hero{
    width: 100%;              /* не ламаємо вьюпорт */
    height: 450px;
    min-height: 450px;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .cap-hero.smc-hero::before{
    content:"";
    position:absolute; inset:0;
    background: rgba(0, 0, 0, 0.5); /* затемнення як у ТЗ */
  }

  /* контейнер всередині hero — на всю ширину без падингів */
  .cap-hero > .smc-container{
    max-width: none;
    width: 100%;
    height: 450px;
    margin: 0;
	margin-top: -64px;
    padding: 0 !important;
    position: relative;
  }

  /* хлібні крихти */
  .cap-hero .cap-bc{
    position: absolute;
    top: 80px;          /* відступ зверху */
    left: 20px;         /* відступ зліва */
    right: 20px;        /* щоб не прилипало справа */
    padding: 0;
    z-index: 2;
  }
  .cap-hero .cap-bc ol,
  .cap-hero .cap-bc .cap-bc__list{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* заголовок у hero */
  .cap-hero .cap-hero__title{
    position: absolute;
    top: 332px;         /* відступ зверху */
    left: 20px;         /* поля зліва/справа по 20 */
    right: 20px;
    margin: 0;
    color: var(--White, #fff);
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
    z-index: 2;
  }
}

/* ====== Mobile (Mission) — порядок: Title → Right → Left ====== */
@media (max-width: 480px){

  /* одна колонка + поля 20px */
  .cap-mission{
    padding: 24px 0;
  }
  
  /* перекриваємо десктопний контейнер на мобільному */
  .cap-mission .smc-container{
    padding: 0 20px !important;       /* точно 20px зліва/справа */
  }
  
  .cap-mission .cap-mission__grid{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;           /* паддинг тепер у контейнера вище */
    margin: 0;
  }

  /* “розплющуємо” перший внутрішній div, щоб заголовок і підзаголовок стали окремими флекс-елементами */
  .cap-mission .cap-mission__grid > div:first-child{
    display: contents;
  }

  /* Порядок */
  .cap-mission__title{ order: 1; }
  .cap-mission__right{ order: 2; }
  .cap-mission__left{  order: 3; }

  /* Стилі згідно ТЗ */
  .cap-mission__title{
    color: var(--Black, #091311);
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    margin: 0;            /* без зайвих відступів */
  }

  .cap-mission__right{
    color: var(--Black, #091311);
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    margin: 0;
  }
  .cap-mission__right p{ margin:0; }
  .cap-mission__right .is-accent{ color: var(--Green, #01A9A0); }

  .cap-mission__left{
    color: var(--Dark-grey, #8A8A8A);
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
    margin: 0;
  }
}
/* ===== Mobile (≤480px): Capabilities blocks ===== */
@media (max-width: 480px){

  /* колонки у стовпчик + поля 20px */
  .cap-block{
    padding: 16px 0;
  }
  /* перекриваємо десктопний контейнер на мобільному */
  .cap-block .smc-container,
  .cap-block__grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .cap-block .smc-container{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  /* Зелена картка */
  .cap-card{
    width: 100%;                 /* 375 - 40 = 335px корисної ширини */
    height: 400px;
    border-radius: 20px;
    background: var(--Green, #01A9A0);
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .cap-card__title{
    color: var(--White, #fff);
    font-family: Montserrat, system-ui, Arial;
    font-size: 24px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    margin: 0 0 8px 0;
  }

  .cap-card__sub{
    color: var(--Light-Green, #EFF7F6);
    font-family: Montserrat, system-ui, Arial;
    font-size: 18px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    margin: 0 0 12px 0;
  }

  .cap-card__text{
    color: var(--White, #fff);
    font-family: Montserrat, system-ui, Arial;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
    margin: 0 0 12px 0;
  }

  .cap-card__list{
    color: var(--White, #fff);
    font-family: Montserrat, system-ui, Arial;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
    margin: 0;
    padding-left: 18px;   /* акуратні маркери */
  }
  .cap-card__list li{ margin: 6px 0; }

  /* Карусель (зображення) */
  .cap-media{
    width: 100%;
    height: 320px;            /* за макетом */
    border-radius: 20px;
    overflow: hidden;
  }
  .cap-media .swiper,
  .cap-media .swiper-wrapper,
  .cap-media .swiper-slide{
    width: 100%;
    height: 100%;
  }
  .cap-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
  }

  /* Кнопки каруселі під зображенням */
  .cap-controls-row{
    margin-top: 12px;         /* невеликий відступ від каруселі */
    padding: 0 20px;          /* вирівнюємо з полями секції */
  }
  .cap-controls{
    width: 100px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0;
  }
  .cap-controls .cap-nav__btn{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--Green, #01A9A0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    border: 0;
    padding: 0;
  }
  .cap-controls .cap-nav__btn svg{
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
  }

  /* якщо є реверсний лейаут — на мобільному все одно йде картка → карусель → кнопки */
  .cap-block.cap-block--reverse .smc-container{
    flex-direction: column;
  }
}
/* приховуємо крапки-пагінації на мобільному */
.cap-pagination{ display:none !important; }

/* ====== MOBILE ≤480px ====== */
@media (max-width:480px){

  /* --- зелена картка --- */
  .cap-card{
    width:335px;
    height:400px;
    padding:40px 20px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;   /* не розтягуємо контент */
    align-items:flex-start;
    background:var(--Green,#01A9A0);
    gap:0;
    margin:0;                     /* без зовнішніх відступів */
  }

  .cap-card__title{
    color:#fff;
    font:700 24px/100% Montserrat,system-ui,Arial;
    margin:0 0 16px 0;            /* 16px від заголовка до підзаголовка */
  }

  .cap-card__sub{
    color:var(--Light-Green,#EFF7F6);
    font:600 18px/100% Montserrat,system-ui,Arial;
    margin:0;                     /* сам підзаголовок без дод. відступів */
  }

  .cap-card__text{
    color:#fff;
    font:500 16px/20px Montserrat,system-ui,Arial;
    margin:0;                     /* не додаємо розривів */
	margin-bottom:40px !important;
  }

  /* 143px від підзаголовка до списку */
  .cap-card__list{
    color:#fff;
    font:500 16px/20px Montserrat,system-ui,Arial;
    margin:143px 0 0 0;
    padding-left:20px;
  }

  /* --- порядок і відступи блоку --- */
  .cap-block .smc-container,
  .cap-block__grid{
    display:flex !important;
    flex-direction:column !important;
  }

  .cap-block .cap-card{
    order:1 !important;
  }

  /* Картка → Карусель = 16px */
  .cap-block .cap-media{
    order:2 !important;
    margin-top:16px;
  }

  /* Карусель → Стрілки = 24px, стрілки по центру */
  .cap-block .cap-controls{
    order:3 !important;
    align-self:center;
    margin-top:24px;
  }

  /* Між блоками секції після стрілок = 80px */
  .cap-block{ margin-bottom:80px; }
  .cap-block:last-of-type{ margin-bottom:0; }
}
@media (max-width:480px){
  /* список іде над description */
  .cap-card__list{
    order: 3;                 /* вище за текст */
    margin: 143px 0 0 0;      /* як домовлялись */
    padding-left: 20px;
  }

  /* description — у самий низ + відступ 40px знизу */
  .cap-card__text{
    order: 4;                 /* останнім елементом у картці */
    margin-top: auto;         /* штовхає вниз */
    margin-bottom: 40px;      /* просвіт від низу картки */
    color: #fff;
    font: 500 16px/20px Montserrat, system-ui, Arial;
  }
}

/* ============ CAP LOG (mobile ≤480px) ============ */
@media (max-width:480px){
  /* поля секції */
  .cap-log .smc-container{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* заголовок */
  .cap-log .cap-log__title{
    color: var(--Black, #091311);
    font: 700 24px/100% Montserrat, system-ui, Arial;
    margin: 0 20px 16px 0;      /* невеликий відступ під заголовком */
  }

  /* карусель */
  .cap-log .cap-log__swiper{
    width: 100%;
    overflow: hidden;
  }
  .cap-log .cap-log__swiper .swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cap-log .cap-log__swiper .swiper-slide img{
    width: 335px;
    height: 322px;
    border-radius: 20px;
    object-fit: cover;
    display: block;
  }

  /* стрілки під каруселлю, по центру */
  .cap-log .cap-controls-row{ margin-top: 24px; }       /* карусель → стрілки = 24px */
  .cap-log .cap-controls{
    display: flex;
    justify-content: center;                            /* по центру */
    align-items: center;
    gap: 16px;
  }
}

/* ----- CAP LOG (остання секція): мобільні фікси ----- */
@media (max-width:480px){

  /* на всяк випадок скидаємо можливий grid/float у контейнера */
  section.cap-log > .smc-container{
    display:block !important;
  }

  /* центруємо ряд зі стрілками + потрібні відступи */
  section.cap-log .cap-controls-row{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin:24px 0 80px 0 !important;   /* 24 зверху (від каруселі), 80 знизу */
    padding:0 !important;
    width:100% !important;
  }

  /* самі стрілки — по центру, навіть якщо десь є правила праворуч */
  section.cap-log .cap-controls{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:16px !important;
    width:auto !important;
    margin:0 !important;
  }
}
/* === CAP-LOG: фіксація розміру слайда на мобільних === */
@media (max-width: 480px){

  /* центруємо елемент слайда */
  .cap-log .cap-log__swiper .swiper-wrapper{
    align-items: center !important;
  }
  .cap-log .cap-log__swiper .swiper-slide{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* ЖОРСТКИЙ розмір картинки + перекриваємо будь-які width:100% */
  .cap-log .cap-log__swiper .swiper-slide > img{
    width: calc(100vw - 40px) !important;
    max-width: 320px !important;
    height: 260px !important;
    flex: 0 0 auto !important;
    border-radius: 20px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* (не обов’язково) прибираємо можливі внутрішні паддинги доріжки */
  .cap-log .cap-log__swiper,
  .cap-log .cap-log__swiper .swiper,
  .cap-log .cap-log__swiper .swiper-wrapper,
  .cap-log .cap-log__swiper .swiper-slide{
    padding: 0 !important;
  }
}