/* === oci4:aux === casinojournal.org */
/* Оглавление (.oc4-toc) + блок хаб-ссылок (.oc4-hub). Ставятся одним узлом .oc4-aux
   под интро, над витриной, только на страницах рейтинга. Снять правку = убрать этот
   файл и узлы .oc4-aux из разметки. Отступ от рамки плашки до текста 16px: рамка
   съедает 1px, поэтому padding у summary 18, а не 14.

   Все правила пишутся от .oc4-aux. Тема донора задаёт вид через «класс + тег»
   (.space-page-body a, … h2, … ol, … details>summary) — это весомее голого класса,
   и без обёртки блок получает чужое подчёркивание, размер заголовка и маркеры
   списка. Два класса в селекторе перебивают такие правила без !important. */

.oc4-aux{margin:0;font-family:inherit}
.oc4-aux *{box-sizing:border-box}
.oc4-anchor{display:block;height:0;overflow:hidden}

/* ── оглавление ── */
.oc4-aux .oc4-toc{margin:12px 0 0;background:#fff;border:1px solid #E2C9B3;
  border-radius:2px;overflow:hidden}
.oc4-aux .oc4-toc>summary{display:flex;align-items:center;gap:10px;min-height:46px;
  padding:0 18px;cursor:pointer;list-style:none;background:#FBEFE4;color:#1B1A17;
  font-family:'Old Standard TT',Georgia,'Times New Roman',serif;font-size:16px;font-weight:600;letter-spacing:.3px;
  text-transform:none;border-bottom:1px solid transparent}
.oc4-aux .oc4-toc>summary::-webkit-details-marker{display:none}
.oc4-aux .oc4-toc>summary::after{content:"";margin-left:auto;width:8px;height:8px;
  flex:0 0 auto;border-right:2px solid #1B1A17;border-bottom:2px solid #1B1A17;
  transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.oc4-aux .oc4-toc[open]>summary{border-bottom-color:#E2C9B3}
.oc4-aux .oc4-toc[open]>summary::after{transform:rotate(-135deg) translateY(2px)}
.oc4-aux .oc4-toc ol{margin:0;padding:10px 16px 14px 34px;columns:2;column-gap:28px;
  font-size:15px;line-height:1.45;list-style:decimal outside}
.oc4-aux .oc4-toc li{margin:0 0 6px;break-inside:avoid;color:#5D554C}
.oc4-aux .oc4-toc li::marker{font-weight:400}
.oc4-aux .oc4-toc a{color:#1638A3;text-decoration:none;
  border-bottom:1px solid rgba(41,65,86,.25)}
.oc4-aux .oc4-toc a:hover{color:#1B1A17;border-bottom-color:#B3161F}

/* ── блок хаб-ссылок ── */
.oc4-aux .oc4-hub{margin:14px 0 0}
.oc4-aux .oc4-hub__t{display:flex;align-items:baseline;gap:12px;width:auto;
  margin:0 0 8px;font-size:11.5px;font-weight:650;letter-spacing:1.6px;
  line-height:1.3;text-transform:uppercase;color:#5D554C;font-family:'Old Standard TT',Georgia,'Times New Roman',serif}
.oc4-aux .oc4-hub__t::after{content:"";flex:1 1 auto;height:1px;background:#E2C9B3}
.oc4-aux .oc4-hub__g{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;
  padding:0 0 6px;scroll-snap-type:x proximity;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch}
.oc4-aux .oc4-hub__a{flex:0 0 auto;scroll-snap-align:start;width:172px;
  overflow:hidden;background:#fff;border:1px solid #E2C9B3;
  border-left:3px solid #B3161F;border-radius:2px;color:#1B1A17;
  text-decoration:none}
.oc4-aux .oc4-hub__a:hover{color:#1B1A17;text-decoration:none;border-color:#1B1A17;
  border-left-color:#B3161F}
.oc4-aux .oc4-hub__art{display:block;width:100%;height:108px;object-fit:cover}
/* Высота подписи — ровно две строки, отступы вынесены в margin: -webkit-line-clamp
   ставит многоточие, но третью строку всё равно размечает, а overflow режет по
   padding-бокса — нижний padding показал бы её край. */
.oc4-aux .oc4-hub__c{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;height:calc(2*1.28em);margin:8px 11px 10px;padding:0;font-size:14px;
  font-weight:600;line-height:1.28;color:#1B1A17;text-decoration:none}

@media (max-width:780px){
  .oc4-aux .oc4-toc{margin-top:8px}
  .oc4-aux .oc4-toc>summary{min-height:40px;padding:0 14px;font-size:15px}
  .oc4-aux .oc4-toc ol{columns:1;padding:10px 14px 12px 30px}
  .oc4-aux .oc4-hub{margin-top:8px}
  .oc4-aux .oc4-hub__a{width:140px}
  .oc4-aux .oc4-hub__art{height:88px}
  .oc4-aux .oc4-hub__c{margin:4px 8px 6px;font-size:12.5px;line-height:1.2;
    height:calc(2*1.2em)}
}

/* ── облик: ряд = poster ── */
.oc4-aux .oc4-hub__g{gap:14px;padding:0 0 8px}
.oc4-aux .oc4-hub__a{width:172px;background:transparent;border:0;overflow:visible}
.oc4-aux .oc4-hub__a:hover{border:0}
.oc4-aux .oc4-hub__art{height:108px;border-radius:2px}
.oc4-aux .oc4-hub__a:hover .oc4-hub__art{box-shadow:0 6px 20px rgba(15,32,51,.18)}
.oc4-aux .oc4-hub .oc4-hub__c{height:auto;max-height:calc(2*1.3em);margin:9px 2px 0;
  text-align:center;line-height:1.3}
@media (max-width:780px){
  .oc4-aux .oc4-hub__g{gap:10px}
  .oc4-aux .oc4-hub__a{width:140px}
  .oc4-aux .oc4-hub__art{height:88px}
  .oc4-aux .oc4-hub .oc4-hub__c{height:auto;max-height:calc(2*1.22em);margin:7px 2px 0;
    font-size:12.5px;line-height:1.22}
}

/* ── облик: оглавление = inset ── */
.oc4-aux .oc4-toc{background:#FBEFE4;border:1px solid #E2C9B3;
  border-left:3px solid #1B1A17;border-radius:0}
.oc4-aux .oc4-toc>summary{background:transparent}
.oc4-aux .oc4-toc ol{columns:1}
@media (max-width:780px){
  .oc4-aux .oc4-toc ol{columns:1}
}

/* ── облик: заголовок = plain ── */
.oc4-aux .oc4-hub__t{font-size:12px;font-weight:700;letter-spacing:0;
  text-transform:none;color:#B3161F}
.oc4-aux .oc4-hub__t::after{content:none;display:none}

/* === каркас crn (газетный лист) =======================================
   Блок встаёт в донорскую идиому «врезки на листе» (.crn-correlati): черта
   filo сверху, под ней красная капитель Montserrat. Без черты блок висел бы
   между интро и витриной ничем не отделённый — у донора так не делается
   нигде. Подпись карточки — голос .crn-giochi span: Old Standard TT 16px/700
   слева, не по центру, как в вариации poster.                            */
.oc4-aux{margin:1.8em 0;padding-top:12px;border-top:1px solid #E2C9B3;
  text-align:left}

/* оглавление: .crn-indice — плита велины с чёрной полосой, без рамки, плюс
   красные «+»/«–» вместо шеврона шаблона. Выходит на одной странице из 33. */
.oc4-aux .oc4-toc{margin:0;border:0;border-left:3px solid #1B1A17;
  background:#FBEFE4;border-radius:0}
.oc4-aux .oc4-toc>summary{min-height:46px;padding:0 16px;
  font-family:Montserrat,Arial,sans-serif;font-size:14px;font-weight:700;
  letter-spacing:0;line-height:1.2}
.oc4-aux .oc4-toc>summary::after{content:"+";width:auto;height:auto;border:0;
  transform:none;font:400 20px/1 Montserrat,Arial,sans-serif;color:#B3161F}
.oc4-aux .oc4-toc[open]>summary::after{content:"\2013";transform:none}
.oc4-aux .oc4-toc ol{margin:0;columns:1;padding:0 18px 14px 40px;
  font-size:15.5px;line-height:1.5}
.oc4-aux .oc4-toc a{color:#1D46C8;border-bottom:0;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.oc4-aux .oc4-toc a:hover{color:#B3161F;border-bottom:0}

/* ряд ссылок */
.oc4-aux .oc4-hub{margin:0}
.oc4-aux .oc4-toc+.oc4-hub{margin-top:16px}
.oc4-aux .oc4-hub__t{display:block;margin:0 0 8px;padding-top:0;border-top:0;
  font-family:Montserrat,Arial,sans-serif;font-size:12px;font-weight:700;
  line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  color:#B3161F}
.oc4-aux .oc4-hub__a:hover .oc4-hub__art{box-shadow:none}
.oc4-aux .oc4-hub__a:hover .oc4-hub__c{color:#B3161F}
.oc4-aux .oc4-hub .oc4-hub__c{margin:7px 0 0;text-align:left;
  font-family:'Old Standard TT',Georgia,'Times New Roman',serif;font-size:16px;font-weight:700;line-height:1.25;
  max-height:calc(2*1.25em);color:#1B1A17}
@media (max-width:780px){
 .oc4-aux{margin:1.4em 0;padding-top:10px}
 .oc4-aux .oc4-toc>summary{min-height:42px;padding:0 13px;font-size:13.5px}
 .oc4-aux .oc4-toc ol{padding:0 14px 12px 34px;font-size:15px}
 .oc4-aux .oc4-toc+.oc4-hub{margin-top:13px}
 .oc4-aux .oc4-hub__t{margin-bottom:7px;font-size:11.5px}
 .oc4-aux .oc4-hub .oc4-hub__c{margin:6px 0 0;font-size:14px;line-height:1.22;
  max-height:calc(2*1.22em)}
}