/* ukr.net clone — small additions on top of the original ukr.net CSS.
   The feed lists, the header, the menu and the article body use the original
   classes; these rules only style the pieces the original renders with JS
   (news cards, block titles, visible article title, footer) and adjust the
   page columns, because the original article page floats nav + main + aside. */

/* Layout: the original menu is a 155px left column (fixed on the original),
   here it stays inside the 1024px wrapper and the content fills the rest. */
.wrapper { position: relative }
nav { position: absolute; top: 0; left: 0; width: 155px; float: none; min-height: 0; z-index: 5 }
nav .nav-cnt { position: static; width: 155px; padding-top: 13px; background-color: #f7f7f7; border-right: 1px solid #e7e7e7 }
main { float: none; width: auto; margin-left: 155px; background-color: transparent }
#footer { margin-left: 155px }

.nf-block { margin: 0 0 30px; padding-left: 53px; padding-right: 20px }
.nf-block__title { font: bold 16px Arial; color: #22579e; margin: 0 0 10px }
.nf-block__title a { text-decoration: underline }
.nf-block__more { text-align: right; padding-right: 10px }
.nf-block__more a { text-decoration: underline; font-size: 13px }

.nf-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .06) }
.nf-card__img { display: block; line-height: 0; background: #f0f0f0 }
.nf-card__img img { display: block; width: 100%; height: 150px; object-fit: cover }
.nf-card__body { padding: 10px 12px 12px }
.nf-card__title { display: block; color: #333; font: 15px/18px Roboto-regular, Arial, sans-serif; text-decoration: none }
.nf-card__title:hover { color: #22579e; text-decoration: underline }
.nf-card__meta { margin-top: 6px; color: #9d9d9d; font: 12px/14px Roboto-light, Arial, sans-serif; display: flex; flex-wrap: wrap; gap: 8px }

.article-kicker { margin: 0 0 8px; font: bold 13px/16px Arial; color: #22579e }
.article-kicker a { text-decoration: underline }
.article__title { font: bold 26px/30px Roboto-medium, Arial, sans-serif; color: #000; margin: 0 0 10px }
main .details { background: #fff; padding: 18px 20px 22px; margin-bottom: 24px }
main .details .date i { font-style: normal; color: #757575 }
main .details .media-image { margin: 0 0 20px }
main .details .slide-img { max-width: 100% }

#footer { padding: 16px 0 30px; color: #999; font: 12px/18px Arial }
#footer .footer-links { margin-bottom: 8px }
#footer .footer-links a { color: #22579e; font-size: 12px }
#footer .footer-links span { color: #ccc; padding: 0 4px }
#footer .footer-copy a { color: #22579e }