@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');


:root{
  --bg:            #F6F1E4;
  --bg-soft:       #EFE7D3;
  --card:          #FBF8F0;
  --ink:           #26301C;
  --forest:        #33482E;
  --forest-dark:   #223020;
  --sage:          #8DA277;
  --clay:          #B0602F;
  --clay-dark:     #8E4A24;
  --sand:          #DCC89D;
  --line:          rgba(38,48,28,0.14);

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;

  --radius-organic: 63% 37% 54% 46% / 55% 45% 55% 45%;
}


*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


img{
  max-width:100%;
  height:auto;
  display:block;
}


body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.02rem;
  line-height:1.65;
}


h1,
h2,
h3,
h4,
.display-serif{
  font-family:var(--font-display);
  color:var(--forest-dark);
  letter-spacing:-0.01em;
}


h1{
  font-weight:600;
}


h2{
  font-weight:600;
}


h3{
  font-weight:500;
}


a{
  color:var(--clay-dark);
  text-decoration:none;
}


a:hover{
  color:var(--forest-dark);
}


/* ---------- единая сетка страницы ----------
   Боковой отступ контейнера (--page-pad) всегда >= половины
   горизонтального gutter у .row, поэтому строки не вылезают
   за край экрана, а слева и справа всегда одинаковый отступ. */

:root{
  --page-pad:1rem;
}

@media (min-width:576px){
  :root{ --page-pad:1.5rem; }
}

.container{
  padding-left:var(--page-pad);
  padding-right:var(--page-pad);
}

/* Ниже 992px контейнер тянется на всю ширину (без ступенек 540/720px
   у Bootstrap), чтобы контент везде выравнивался по одной линии */
@media (max-width:991.98px){
  .container{ max-width:none; }
}

/* Узкая колонка (FAQ): ограничиваем ширину текста, но сохраняем
   тот же боковой отступ, что и у обычного контейнера */
.container.container-narrow{
  max-width:calc(760px + 2 * var(--page-pad));
}

/* g-5 = gutter 3rem (по 1.5rem в каждую сторону). На телефоне
   отступ контейнера только 1rem, поэтому уменьшаем gutter,
   иначе строка вылезает на 0.5rem и появляется горизонтальный скролл */
@media (max-width:575.98px){
  .row.g-5,
  .row.gx-5{
    --bs-gutter-x:2rem;
  }
}

/* страховка от горизонтальной прокрутки */
html,
body{
  overflow-x:clip;
}


/* ---------- focus & motion ---------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible{
  outline:3px solid var(--clay);
  outline-offset:3px;
}


@media (prefers-reduced-motion: reduce){

  *{
    animation-duration:0.001ms !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }

}


/* ---------- top announcement / utility ---------- */

.topbar{
  background:var(--forest-dark);
  color:#E9E2CC;
  font-size:0.86rem;
  padding:0.4rem 0;
  text-align:center;
}


.topbar a{
  color:#E9E2CC;
  text-decoration:underline;
  text-underline-offset:3px;
}


/* ---------- navbar ---------- */

.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:0.9rem 0;
}


.brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  color:var(--forest-dark);
}


.brand svg{
  width:34px;
  height:34px;
  flex-shrink:0;
}


.navbar-nav .nav-link{
  font-weight:600;
  color:var(--ink);
  padding:0.5rem 1rem !important;
  border-radius:999px;
  transition:background 0.15s ease, color 0.15s ease;
}


.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover{
  background:var(--bg-soft);
  color:var(--forest-dark);
}


.navbar-toggler{
  border:1px solid var(--line);
}


/* ---------- мобильное меню ----------
   Раньше выпадающий список жил внутри <nav>, который стоит в одной
   строке с логотипом, и поэтому сжимался и «уезжал» вбок.
   Теперь на экранах < 992px nav «растворяется» (display:contents),
   логотип и кнопка остаются в первой строке, а меню переносится
   на вторую строку и занимает всю ширину под шапкой. */

@media (max-width:991.98px){

  .site-header .container{
    flex-wrap:wrap;
  }

  .site-header .navbar{
    display:contents;
  }

  .site-header .navbar-collapse{
    flex-basis:100%;
    order:3;
  }

  .site-header .navbar-nav{
    margin-top:.9rem;
    padding:.75rem 0 .25rem;
    border-top:1px solid var(--line);
    gap:.2rem;
  }

  .site-header .navbar-nav .nav-link{
    padding:.75rem 1rem !important;
    border-radius:.8rem;
    font-size:1.05rem;
  }

}


/* ---------- buttons ---------- */

.btn{
  border-radius:999px;
  font-weight:700;
  padding:0.65rem 1.5rem;
  font-family:var(--font-body);
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color .15s ease;
}


.btn:active{
  transform:translateY(1px);
}


.btn-forest{
  background:var(--forest);
  border:1px solid var(--forest);
  color:#F7F3E7;
}


.btn-forest:hover{
  background:var(--forest-dark);
  border-color:var(--forest-dark);
  color:#fff;
}


.btn-outline-clay{
  background:transparent;
  border:1.5px solid var(--clay);
  color:var(--clay-dark);
}


.btn-outline-clay:hover{
  background:var(--clay);
  border-color:var(--clay);
  color:#fff;
}


.btn-sm-pill{
  padding:0.4rem 1.1rem;
  font-size:0.9rem;
}


/* ---------- hero ---------- */

.hero{
  padding:4.5rem 0 5rem;
  overflow:hidden;
}


.hero h1{
  font-size:clamp(2.4rem, 4vw, 3.4rem);
  line-height:1.12;
  margin-bottom:1.2rem;
}


.hero .lead{
  font-size:1.15rem;
  color:#465039;
  max-width:34rem;
}


.hero-figure{
  position:relative;
}


.blob-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius-organic);
  border:2px solid var(--bg);
  box-shadow:0.75rem 1rem 0 0 var(--sand);
}


.hero-tag{
  position:absolute;
  bottom:-1.1rem;
  left:-1.1rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:1.1rem;
  padding:0.9rem 1.2rem;
  max-width:12.5rem;
  font-size:0.88rem;
  box-shadow:0 8px 24px rgba(38,48,28,0.12);
}


.hero-tag strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--clay-dark);
}


/* ---------- hero: цифры ---------- */

.stat-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin-top:2.2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}

.stat{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:0 1rem;
  border-left:1px solid var(--line);
  min-width:0;
}

.stat:first-child{
  padding-left:0;
  border-left:0;
}

.stat:last-child{
  padding-right:0;
}

.stat b{
  font-family:var(--font-display);
  font-size:clamp(1.55rem, 1.1rem + 1.6vw, 2.2rem);
  font-weight:600;
  line-height:1;
  color:var(--clay-dark);
  white-space:nowrap;
}

.stat span{
  font-size:.86rem;
  line-height:1.35;
  color:#5B6350;
  overflow-wrap:break-word;
  hyphens:auto;
}

@media (max-width:399.98px){

  .stat{
    padding:0 .6rem;
  }

  .stat span{
    font-size:.78rem;
  }

}


/* ---------- section rhythm ---------- */

.section{
  padding:4.2rem 0;
}


.section-soft{
  background:var(--bg-soft);
}


.section-forest{
  background:var(--forest-dark);
  color:#EAE6D6;
}


.section-forest h2,
.section-forest h3{
  color:#F4EFDE;
}


.section-forest .muted{
  color:#C4C9AE;
}


.section-head{
  max-width:38rem;
  margin-bottom:2.6rem;
}


.muted{
  color:#5B6350;
}


/* ---------- leaf bullet list ---------- */

.leaf-list{
  list-style:none;
  padding-left:0;
  margin:0;
}


.leaf-list li{
  position:relative;
  padding-left:2.1rem;
  margin-bottom:1rem;
}


.leaf-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.18em;
  width:1.3rem;
  height:1.3rem;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%238DA277' d='M28 4C14 4 4 14 4 28c14 0 24-10 24-24z'/><path fill='none' stroke='%233A4C31' stroke-width='1.4' d='M6 26C14 20 20 14 26 6'/></svg>");
}


/* ---------- feature / value cards ---------- */

.feature-card{
  background:var(--card);
  border:1px solid var(--line);
  border-left:4px solid var(--sage);
  border-radius:0.6rem;
  padding:1.8rem 1.6rem;
  height:100%;
}


.feature-card .icon-wrap{
  width:2.6rem;
  height:2.6rem;
  margin-bottom:1rem;
}


.feature-card h3{
  font-size:1.15rem;
  margin-bottom:0.5rem;
}


.feature-card p{
  margin:0;
  color:#4B5340;
  font-size:0.96rem;
}


/* ---------- article / care cards ---------- */

.article-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:0.7rem;
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.article-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(38,48,28,0.14);
}


.article-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}


.article-card .body{
  padding:1.3rem 1.3rem 1.5rem;
  display:flex;
  flex-direction:column;
  flex:1;
}


.article-card .tag{
  font-size:0.78rem;
  font-weight:700;
  color:var(--clay-dark);
  margin-bottom:0.5rem;
}


.article-card h3{
  font-size:1.15rem;
  margin-bottom:0.6rem;
  line-height:1.32;
}


.article-card p{
  color:#4B5340;
  font-size:0.93rem;
  flex:1;
}


.article-card .btn{
  align-self:flex-start;
  margin-top:0.8rem;
}


/* ---------- care guide sections ---------- */

.care-block{
  border-top:1px solid var(--line);
  padding:5rem 0;
}

.care-block:first-of-type{
  border-top:none;
}

.care-number{
  font-family:var(--font-display);
  font-size:1rem;
  color:var(--clay-dark);
  font-weight:600;
  margin-bottom:.4rem;
}

/*
  КАРТИНКА В БЛОКАХ УХОДА

  Картинка НЕ растягивается под высоту текста: у неё своя
  спокойная пропорция 4:5. На десктопе она «прилипает» (sticky)
  и едет рядом с длинным текстом/таблицей, пока тот не закончится.
  На планшете и телефоне картинка идёт над текстом с альбомной
  пропорцией, без огромных вертикальных полотен.
*/
.care-block .row{
  align-items:stretch !important;
}

.care-figure{
  position:relative;
  width:100%;
  margin:0 0 .5rem;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-radius:1.2rem;
  border:1px solid var(--line);
  background:var(--bg-soft);
}

.care-figure img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease;
}

.care-figure:hover img{
  transform:scale(1.025);
}

.care-block .table-scroll{
  width:100%;
}

@media (min-width:576px) and (max-width:991.98px){

  .care-figure{
    aspect-ratio:16 / 9;
    max-height:420px;
  }

}

@media (min-width:992px){

  .care-figure{
    aspect-ratio:4 / 5;
    margin:0;
    border-radius:1.5rem;
    position:sticky;
    top:1.5rem;
  }

}

@media (max-width:575.98px){

  .care-figure{
    aspect-ratio:4 / 3;
    border-radius:1rem;
  }

}

@media (max-width:991.98px){

  .care-block{
    padding:3.4rem 0;
  }

}

@media (max-width:575.98px){

  .care-block{
    padding:2.6rem 0;
  }

}

/* ---------- accordion ---------- */

.accordion-item{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  border-radius:0 !important;
}


.accordion-button{
  background:transparent;
  font-family:var(--font-display);
  font-size:1.08rem;
  color:var(--forest-dark);
  font-weight:500;
  padding:1.25rem 0.2rem;
  box-shadow:none !important;
}


.accordion-button:not(.collapsed){
  color:var(--clay-dark);
  background:transparent;
}


.accordion-button::after{
  flex-shrink:0;
}


.accordion-body{
  padding:0 0.2rem 1.4rem;
  color:#4B5340;
}


/* ---------- quote / callout ---------- */

.callout{
  background:var(--sand);
  border-radius:1rem;
  padding:2rem 2.2rem;
  position:relative;
}


.callout p{
  margin:0;
  font-family:var(--font-display);
  font-size:1.25rem;
  color:var(--forest-dark);
  line-height:1.4;
}


/* ---------- article detail ---------- */

.article-hero-img{
  width:100%;
  aspect-ratio:21/9;
  object-fit:cover;
  border-radius:1rem;
}


.article-body h2{
  font-size:1.5rem;
  margin-top:2.2rem;
}


.article-body p{
  margin-bottom:1.2rem;
}


.article-meta{
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
  font-size:0.9rem;
  color:#5B6350;
  margin:1rem 0 2rem;
}


.share-row a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.4rem;
  height:2.4rem;
  border:1px solid var(--line);
  border-radius:50%;
  margin-right:0.5rem;
  color:var(--forest-dark);
}


.share-row a:hover{
  background:var(--forest);
  color:#fff;
  border-color:var(--forest);
}


.related-nav{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.4rem 0;
  margin:2.5rem 0;
  flex-wrap:wrap;
}


.related-nav a{
  font-weight:700;
  color:var(--forest-dark);
}


.related-nav small{
  display:block;
  font-weight:400;
  color:#5B6350;
}


/* ---------- CTA ---------- */

.cta-band{
  background:var(--forest);
  border-radius:1.3rem;
  padding:3rem 2.5rem;
  color:#F7F3E7;
}


.cta-band h2{
  color:#F7F3E7;
}


/* ---------- footer ---------- */

.site-footer{
  background:var(--forest-dark);
  color:#CBD1BB;
  padding:3.5rem 0 1.6rem;
  margin-top:3rem;
}


.site-footer h5{
  color:#F4EFDE;
  font-family:var(--font-display);
  font-weight:500;
  margin-bottom:1rem;
}


.site-footer a{
  color:#CBD1BB;
}


.site-footer a:hover{
  color:#fff;
}


.footer-brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--font-display);
  font-size:1.4rem;
  color:#F4EFDE;
  margin-bottom:1rem;
}


.footer-brand svg{
  width:30px;
  height:30px;
}


.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);
  margin-top:2.4rem;
  padding-top:1.4rem;
  font-size:0.85rem;
  color:#9AA285;
}


.breadcrumb-row{
  font-size:0.88rem;
  color:#5B6350;
  margin-bottom:1.6rem;
}


.breadcrumb-row a{
  color:#5B6350;
}


.breadcrumb-row a:hover{
  color:var(--forest-dark);
}


/* ---------- general responsive ---------- */

@media (max-width:992px){

  .hero{
    padding:3rem 0 3.5rem;
    text-align:left;
  }

  .hero-figure{
    margin-top:2.5rem;
    max-width:20rem;
  }

  .hero-tag{
    left:0;
  }

  .section{
    padding:3rem 0;
  }

}


@media (max-width:576px){

  .cta-band{
    padding:2rem 1.4rem;
  }

  .callout{
    padding:1.5rem;
  }

  .callout p{
    font-size:1.08rem;
  }

}


/* ---------- image wrapper ---------- */

.img-wrap{
  position:relative;
  display:block;
  margin:0;
}


.img-wrap > img{
  display:block;
}


/* ---------- source badge ---------- */

.src-badge{
  position:absolute;
  right:.5rem;
  bottom:.5rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.28rem;
  padding:.22rem .6rem;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.01em;
  white-space:nowrap;
  color:var(--forest-dark);
  background:rgba(251,248,240,.86);
  border:1px solid rgba(38,48,28,.14);
  border-radius:999px;
  box-shadow:0 2px 8px rgba(38,48,28,.10);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:.9;
  transition:
    opacity .15s ease,
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}


.src-badge svg{
  width:.72rem;
  height:.72rem;
  flex:none;
}


.src-badge:hover,
.src-badge:focus-visible{
  opacity:1;
  background:var(--forest);
  border-color:var(--forest);
  color:#F7F3E7;
}


.img-wrap--below{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}


.img-wrap--below .src-badge{
  position:static;
  margin-top:1.4rem;
  opacity:.75;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}


.img-wrap--below .src-badge:hover,
.img-wrap--below .src-badge:focus-visible{
  opacity:1;
  background:var(--forest);
}


@media (max-width:576px){

  .src-badge{
    font-size:.68rem;
    padding:.18rem .5rem;
    right:.4rem;
    bottom:.4rem;
  }

  .img-wrap--below .src-badge{
    margin-top:1.1rem;
  }

}


/* ---------- table ---------- */

.table-care{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:.7rem;
  overflow:hidden;
  font-size:.95rem;
}


.table-care th,
.table-care td{
  padding:.85rem 1rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  text-align:left;
  overflow-wrap:break-word;
}


.table-care thead th{
  background:var(--bg-soft);
  font-family:var(--font-display);
  font-weight:600;
  color:var(--forest-dark);
}


.table-care tbody tr:last-child td{
  border-bottom:none;
}


.table-care td:first-child{
  font-weight:700;
  color:var(--forest-dark);
}


.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}


/* ---------- mobile table ---------- */

@media (max-width:768px){

  .table-scroll{
    overflow-x:visible;
  }

  .table-care{
    border-radius:.9rem;
  }

  .table-care thead{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .table-care,
  .table-care tbody,
  .table-care tr,
  .table-care td{
    display:block;
    width:100%;
  }

  .table-care tr{
    padding:1rem 1.1rem;
    border-bottom:1px solid var(--line);
  }

  .table-care tr:last-child{
    border-bottom:none;
  }

  .table-care td{
    padding:.3rem 0;
    border-bottom:none;
  }

  .table-care td::before{
    content:attr(data-label);
    display:block;
    font-family:var(--font-body);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--clay-dark);
    margin-bottom:.15rem;
  }

  .table-care td:first-child{
    font-size:1.02rem;
    margin-bottom:.1rem;
  }

  .table-care td:first-child::before{
    display:none;
  }

}


/* ---------- check cards ---------- */

.check-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:.7rem;
  padding:1.5rem 1.4rem;
  height:100%;
}


.check-card .step-label{
  display:inline-block;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--clay-dark);
  margin-bottom:.5rem;
}


.check-card h3{
  font-size:1.1rem;
  margin-bottom:.6rem;
}


.check-card p{
  margin:0;
  color:#4B5340;
  font-size:.94rem;
}


.check-card ul{
  margin:.6rem 0 0;
  padding-left:1.1rem;
  color:#4B5340;
  font-size:.94rem;
}


.check-card ul li{
  margin-bottom:.35rem;
}


.mini-note{
  border-left:4px solid var(--sage);
  background:var(--card);
  border-radius:.5rem;
  padding:1rem 1.2rem;
  font-size:.95rem;
  color:#4B5340;
}


.mini-note strong{
  color:var(--forest-dark);
}


.next-links{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}


/* =========================================================
   КАТАЛОГ СУККУЛЕНТОВ
   ========================================================= */

.succ-figure{
  overflow:hidden;
  cursor:pointer;
  outline:none;
}


.succ-figure > img{
  transition:transform .35s ease;
}


/* Само всплывающее описание */

.succ-hover{
  position:absolute;
  inset:0;
  z-index:1;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:1rem 1rem 2.6rem;

  color:#F7F3E7;

  background:
    linear-gradient(
      to top,
      rgba(34,48,32,.94) 0%,
      rgba(34,48,32,.82) 60%,
      rgba(34,48,32,.35) 100%
    );

  opacity:0;

  transform:translateY(8px);

  transition:
    opacity .25s ease,
    transform .25s ease;

  pointer-events:none;

  /* Главное исправление:
     длинный текст теперь не может вылезти за пределы блока. */
  overflow-y:auto;
  overflow-x:hidden;

  -webkit-overflow-scrolling:touch;
}


.succ-hover strong{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:500;
  margin-bottom:.3rem;
  flex:0 0 auto;
}


.succ-hover p{
  margin:0;
  /* font-size:.85rem; */
  font-size: .95rem;
  line-height: 1.35;
  line-height:1.45;
  color:#E9E2CC;
  flex:0 0 auto;
}


/* Открытие карточки */

.succ-figure:hover .succ-hover,
.succ-figure:focus .succ-hover,
.succ-figure:focus-within .succ-hover,
.succ-figure.is-open .succ-hover{
  opacity:1;
  transform:none;
}


/* Увеличение картинки */

.succ-figure:hover > img,
.succ-figure.is-open > img{
  transform:scale(1.04);
}


.succ-figure:focus-visible{
  outline:3px solid var(--clay);
  outline-offset:-3px;
}


/* У карточек каталога не поднимаем всю карточку при наведении */

.succ-card:hover{
  transform:none;
}


.succ-card .body{
  padding:1rem 1.2rem 1.2rem;
}


.succ-card h3{
  margin-bottom:.25rem;
}


.succ-card .tag{
  margin-bottom:0;
  font-weight:600;
}


/* =========================================================
   АДАПТАЦИЯ КАТАЛОГА
   ========================================================= */


/*
  ЭКРАНЫ МЕНЬШЕ 1200 PX

  На широком экране карточки имеют достаточно места.
  Ниже 1200 px описание становится прокручиваемым,
  поэтому весь текст можно прочитать даже в узкой карточке.
*/

@media (max-width:1120px){

  .succ-hover{

    justify-content:flex-start;

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

    padding:1rem 1rem 1.2rem;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;
  }


  .succ-hover strong{
    flex:0 0 auto;
    font-size:1rem;
  }


  .succ-hover p{
    flex:0 0 auto;
    font-size: .95rem;
    line-height: 1.35;
    line-height:1.45;
  }


  /*
    Важный момент для телефона:
    когда JS добавляет классу карточки .is-open,
    описание становится доступным для взаимодействия.
    Благодаря этому его можно прокручивать пальцем.
  */

  .succ-figure.is-open .succ-hover{
    pointer-events:auto;
  }

}


/*
  ПЛАНШЕТЫ

  Bootstrap:
  992–1199 px = 3 карточки
  768–991 px = 2 карточки
*/

@media (max-width:992px){

  .succ-card .body{
    padding:1rem 1.1rem 1.2rem;
  }

}


/*
  ТЕЛЕФОНЫ

  До 768 px каждая карточка занимает всю ширину.
  Поэтому получается:

  [ карточка 1 ]

  [ карточка 2 ]

  [ карточка 3 ]

  [ карточка 4 ]

  и т.д.
*/

@media (max-width:768px){

  .succ-hover{
    padding:.9rem .9rem 1rem;
  }


  .succ-hover strong{
    font-size:.98rem;
  }


  .succ-hover p{
    font-size: .95rem;
    line-height: 1.35;
    line-height:1.4;
  }

  .succ-card h3{
    font-size:1rem;
  }

}


@media (max-width:577px){

  .succ-hover{
    padding:.75rem .75rem .9rem;
  }


  .succ-hover strong{
    font-size:.92rem;
  }


  .succ-hover p{
    font-size: .95rem;
    line-height:1.35;
  }

}

/* =========================================================
   ФИЛЬТР СТАТЕЙ
   ========================================================= */

.filter-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 20px;

  padding:.55rem 1rem;

  background:var(--card);
  color:var(--forest-dark);

  border:1px solid var(--line) !important;
  border-radius:999px;

  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:600;
  line-height:1.2;

  cursor:pointer;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease;
}
[role="group"][aria-label="Фильтр статей по теме"]{
  gap:10px;
}
.filter-pill:hover{
  background:var(--bg-soft);
  color:var(--forest-dark);
  border-color:var(--sage) !important;
  transform:translateY(-1px);
}

.filter-pill.active{
  background:var(--forest);
  color:#F7F3E7;
  border-color:var(--forest) !important;
}

.filter-pill.active:hover{
  background:var(--forest-dark);
  color:#F7F3E7;
  border-color:var(--forest-dark) !important;
}


/* ---------- телефон ---------- */

@media (max-width:576px){

  .filter-pill{
    padding:.5rem .85rem;
    font-size:.84rem;
  }

}