/* ============================================================
   Mvtools News — mvtools_news.css
   Author: Jey | mv-tools.com.ua
   ============================================================ */

:root {
  --mvn-font-family:         inherit;
  --mvn-bg:                  #ffffff;

  /* Header */
  --mvn-header-padding:      0 0 20px 0;
  --mvn-title-size:          52px;
  --mvn-title-weight:        700;
  --mvn-title-color:         #111111;
  --mvn-desc-size:           17px;
  --mvn-desc-color:          #111111;

  /* Arrows */
  --mvn-arrow-active:        #111111;
  --mvn-arrow-disabled:      #bbbbbb;
  --mvn-arrow-btn-size:      50px;

  /* Card */
  --mvn-card-radius:         10px;
  --mvn-img-ratio:           66%;   /* height/width ≈ 3:2 */
  --mvn-img-bg:              #e8e8e8;
  --mvn-title-card-size:     15px;
  --mvn-title-card-weight:   400;
  --mvn-title-card-color:    #111111;
  --mvn-title-card-line:     1.4;
  --mvn-title-card-mt:       12px;

  /* Progress */
  --mvn-progress-fill:       #111111;
  --mvn-progress-height:     3px;
  --mvn-progress-radius:     2px;
}

/* ── Wrapper ───────────────────────────────────────────── */
.mvtnews-wrap {
  font-family: var(--mvn-font-family);
  background:  var(--mvn-bg);
  width:       100%;
  box-sizing:  border-box;
}

/* ── Header row ────────────────────────────────────────── */
.mvtnews-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--mvn-header-padding);
}
.mvtnews-header-left {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}
.mvtnews-title {
  font-size:   var(--mvn-title-size);
  font-weight: var(--mvn-title-weight);
  color:       var(--mvn-title-color);
  margin:      0;
  line-height: 1.15;
}
.mvtnews-desc-link {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  font-size:       var(--mvn-desc-size);
  font-weight:     700;
  color:           var(--mvn-desc-color);
  text-decoration: none;
  white-space:     nowrap;
  transition:      opacity 0.2s;
}
.mvtnews-desc-link:hover { opacity: 0.7; }
.mvtnews-arrow-icon {
  display:    inline-block;
  width:      15px;
  height:     15px;
  flex-shrink:0;
}
.mvtnews-desc {
  font-size:   var(--mvn-desc-size);
  font-weight: 700;
  color:       var(--mvn-desc-color);
  margin:      0;
  white-space: nowrap;
}

/* ── Arrow navigation ──────────────────────────────────── */
.mvtnews-nav {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}
.mvtnews-nav-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--mvn-arrow-btn-size);
  height:          var(--mvn-arrow-btn-size);
  border:          none;
  background:      transparent;
  cursor:          pointer;
  padding:         0;
  transition:      color 0.2s;
  user-select:     none;
  color:           var(--mvn-arrow-active);
}
.mvtnews-nav-btn.mvtnews-disabled {
  color:  var(--mvn-arrow-disabled);
  cursor: default;
}
.mvtnews-nav-btn svg {
  width:           31px;
  height:          31px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1;
  stroke-linecap:  round;
  stroke-linejoin: round;
}
.mvtnews-nav-divider {
  width:      1px;
  height:     20px;
  background: #cccccc;
  flex-shrink:0;
  align-self: center;
  margin:     0 2px;
}

/* ── Swiper ────────────────────────────────────────────── */
.mvtnews-swiper {
  width:          100%;
  overflow:       hidden;
  padding-bottom: 24px;
}

/* ── Card ──────────────────────────────────────────────── */
.mvtnews-slide {
  box-sizing: border-box;
}

.mvtnews-card {
  display:         block;
  text-decoration: none;
  color:           inherit;
}
.mvtnews-card:hover .mvtnews-img-wrap img {
  transform: scale(1.04);
}
.mvtnews-card:hover .mvtnews-card-title {
  color: #333333;
}

/* Image container — fixed aspect ratio 3:2 */
.mvtnews-img-wrap {
  position:      relative;
  width:         100%;
  padding-top:   var(--mvn-img-ratio);
  border-radius: var(--mvn-card-radius);
  overflow:      hidden;
  background:    var(--mvn-img-bg);
}
.mvtnews-img-wrap img {
  position:   absolute;
  top:        0; left: 0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.35s ease;
}
.mvtnews-img-placeholder {
  position:   absolute;
  top: 0; left: 0;
  width:  100%;
  height: 100%;
  background: var(--mvn-img-bg);
}

/* Article title below image */
.mvtnews-card-title {
  font-size:   var(--mvn-title-card-size);
  font-weight: var(--mvn-title-card-weight);
  color:       var(--mvn-title-card-color);
  line-height: var(--mvn-title-card-line);
  margin:      var(--mvn-title-card-mt) 0 0;
  transition:  color 0.2s;
}

/* ── Progress scrubber ─────────────────────────────────── */
.mvtnews-progress-wrap {
  position:   relative;
  height:     var(--mvn-progress-height);
  margin-top: 6px;
  padding:    8px 0;
  box-sizing: content-box;
  background: transparent;
  cursor:     pointer;
}
.mvtnews-progress-fill {
  position:       absolute;
  top:            50%;
  transform:      translateY(-50%);
  height:         var(--mvn-progress-height);
  background:     var(--mvn-progress-fill);
  border-radius:  var(--mvn-progress-radius);
  left:           0;
  transition:     left 0.35s ease;
  pointer-events: none;
}
.mvtnews-progress-wrap.dragging .mvtnews-progress-fill {
  transition: none;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 991px) {
  .mvtnews-title { font-size: 28px; }
}
@media (max-width: 767px) {
  .mvtnews-title     { font-size: 22px; }
  .mvtnews-desc      { display: none; }
  .mvtnews-desc-link { display: none; }
}