/* Component styles extracted from legacy snapshot.
   Responsibility: semantic layout & component appearance.
   Keep only structural & visual rules; no generic resets here. */

/* Layout containers — хедер и его внутренности заданы в site.css (и critical для первого экрана) */

/* Badges */
.badge { display:inline-block; font-weight:700; border-radius:4px; margin-right:.5rem; }
.badge-breaking { background:var(--color-error); color:var(--color-on-dark); text-transform:uppercase; padding:.2rem .5rem; font-size:var(--font-size-xs); }
.badge-featured { background:var(--color-primary); color:var(--color-on-dark); padding:.15rem .45rem; font-size:var(--font-size-xs); }
.badge-pinned { background:var(--color-text-muted); color:var(--color-on-dark); padding:.15rem .45rem; font-size:var(--font-size-xs); }

/* Article quote */
.article-quote { color:#334155; border-left:4px solid #94a3b8; padding:.25rem .75rem; margin:.75rem 0 1rem; font-style:italic; }
.article-quote footer { margin-top:.25rem; color:#64748b; font-size:var(--font-size-sm); font-style:normal; }

/* NK Only block — mobile-first: колонка и компактные отступы, с 768px крупнее, с 1320px ряд и фикс. размеры */
.nk-only { position: relative; width: 100%; }
.nk-only-wrapper { max-width: 1920px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; }
.nk-only-image-wrapper { width: 100%; height: auto; flex-shrink: 0; overflow: hidden; }
.nk-only-image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.nk-only-dark { background: #000E2E; flex: 1; min-height: auto; display: flex; flex-direction: column; justify-content: flex-start; color: #fff; text-align: center; }
.nk-only-header { padding: 32px 32px 0; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.nk-only-header::before { display: none; }
.nk-only-header-text { font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1; text-transform: none; color: #1C7CFF; }
.nk-only-link { text-decoration: none; color: inherit; display: block; }
.nk-only-content { padding: 0 40px 40px; text-align: center; }
.nk-only-title { font-size: 20px; line-height: 1.3; font-weight: 700; font-family: 'Onest', 'Onest Fallback', sans-serif; margin: 0 0 12px 0; color: #AFB5BF; }
.nk-only-lead { font-size: 14px; line-height: 1.5; font-weight: 500; margin: 0; color: #AFB5BF; }

/* Hover effects for NK Only block */
.nk-only-image { transition: transform var(--nk-link-hover-transition-duration) var(--nk-link-hover-transition-ease); transform: scale(1); will-change: transform; }

/* If browser supports :has(), trigger photo zoom on hover of the text link. */
@supports selector(:has(*)) {
  .nk-only-wrapper:has(.nk-only-link:hover) .nk-only-image { transform: scale(var(--nk-link-hover-zoom-scale, 1.02)); }
}

/* Fallback for older browsers (no :has): keep a non-zero hover effect. */
@supports not selector(:has(*)) {
  .nk-only-wrapper:hover .nk-only-image { transform: scale(var(--nk-link-hover-zoom-scale, 1.02)); }
}

@media (prefers-reduced-motion: reduce) {
  .nk-only-image { transition: none; }
  @supports selector(:has(*)) {
    .nk-only-wrapper:has(.nk-only-link:hover) .nk-only-image { transform: none; }
  }
  @supports not selector(:has(*)) {
    .nk-only-wrapper:hover .nk-only-image { transform: none; }
  }
}

@media (min-width: 768px) {
  .nk-only-dark { background: #303030; text-align: left; }
  .nk-only-image { aspect-ratio: 900 / 600; }
  .nk-only-header { padding: 48px 0 0 48px; margin-bottom: 16px; justify-content: flex-start; }
  .nk-only-header-text { text-transform: uppercase; color: inherit; }
  .nk-only-content { padding: 0 48px 48px 48px; text-align: left; }
  .nk-only-title { font-size: 24px; margin: 0 0 0.75rem 0; color: #CECECE; }
  .nk-only-lead { font-size: 16px; color: #B7B7B7; }
}

@media (min-width: 1320px) {
  .nk-only-wrapper { flex-direction: row; }
  /* Desktop swap: text on the left, image on the right */
  .nk-only-dark { order: 1; }
  .nk-only-image-wrapper { order: 2; }
  .nk-only-image-wrapper { width: 900px; height: 600px; }
  .nk-only-image { width: 900px; height: 600px; aspect-ratio: auto; }
  .nk-only-dark {
    min-height: 600px;
    background: #000E2E;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-left: 48px;
    padding-right: 48px;
  }
  .nk-only-header {
    padding: 0;
    margin-bottom: 48px;
    justify-content: center;
    max-width: 480px;
  }
  .nk-only-header-text { color: #1C7CFF; }
  .nk-only-content {
    padding: 0;
    text-align: center;
    max-width: 480px;
  }
  .nk-only-title {
    margin: 0 0 12px 0;
    color: #AFB5BF;
  }
  .nk-only-lead { color: #AFB5BF; margin: 0; }
}

/* Positive News block — mobile-first: подзаголовок, фото, заголовок, лид; с 768px сетка: текст | картинка */
.positive-news { background: #F2F5F6; padding: 24px 0 32px; }
.positive-news .container { padding-left: 16px; padding-right: 16px; }
.positive-news-link { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; align-items: flex-start; }
.positive-news-text { display: contents; }
.positive-news-header { display: flex; align-items: center; margin-bottom: 0; order: 1; }
.positive-news-image-wrapper { width: 100%; height: auto; flex-shrink: 0; order: 2; overflow: hidden; border-radius: 4px; }
.positive-news-content { display: flex; flex-direction: column; justify-content: center; order: 3; }
.positive-news-header-text { font-size: var(--mobile-block-title-size); font-weight: var(--mobile-block-title-weight); letter-spacing: 0; line-height: var(--mobile-block-title-lh); text-transform: none; }
.positive-news-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; transform: scale(1); transition: transform var(--nk-link-hover-transition-duration, 420ms) var(--nk-link-hover-transition-ease, cubic-bezier(0.2, 0.8, 0.2, 1)); will-change: transform; }
.positive-news-title { margin: 0 0 8px; font-size: var(--mobile-h2-size); line-height: var(--mobile-h2-lh); font-weight: 700; font-family: 'Onest', 'Onest Fallback', sans-serif; }
.positive-news-lead { margin: 0; font-size: var(--font-size-base); line-height: var(--mobile-feed-lh); font-weight: var(--mobile-feed-weight); color: #5F5F5F; }
.positive-news-link:hover .positive-news-image { transform: scale(var(--nk-link-hover-zoom-scale, 1.02)); }

@media (prefers-reduced-motion: reduce) {
  .positive-news-image { transition: none; }
  .positive-news-link:hover .positive-news-image { transform: scale(1); }
}
@media (min-width: 768px) {
  .positive-news { padding-top: 40px; padding-bottom: 40px; }
  .positive-news-link { display: grid; grid-template-columns: 1fr 624px; gap: 24px; align-items: stretch; }
  .positive-news-text { display: flex; flex-direction: column; justify-content: flex-start; grid-column: 1; order: unset; }
  .positive-news-header { grid-column: unset; grid-row: unset; order: unset; flex-shrink: 0; }
  .positive-news-content { grid-column: unset; grid-row: unset; order: unset; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  .positive-news-image-wrapper { grid-column: 2; width: 624px; height: 400px; order: unset; }
  .positive-news-image { width: 624px; height: 400px; aspect-ratio: auto; }
  .positive-news-title { font-size: 24px; }
  .positive-news-lead { font-size: 16px; }
}

/* Story block — mobile-first: одна колонка, с 768px две */
.story-block { margin-bottom:2rem; }
.story-block-link { display:block; text-decoration:none; color:inherit; }
.story-block-grid { display:grid; gap:2rem; grid-template-columns:1fr; align-items:start; }
.story-image { display:block; width:100%; height:400px; object-fit:cover; border-radius:0.5rem; }
.story-block-title { margin:0 0 0.5rem; font-size:var(--mobile-h2-size); font-weight:var(--mobile-h2-weight); line-height:var(--mobile-h2-lh); }
.story-block-lead { margin:0 0 1rem; color:#666; font-size:var(--font-size-base); font-weight:var(--mobile-feed-weight); line-height:var(--mobile-feed-lh); }
.story-articles-list { list-style:none; margin:0; padding:0; }
.story-article-item { margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid #eee; }
.story-article-item:last-child { margin-bottom:0; padding-bottom:0; border-bottom:0; }
.story-article-item a { display:block; text-decoration:none; color:inherit; }
.story-article-item time { display:block; font-size:var(--font-size-sm); color:#666; margin-bottom:0.25rem; }
.story-article-item h3 { margin:0; font-size:var(--font-size-base); font-weight:500; line-height:1.3; }
.story-article-item:hover h3 { text-decoration:underline; }
.story-more-link { display:inline-block; margin-top:1rem; color:#1f6feb; text-decoration:none; font-weight:500; }
.story-more-link:hover { text-decoration:underline; }
@media (min-width: 768px){ .story-block-grid { grid-template-columns:1fr 1fr; } }

/* News article layout - все стили перенесены в site.css */

/* Ads + footer */
.ad { text-align:center; margin:1rem 0; }
.ad-top, .ad-bottom { padding:.5rem 0; }
.site-footer .footer-links { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1rem 0; }
.site-footer .footer-links a { text-decoration:none; color:inherit; }
.site-footer .footer-links a:hover { text-decoration:underline; }
.site-footer .footer-links .sep { color:#bbb; }


/* Category news section — mobile-first: 1 колонка и карточка-строка, с 768px 2 колонки, с 1320px 4 */
.category-news-section { padding-top:48px; margin-bottom:2rem; }
.category-news-grid { display:grid; gap:32px; grid-template-columns:1fr; }
.category-title-link { text-decoration:none; color:inherit; display:block; }
.category-title { margin:0 0 1rem; font-size:var(--mobile-block-title-size); font-weight:var(--mobile-block-title-weight); letter-spacing:0; line-height:var(--mobile-block-title-lh); }
.category-title-link:hover .category-title { text-decoration:underline; }
.category-news-section .category-title.block-title { margin-bottom: 1rem; }
.category-news-section .category-title.block-title::after { display: none; }
.category-news-section .category-column { border-bottom: 1px solid #d0d0d0; padding-bottom: 16px; }
.category-news-section .category-column:last-child { border-bottom: none; padding-bottom: 0; }
.category-column--desktop-only { display: none; }
.category-main-article { display:flex; flex-direction:column; align-items:stretch; gap:0; min-width:0; text-decoration:none; color:inherit; }
.category-main-article picture { display:block; width:100%; }
.category-main-image { display:block; width:100%; height:auto; aspect-ratio:3/2; margin-bottom:0; border-radius:4px; object-fit:cover; }
.category-main-title { flex:1; min-width:0; font-size:var(--mobile-h3-size); line-height:var(--mobile-h3-lh); margin:0.75rem 0 0; font-weight:var(--mobile-h3-weight); }
.category-main-article:hover .category-main-title { text-decoration:underline; }
.category-separator { height:1px; background:#d0d0d0; margin:16px 0; list-style:none; display:block; }
.category-separator-first { margin:16px 0 0 0; height:2px; background:#000; }
.category-news-list { list-style:none; padding:16px 0 0 0; margin:0; }
.category-news-list li:not(.category-separator) { margin:0; }
.category-news-item { display:block; text-decoration:none; color:inherit; font-size:var(--font-size-base); line-height:var(--mobile-feed-lh); overflow-wrap:break-word; font-weight:var(--mobile-feed-weight); }
.category-news-item:hover { text-decoration:underline; }
@media (min-width: 768px) {
  .category-news-grid { grid-template-columns:repeat(2,1fr); }
  .category-news-section .category-column { border-bottom: none; padding-bottom: 0; }
  .category-main-article { display:block; }
  .category-main-article picture { display:block; width:100%; }
  .category-main-image { width:100%; height:auto; aspect-ratio:3/2; min-width:0; min-height:0; margin-bottom:0; border-radius:4px; }
  .category-main-title {
    font-size: var(--font-size-base);
    line-height: 1.3;
    flex: none;
    margin-top: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.9em;
  }
  .category-news-item { font-size:var(--font-size-sm); font-weight:500; }
  .category-separator-first { margin:16px 0; }
  .category-news-list { padding-top:0; }
}
@media (min-width: 1320px) {
  .category-news-grid { grid-template-columns:repeat(4,1fr); }
  .category-column--desktop-only { display: block; }
}

/* Блок рубрик на тёмном фоне — без фото */
.category-feed-section { background:#323232; padding-top:32px; padding-bottom:56px; margin-bottom:0; }
.category-feed-list { display:flex; flex-direction:column; gap:24px; }
.category-feed-item { display:block; min-width:0; text-decoration:none; color:inherit; }
.category-feed-item-text { flex:1; min-width:0; }
.category-feed-subtitle { display:block; margin:0 0 12px; font-size:var(--mobile-block-title-size); font-weight:var(--mobile-block-title-weight); line-height:var(--mobile-block-title-lh); color:#7C7C7C; }
.category-feed-title { margin:0; font-size:var(--font-size-base); font-weight:var(--mobile-feed-weight); line-height:var(--mobile-feed-lh); color:#fff; }
.category-feed-item:hover .category-feed-title { text-decoration:underline; }
.category-feed-section .video-badge { vertical-align:middle; }
.category-feed-section .badge-breaking { margin-right:4px; }
.category-feed-item--desktop-only { display:none; }

@media (min-width: 768px) {
  .category-feed-list { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; }
  .category-feed-item--desktop-only { display:block; }
}

@media (min-width: 1320px) {
  .category-feed-list { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* Media Item Page */
.media-item-page { padding:2rem 0; }
.media-item-header { margin-bottom:2rem; }
.media-item-title { font-size:var(--font-size-2xl); font-weight:700; margin-bottom:0.5rem; }
.media-item-type { display:inline-block; padding:0.25rem 0.75rem; background:#f3f4f6; border-radius:4px; font-size:var(--font-size-sm); color:#666; }

/* Photo Gallery Grid — mobile-first: мелкие ячейки, с 768px крупнее */
.media-photo-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:0.75rem; margin:2rem 0; }
.media-gallery-item { margin:0; position:relative; overflow:hidden; border-radius:8px; background:#f9fafb; }
.media-gallery-thumb { width:100%; padding:0; border:none; background:transparent; cursor:pointer; display:block; transition:transform 0.2s ease; }
.media-gallery-thumb:hover { transform:scale(1.02); }
.media-gallery-thumb picture, .media-gallery-thumb img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.media-gallery-caption { position:absolute; bottom:0; left:0; right:0; padding:0.75rem; background:linear-gradient(to top, rgba(0,0,0,0.7), transparent); color:#fff; font-size:var(--font-size-sm); margin:0; opacity:0; transition:opacity 0.2s ease; }
.media-gallery-item:hover .media-gallery-caption { opacity:1; }
.media-gallery-full-data { display:none; }

/* Lightbox Modal — mobile-first: компактные отступы и кнопки, с 768px крупнее */
.media-lightbox { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.95); z-index:9999; align-items:center; justify-content:center; padding:1rem; }
.media-lightbox.active { display:flex; }
.media-lightbox-content { position:relative; max-width:90vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; }
.media-lightbox-image { max-width:100%; max-height:80vh; object-fit:contain; border-radius:4px; }
.media-lightbox-info { margin-top:1rem; text-align:center; color:#fff; max-width:800px; }
.media-lightbox-title { font-size:var(--font-size-lg); font-weight:600; margin:0 0 0.5rem; }
.media-lightbox-caption { font-size:var(--font-size-base); color:#ccc; margin:0 0 0.5rem; }
.media-lightbox-counter { font-size:var(--font-size-sm); color:#999; margin:0; }

/* Lightbox Controls */
.media-lightbox-close, .media-lightbox-prev, .media-lightbox-next { position:absolute; background:rgba(255,255,255,0.1); border:2px solid rgba(255,255,255,0.3); color:#fff; font-size:var(--font-size-xl); width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; z-index:10000; }
.media-lightbox-close:hover, .media-lightbox-prev:hover, .media-lightbox-next:hover { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.5); }
.media-lightbox-close { top:1rem; right:1rem; font-size:var(--font-size-3xl); line-height:1; }
.media-lightbox-prev { left:0.5rem; top:50%; transform:translateY(-50%); }
.media-lightbox-next { right:0.5rem; top:50%; transform:translateY(-50%); }
.media-lightbox-prev:disabled, .media-lightbox-next:disabled { opacity:0.3; cursor:not-allowed; }

@media (min-width: 768px) {
  .media-photo-gallery { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; }
  .media-lightbox { padding:2rem; }
  .media-lightbox-close, .media-lightbox-prev, .media-lightbox-next { font-size:var(--font-size-2xl); width:50px; height:50px; }
  .media-lightbox-prev { left:1rem; }
  .media-lightbox-next { right:1rem; }
}

/* Media Item Description */
.media-item-description { margin:2rem 0; line-height:1.7; }

/* Media Navigation */
.media-navigation { margin:3rem 0 2rem; padding-top:2rem; border-top:1px solid #eee; }
.media-nav-links { display:flex; justify-content:space-between; gap:1rem; }
.media-nav-link { text-decoration:none; color:#333; font-weight:500; padding:0.5rem 1rem; border:1px solid #ddd; border-radius:4px; transition:all 0.2s ease; }
.media-nav-link:hover { background:#f3f4f6; border-color:#999; }