/* ============================================================
   breadcrumbs.css
   Desktop 1440px: horizontal breadcrumb trail
   Mobile  370px:  same, smaller font

   Yoast SEO outputs:
   <nav class="breadcrumbs">
     <span>
       <span><a href="/">Главная</a></span> /
       <span class="breadcrumb_last" aria-current="page">Текущая</span>
     </span>
   </nav>
   ============================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */
.breadcrumbs-section {
  padding-top:    calc(20 / var(--vw-base) * 100vw);
  padding-bottom: calc(20 / var(--vw-base) * 100vw);
  background-color: var(--color-bg);
}

/* ── Breadcrumbs nav ─────────────────────────────────────────── */
.breadcrumbs {
  display: flex;
  align-items: center;
}

.breadcrumbs > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(8 / var(--vw-base) * 100vw);
}

/* Each item wrapper */
.breadcrumbs > span > span {
  display: flex;
  align-items: center;
  gap: calc(8 / var(--vw-base) * 100vw);
  font-size:   calc(14 / var(--vw-base) * 100vw);
  font-weight: 400;
  line-height: 1.43;
  color: var(--color-text);
}

/* ── Link ────────────────────────────────────────────────────── */
.breadcrumbs a {
  font-size:   calc(14 / var(--vw-base) * 100vw);
  font-weight: 400;
  line-height: 1.43;
  color: var(--color-text);
  opacity: 0.6;
  transition: opacity 0.2s;
}
.breadcrumbs a:hover {
  opacity: 1;
}

/* ── Current page ────────────────────────────────────────────── */
.breadcrumbs .breadcrumb_last {
  font-size:   calc(14 / var(--vw-base) * 100vw);
  font-weight: 500;
  line-height: 1.43;
  color: var(--color-text);
}

/* ============================================================
   MOBILE  (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
  .breadcrumbs-section {
    padding-top:    calc(10 / var(--vw-base) * 100vw);
    padding-bottom: calc(10 / var(--vw-base) * 100vw);
  }

  .breadcrumbs a,
  .breadcrumbs > span > span,
  .breadcrumbs .breadcrumb_last {
    font-size: calc(12 / var(--vw-base) * 100vw);
  }
}