/* =========================================================
   Endowment GGNTU — base style
   - keeps existing class names (no breaking changes)
   - fixes grid overlap (minmax(0), min-width:0)
   - adds mobile adaptations
   ========================================================= */

:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:rgba(17,24,39,.10);
  --soft:#f6f7fb;
  --card:#ffffff;

  --primary:#0f62fe;
  --primary2:#0b4fd1;

  --radius:18px;
  --shadow:0 14px 40px rgba(17,24,39,.10);

  --container:1160px;

  --topbar-h:42px;
  --header-h:74px;
}

*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Links */
a{color:inherit;text-decoration:none}
a:hover{opacity:.98}

/* Container */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
}

/* Safety: prevent grid/flex children from overflowing and "pushing" columns */
.hero__grid,
.metrics,
.cards,
.header__row,
.section__head,
.nav{
  min-width:0;
}
.hero__main,
.hero__aside,
.card,
.metric{
  min-width:0;
}

/* =========================================================
   Topbar
   ========================================================= */
.topbar{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.topbar__row{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.topbar__link{
  color:rgba(17,24,39,.75);
  font-weight:650;
  font-size:13px;
}
.topbar__link:hover{
  color:rgba(17,24,39,1);
}

/* =========================================================
   Header / Nav
   ========================================================= */
.header{
  position:sticky;
  top:var(--topbar-h);
  z-index:20;

  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);

  border-bottom:1px solid var(--line);
}
.header__row{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  white-space:nowrap;
}
/* --- Brand logo: pill so background always fits text --- */
.brand__logo{
  height:44px;
  min-width:44px;          /* минимально как раньше */
  width:auto;              /* теперь ширина по тексту */
  padding:0 12px;          /* чтобы фон был шире текста */
  border-radius:12px;
  background:var(--soft);
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  letter-spacing:.2px;
  white-space:nowrap;      /* не переносить "ГГНТУ" */
}
.brand__text{
  letter-spacing:.2px;
}

/* Nav + dropdown */
.nav{
  display:flex;
  gap:18px;
  align-items:center;
}
.nav__link{
  color:rgba(17,24,39,.78);
  font-weight:750;
}
.nav__link:hover{
  color:rgba(17,24,39,1);
}
.nav__item{position:relative}
.nav__drop{
  position:absolute;
  left:0;
  top:36px;
  min-width:260px;

  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(17,24,39,.14);

  padding:10px;
  display:none;
}
.nav__drop a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  color:rgba(17,24,39,.82);
  font-weight:650;
}
.nav__drop a:hover{background:var(--soft)}
.nav__item:hover .nav__drop{display:block}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:12px 16px;
  border-radius:999px;

  border:1px solid var(--line);
  font-weight:850;
  line-height:1;
  white-space:nowrap;
}
.btn--sm{
  padding:10px 14px;
  font-size:14px;
}
.btn--primary{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
}
.btn--primary:hover{background:var(--primary2)}
.btn--ghost{background:#fff}
.btn--full{width:100%}

/* =========================================================
   Typography
   ========================================================= */
h1{
  font-size:46px;
  line-height:1.05;
  margin:0 0 12px;
  letter-spacing:-.6px;
}
h2{
  margin:0;
  font-size:24px;
  letter-spacing:-.2px;
}
.kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(17,24,39,.55);
  margin-bottom:10px;
}
.lead{
  font-size:18px;
  color:rgba(17,24,39,.72);
  max-width:60ch;
  margin:0 0 18px;
}
.muted{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

/* Handle long values and prevent layout break */
h1, h2, .lead, .muted, .card__title, .metric__n, .fund__value, .fund__goal, .list__title{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================================================
   Cards
   ========================================================= */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card--soft{
  background:linear-gradient(180deg, #fff, var(--soft));
}
.card__title{
  font-weight:950;
  font-size:18px;
  margin:0 0 10px;
}

/* Optional: clickable hover card (used in projects list) */
.card--hover{
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card--hover:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 54px rgba(17,24,39,.14);
  border-color:rgba(17,24,39,.14);
}

/* Badge */
.badge{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(15,98,254,.10);
  color:rgba(15,98,254,1);
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(15,98,254,.18);
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  padding:44px 0 26px;
  background:linear-gradient(180deg, #fff, #fff 55%, var(--soft) 100%);
}

/* Critical: minmax(0, ...) prevents "overlap" from wide content */
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, .95fr);
  gap:18px;
  align-items:start;
}
.hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

/* Aside inner spacing (you added hero__asideInner in index.html; safe even if absent) */
.hero__asideInner{
  display:grid;
  gap:14px;
}

/* Metrics */
.metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}
.metric{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.metric__n{
  font-weight:950;
  font-size:18px;
}
.metric__t{
  color:var(--muted);
  font-size:12px;
  margin-top:2px;
}

/* Fund rows (optional, but helps alignment if you use .fund in templates) */
.fund__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.fund__value, .fund__goal{
  font-weight:950;
}

/* Progress */
.progress{
  height:10px;
  border-radius:999px;
  background:rgba(17,24,39,.08);
  overflow:hidden;
  margin:12px 0 10px;
}
.progress__bar{
  height:100%;
  background:var(--primary);
  border-radius:999px;
}

/* Steps */
.steps{display:grid;gap:10px}
.step{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:750;
  color:rgba(17,24,39,.82);
}
.step__n{
  width:40px;height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,98,254,.10);
  color:var(--primary);
  font-weight:950;
  font-size:12px;
}

/* =========================================================
   Sections
   ========================================================= */
.section{padding:30px 0}
.section--alt{
  background:var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.link{
  color:var(--primary);
  font-weight:900;
}

/* =========================================================
   Projects grid (cards)
   ========================================================= */
.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

/* =========================================================
   News list (if you use .list / .list__item)
   ========================================================= */
.list{
  display:grid;
  gap:12px;
}
.list__item{
  display:block;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 10px 26px rgba(17,24,39,.08);
  overflow:hidden;
}
.list__item:hover{
  box-shadow:0 14px 36px rgba(17,24,39,.12);
}
.list__title{
  font-weight:900;
  margin:6px 0;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet */
@media (max-width: 980px){
  /* Hide nav (simple mobile behavior) */
  .nav{display:none}

  .hero__grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}

  h1{font-size:38px}
}

/* Phone */
@media (max-width: 640px){
  .container{padding:0 14px}

  /* topbar becomes multi-line if needed */
  .topbar__row{
    height:auto;
    padding:8px 0;
  }

  /* keep header compact */
  .header__row{
    height:auto;
    padding:10px 0;
    gap:10px;
  }

  /* shorten brand text to avoid wrapping collisions */
  .brand__text{display:none}

  /* buttons a bit tighter */
  .btn{padding:11px 14px}
  .btn--sm{padding:10px 12px}

  h1{font-size:32px}
  .lead{font-size:16px}
}

/* Very small screens */
@media (max-width: 380px){
  h1{font-size:28px}
  .btn{width:100%}
  .hero__cta{gap:10px}
}
/* --- Dropdown usability fix: make it easy to "catch" with mouse --- */
.nav__item{
  position:relative;
}

/* показываем дропдаун не только при hover на ссылке, а при hover/focus внутри всего пункта */
.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop{
  display:block;
}

/* "мостик" между пунктом меню и выпадающим списком, чтобы hover не слетал */
.nav__item::before{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  top:28px;          /* область под ссылкой */
  height:18px;       /* перекрывает зазор */
  background:transparent;
}

/* чуть опустим дропдаун и дадим больше воздуха */
.nav__drop{
  top:46px;          /* было 36px — часто образует зазор */
  padding:10px;
  z-index:50;
  display:none;      /* управление через hover/focus-within */
}

/* чтобы курсор уверенно взаимодействовал с меню */
.nav__drop,
.nav__drop a{
  pointer-events:auto;
}
@media (max-width: 640px){
  .brand__text{display:none}
  .btn--sm{padding:10px 12px}
}
/* ===== footer (light, structured) ===== */

.footer{
  background: #f6f7fb;
  border-top: 1px solid var(--line);
  padding: 36px 0 18px;
  margin-top: 40px;
}

.footer__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 24px;
}

.footer__title{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--text);
}

.footer__text{
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 40ch;
}

/* списки ссылок */
.footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.footer__list a{
  font-size: 14px;
  color: rgba(17,24,39,.78);
  font-weight: 600;
}

.footer__list a:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* контакты */
.footer__contacts{
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.footer__contacts a{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.footer__contacts a:hover{
  text-decoration: underline;
}

/* нижняя полоса */
.footer__bottom{
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.footer__copy{
  font-size: 13px;
  color: var(--muted);
}

.footer__admin{
  font-size: 13px;
  color: var(--muted);
}

.footer__admin:hover{
  color: var(--text);
}

/* ===== responsive ===== */
@media (max-width: 980px){
  .footer__grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px){
  .footer{
    padding: 28px 0 16px;
  }
  .footer__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .footer__bottom{
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ===== donate widget ===== */
.field{margin:14px 0}
.field__label{font-weight:900;font-size:13px;margin-bottom:8px}
.field__row{display:flex;gap:10px;align-items:center}

.input{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  font:inherit;
  outline:none;
}
.input:focus{border-color:rgba(15,98,254,.45); box-shadow:0 0 0 4px rgba(15,98,254,.10)}
textarea.input{resize:vertical}

.hint{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.45}

/* amount chips */
.amounts{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:850;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
.chip:hover{border-color:rgba(15,98,254,.35)}
.chip--active{
  border-color: rgba(15,98,254,.45);
  box-shadow: 0 0 0 4px rgba(15,98,254,.10);
}

/* segmented control */
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg__item{position:relative}
.seg__item input{position:absolute;opacity:0;pointer-events:none}
.seg__item span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:999px;border:1px solid var(--line);
  font-weight:850;font-size:13px;background:#fff;cursor:pointer;
}
.seg__item input:checked + span{
  border-color: rgba(15,98,254,.45);
  box-shadow: 0 0 0 4px rgba(15,98,254,.10);
}

/* iOS-like switch */
.switch{
  display:flex;gap:12px;align-items:flex-start;
  cursor:pointer;user-select:none;
}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch__ui{
  flex:0 0 auto;
  width:46px;height:28px;border-radius:999px;
  background:rgba(17,24,39,.18);
  border:1px solid var(--line);
  position:relative;
  transition:background .18s ease, border-color .18s ease;
  margin-top:2px;
}
.switch__ui:after{
  content:"";
  width:22px;height:22px;border-radius:50%;
  background:#fff;
  position:absolute;top:2px;left:2px;
  box-shadow:0 8px 20px rgba(17,24,39,.18);
  transition:transform .18s ease;
}
.switch input:checked + .switch__ui{
  background:rgba(15,98,254,1);
  border-color:rgba(15,98,254,.40);
}
.switch input:checked + .switch__ui:after{
  transform:translateX(18px);
}
.switch__text{
  font-size:13px;line-height:1.45;color:rgba(17,24,39,.80);
  font-weight:650;
}

/* mobile tweaks */
@media (max-width: 620px){
  .amounts{gap:8px}
  .chip{padding:9px 11px}
}
/* ===== governance people ===== */

.people{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.person{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:#fff;
  text-align:center;
}

.person__photo{
  width:96px;
  height:96px;
  border-radius:50%;
  margin:0 auto 10px;
  background:
    linear-gradient(180deg, #fff, var(--soft));
  border:1px solid var(--line);
}

.person__name{
  font-weight:900;
  font-size:15px;
  margin-bottom:4px;
}

.person__role{
  font-size:13px;
  font-weight:700;
  color:rgba(17,24,39,.75);
  margin-bottom:4px;
}

.person__meta{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

/* director block */

.director{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-top:14px;
}

.director__photo{
  width:120px;
  height:120px;
  border-radius:18px;
  background:
    linear-gradient(180deg, #fff, var(--soft));
  border:1px solid var(--line);
  flex-shrink:0;
}

.director__name{
  font-size:18px;
  font-weight:950;
  margin-bottom:6px;
}

.director__role{
  font-weight:800;
  font-size:14px;
  margin-bottom:8px;
}

.director__meta{
  font-size:14px;
  color:var(--muted);
  line-height:1.55;
}

/* responsive */

@media (max-width: 980px){
  .people{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px){
  .people{
    grid-template-columns: 1fr;
  }
  .director{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}