/* ==========================================================================
   rating.css - блок рейтинга milanocitymarathon.it, вариант «Tabellone».

   Файл НАМЕРЕННО лежит отдельно и не участвует ни в какой сборке
   (css/output.css, инлайн из includes/head-assets.php).
   Подключается напрямую с ?v=filemtime - правки видны сразу.
   ========================================================================== */

.mc-rating{
  --mc-ink:#171216;
  --mc-red:#c9261f;
  --mc-red2:#ff3131;
  --mc-gold:#f4b400;
  --mc-mut:#6b6469;
  --mc-mut2:#a29a9f;
  --mc-hair:rgba(23,18,22,.09);

  display:block;
  margin:30px 0 38px;
  text-align:left;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--mc-ink);
  -webkit-text-size-adjust:100%;
          text-size-adjust:100%;
}

/* ---------- сброс типографики темы ----------
   у темы свои размеры и отступы на p/li/dl/dd, без сброса они перебивают блок */
.mc-rating p,.mc-rating ul,.mc-rating ol,.mc-rating li,
.mc-rating dl,.mc-rating dt,.mc-rating dd,
.mc-rating div,.mc-rating span,.mc-rating a,.mc-rating u,.mc-rating b,
.mc-rating em,.mc-rating i,.mc-rating strong,.mc-rating code{
  font-size:inherit;line-height:inherit;margin:0;padding:0;color:inherit;
}
.mc-rating ul,.mc-rating ol{list-style:none}
.mc-rating a{text-decoration:none}
.mc-rating u{text-decoration:none}
.mc-rating *{box-sizing:border-box}

.mc-rating .mc-rating__title{
  margin:0 0 16px;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#fff;
}

/* ==========================================================================
   Табло
   ========================================================================== */
.mc-rating .mc-board{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 34px -20px rgba(0,0,0,.55);
}

.mc-rating .mc-head,
.mc-rating .mc-row{
  display:grid;
  grid-template-columns:54px 124px minmax(0,1fr) 158px;
  gap:20px;
  align-items:center;
}

.mc-rating .mc-head{
  padding:11px 24px;
  border-bottom:2px solid var(--mc-ink);
}
.mc-rating .mc-head u{
  font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:#8c848a;
}

.mc-rating .mc-row{
  padding:18px 24px;
  border-bottom:1px solid var(--mc-hair);
  transition:background .2s ease;
}
.mc-rating .mc-row:last-child{border-bottom:0}
.mc-rating .mc-row:hover{background:#faf8f7}
.mc-rating .mc-row--1{background:#fffdf6}
.mc-rating .mc-row--1:hover{background:#fffaec}

/* ---------- позиция ---------- */
.mc-rating .mc-pos{text-align:left}
.mc-rating .mc-pos b{
  display:block;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:24px;font-weight:700;line-height:1;letter-spacing:-.05em;color:var(--mc-red);
}
/* Оценка появится сама, как только ratingValue заполнят в Strapi. */
.mc-rating .mc-score{
  display:block;margin-top:5px;font-size:13px;font-weight:700;letter-spacing:-.02em;color:var(--mc-ink);
}
.mc-rating .mc-score__n{display:block;margin-top:2px;font-size:9px;line-height:1.3;color:var(--mc-mut2)}

/* ---------- логотип ---------- */
.mc-rating .mc-logo{height:38px;display:flex;align-items:center}
.mc-rating .mc-logo a{display:flex;align-items:center;max-width:100%;max-height:100%}
.mc-rating .mc-logo img{max-width:100%;max-height:38px;object-fit:contain;display:block}
.mc-rating .mc-logo--text{font-size:13px;font-weight:700;color:var(--mc-ink)}

/* ---------- середина ---------- */
.mc-rating .mc-mid{min-width:0}

.mc-rating .mc-name{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:4px;
  font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mc-mut2);
}
.mc-rating .mc-name em{
  font-style:normal;font-size:9px;letter-spacing:.1em;border-radius:4px;padding:3px 7px;
}
.mc-rating .mc-name .mc-b1{background:var(--mc-red);color:#fff}
.mc-rating .mc-name .mc-b2{border:1px solid var(--mc-hair);color:var(--mc-mut)}

.mc-rating .mc-offer{
  font-size:16.5px;font-weight:700;line-height:1.3;letter-spacing:-.018em;color:var(--mc-ink);
}
.mc-rating .mc-offer strong,.mc-rating .mc-offer b{font-weight:700}

.mc-rating .mc-special{
  margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--mc-red);font-weight:600;
}

.mc-rating .mc-promo{
  margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--mc-mut);
}
.mc-rating .mc-promo u{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mc-mut2)}
.mc-rating .mc-promo code{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:11.5px;font-weight:700;color:var(--mc-ink);
  border:1px dashed rgba(23,18,22,.28);border-radius:5px;padding:3px 8px;
}

/* фичи - засечка золотом перед каждой */
.mc-rating .mc-feat{
  margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--mc-mut);
}
.mc-rating .mc-feat span{display:inline-flex;align-items:center;gap:7px}
.mc-rating .mc-feat span::before{
  content:'';width:12px;height:1px;background:var(--mc-gold);flex:0 0 12px;
}

.mc-rating .mc-specialfeat{margin-top:7px;font-size:12px;line-height:1.5;color:var(--mc-mut)}

/* характеристики - появятся, когда заполнят advantages */
.mc-rating .mc-spec{
  margin-top:11px;display:flex;flex-wrap:wrap;gap:8px 22px;
}
.mc-rating .mc-kv{min-width:0}
.mc-rating .mc-kv dt{
  display:flex;align-items:center;gap:5px;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mc-mut2);
  white-space:nowrap;
}
.mc-rating .mc-kv dt svg{width:12px;height:12px;flex:0 0 12px;color:var(--mc-red);opacity:.75}
.mc-rating .mc-kv dd{margin-top:2px;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25}

/* платёжки */
.mc-rating .mc-pay{
  margin-top:10px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:11px;color:var(--mc-mut);
}
.mc-rating .mc-pay u{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mc-mut2)}
.mc-rating .mc-pay span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mc-rating .mc-pay svg{width:12px;height:12px;flex:0 0 12px;color:var(--mc-red);opacity:.75}

.mc-rating .mc-extra{margin-top:9px;font-size:12px;line-height:1.55;color:var(--mc-mut)}

/* ---------- кнопка ---------- */
.mc-rating .mc-cta{display:flex;flex-direction:column;gap:7px}
.mc-rating .mc-btn{
  display:block;text-align:center;background:var(--mc-red2);color:#fff;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;
  padding:12px 14px;border-radius:999px;
  box-shadow:0 8px 18px -9px rgba(255,49,49,.95);
  transition:transform .22s ease,box-shadow .22s ease;
}
.mc-rating .mc-btn:hover{transform:translateY(-2px);box-shadow:0 13px 24px -9px rgba(255,49,49,1);color:#fff}
.mc-rating .mc-rev{
  text-align:center;font-size:11px;color:var(--mc-red);
  text-decoration:underline;text-underline-offset:3px;
}
.mc-rating .mc-rg{text-align:center;font-size:9.5px;line-height:1.35;color:var(--mc-mut2)}
.mc-rating .mc-rg p,.mc-rating .mc-rg span,.mc-rating .mc-rg div{font-size:9.5px;line-height:1.35;display:inline}

.mc-rating .mc-after{margin-top:16px;font-size:14px;line-height:1.6;color:#fff}
.mc-rating .mc-after p{margin-bottom:10px;font-size:14px;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  .mc-rating .mc-btn,.mc-rating .mc-row{transition:none}
  .mc-rating .mc-btn:hover{transform:none}
}

/* ==========================================================================
   Планшет
   ========================================================================== */
@media (max-width:1024px){
  .mc-rating .mc-head,
  .mc-rating .mc-row{grid-template-columns:46px 104px minmax(0,1fr) 140px;gap:16px;padding-left:18px;padding-right:18px}
  .mc-rating .mc-offer{font-size:15.5px}
  .mc-rating .mc-pos b{font-size:21px}
}

/* ==========================================================================
   Телефон: позиция и логотип встают одной строкой, дальше текст, дальше кнопка
   ========================================================================== */
@media (max-width:720px){
  .mc-rating{margin:20px 0 28px}
  .mc-rating .mc-rating__title{font-size:21px;margin-bottom:12px}
  .mc-rating .mc-board{border-radius:14px}

  .mc-rating .mc-head{display:none}

  /* Кнопка уходит вправо и держит обе строки - так карточка теряет
     целую строку по высоте, и в первый экран 375x812 попадает больше. */
  .mc-rating .mc-row{
    grid-template-columns:34px minmax(0,1fr) 102px;
    gap:5px 10px;
    padding:11px 14px;
    align-items:center;
  }

  .mc-rating .mc-pos{grid-column:1;grid-row:1}
  .mc-rating .mc-pos b{font-size:18px}
  .mc-rating .mc-score{margin-top:2px;font-size:11.5px}
  .mc-rating .mc-score__n{display:none}

  .mc-rating .mc-logo{grid-column:2;grid-row:1;height:30px}
  .mc-rating .mc-logo img{max-height:30px}

  .mc-rating .mc-mid{grid-column:1/3;grid-row:2}
  .mc-rating .mc-name{margin-bottom:3px;font-size:9px;letter-spacing:.16em}
  .mc-rating .mc-offer{font-size:14.5px;line-height:1.26}
  .mc-rating .mc-feat{margin-top:6px;gap:4px 12px;font-size:11px}
  .mc-rating .mc-feat span{gap:6px}
  .mc-rating .mc-feat span::before{width:9px;flex:0 0 9px}
  .mc-rating .mc-promo{margin-top:6px}
  .mc-rating .mc-spec{margin-top:8px;gap:6px 16px}
  .mc-rating .mc-kv dd{font-size:12.5px}
  .mc-rating .mc-pay{margin-top:7px;font-size:10.5px}
  .mc-rating .mc-extra{margin-top:7px;font-size:11.5px}

  .mc-rating .mc-cta{grid-column:3;grid-row:1/3;align-self:center;gap:5px}
  .mc-rating .mc-btn{padding:10px 8px;font-size:12px;letter-spacing:0}
  .mc-rating .mc-rev{font-size:10px}
  .mc-rating .mc-rg{font-size:8.5px}
  .mc-rating .mc-rg p,.mc-rating .mc-rg span,.mc-rating .mc-rg div{font-size:8.5px}

  /* ---------- первый экран ----------
     ТЗ: первая карточка целиком, вторая хотя бы частично при 375x812.
     Тема объявляет отступы позже и с !important - поднимаем специфичность. */
  body main.grow{padding-top:112px !important}
  body .title.mb-\[50px\]{margin-bottom:14px !important}
  body h1.title{font-size:25px !important;line-height:1.15 !important}
  body h2.smallTitle{font-size:22px !important;line-height:1.2 !important;margin-bottom:8px !important}
  body .mc-rating{margin-top:8px !important}
}

@media (max-width:400px){
  .mc-rating .mc-row{grid-template-columns:30px minmax(0,1fr) 94px;padding:10px 12px}
  .mc-rating .mc-offer{font-size:14px}
  .mc-rating .mc-feat{font-size:10.5px}
  .mc-rating .mc-btn{font-size:11.5px;padding:9px 6px}
}