/* Справочник имён: name.php (хаб + страница имени) */

body.name-meaning-page,
body.name-hub-page {
  background: #f4f2f8;
}

.name-page-main {
  width: min(720px, calc(100% - 32px));
  max-width: 720px;
  margin: 24px auto 0;
  padding: 0 0 72px;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  .name-page-main {
    width: min(100% - 24px, 720px);
    margin-top: 16px;
  }
}

/* ── Поиск ── */
.name-search {
  position: sticky;
  top: 12px;
  z-index: 20;
  margin: 0 0 18px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(71, 53, 199, .12);
  box-shadow: 0 10px 28px rgba(40, 20, 100, .08);
  backdrop-filter: blur(10px);
}

.name-search__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.name-search__input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(71, 53, 199, .18);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: #1a1340;
  outline: none;
}

.name-search__input:focus {
  border-color: #6847f5;
  box-shadow: 0 0 0 3px rgba(104, 71, 245, .14);
}

.name-search__btn {
  flex-shrink: 0;
  padding: 0 18px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #4735c7, #6847f5);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.name-search__btn:hover { filter: brightness(1.05); }

.name-search__meta {
  margin: 8px 2px 0;
  font-size: .84rem;
  color: #6b657a;
}

.name-search__letters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.name-search__letters button {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid rgba(71, 53, 199, .12);
  background: #f7f5ff;
  color: #4735c7;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.name-search__letters button:hover,
.name-search__letters button.is-active {
  background: #4735c7;
  color: #fff;
  border-color: #4735c7;
}

.name-search__suggest {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 240px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(71, 53, 199, .1);
  background: #fff;
  display: none;
}

.name-search__suggest.is-open { display: block; }

.name-search__suggest a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: #2a2438;
  font-weight: 600;
  border-bottom: 1px solid #f0ecfa;
}

.name-search__suggest a:last-child { border-bottom: 0; }
.name-search__suggest a:hover,
.name-search__suggest a.is-active { background: #f5f2ff; color: #4735c7; }

/* ── Хаб ── */
.name-hub-lead {
  margin: 0 0 8px;
  max-width: 40rem;
  line-height: 1.6;
  color: #5a5470;
}

.name-hub-section-title {
  margin: 1.5rem 0 .75rem;
  font-size: 1.15rem;
  color: #1a1340;
}

.name-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.name-hub-grid a {
  display: block;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid #e4dbf7;
  background: #fff;
  text-decoration: none;
  color: #2a2540;
  font-weight: 600;
  text-align: center;
  font-size: .92rem;
  transition: border-color .15s, background .15s;
}

.name-hub-grid a:hover {
  border-color: #c8b8ff;
  background: #f5f2ff;
}

.name-hub-grid a.is-hidden { display: none; }

.name-hub-empty {
  display: none;
  margin: 12px 0;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px dashed rgba(71, 53, 199, .25);
  color: #5a5470;
  text-align: center;
}

.name-hub-empty.is-visible { display: block; }

/* ── Страница имени ── */
.name-hero {
  padding: 20px 0 18px;
  text-align: center;
}

.name-hero .eyebrow {
  margin-bottom: 4px;
}

.name-hero h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 900;
  color: #1a1340;
  margin: 4px 0 12px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.name-origin-line {
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 36rem;
  margin: 0 auto 14px;
}

.name-luck-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.name-luck-chips span {
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4735c7, #7b5af0);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}

.name-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: .9rem;
  font-weight: 700;
  color: #4735c7;
  text-decoration: none;
}

.name-nav-back:hover { text-decoration: underline; }

.name-section {
  background: #fff;
  border: 1px solid rgba(71, 53, 199, .1);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.name-section h2 {
  font-size: 1.08rem;
  font-weight: 800;
  color: #1a1340;
  margin: 0 0 10px;
  line-height: 1.35;
}

.name-section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1340;
  margin: 0 0 8px;
}

.name-section p {
  color: #333;
  line-height: 1.7;
  margin: 0;
  font-size: .97rem;
}

.name-section ul {
  margin: 0;
  padding: 0 0 0 1.15em;
  color: #333;
  line-height: 1.75;
}

/* seo lead / summary - всегда карточка с padding */
.name-summary,
p.name-summary,
section.name-summary {
  background: linear-gradient(135deg, #1a1340, #3b2589);
  border: none;
  color: #fff;
  padding: 16px 18px;
  border-radius: 16px;
  margin: 0 0 14px;
  line-height: 1.65;
  font-size: .98rem;
}

.name-summary p,
section.name-summary p {
  color: rgba(255, 255, 255, .92);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.name-traits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .name-traits { grid-template-columns: 1fr; }
}

.name-traits-col {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(71, 53, 199, .1);
  background: #faf8ff;
}

.name-traits-col.strengths { border-color: rgba(52, 170, 153, .22); }
.name-traits-col.strengths h3 { color: #0b7a6e; }
.name-traits-col.weaknesses { border-color: rgba(200, 100, 50, .18); }
.name-traits-col.weaknesses h3 { color: #a84f2a; }

.name-compatible-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.name-compatible-chips a {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(71, 53, 199, .08);
  color: #4735c7;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(71, 53, 199, .15);
}

.name-compatible-chips a:hover {
  background: #4735c7;
  color: #fff;
}

.name-funnel {
  margin-top: 1.75rem;
  padding: 20px 20px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #17152a, #3d2f7a);
  color: #fff;
}

.name-funnel h2 {
  margin: 6px 0 8px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.3;
}

.name-funnel p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .88);
  font-size: .92rem;
  line-height: 1.55;
}

.name-funnel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.name-page-main .reading-service-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

.name-page-main .reading-service-card {
  margin-top: 0;
  align-items: flex-start;
}

@media (min-width: 700px) {
  .name-page-main .reading-service-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .name-page-main .reading-service-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .name-page-main .reading-service-card > a {
    margin-left: 0;
    margin-top: 8px;
  }
}

.name-page-foot-links {
  margin-top: 1.75rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.name-skeleton-wrap { padding: 8px 0 24px; }
.name-skeleton-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(71, 53, 199, .1);
}
.name-skeleton-blocks { display: flex; flex-direction: column; gap: 12px; }
.name-skel-block {
  height: 88px;
  border-radius: 16px;
  background: linear-gradient(90deg, #eee 25%, #f7f5ff 50%, #eee 75%);
  background-size: 200% 100%;
  animation: nameSkel 1.2s ease infinite;
}
.name-skel-block.short { height: 56px; }
@keyframes nameSkel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}