/* Страница «Грамматика» */
.oe-gr { --blue: #008ada; --ink: #26323a; --mute: #6b808c; --line: #e6edf2; --bg: #f5f9fc; }
.oe-gr__hero { padding: 22px; border-radius: 16px; background: linear-gradient(135deg, #e8f4fd, #f5fbff); margin-bottom: 16px; }
.oe-gr__lead { margin-bottom: 14px; color: var(--mute); font-size: 15px; }
.oe-gr__lead strong { color: var(--ink); font-size: 22px; }
.oe-gr__search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(0, 80, 130, .08); color: var(--mute); }
.oe-gr__search:focus-within { border-color: var(--blue); }
.oe-gr__search svg { width: 20px; height: 20px; flex: none; }
.oe-gr__search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 14px 0; font-size: 17px; background: none; color: var(--ink); }
.oe-gr__clear { border: 0; background: none; font-size: 24px; line-height: 1; color: #9bb2bf; cursor: pointer; }

.oe-gr__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.oe-gr__chips button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; cursor: pointer; transition: all .12s; }
.oe-gr__chips button:hover { border-color: var(--blue); }
.oe-gr__chips button.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.oe-gr__status { min-height: 22px; margin: 6px 2px 10px; color: var(--mute); font-size: 14px; }

.oe-gr__sec { margin-bottom: 26px; }
.oe-gr__sec[hidden], .oe-gc[hidden] { display: none; }
.oe-gr__sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 22px; color: var(--ink); }
.oe-gr__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--c); color: #fff; font-size: 15px; font-weight: 700; }
.oe-gr__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

.oe-gc { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; overflow: hidden; transition: border-color .12s, box-shadow .12s, transform .12s; }
a.oe-gc:hover { border-color: var(--c); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.oe-gc__title { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.oe-gc__sub { font-size: 13px; color: var(--mute); line-height: 1.3; }
.oe-gc.is-soon { background: var(--bg); border-style: dashed; }
.oe-gc.is-soon .oe-gc__title { color: #8aa0ac; font-weight: 500; }
.oe-gc__soon { align-self: flex-start; margin-top: 2px; padding: 0 7px; border-radius: 5px; background: #e6edf2; color: #7e93a0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }

@media (max-width: 600px) {
	.oe-gr__hero { padding: 16px; }
	.oe-gr__grid { grid-template-columns: 1fr 1fr; }
	.oe-gr__sec h2 { font-size: 19px; }
}
@media (max-width: 380px) { .oe-gr__grid { grid-template-columns: 1fr; } }