/* =========================================================
   Каталог блоков: страницы категорий и хаб.
   Опирается на переменные и кнопки основного лендинга
   (f-container, f-button-salmon), добавляет только своё.
   ========================================================= */

.f-bc {
  --bc-ink: #1a2340;
  --bc-muted: #6b7896;
  --bc-border: #dde1ec;
  --bc-soft: #f6f7fa;
  --bc-salmon: #e88973;
  --bc-salmon-dark: #df593a;
  --bc-navy: #1a3d51;
}

/* ---------- шапка страницы категории ---------- */
.f-bc-hero {
  padding: 64px 0 48px;
  background: linear-gradient(180deg, #ffffff 0%, var(--bc-soft) 100%);
  border-bottom: 1px solid var(--bc-border);
}

.f-bc-crumbs {
  font-size: 13px;
  color: var(--bc-muted);
  margin-bottom: 18px;
}

.f-bc-crumbs a { color: var(--bc-muted); text-decoration: none; }
.f-bc-crumbs a:hover { color: var(--bc-salmon-dark); text-decoration: underline; }

.f-bc-hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--bc-ink);
  margin: 0 0 18px;
  max-width: 18ch;
}

.f-bc-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--bc-muted);
  max-width: 60ch;
  margin: 0 0 12px;
}

.f-bc-hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.f-bc-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  color: var(--bc-muted);
}
.f-bc-count strong { font-size: 20px; color: var(--bc-ink); }

/* ---------- секции ---------- */
.f-bc-section { padding: 56px 0; }
.f-bc-section--soft { background: var(--bc-soft); }

.f-bc-h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--bc-ink);
  margin: 0 0 10px;
}

.f-bc-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--bc-muted);
  max-width: 62ch;
  margin: 0 0 28px;
}

/* ---------- каталог блоков ---------- */
.f-bc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.f-bc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.f-bc-card:hover {
  transform: translateY(-2px);
  border-color: #eda291;
  box-shadow: 0 2px 4px rgba(26, 35, 64, .05), 0 14px 28px -12px rgba(26, 35, 64, .22);
}

.f-bc-card__shot {
  background: #f0f2f6;
  border-bottom: 1px solid var(--bc-border);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.f-bc-card__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.f-bc-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }

.f-bc-card__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bc-ink);
  margin: 0;
}

.f-bc-card__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--bc-muted);
  margin: 0;
}

.f-bc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.f-bc-tag {
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--bc-soft);
  color: var(--bc-muted);
  border: 1px solid var(--bc-border);
}

.f-bc-pro {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 214, 102, .96);
  color: #7a5200;
  margin-left: 6px;
  vertical-align: middle;
}

/* ---------- умеет / не умеет ---------- */
.f-bc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

.f-bc-panel {
  background: #fff;
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 24px 26px;
}

.f-bc-panel h3 { font-size: 17px; margin: 0 0 14px; color: var(--bc-ink); }
.f-bc-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.f-bc-panel li { font-size: 15px; line-height: 1.5; color: var(--bc-muted); padding-left: 26px; position: relative; }
.f-bc-panel li::before { position: absolute; left: 0; top: 0; font-size: 15px; }
.f-bc-panel--can li::before { content: '✓'; color: #2ab479; font-weight: 700; }
.f-bc-panel--cant li::before { content: '—'; color: #c2c8d6; font-weight: 700; }

/* ---------- FAQ ---------- */
.f-bc-faq { display: grid; gap: 14px; max-width: 78ch; }

.f-bc-faq details {
  background: #fff;
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 16px 20px;
}

.f-bc-faq summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--bc-ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.f-bc-faq summary::-webkit-details-marker { display: none; }
.f-bc-faq summary::after { content: '+'; color: var(--bc-salmon-dark); font-size: 22px; line-height: 1; }
.f-bc-faq details[open] summary::after { content: '–'; }
.f-bc-faq p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--bc-muted); }

/* ---------- соседние категории ---------- */
.f-bc-related { display: flex; flex-wrap: wrap; gap: 10px; }

.f-bc-related a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--bc-border);
  background: #fff;
  color: var(--bc-ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}

.f-bc-related a:hover { border-color: var(--bc-salmon); color: var(--bc-salmon-dark); }
.f-bc-related span { color: var(--bc-muted); font-size: 12px; }

/* ---------- финальный призыв ---------- */
.f-bc-cta {
  background: linear-gradient(160deg, var(--bc-navy) 0%, #132c3b 100%);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}

.f-bc-cta h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 12px; color: #fff; }
.f-bc-cta p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 56ch; margin: 0 auto 26px; }

/* ---------- хаб категорий ---------- */
.f-bc-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.f-bc-hub-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.f-bc-hub-card:hover {
  transform: translateY(-3px);
  border-color: #eda291;
  box-shadow: 0 2px 4px rgba(26, 35, 64, .05), 0 16px 32px -14px rgba(26, 35, 64, .26);
}

.f-bc-hub-card__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bc-border); }
.f-bc-hub-card__shots img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: top center; background: #f0f2f6; }
.f-bc-hub-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.f-bc-hub-card__title { font-size: 17px; font-weight: 600; color: var(--bc-ink); margin: 0; }
.f-bc-hub-card__count { font-size: 13px; color: var(--bc-muted); margin: 0; }
.f-bc-hub-card__text { font-size: 13.5px; line-height: 1.5; color: var(--bc-muted); margin: 4px 0 0; }

@media (max-width: 640px) {
  .f-bc-hero { padding: 40px 0 32px; }
  .f-bc-section { padding: 40px 0; }
  .f-bc-panel { padding: 20px; }
}