/* =========================================================
   БЛОК: КОМАНДА / НАША ИСТОРИЯ
   ========================================================= */



/* =========================================================
   1️⃣ ОБЩИЙ КОНТЕЙНЕР СЕКЦИИ
   Ритм блока относительно страницы
   ========================================================= */

.section-comand{
  padding-top:var(--space-16);
  padding-bottom:var(--space-16);
}


/* =========================================================
   2️⃣ СЕТКА БЛОКА
   Фото + текст (десктоп)
   ========================================================= */

.section-comand__grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:var(--space-16);
  align-items:start;
}


/* =========================================================
   3️⃣ МЕДИА-БЛОК (ОБЛАСТЬ С ФОТОГРАФИЯМИ)
   ========================================================= */


.comand-media{
  position:relative;
  min-height:540px;
}


/* =========================================================
   4️⃣ ФОТОГРАФИИ КОМАНДЫ — ОБЩИЕ СТИЛИ
   ========================================================= */

.comand-photo{
  position:absolute;
  border-radius:20px;
  overflow:visible;
  background:#eee;

  box-shadow:
    0 12px 32px rgba(0,0,0,.15);
}

.comand-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:20px;
}


/* =========================================================
   5️⃣ ПОДПИСЬ К ФОТО (FIGCAPTION)
   ========================================================= */

.comand-photo figcaption{
  position:absolute;
  top:0;
  right:20px;

  transform:translateY(-40%);
  z-index:5;

  padding:6px 12px;
  font-size:14px;
  letter-spacing:0.02em;

  color:var(--color-text);
  background:color-mix(
    in srgb,
    var(--color-surface) 80%,
    transparent
  );

  border-radius:999px;
  white-space:nowrap;
  backdrop-filter:blur(6px);

  border:1px solid var(--color-border-soft);
  box-shadow:none;
}


/* =========================================================
   6️⃣ ПОЗИЦИОНИРОВАНИЕ ФОТО (3 ФОТО — КАНОН)
   ========================================================= */

.comand-photo--1{
  width:240px;
  height:320px;
  top:0;
  left:0;
  z-index:3;
}

.comand-photo--2{
  width:260px;
  height:340px;
  top:40px;
  right:-40px;
  z-index:1;
}

.comand-photo--3{
  width:260px;
  height:340px;
    bottom:0;       
  left:180px;
  z-index:2;
}


/* =========================================================
   7️⃣ ТЕКСТОВАЯ ЧАСТЬ БЛОКА
   ========================================================= */

.comand-content{
  max-width:520px;
}



.comand-narrative p{
  margin-bottom:var(--space-6);
}

.comand-narrative strong{
  font-weight:600;
}


/* =========================================================
   8️⃣ КНОПКА ДЕЙСТВИЯ
   ========================================================= */

.comand-button{
  display:inline-block;
  margin-top:var(--space-10);
  padding:14px 28px;

  border-radius:999px;
  border:2px solid var(--color-text);

  text-decoration:none;
  font-weight:500;
  transition:all .2s ease;
}

.comand-button:hover{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:#fff;
}


/* по умолчанию — десктоп *//* по умолчанию — скрыт */
.comand-mobile-gallery { display:none; }
.comand-mobile-text { display:none; }
.comand-mobile-title{ display:none;}

/* только мобильная версия */
@media (max-width:768px){
  .comand-mobile-title{
    display:block;

    padding:0 20px;
    margin-bottom:var(--space-6);

    font-size:1.6rem;
    font-weight:600;
  }
}




@media (max-width:768px){
  .comand-mobile-text{
    padding-left:20px;
    padding-right:20px;
    margin-top:var(--space-8);
    
      display:block;   /* 🔴 ВКЛЮЧАЕМ */
  }
}



/* =========================================================
   📱 MOBILE — COMAND GALLERY (CLEAN)
   ========================================================= */
@media (max-width:768px){

  /* скрываем десктоп */
  .comand-desktop{ display:none; }

  /* галерея */
  .comand-mobile-gallery{
    display:flex;
    gap:16px;

    overflow-x:auto;
    overflow-y:hidden;

    padding-left:20px;
    padding-right:20px;

    -webkit-overflow-scrolling:touch;
    
    justify-content:center; /* ← ВОТ ЭТО */
    
   
  }

  .comand-mobile-gallery__item{
    flex:0 0 85%;
    height:380px;

    position:relative;
    overflow:hidden;
    border-radius:18px;
  }

  .comand-mobile-gallery__item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .comand-mobile-gallery__item figcaption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:8px 12px;
    font-size:.9rem;
    text-align:center;
    color:#fff;

    background:linear-gradient(
      to top,
      rgba(0,0,0,.55),
      rgba(0,0,0,0)
    );
  }

  /* прячем скроллбар */
  .comand-mobile-gallery::-webkit-scrollbar{
    display:none;
  }
}



  /* стрелка  */
@media (max-width:768px){

  .comand-mobile-gallery__item{
    position:relative; /* якорь для плашки */
  }

  .comand-gallery-hint{
    position:absolute;
    top:12px;
    left:12px;
    z-index:10;

    /* 🟤 ТАБЛЕТКА */
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:32px;
    padding:0 12px;

    border-radius:999px;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px);

    /* ➝ */
    color:#fff;
    font-size:18px;
    font-weight:600;
    line-height:1;

    /* читаемость */
    box-shadow:0 2px 8px rgba(0,0,0,.35);

    pointer-events:none;
  }
}