/* --- Layout Elements --- */
.section-title { border-top: 2px solid var(--red); padding: 8px 0 4px; margin: 25px 0 5px; font-weight: 700; text-transform: uppercase; font-size: 16px; clear: both; width: 100%; font-family: var(--font-head); color: #000; }
.section-title.first-block { border-top: 0; margin-top: 12px; padding-top: 0; }

.img-box { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #f8f8f8; margin-bottom: 12px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); position: relative; }
.img-box img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.meta { font-size: 11px; color: #757575; border-left: 2px solid var(--red); padding-left: 10px; display: flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--font-ui); }
.m-time { font-weight: 700; color: #444; font-size: 12px; }

/* --- Grids --- */
.hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 25px; }
.hero-grid .img-box { padding-bottom: 56.25% !important; height: 0 !important; }
.hero-grid .img-box img { position: absolute !important; top: 0; left: 0; height: 100% !important; }

.grid-news, .text-news, .list-news { display: grid; gap: 25px; margin-bottom: 20px; align-items: start; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.list-news .item { display: flex; gap: 15px; border-bottom: 1px solid var(--border); padding-bottom: 15px; align-items: center; }
.list-news .img-box { width: 140px !important; height: 90px !important; padding-bottom: 0 !important; flex: 0 0 140px !important; }

.item-important { border: 2px solid var(--important); padding: 10px; border-radius: 12px; background: #fff9f9; position: relative; }
.item-important h1, .item-important h3 { color: var(--important); }
.item-important::before { content: 'ВАЖЛИВО'; position: absolute; top: -10px; right: 10px; background: var(--important); color: #fff; font-size: 9px; padding: 2px 8px; border-radius: 4px; font-weight: 900; z-index: 10; }

/* --- Video Badges --- */
.video-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(255,0,0,0.85); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 5; }
.video-badge svg { width: 16px; height: 16px; fill: white; margin-left: 2px; }
.video-inline { display: inline-flex; align-items: center; justify-content: center; background: #ff0000; color: #fff; width: 20px; height: 20px; border-radius: 4px; vertical-align: middle; margin-top: -3px; margin-right: 5px; }
.video-inline svg { width: 12px; height: 12px; fill: white; }