/* =========================
   BIO CARD (fixed + mobile)
   ========================= */

.bio-card{ margin:22px 0; }

.bio-card__inner{
  display:flex;
  gap:26px;
  /*align-items:center;*/
  background:#f3f4f6;
  border-radius:16px;
  padding:22px;
}

.bio-card__inner h3 {
    font-size: 24px;
    /*margin-top: 20px;*/
}

.bio-card__inner .bio-card__text {
    margin-top: 40px;
    font-size: 18px;
}

/* left/right on desktop */
.bio-card--left  .bio-card__inner{ flex-direction:row; }
.bio-card--right .bio-card__inner{ flex-direction:row-reverse; }

/* CONTENT */
.bio-card__content{
  flex:1 1 auto;
  min-width:0;            /* КРИТИЧЕСКИ: не ломаем мобилку */
  max-width:100%;
}

.bio-card__title{
  margin:0 0 10px;
  font-weight:700;
  font-size:18px;
  line-height:1.2;
}

.bio-card__text{
  font-size:14px;
  line-height:1.55;
  color:#111827;
}

/* MEDIA (square, stable, no jump) */
.bio-card__media{
  flex:0 0 auto;

  /* размер квадрата на десктопе — не огромный */
  width: 320px;
  height: 320px;

  max-width: 420px;
}

/* контейнер под картинку/слайдер */
.bio-card__image,
.bio-card__swiper{
  width:100%;
  height:100%;
  border-radius:12px;
  overflow:hidden;
  background:#e5e7eb; /* заглушка до загрузки */
}

/* если .bio-card__swiper = корневой .swiper */
.bio-card__swiper{
  position:relative;
}

.bio-card__swiper,
.bio-card__swiper .swiper-wrapper,
.bio-card__swiper .swiper-slide{
  height:100%;
}

/* images fill the square */
.bio-card__image img,
.bio-card__swiper img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Swiper cosmetics */
.bio-card__swiper .swiper-button-prev,
.bio-card__swiper .swiper-button-next{
  display: none!important;
  color:#111827;
}

.bio-card__swiper .swiper-pagination{
  bottom: 10px;
}

.bio-card__swiper .swiper-pagination-bullet{ opacity:.5; }
.bio-card__swiper .swiper-pagination-bullet-active{ opacity:1; }


/* ===== MOBILE ===== */
@media (max-width: 860px){
  .bio-card__inner{
    flex-direction:column !important;
    align-items:stretch;
    gap:16px;
    padding:16px;
  }

  /* медиа сверху, контент снизу (всегда удобно) */
  .bio-card__media{
    width:100%;
    max-width:100%;

    /* квадрат, но не на пол-экрана */
    height: clamp(220px, 70vw, 340px);
  }

  .bio-card__content{
    width:100%;
  }
}

/* супер маленькие экраны */
@media (max-width: 420px){
  .bio-card__media{
    height: clamp(200px, 78vw, 320px);
  }
}

@media (max-width: 860px){

  /* делаем заголовок/текст "соседями" картинки внутри flex-контейнера */
  .bio-card__content{
    display: contents;
  }

  /* порядок: заголовок -> картинка -> текст */
  .bio-card__title{ order: 1; }
  .bio-card__media{ 
      order: 2;
      margin-top: 10px;
        margin-bottom: 10px
  }
  .bio-card__text{  order: 3; }

  /* убираем десктопный отступ, иначе на мобилке будет слишком жирно */
  .bio-card__inner .bio-card__text{
    margin-top: 0;
  }
}

.bio-card__text p { 
  margin: 0 0 1em; 
}
.bio-card__text p:last-child { 
  margin-bottom: 0; 
}

.bio-card__text ul,
.bio-card__text ol {
  margin: 0 0 1em 1.25em;
  padding: 0;
}

.bio-card__text ul { list-style: disc; }
.bio-card__text ol { list-style: decimal; }

.bio-card__text li {
  margin: .25em 0;
}

/* =========================================================
   DESKTOP FIX (CSS ONLY)
   Картинка начинается на уровне текста (после заголовка)
   Работает с текущим HTML: h3 внутри .bio-card__content
   ========================================================= */

@media (min-width: 861px){


  .bio-card__inner{
    display: grid !important;
    grid-template-rows: auto 1fr !important; 
    column-gap: 26px !important;
    align-items: start !important;
  }

  .bio-card__content{
    display: contents !important;
  }
  
  .bio-card__text{
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}


.bio-card__text blockquote{
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}


 .bio-card--left  .bio-card__inner{ grid-template-columns: minmax(0,1fr) 320px !important; }
.bio-card--right .bio-card__inner{ grid-template-columns: 320px minmax(0,1fr) !important; }


  .bio-card__title{
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    margin: 0 0!important; 
  }


  .bio-card__text{
    grid-row: 2 !important;
  }

  .bio-card__media{
    grid-row: 2 !important;
    align-self: start !important;
  }

  /* 7) Колонки для текста/картинки в зависимости от стороны */
  .bio-card--left  .bio-card__text{  grid-column: 1 !important; }
  .bio-card--left  .bio-card__media{ grid-column: 2 !important; }

  .bio-card--right .bio-card__media{ grid-column: 1 !important; }
  .bio-card--right .bio-card__text{  grid-column: 2 !important; }

  /* 8) ВАЖНО: убираем margin-top у текста, иначе он уйдёт вниз внутри строки и опять не совпадёт с картинкой */
  .bio-card__inner .bio-card__text{
    margin-top: 0 !important;
  }
}