/* ===== Грамматика / учебник ===== */

.gram-main{padding:36px 0 80px}

/* Хлебные крошки */
.breadcrumb{font-size:13.5px;color:var(--ink-soft);font-weight:600;margin-bottom:32px}
.breadcrumb a{color:var(--ink-soft);transition:color .15s}
.breadcrumb a:hover{color:var(--green-700)}

/* Заголовок страницы */
.gram-hero{margin-bottom:48px}
.gram-hero .eyebrow{display:block;margin-bottom:10px}
.gram-hero h1{
  font-size:clamp(28px,4vw,46px);font-weight:800;
  letter-spacing:-.035em;color:var(--green-900);line-height:1.1;
  margin-bottom:14px;
}
.gram-hero .lead{font-size:17px;color:var(--ink-soft);font-weight:500;max-width:640px}

/* Навигация по разделам учебника */
.gram-nav{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:48px;padding:18px 20px;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);
}
.gram-nav a{
  padding:7px 15px;border-radius:999px;
  font-size:13.5px;font-weight:700;color:var(--ink-soft);
  border:1.5px solid transparent;transition:all .15s;
}
.gram-nav a:hover{background:var(--green-50);border-color:var(--green-100);color:var(--green-700)}
.gram-nav a.active{background:var(--green-500);color:#fff;border-color:var(--green-500)}

/* Основной контент + сайдбар */
.gram-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}

/* Карточки правил */
.rule-block{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 30px;margin-bottom:24px;
}
.rule-block h2{
  font-size:20px;font-weight:800;letter-spacing:-.02em;
  color:var(--green-900);margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.rule-block h2 .num{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  background:var(--pink-50);color:var(--pink-600);
  font-size:13px;font-weight:800;
}
.rule-block p{font-size:15px;color:var(--ink-soft);font-weight:500;line-height:1.7;margin-bottom:12px}
.rule-block p:last-child{margin-bottom:0}

/* Формулы */
.formula{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:14px 18px;background:var(--green-50);
  border:1px solid var(--green-100);border-radius:12px;
  margin:16px 0;font-size:15px;font-weight:700;
}
.formula .part{
  padding:5px 12px;border-radius:8px;
  background:var(--white);border:1px solid var(--green-100);
  color:var(--green-700);font-weight:800;
}
.formula .plus,.formula .arrow{color:var(--ink-soft);font-weight:400}

/* Таблица спряжения (мини) */
.mini-conj{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin:16px 0;
}
.mini-conj .mc-row{
  display:contents;
}
.mini-conj .mc-pr,.mini-conj .mc-fm{
  padding:9px 14px;background:var(--white);font-size:14.5px;
}
.mini-conj .mc-pr{color:var(--ink-soft);font-weight:500}
.mini-conj .mc-fm{font-weight:800;color:var(--green-900)}

/* Примеры */
.examples{list-style:none;margin:16px 0;display:flex;flex-direction:column;gap:10px}
.examples li{
  padding:12px 16px;
  background:var(--cream);border-left:3px solid var(--green-300);
  border-radius:0 10px 10px 0;
}
.ex-fr{font-size:16px;font-weight:700;color:var(--green-700);font-style:italic;display:block}
.ex-ru{font-size:13.5px;color:var(--ink-soft);font-weight:500;display:block;margin-top:3px}

/* Внимание / Note */
.note{
  display:flex;gap:12px;padding:14px 18px;
  background:var(--pink-50);border:1px solid var(--pink-100);
  border-radius:12px;margin:16px 0;
}
.note-ico{font-size:18px;flex-shrink:0}
.note p{font-size:14px;font-weight:600;color:var(--ink);margin:0;line-height:1.6}
.note strong{color:var(--pink-600)}

/* Список глаголов */
.verb-list-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:8px;margin:16px 0;
}
.vl-item{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 14px;background:var(--white);
  border:1px solid var(--line);border-radius:12px;
  transition:border-color .15s,background .15s;
  text-decoration:none;
}
.vl-item:hover{border-color:var(--pink-300);background:var(--pink-50)}
.vl-fr{font-size:15px;font-weight:800;color:var(--green-700)}
.vl-item:hover .vl-fr{color:var(--pink-600)}
.vl-ru{font-size:12px;color:var(--ink-soft);font-weight:600}

/* Таблица с сортировкой */
.data-table{width:100%;border-collapse:collapse;margin:16px 0}
.data-table th{
  padding:10px 14px;text-align:left;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:2px solid var(--line);
}
.data-table td{
  padding:10px 14px;font-size:14.5px;border-bottom:1px solid var(--line);
}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--green-50)}
.data-table .td-fr{font-weight:800;color:var(--green-700)}
.data-table .td-ru{color:var(--ink-soft);font-weight:500}
.data-table .td-aux{font-weight:700}
.td-avoir{color:var(--green-700)}
.td-etre{color:var(--pink-600)}

/* Сайдбар */
.gram-sidebar{position:sticky;top:88px}
.sidebar-card{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;margin-bottom:16px;
}
.sidebar-card h3{
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:14px;
}
.sidebar-links{display:flex;flex-direction:column;gap:4px}
.sidebar-links a{
  padding:8px 10px;border-radius:10px;font-size:14px;font-weight:600;
  color:var(--ink-soft);transition:all .15s;
}
.sidebar-links a:hover{background:var(--green-50);color:var(--green-700)}
.sidebar-links a.active{background:var(--green-50);color:var(--green-700);font-weight:800}

/* CTA тренировка */
.gram-cta{
  background:var(--green-900);border-radius:var(--radius);
  padding:26px 24px;text-align:center;
}
.gram-cta h3{font-size:17px;font-weight:800;color:#fff;margin-bottom:8px}
.gram-cta p{font-size:13.5px;color:var(--green-300);margin-bottom:16px;font-weight:500}

@media(max-width:900px){
  .gram-layout{grid-template-columns:1fr}
  .gram-sidebar{position:static}
}
@media(max-width:600px){
  .mini-conj{grid-template-columns:1fr 1fr}
  .verb-list-grid{grid-template-columns:repeat(2,1fr)}
}