/*
Theme Name: iClarified RU
Template: mirror-ru
Description: iClarified.ru — Russian mirror of iclarified.com, modelled on the original design (logo, carousel, RECENT grid, article page).
Author: Victor
Version: 1.0.0
Text Domain: iclarified-ru
*/

:root {
    --blue: #0070eb;
    --blue-2: #007aff;
    --teal: #14cc9d;
    --purple: #9c32d0;
    --bg-2: #f6f6f6;
    --text: #333;
    --muted: #757575;
    --faint: #ccc;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 400 16px/1.4 var(--sans); -webkit-font-smoothing: antialiased; overscroll-behavior-x: contain; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--blue-2); color: #fff; padding: 8px 14px; }
.skip:focus { left: 8px; top: 8px; }
.is-empty { display: block; background: var(--bg-2); }

/* ---------- Top header (icons; small logo + date on phones) ---------- */
.header { position: relative; min-height: 40px; }
.header__date, .header__logo { display: none; }
.header__icons { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: row-reverse; gap: 10px; }
.header__icon { width: 20px; height: 20px; background: center / contain no-repeat; }
.header__icon--x { background-image: url(img/x-initial-gray-60x60.svg); }
.header__icon--x:hover { background-image: url(img/x-initial-60x60.svg); }
.header__icon--fb { background-image: url(img/facebook-initial-gray-60x60.svg); }
.header__icon--fb:hover { background-image: url(img/facebook-initial-60x60.svg); }
.header__icon--search { background-image: url(img/account-icon-off-gray-80x80.svg); display: none; }

/* ---------- Home: big centered logo, pills, app promo ---------- */
.logo-box { position: relative; margin-top: 30px; min-height: 146px; }
.logo-box__logo { display: block; width: 580px; margin: 0 auto; }
.logo-box__logo img { width: 580px; height: 136px; }
.logo-box__pills { position: absolute; left: 64px; bottom: 3px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pill { display: inline-block; background: var(--bg-2) 12px center / 16px 16px no-repeat; border-radius: 15px; padding: 5px 13px 5px 34px; font-size: 14px; line-height: 20px; color: #000; }
.pill:hover { color: var(--blue-2); background-color: #eee; }
.pill--tag { background-image: url(img/tag-icon-green-80x80.svg); }
.pill--download { background-image: url(img/download-icon-blue-80x80.svg); }
.logo-box__app { position: absolute; right: 64px; bottom: 3px; min-height: 64px; padding-left: 74px; background: url(img/iclarified-icon-64x64.svg) left center / 64px 64px no-repeat; font-size: 14px; font-weight: 300; line-height: 1.3; }
.logo-box__app a { color: var(--blue-2); }

/* ---------- Menu (sticky) ---------- */
.menu { position: sticky; top: -1px; z-index: 1000; height: 60px; background: rgba(255, 255, 255, .96); display: flex; align-items: center; justify-content: center; }
.menu__logo { position: absolute; left: 64px; top: 8px; height: 44px; display: none; }
.menu__logo img { height: 44px; width: auto; }
.is-inner .menu__logo { display: block; }
.menu__items { display: flex; justify-content: space-between; width: 600px; }
.menu__item { font-size: 15px; font-weight: 500; line-height: 64px; color: #000; text-transform: uppercase; white-space: nowrap; }
.menu__item:hover, .menu__item[aria-current="page"] { color: var(--blue); }
.menu__search { position: absolute; right: 64px; top: 20px; display: flex; align-items: center; }
.menu__search input { width: 0; opacity: 0; border: 0; border-bottom: 1px solid #ddd; padding: 2px 4px; font-size: 16px; font-weight: 300; background: transparent; outline: none; transition: width .2s, opacity .2s; }
.menu__search.is-open input { width: 220px; opacity: 1; margin-right: 8px; }
.menu__search-btn { width: 20px; height: 20px; border: 0; padding: 0; cursor: pointer; background: url(img/search-icon-blue-80x80.svg) center / contain no-repeat; }

/* ---------- Trending carousel ---------- */
.trending { position: relative; background: var(--bg-2); height: 172px; padding: 14px 64px 6px; }
.trending__label { display: none; }
.trending__slider { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; height: 100%; }
.trending__slider::-webkit-scrollbar { display: none; }
.trending__box { flex: 0 0 160px; scroll-snap-align: start; color: #000; }
.trending__img { width: 160px; height: 90px; border-radius: 9px; object-fit: cover; background: #e8e8e8; }
.trending__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: 13px; line-height: 1.4; }
.trending__box:hover .trending__title { color: var(--blue); }
.trending__arrow { position: absolute; top: 56px; width: 40px; height: 40px; border: 0; padding: 0; cursor: pointer; opacity: .5; background: center / contain no-repeat; }
.trending__arrow:hover { opacity: 1; }
.trending__arrow--left { left: 12px; background-image: url(img/arrow-left-circle-gray-80x80.svg); }
.trending__arrow--right { right: 12px; background-image: url(img/arrow-right-circle-gray-80x80.svg); }

/* ---------- RECENT band + card grid ---------- */
.grid-wrap { background: var(--bg-2); padding-bottom: 40px; }
.grid-band { margin: 0; background: var(--teal); color: #fff; font-size: 22px; font-weight: 500; line-height: 54px; padding: 0 64px; text-transform: uppercase; }
.grid-band small { font-size: 14px; font-weight: 400; text-transform: none; opacity: .85; margin-left: 10px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; padding: 20px 64px 0; }
.grid-card { position: relative; display: flex; flex-direction: column; height: 500px; background: #fff; border-radius: 18px; overflow: hidden; }
.grid-card--w1, .grid-card--c4 { grid-column: span 3; }
.grid-card--w2, .grid-card--c2 { grid-column: span 6; }
.grid-card--c3 { grid-column: span 4; }
.grid-card__media { display: block; flex: 0 0 240px; overflow: hidden; background: #eee; }
.grid-card--w2 .grid-card__media, .grid-card--c2 .grid-card__media { flex-basis: 300px; }
.grid-card__img { width: 100%; height: 100%; object-fit: cover; }
.grid-card__text { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.grid-card__title { margin: 0; padding: 10px 20px 0; font-size: 25px; line-height: 1.12; font-weight: 500; letter-spacing: -.01em; flex: none; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.grid-card__title a:hover { color: var(--blue-2); }
.grid-card__date { flex: none; margin: 2px 0 0; padding: 0 20px; font-size: 11px; line-height: 1.333; font-weight: 300; font-style: italic; color: var(--faint); }
.grid-card__desc { margin: 0; padding: 7px 20px 0; font-size: 15px; line-height: 1.25; font-weight: 300; color: var(--text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; flex: 0 1 auto; min-height: 0; margin-bottom: auto; }
.grid-card--w2 .grid-card__desc, .grid-card--c2 .grid-card__desc { -webkit-line-clamp: 2; }
/* when the card runs out of room mid-line, fade the last line instead of slicing it */
.grid-card__desc.is-clipped { -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent); mask-image: linear-gradient(#000 calc(100% - 20px), transparent); }
.grid-card__foot { flex: none; height: 44px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }
.grid-card__more { font-size: 16px; font-weight: 300; color: var(--faint); }
.grid-card__more:hover { color: #999; text-decoration: underline; }
.grid-card__share { width: 20px; height: 20px; border: 0; padding: 0; cursor: pointer; background: url(img/share-icon-blue-80x80.svg) center / contain no-repeat; }
.grid-card__share.is-copied { opacity: .35; }
.grid-more { text-align: center; margin: 32px 0 0; }
.grid-more a, .grid-pager .page-numbers { display: inline-block; background: #fff; border-radius: 18px; padding: 10px 22px; font-size: 15px; color: var(--blue-2); }
.grid-more a:hover { background: #eee; }
.grid-pager { padding: 28px 64px 0; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.grid-pager .page-numbers.current { background: var(--blue-2); color: #fff; }
.empty { max-width: 640px; margin: 0 auto; padding: 48px 20px; text-align: center; font-weight: 300; }
.empty h2 { font-weight: 400; font-size: 28px; }
.empty a { color: var(--blue-2); }
.empty__search { display: flex; gap: 8px; justify-content: center; margin: 20px 0; }
.empty__search input { width: 280px; max-width: 60vw; border: 1px solid #ddd; border-radius: 18px; padding: 8px 14px; background: #fff; }
.empty__search button { border: 0; border-radius: 18px; background: var(--blue-2); color: #fff; padding: 8px 18px; cursor: pointer; }

/* ---------- Article ---------- */
.story { max-width: 1400px; margin: 0 auto; padding: 44px 20px 20px; }
.story__head { max-width: 960px; margin: 0 auto; text-align: center; }
.story__cats { margin: 0 0 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.story__cats a { font-size: 12px; font-weight: 600; color: var(--teal); text-transform: uppercase; letter-spacing: .04em; }
.story__cats a:hover { color: var(--blue); }
.story__title { margin: 0; font-size: 46px; line-height: 1.15; font-weight: 400; letter-spacing: -.01em; overflow-wrap: anywhere; }
.share { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.share__btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; font-size: 13px; color: #fff; text-transform: uppercase; }
.share__btn--fb { background: #3b5998; }
.share__btn--x { background: #222; }
.share__btn--tg { background: #2aabee; }
.share__btn--vk { background: #0077ff; }
.share__btn:hover { opacity: .85; }
.story__posted { margin: 28px 0 0; font-size: 11px; font-style: italic; font-weight: 300; color: var(--muted); }
.story__body { max-width: 640px; margin: 28px auto 0; }
.story__figure { margin: 0 0 24px; }
.prose { font-size: 17px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.prose p { margin: 0 0 1.4em; }
.prose a { color: var(--blue); }
.prose a:hover { text-decoration: underline; }
.prose h2, .prose h3 { color: #000; font-weight: 500; line-height: 1.25; margin: 1.6em 0 .6em; }
.prose h2 { font-size: 26px; }
.prose h3 { font-size: 21px; }
.prose img { width: 100%; margin: 0 0 1.4em; }
.prose figure { margin: 0 0 1.4em; }
.prose figure img { margin: 0; }
.prose figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; text-align: center; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 0 0 1.4em; }
.prose blockquote { margin: 0 0 1.4em; padding-left: 18px; border-left: 3px solid var(--teal); color: #555; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.4em; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 15px; margin: 0 0 1.4em; }
.prose td, .prose th { border: 1px solid #e5e5e5; padding: 6px 10px; }

.source { max-width: 640px; margin: 8px auto 0; display: flex; gap: 14px; align-items: flex-start; background: var(--bg-2); border-radius: 18px; padding: 18px 20px; font-size: 15px; font-weight: 300; color: var(--text); }
.source__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 9px; }
.source p { margin: 0 0 6px; }
.source__label { font-weight: 600; color: #000; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.source__link { color: var(--blue-2); }
.source__link:hover { text-decoration: underline; }

.more { background: var(--bg-2); margin-top: 48px; padding: 44px 0 56px; }
.more__title { margin: 0 0 22px; padding: 0 64px; font-size: 32px; line-height: 1.2; font-weight: 400; }
.more__title span { color: #777; }
.more__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 0 64px; }
.more__card { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; }
.more__card-title { flex: 1; padding: 20px 20px 18px; font-size: 22px; line-height: 1.2; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.more__card:hover .more__card-title { color: var(--blue-2); }
.more__card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- Footer ---------- */
.footer { background: #fff; padding: 30px 64px 40px; }
.footer__table { display: flex; justify-content: space-around; gap: 30px; }
.footer__section { max-width: 220px; }
.footer__title { margin: 0 0 4px; font-size: 18px; line-height: 20px; font-weight: 300; color: var(--blue); }
.footer__desc { margin: 0 0 4px; font-size: 14px; line-height: 20px; color: var(--text); }
.footer__links { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 24px; color: var(--text); }
.footer__links a:hover { color: var(--blue); }
.ico { display: inline-block; padding-left: 30px; background: left center / 22px 22px no-repeat; line-height: 28px; }
.ico--rss { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%23f26522'/%3E%3Ccircle cx='7' cy='17' r='2' fill='%23fff'/%3E%3Cpath d='M5 11a8 8 0 0 1 8 8M5 6a13 13 0 0 1 13 13' stroke='%23fff' stroke-width='2.2' fill='none'/%3E%3C/svg%3E"); }
.ico--sitemap { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%230070eb'/%3E%3Cpath d='M6 7h12M6 12h12M6 17h8' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.footer__search input { width: 100%; border: 1px solid #ddd; border-radius: 15px; padding: 6px 12px; font-size: 14px; }
.footer__legal { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-top: 26px; font-size: 11px; color: #666; }
.footer__legal img { width: 100px; height: auto; }
.footer__legal p { margin: 0; text-align: right; }

/* ---------- Tablet ---------- */
@media (max-width: 1259px) {
    .logo-box__app { display: none; }
    .grid { padding: 20px 32px 0; }
    .grid-band, .more__title { padding: 0 32px; }
    .more__row { padding: 0 32px; }
    .menu__logo { left: 32px; }
    .menu__search { right: 32px; }
    .trending { padding: 14px 32px 6px; }
    .logo-box__pills { left: 32px; }
}
@media (max-width: 1100px) {
    .logo-box__pills { display: none; }
    .menu__items { width: 520px; }
}
@media (max-width: 1023px) {
    .logo-box__logo, .logo-box__logo img { width: 500px; height: auto; }
    .logo-box { margin-top: 10px; min-height: 0; }
    .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .grid-card--w1, .grid-card--c4, .grid-card--c3 { grid-column: span 3; }
    .grid-card--w2, .grid-card--c2 { grid-column: span 6; }
    .more__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .is-inner .menu__logo { display: none; }
    .footer__table { flex-wrap: wrap; justify-content: flex-start; }
    .footer__section { flex: 1 1 200px; }
}

/* ---------- Phones (iclarified.com mobile layout) ---------- */
@media (max-width: 767px) {
    .header { min-height: 90px; }
    .header__date { display: block; position: absolute; left: 20px; bottom: 51px; margin: 0; font-size: 12px; color: var(--muted); }
    .header__logo { display: block; position: absolute; left: 20px; bottom: 10px; width: 156px; }
    .header__logo img { width: 156px; height: 37px; }
    .header__icons { top: auto; bottom: 10px; }
    .header__icon { width: 36px; height: 36px; }
    .header__icon--x, .header__icon--fb { display: none; }
    .header__icon--search { display: block; background-image: url(img/search-icon-circle-gray-80x80.svg); }
    .logo-box { display: none; }
    .menu { position: relative; top: 0; height: 30px; background: var(--bg-2); padding: 0 20px; justify-content: space-between; }
    .menu__items { width: 100%; }
    .menu__item { font-size: 12px; font-weight: 600; line-height: 30px; }
    .menu__search, .menu__logo, .is-inner .menu__logo { display: none; }

    .trending { background: #fff; height: auto; padding: 4px 0 10px 20px; }
    .trending__label { display: block; margin: 6px 0 4px; color: var(--teal); font-size: 13px; font-weight: 700; text-transform: uppercase; }
    .trending__slider { gap: 12px; padding-right: 20px; }
    .trending__box { flex-basis: calc(100vw - 40px); }
    .trending__img { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid #ddd; }
    .trending__title { font-size: 17px; font-weight: 500; line-height: 1.3; -webkit-line-clamp: 2; }
    .trending__arrow { display: none; }

    .grid-wrap { background: #fff; padding-bottom: 24px; }
    .grid-band { background: none; color: var(--purple); font-size: 13px; font-weight: 700; line-height: 1.4; padding: 10px 20px 0; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 15px; padding: 6px 20px 0; }
    .grid-card, .grid-card--w1, .grid-card--w2, .grid-card--c2, .grid-card--c3, .grid-card--c4 { grid-column: span 1; height: auto; border-radius: 0; background: none; overflow: visible; }
    .grid-card--m-wide { grid-column: span 2; }
    .grid-card__media, .grid-card--w2 .grid-card__media, .grid-card--c2 .grid-card__media { flex: none; aspect-ratio: 16 / 9; border-radius: 9px; border: 1px solid #ddd; }
    .grid-card--m-wide .grid-card__media { aspect-ratio: 3 / 2; }
    .grid-card__text { display: block; }
    .grid-card__title { padding: 4px 22px 0 0; font-size: 13px; line-height: 1.15; font-weight: 600; -webkit-line-clamp: 3; letter-spacing: 0; }
    .grid-card--m-wide .grid-card__title { font-size: 15px; }
    .grid-card__date { padding: 2px 22px 0 0; font-size: 9px; }
    .grid-card__desc, .grid-card__more { display: none; }
    .grid-card__foot { position: absolute; bottom: 1px; right: 0; height: 16px; padding: 0; }
    .grid-card__share { width: 16px; height: 16px; }
    .grid-pager, .grid-more { padding: 20px 20px 0; }

    .story { padding: 24px 20px 10px; }
    .story__title { font-size: 28px; line-height: 1.2; }
    .share { gap: 6px; }
    .share__btn { height: 28px; padding: 0 10px; font-size: 11px; }
    .prose { font-size: 17px; }
    .more { padding: 28px 0 32px; }
    .more__title { padding: 0 20px; font-size: 24px; }
    .more__row { grid-template-columns: minmax(0, 1fr); padding: 0 20px; gap: 14px; }
    .more__card-title { font-size: 19px; }

    .footer { padding: 26px 20px 30px; }
    .footer__table { flex-direction: column; gap: 20px; }
    .footer__section { max-width: none; }
    .footer__legal { align-items: flex-start; }
    .footer__legal p { text-align: left; }
}