:root{
  --bg:#f7f7fb;
  --white:#ffffff;
  --card:#ffffff;
  --text:#1f2428;
  --muted:#6b7280;
  --yellow:#ffc107;
  --yellow-600:#ffb300;
  --yellow-700:#ff9f00;
  --gray:#e5e7eb;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
}

/* Layout */
*{box-sizing:border-box}
html,body{height:100%}
body.site{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.content{padding:32px 0 64px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Navbar */
.navbar{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #f0f0f3}
.nav-inner{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo-circle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--yellow);box-shadow:0 4px 12px rgba(255,193,7,.35)}
.brand-text{letter-spacing:.2px}
.brand-text-yellow{color:var(--yellow);font-weight:700}
.search-form{flex:1;display:flex}
.search-input{width:100%;padding:10px 14px;border:1px solid var(--gray);border-radius:12px;background:#fff}
.nav-links{display:flex;align-items:center;gap:10px}
.nav-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #e9eaee;border-radius:12px;background:#fff;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.nav-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.08)}
.nav-btn.yellow{background:var(--yellow);border-color:var(--yellow);font-weight:600}
.nav-btn.yellow:hover{background:var(--yellow-600)}
.nav-btn.outline{background:#fff;border-color:var(--yellow);color:#333}
.nav-btn.small{padding:8px 12px;border-radius:10px}
.nav-btn.large{padding:12px 18px;border-radius:14px}
.avatar-btn{padding-left:8px}
.avatar-ring{display:inline-flex;width:28px;height:28px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.08)}
.avatar-ring img{width:100%;height:100%;object-fit:cover}
.avatar-fallback{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;background:#ffe082;color:#7a5400;font-weight:700}

/* ✅ Custom logo styles */
.brand-logo {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 8px;
}

/* Dropdown */
.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:#fff;border:1px solid #ececf0;border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none}
.dropdown-menu.open{display:block;animation:fadeIn .15s ease}
.dropdown-menu a{display:flex;padding:10px 12px;border-radius:8px}
.dropdown-menu a:hover{background:#fafafa}

/* Hero */
.hero{position:relative;border-radius:20px;padding:64px 24px;margin-top:16px;background:
linear-gradient(135deg, #fff 0%, #fff 30%, #fff3cd 100%);
box-shadow:var(--shadow);overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;background:radial-gradient(closest-side, rgba(255,193,7,.35), transparent 70%);border-radius:50%}
.hero-inner{position:relative;max-width:760px}
.lead{color:var(--muted);margin:8px 0 18px}
.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--yellow);color:#222;padding:12px 18px;border-radius:14px;border:1px solid var(--yellow);box-shadow:0 8px 24px rgba(255,193,7,.35);transition:.2s}
.cta:hover{transform:translateY(-2px);background:var(--yellow-600)}
.pulse-yellow{animation:pulse 1.7s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,193,7,.4)}70%{box-shadow:0 0 0 16px rgba(255,193,7,0)}100%{box-shadow:0 0 0 0 rgba(255,193,7,0)}}

/* Cards & grid */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid #ececf0;border-radius:16px;box-shadow:var(--shadow);padding:16px}
.card.hero-lite{display:grid;grid-template-columns:220px 1fr;gap:16px}
.card.hover{transition:.2s}
.card.hover:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.12)}
.card-body{display:flex;flex-direction:column;gap:10px;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;}
.card-title{margin:0}
.thumb{position:relative;border-radius:12px;overflow:hidden;border:1px solid #eee;background:#f9fafb;height:160px}
.thumb.big{height:auto}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.ph{height:100%;background:repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f1f1f1 10px, #f1f1f1 20px)}
.link-card{display:block}
.meta{color:var(--muted);font-size:.92rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:#fff7e0;border:1px solid #ffe8a3;font-size:.9rem}
.chip:hover{background:#ffefc2}

/* Forms */
.input, .textarea, .select, input[type="text"], input[type="file"], input[type="date"], select, textarea{
  width:100%;padding:10px 12px;border:1px solid #e3e5ea;border-radius:12px;background:#fff
}
.form-card h1, .form-card h3{margin-top:0}
.form-grid{display:grid;grid-template-columns:1fr;gap:12px}
.form-card.narrow{max-width:520px;margin:0 auto}

/* Profile */
.profile-card .profile-header{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center}
.avatar-big{width:120px;height:120px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.avatar-big img{width:100%;height:100%;object-fit:cover}
.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#ffe082;color:#7a5400;font-size:48px;font-weight:800}
.nick{color:var(--muted);font-weight:500;margin-left:6px}
.service-reminder{margin-top:6px;display:inline-block;background:#fff7e0;border:1px dashed #ffd34d;border-radius:10px;padding:6px 10px}

/* Footer (sticky) */
.footer{margin-top:auto;border-top:1px solid #efeff4;background:#f3f4f6}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 0}
.links-row{display:flex;gap:10px;margin-top:8px}
.muted{color:var(--muted)}

/* Helpers */
.flex{display:flex}
.between{justify-content:space-between}
.center-v{align-items:center}
.wrap{flex-wrap:wrap}
.gap-16{gap:16px}
.mt-16{margin-top:16px}
.inline{display:inline}

/* Spacing fix for footer overlap */
.home-posts{margin-bottom:100px}

/* Responsive */
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .card.hero-lite{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .nav-inner{height:auto;flex-wrap:wrap;gap:12px;padding:10px 0}
  .search-form{order:3;width:100%}
  .grid-3{grid-template-columns:1fr}
}
/* ====== Header brand styling ====== */
.brand-large {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
}

.brand-logo-large {
  height: 64px;
  width: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(255,193,7,.35);
  transition: transform .25s ease;
}

.brand-logo-large:hover {
  transform: scale(1.05);
}
.brand-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-footer .brand-logo-large {
  height: 56px;
  width: auto;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(255,193,7,.3);
}

.brand-footer .brand-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
/* ===== Финальные правки страницы поколения ===== */

/* Уменьшаем картинку поколения */
.generation-info .thumb.big {
  max-height: 300px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #eee;
}

.generation-info .thumb.big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* Сжимаем описание */
.generation-description {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 18px;
  line-height: 1.55;
  word-break: break-word;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Исправляем блок постов */
.generation-posts {
  margin-top: 24px;
  margin-bottom: 80px;
}

.generation-posts .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.generation-posts .card-body {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 90px;
}

.generation-posts .meta {
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Отступ между последним постом и формой */
.generation-form {
  margin-top: 60px;
}
/* 🚗 Финальный вариант адаптивной картинки поколения */
.generation-info .thumb.big {
  width: 100%;
  max-height: 480px; /* ограничение для ПК */
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  position: relative;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.generation-info .thumb.big img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.generation-info .thumb.big:hover img {
  transform: scale(1.05);
  filter: brightness(1.07) saturate(1.05);
}

/* 📱 Адаптив — на телефонах делаем ниже */
@media (max-width: 768px) {
  .generation-info .thumb.big {
    max-height: 300px;
  }
  .generation-info .thumb.big img {
    max-height: 300px;
  }
}
/* 🚘 Компактная карточка поколения (аккуратная и симпатичная) */
.generation-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  background: var(--white);
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.generation-info .thumb.big {
  width: 100%;
  max-height: 260px; /* 👈 делаем компактнее */
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

.generation-info .thumb.big img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.generation-info .thumb.big:hover img {
  transform: scale(1.04);
  filter: brightness(1.07) saturate(1.05);
}

.generation-description {
  font-size: 0.95rem;
  color: var(--text);
  background: #fff;
  border-radius: 10px;
  line-height: 1.55;
  word-break: break-word;
  padding: 10px 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

/* 📱 Адаптив — на телефонах ещё компактнее */
@media (max-width: 768px) {
  .generation-info {
    padding: 12px;
    max-width: 100%;
  }
  .generation-info .thumb.big {
    max-height: 200px;
  }
  .generation-info .thumb.big img {
    max-height: 200px;
  }
}
