:root {
  --blue: #0c1c3a;
  --green: #3bd671;
  --text: #222;
  --gray: #666;
  --muted: #6b6b6b;
  --font-base: 'Inter', sans-serif;
  --header-offset: 96px;
  --section-pad: 80px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--text);
}

button,
input,
textarea,
select {
  font-family: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

body:not(.home):not(.front-page) main.section,
body:not(.home):not(.front-page) section.section:first-of-type{
  padding-top: calc(var(--header-offset) + 60px);
}


/* =========================
   LINK RESET
========================= */

a{
  color: inherit;              /* берёт цвет родителя */
  text-decoration: none;       /* убираем подчеркивание */
  outline: none;
  background: none;
}

a:visited{
  color: inherit;
}

a:hover,
a:focus{
  text-decoration: none;
  color: inherit;
}

a:active{
  color: inherit;
}



.section__head{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:24px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Заголовок */
.section__title{
  font-size:24px;
  font-weight:800;
  line-height:1.05;
  text-transform:uppercase;
  color:#4C4C4C;
  letter-spacing:.4px;
}

/* Линия */
.section__line{
  height:1px;
  background:rgba(0,0,0,.2);
  align-self:center;
}

/* Кнопка "Бәрін көру / Посмотреть все" */
.section__action{
  display:flex;
  align-items:center;
  gap:10px;
  color:#21c16b;
  font-size:14px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}

.section__action .arrow{
  font-size:18px;
  line-height:1;
  transform:translateY(-1px);
}

.section__action:hover{
  color:#18a85a;
}

/* =========================
   SINGLE POST / PAGE
========================= */

.postSingle,
.pageSingle{
  max-width: 980px;
  margin: 0 auto;
}

.postSingle__header,
.pageSingle__header{
  margin-bottom: 26px;
}

.postSingle__title,
.pageSingle__title{
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: #4c4c4c;
  letter-spacing: .4px;
  margin: 0 0 12px;
}

.postSingle__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
}

.postSingle__sep{
  opacity: .6;
}

.postSingle__thumb,
.pageSingle__thumb{
  margin-bottom: 26px;
  border-radius: 10px;
  overflow: hidden;
}

.postSingle__thumb img,
.pageSingle__thumb img{
  width: 100%;
  height: auto;
  display: block;
}

.content{
  font-size: 16px;
  line-height: 1.8;
  color: #2b2b2b;
}

.content p{
  margin: 0 0 16px;
}

.content a{
  color: #1f2f8c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content h2,
.content h3,
.content h4{
  margin: 26px 0 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #1f2f8c;
}

.content h2{ font-size: 24px; }
.content h3{ font-size: 20px; }
.content h4{ font-size: 17px; }

.content ul,
.content ol{
  padding-left: 20px;
  margin: 0 0 16px;
}

.content blockquote{
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 3px solid #1f2f8c;
  background: #f3f5fa;
  color: #444;
}
