/*
 * Оформление статьи-листикла по образцу listicle_dfo.
 *
 * Классы префиксованы dfo-, потому что имена из примера (.container, .item,
 * .image, .button) уже заняты в styles.css и правила бы конфликтовали.
 *
 * Перекраска хедера и футера идёт вне скоупа .dfo-listicle — она общая для сайта.
 */

/* ---------- хедер и футер: цвета из примера ---------- */

.header,
.footer {
   background-color: #2980b9;
}

.header {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/*
 * Логотип и иконки в теме тёмные и на синем не читаются. brightness(0) гасит
 * цвет в чёрный, invert(1) делает его белым — работает с любым логотипом,
 * отдельный белый файл не нужен.
 */
.header .header--logo--wrapper img,
.header .search--wrapper img,
.footer .footer--logo--wrapper img {
   filter: brightness(0) invert(1);
}

/*
 * Тема зажимает логотип в 41x36. Файл двухстрочный (yeap / news) со смещением
 * строк, и на таком размере смещение читается ступеньками. Даём высоту и
 * свободную ширину, чтобы логотип отрисовался как задумано.
 */
.header .container .header--logo--wrapper,
.footer .footer--logo--wrapper {
   width: auto;
   height: 48px;
}

.header .container .header--logo--wrapper img,
.footer .footer--logo--wrapper img {
   width: auto;
   height: 100%;
   max-width: none;
}

.footer p,
.footer a,
.footer .policy {
   color: #fff;
}

.footer a:hover {
   color: #fff;
   text-decoration: underline;
}

/* ---------- статья ---------- */

.dfo-listicle {
   background: #fff;
   color: #34495e;
   letter-spacing: -.015em;
   min-width: 320px;
}

.dfo-listicle .dfo *,
.dfo-listicle .dfo *::before,
.dfo-listicle .dfo *::after {
   box-sizing: border-box;
}

.dfo {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.dfo p {
   font-size: 24px;
   line-height: 1.4;
   color: #34495e;
}

.dfo-container {
   display: block;
   width: 100%;
   max-width: 1060px;
   padding: 30px;
   margin: 0 auto;
}

.dfo-intro h1 {
   color: #212a33;
   font-size: 60px;
   line-height: 1;
   margin: 0;
   font-weight: 700;
}

.dfo-intro p {
   margin-bottom: 30px;
}

.dfo-intro p:last-child {
   margin: 0;
}

/* Контент статьи приходит из редактора, поэтому нормализуем его вывод */
.dfo-intro .dfo-content > *:last-child {
   margin-bottom: 0;
}

.dfo-intro .dfo-content h2,
.dfo-intro .dfo-content h3 {
   font-size: 34px;
   line-height: 1.5;
   font-weight: 700;
   color: #34495e;
   margin: 30px 0 15px;
}

.dfo-intro .dfo-content ul,
.dfo-intro .dfo-content ol {
   font-size: 24px;
   line-height: 1.4;
   margin: 0 0 30px;
   padding-inline-start: 40px;
}

.dfo-intro .dfo-content a {
   color: #3498db;
   text-decoration: underline;
   font-weight: 500;
}

.dfo-image {
   display: block;
   width: 100%;
   margin: 30px auto;
   border-radius: 10px;
   overflow: hidden;
   position: relative;
}

.dfo-image img,
.dfo-image video {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 10px;
}

/* ---------- тизеры ---------- */

.dfo-item {
   padding: 60px 0 0 0;
   margin: 60px 0 0 0;
   border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.dfo-item h2 {
   font-size: 34px;
   line-height: 1.5;
   font-weight: 700;
   color: #34495e;
   margin: 0;
}

.dfo-item h2 .dfo-num {
   display: inline-block;
   font-size: 30px;
   background: #334155;
   color: #fff;
   padding: 5px 10px;
   border-radius: 7.5px;
   margin-right: 10px;
   font-weight: 800;
}

.dfo-item .dfo-desc p {
   margin-bottom: 30px;
}

.dfo-item .dfo-desc > *:last-child {
   margin-bottom: 0;
}

.dfo-item .dfo-desc b,
.dfo-item .dfo-desc strong {
   font-weight: 600;
   color: #34495e;
}

.dfo-item .dfo-desc a {
   color: #3498db;
   text-decoration: underline;
   font-weight: 500;
}

.dfo-button {
   display: block;
   width: 100%;
   margin: 30px 0 0;
   padding: 20px;
   font-size: 25px;
   line-height: 1.4;
   font-weight: 700;
   text-align: center;
   border-radius: 10px;
   color: #fff;
   text-decoration: none;
   background: #e74c3c;
   border-bottom: 3px solid #c0392b;
}

.dfo-button:hover,
.dfo-button:focus {
   background: #c0392b;
   color: #fff;
}

/* ---------- быстрые ссылки ---------- */

.dfo-quick-links {
   padding: 60px 0 0 0;
   margin: 60px 0 0 0;
   border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.dfo-quick-links h2 {
   font-size: 34px;
   line-height: 1.5;
   font-weight: 700;
   color: #34495e;
   margin: 0 0 30px;
}

.dfo-quick-links ol {
   margin: 0;
   padding: 0;
   padding-inline-start: 40px;
   list-style: decimal;
   color: #34495e;
}

.dfo-quick-links ol li {
   font-size: 24px;
   line-height: 1.4;
   padding-inline-start: 10px;
   margin: 0 0 15px;
}

.dfo-quick-links ol li:last-child {
   margin: 0;
}

.dfo-quick-links ol li p {
   margin: 0;
}

.dfo-quick-links ol li a {
   color: #3498db;
   text-decoration: underline;
   font-weight: 500;
}

/* ---------- мобильные ---------- */

@media screen and (max-width: 600px) {
   .dfo p,
   .dfo-intro .dfo-content ul,
   .dfo-intro .dfo-content ol {
      font-size: 18px;
      line-height: 1.55;
   }

   .dfo-container {
      padding: 30px 15px;
   }

   .dfo-intro h1 {
      font-size: 36px;
      line-height: 1.25;
   }

   .dfo-intro .dfo-content h2,
   .dfo-intro .dfo-content h3 {
      font-size: 22px;
   }

   .dfo-item {
      padding: 30px 0 0 0;
      margin: 30px 0 0 0;
   }

   .dfo-item h2 {
      font-size: 22px;
   }

   .dfo-item h2 .dfo-num {
      padding: 4px 8px;
      font-size: 20px;
      margin-right: 8px;
   }

   .dfo-button {
      font-size: 20px;
      padding: 16px;
   }

   .dfo-quick-links {
      padding: 30px 0 0 0;
      margin: 30px 0 0 0;
   }

   .dfo-quick-links h2 {
      font-size: 22px;
   }

   .dfo-quick-links ol {
      padding-inline-start: 30px;
   }

   .dfo-quick-links ol li {
      font-size: 18px;
      line-height: 1.55;
      padding-inline-start: 5px;
      margin: 0 0 10px;
   }
}