/* ============================================================
   ARTICLES CSS — irinamolchanova.ru
   Loaded on /stati/ pages only. Requires Bootstrap 4 + Open Sans.
   ============================================================ */

body { font-family:'Open Sans',sans-serif; background:#fff; margin:0; padding:0; }
a { transition:.3s all; text-decoration:none; }
a:hover { text-decoration:none; }
p { font-size:16px; letter-spacing:1px; line-height:1.9; color:#888; font-weight:300; }

/* ---- NAV (matches existing live site) ---- */
body > header { position:relative; z-index:9; width:100%; background:#282828; padding:1em 0; }
.toggle,[id^=drop] { display:none; }
nav { margin:0; padding:0; }
nav:after { content:""; display:table; clear:both; }
nav ul { padding:0; margin:0; list-style:none; position:relative; }
nav ul li { margin:0; display:inline-block; }
nav a { color:#fff; font-size:16px; letter-spacing:2px; font-weight:600; }
nav a:hover { color:#EA8A95; }
.menu li.active a { color:#EA8A95; }
nav.mnu { width:50%; text-align:center; }

/* ---- FOOTER ---- */
.site-footer { background:#303030; padding:3em 0; text-align:center; }
.site-footer p { color:#999; max-width:100%; letter-spacing:1px; }
.site-footer a { color:#EA8A95; }
.footer-social { list-style:none; padding:0; margin:1.5em 0; }
.footer-social li { display:inline-block; margin:0 8px; }

/* ---- PAGE HERO ---- */
.page-hero { background:#f5f5f5; padding:4em 0 3em; text-align:center; border-bottom:1px solid #e8e8e8; }
h1.page-title { font-size:2.5em; font-weight:700; color:#3e3e3e; margin-bottom:.4em; }
p.page-sub { font-size:1.1em; color:#aaa; max-width:500px; margin:0 auto; letter-spacing:1px; }

/* ---- ARTICLES LIST ---- */
.articles-wrap { padding:5em 0; }

.article-card { background:#f7f7f7; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.08); margin-bottom:2em; transition:.3s all; border-radius:3px; overflow:hidden; display:flex; flex-direction:row; }
.article-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.13); transform:translateY(-2px); }
.article-card__img { width:280px; min-width:280px; overflow:hidden; }
.article-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
.article-card__body { padding:2em 2em 1.75em; display:flex; flex-direction:column; justify-content:center; }
.article-card__date { font-size:12px; color:#bbb; letter-spacing:2px; text-transform:uppercase; margin-bottom:.6em; }
.article-card__title { font-size:1.3em; font-weight:700; color:#3e3e3e; line-height:1.4; margin-bottom:.75em; letter-spacing:-.01em; }
.article-card__title a { color:#3e3e3e; }
.article-card__title a:hover { color:#EA8A95; }
.article-card__desc { font-size:15px; color:#999; line-height:1.75; margin-bottom:1.25em; }
.article-card__more { color:#EA8A95; font-weight:700; font-size:14px; letter-spacing:1px; }
.article-card__more:hover { color:#e07682; }
.articles-empty { color:#aaa; text-align:center; padding:3em 0; font-size:1.1em; }

/* Pagination */
.pagination-wrap { text-align:center; margin-top:2em; }
.page-link { color:#EA8A95; }
.page-item.active .page-link { background:#EA8A95; border-color:#EA8A95; }

/* ---- SINGLE ARTICLE ---- */
.article-page { padding:4em 0; }

.breadcrumb-nav { margin-bottom:2em; }
.breadcrumb-nav a { color:#EA8A95; font-size:14px; letter-spacing:1px; }
.breadcrumb-nav span { color:#bbb; margin:0 .4em; }
.breadcrumb-nav .current { color:#aaa; font-size:14px; }

.article-header { margin-bottom:2em; }
.article-date { font-size:12px; color:#bbb; letter-spacing:2px; text-transform:uppercase; display:block; margin-bottom:.75em; }
.article-title { font-size:2em; font-weight:700; color:#3e3e3e; line-height:1.3; margin-bottom:.75em; }
.article-lead { font-size:1.1em; color:#aaa; line-height:1.8; }

.article-cover { width:100%; border-radius:3px; margin-bottom:2.5em; display:block; }

.article-body { color:#555; font-size:16px; line-height:1.9; }
.article-body h2 { font-size:1.4em; font-weight:700; color:#3e3e3e; margin:2em 0 .75em; }
.article-body h3 { font-size:1.15em; font-weight:700; color:#3e3e3e; margin:1.5em 0 .5em; }
.article-body p  { color:#555; margin-bottom:1.25em; }
.article-body ul,
.article-body ol { margin-bottom:1.25em; padding-left:1.5em; }
.article-body li { margin-bottom:.4em; color:#555; }
.article-body img { max-width:100%; border-radius:3px; margin:1.5em 0; display:block; }
.article-body a { color:#EA8A95; }
.article-body a:hover { color:#e07682; }

.article-footer { border-top:1px solid #eee; margin-top:3em; padding-top:2em; text-align:center; }
.article-footer p { color:#888; margin-bottom:1.25em; }
.btn-cta { display:inline-block; background:#EA8A95; color:#fff; font-weight:700; font-size:15px; letter-spacing:1px; padding:14px 32px; border-radius:3px; transition:.3s; }
.btn-cta:hover { background:#e07682; color:#fff; }

/* ---- MOBILE ---- */
@media all and (max-width:768px) {
  .toggle+a,.menu { display:none; }
  .toggle { display:block; padding:8px 20px; font-size:15px; background:#fff; color:#333; cursor:pointer; border:none; }
  [id^=drop]:checked+ul { display:block; background:rgba(16,16,16,.85); padding:15px 0; text-align:center; width:100%; }
  nav ul li { display:block; width:100%; padding:5px 0; }
  nav.mnu { width:100%; }
  nav ul { padding-top:2.5em; }

  .article-card { flex-direction:column; }
  .article-card__img { width:100%; min-width:100%; height:200px; }
  h1.page-title { font-size:1.8em; }
  .article-title { font-size:1.5em; }
}