/* главная: хабы этапа 08b (gtp_home08b.py) — только на / */
.oc8-jump{margin:4px 0 18px}
.oc8-jump a{display:inline-flex;align-items:center;gap:8px;background:var(--furze);color:var(--heather-deep);font:800 15px/1 "Nunito Sans",Arial,sans-serif;padding:12px 20px;border-radius:999px;text-decoration:none;box-shadow:0 6px 16px rgba(183,122,0,.25)}
.oc8-jump a:hover{background:#ffc94d;color:var(--heather-deep)}
.oc8-jump .oc8-i{width:18px;height:18px}
.oc8-i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.gtp-leaf>.oc8-hub{max-width:none}
.oc8-hub{margin:30px 0 34px;padding:24px 24px 20px;border-radius:12px;background:var(--limewash);border:1px solid var(--heather-line)}
.oc8-hub ul,.oc8-hub ol{list-style:none;margin:0;padding:0}
.oc8-hub li{margin:0;padding:0;text-indent:0!important}
.oc8-hub li::before,.oc8-hub li::marker{content:none!important}
.oc8-hub a{text-decoration:none;color:var(--basalt)}
.oc8-hub img{display:block;border-radius:0;max-width:100%}
.oc8-hub b{display:block;font:800 16px/1.25 "Nunito Sans",Arial,sans-serif;color:var(--heather-deep)}
.oc8-hub small{display:block;font-size:13.5px;line-height:1.45;color:var(--slate-mist);margin-top:3px}
.oc8-h{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 20px;margin-bottom:18px}
.oc8-k{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 "Open Sans",Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--furze-deep)}
.oc8-k .oc8-i{width:16px;height:16px}
.gtp-leaf .oc8-h h3{margin:6px 0 4px;font-size:22px;font-weight:900;color:var(--heather-deep)}
.gtp-leaf .oc8-h p{margin:0;font-size:15px;color:var(--slate-mist);max-width:560px}
.oc8-all{flex:none;font-weight:700;color:var(--sea-glass)!important;white-space:nowrap}
.oc8-all:hover{text-decoration:underline!important}
.gtp-leaf .oc8-tail{margin:14px 0 0;font-size:14px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.oc8-tail span{color:var(--slate-mist);font-weight:600}
.oc8-tail a{color:var(--sea-glass)!important;font-weight:700;border-bottom:1px solid currentColor}

/* тематическая плитка: знак на подложке + факт */
.oc8-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;padding:10px;text-align:center;background:linear-gradient(135deg,var(--heather),var(--heather-deep));color:#fff}
.oc8-art .oc8-i{width:34px;height:34px;color:var(--furze);stroke-width:1.5}
.oc8-hub .oc8-art b{color:#fff;font-size:13.5px;line-height:1.2}
.oc8-art--sea{background:linear-gradient(135deg,#12908a,var(--sea-glass))}
.oc8-art--sea .oc8-i{color:#fff}
.oc8-art--rose{background:linear-gradient(135deg,#d0506a,var(--rosehip))}
.oc8-art--rose .oc8-i{color:#ffe3a3}

/* 1. касса: строки */
.oc8--pay{background:var(--paper)}
.oc8-pay__th,.oc8-pay a{display:grid;grid-template-columns:92px minmax(0,.9fr) minmax(0,1.6fr) 18px;gap:16px;align-items:center}
.oc8-pay__th{padding:0 14px 8px;font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--slate-mist);border-bottom:2px solid var(--heather-line)}
.oc8-pay__th span:first-child{grid-column:1/3}
.oc8-pay__th span:first-child+span{display:none}
.oc8-pay li{border-bottom:1px solid var(--heather-line)}
.oc8-pay a{padding:10px 14px;transition:background .15s}
.oc8-pay a:hover{background:var(--furze-pale)}
.oc8-pay__lg{display:flex;align-items:center;justify-content:center;gap:4px;height:52px;border:1px solid var(--heather-line);border-radius:8px;background:#fff;padding:5px}
.oc8-pay__lg img{max-height:40px;width:auto;object-fit:contain}
.oc8-pay__lg--2 img{max-height:34px;max-width:40px}
.oc8-pay__m em{display:inline-block;margin-top:4px;font:600 11.5px/1 "Open Sans",Arial,sans-serif;font-style:normal;color:var(--sea-glass);background:var(--sea-glass-pale);padding:4px 8px;border-radius:999px}
.oc8-pay__d{font-size:14px;color:var(--slate-mist);line-height:1.45}
.oc8-pay__go{color:var(--furze-deep);font-weight:800}

/* 2. бонусы: купоны */
.oc8--bonus{background:var(--furze-pale);border-color:#f0dca8}
.oc8-cps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.oc8-cp{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);height:100%;background:#fff;border-radius:10px;box-shadow:0 1px 0 #ead7a6,0 6px 18px rgba(183,122,0,.10);overflow:hidden;transition:transform .15s}
.oc8-cp:hover{transform:translateY(-2px)}
.oc8-cp__s{position:relative;display:flex;align-items:center;justify-content:center;background:#f8f5ee;border-right:2px dashed #e6cf94}
.oc8-cp__s::before,.oc8-cp__s::after{content:"";position:absolute;right:-9px;width:16px;height:16px;border-radius:50%;background:var(--furze-pale)}
.oc8-cp__s::before{top:-8px}.oc8-cp__s::after{bottom:-8px}
.oc8-cp__s img{width:100%;height:100%;object-fit:cover}
.oc8-cp__b{padding:12px 14px 13px}
.oc8-cp__b em{display:block;font:700 11px/1 "Open Sans",Arial,sans-serif;font-style:normal;letter-spacing:.9px;text-transform:uppercase;color:var(--furze-deep);margin-bottom:5px}

/* 3. типы: медиасписок */
.oc8--types{background:var(--heather-soft)}
.oc8-tys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.oc8-ty{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;align-items:center;padding:8px;border-radius:10px;background:#fff;height:100%;transition:box-shadow .15s}
.oc8-ty:hover{box-shadow:0 8px 22px rgba(42,20,51,.12)}
.oc8-ty__ph{display:block;height:84px;border-radius:7px;overflow:hidden}
.oc8-ty__ph img{width:100%;height:100%;object-fit:cover}

/* 4. закон: реестр с плитками-фактами */
.oc8--law{background:var(--paper)}
.oc8-lws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.oc8-lws li{border-top:1px solid var(--heather-line)}
.oc8-lws li:nth-child(-n+2){border-top:0}
.oc8-lw{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0}
.oc8-lw .oc8-art{height:78px;border-radius:8px;padding:6px}
.oc8-lw .oc8-art .oc8-i{width:26px;height:26px}
.oc8-hub .oc8-lw .oc8-art b{font-size:12.5px}
.oc8-lw:hover b{color:var(--sea-glass)}

/* 5. провайдеры: тёмная стена логотипов */
.oc8--prov{background:var(--heather-deep);border-color:var(--heather-deep)}
.oc8--prov .gtp-leaf,.gtp-leaf .oc8--prov .oc8-h h3{color:#fff}
.gtp-leaf .oc8--prov .oc8-h p{color:#cdb8d6}
.oc8--prov .oc8-k{color:var(--furze)}
.oc8-pvs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.oc8-pv{display:block;height:100%;padding:10px 10px 14px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background .15s}
.oc8-pv:hover{background:rgba(255,255,255,.12)}
.oc8-pv__lg{display:flex;align-items:center;justify-content:center;height:86px;background:#fff;border-radius:7px;padding:10px 14px;margin-bottom:10px}
.oc8-pv__lg img{max-height:62px;width:auto;object-fit:contain}
.oc8-hub .oc8-pv b{color:#fff;padding:0 4px}
.oc8-hub .oc8-pv small{color:#cdb8d6;padding:0 4px}

/* 6. игры: мозаика, подпись под кадром */
.oc8--games{background:transparent;border:0;padding:0}
.oc8-gms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.oc8-gm a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--heather-line);border-radius:10px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.oc8-gm a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(42,20,51,.12)}
.oc8-gm__ph{display:block;aspect-ratio:4/3;overflow:hidden;background:#0b5d3b}
.oc8-gm__ph img{width:100%;height:100%;object-fit:cover}
.oc8-gm__ph img.oc8-fit{object-fit:contain}
.oc8-gm b{padding:10px 12px 0;font-size:15px}
.oc8-gm small{padding:0 12px 12px}
.oc8-gm--big{grid-column:span 2;grid-row:span 2}
.oc8-gm--big .oc8-gm__ph{aspect-ratio:auto;flex:1;min-height:200px}
.oc8-gm--big b{font-size:19px}
/* 1 большая (4 клетки) + 9 малых: последняя — полосой во всю ширину, без сироты */
.oc8-gm:last-child{grid-column:1/-1}
.oc8-gm:last-child a{display:grid;grid-template-columns:minmax(0,1fr) 3fr;grid-template-rows:auto 1fr;column-gap:0}
.oc8-gm:last-child .oc8-gm__ph{grid-row:1/3;aspect-ratio:auto;min-height:96px}
.oc8-gm:last-child b{padding:16px 16px 0;align-self:end}
.oc8-gm:last-child small{padding:2px 16px 16px}

/* 7. блог: крупная статья + строки */
.oc8-bl{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.oc8-bl__lead{display:grid;grid-template-columns:150px minmax(0,1fr);background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--heather-line)}
.oc8-bl__ph img{width:100%;height:100%;object-fit:cover;min-height:150px}
.oc8-bl__b{padding:14px 16px}
.oc8-bl__b em{display:block;font:700 11px/1 "Open Sans",Arial,sans-serif;font-style:normal;letter-spacing:.9px;text-transform:uppercase;color:var(--sea-glass);margin-bottom:6px}
.oc8-bl ul{display:grid;gap:10px}
.oc8-bl__r{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;padding:8px;background:#fff;border-radius:10px;border:1px solid var(--heather-line)}
.oc8-bl__th{display:block;width:72px;height:72px;border-radius:50%;overflow:hidden}
.oc8-bl__th img{width:100%;height:100%;object-fit:cover}
.oc8-bl__th .oc8-art{padding:4px;gap:2px}
.oc8-bl__th .oc8-art .oc8-i{width:22px;height:22px}
.oc8-hub .oc8-bl__th .oc8-art b{font-size:10px}
.oc8-bl__lead:hover b,.oc8-bl__r:hover b{color:var(--sea-glass)}
.gtp-leaf .oc8-cred{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--slate-mist)}
.oc8-cred a{color:inherit!important;text-decoration:underline!important}

@media (max-width:760px){
  .oc8-h{flex-direction:column;align-items:flex-start}
  .oc8-gms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oc8-pvs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oc8-cps,.oc8-tys,.oc8-lws,.oc8-bl{grid-template-columns:minmax(0,1fr)}
  .oc8-lws li:nth-child(2){border-top:1px solid var(--heather-line)}
  .oc8-pay__th{display:none}
  .oc8-pay a{grid-template-columns:72px minmax(0,1fr);gap:4px 12px;padding:10px 4px}
  .oc8-pay__lg{grid-row:span 2;height:48px}
  .oc8-pay__go{display:none}
}
@media (max-width:640px){
  .oc8-hub{padding:16px 14px 14px;margin:24px 0 28px}
  .oc8--games{padding:0}
  .gtp-leaf .oc8-h h3{font-size:19px}
  .oc8-ty{grid-template-columns:100px minmax(0,1fr);gap:10px}
  .oc8-ty__ph{height:70px}
  .oc8-lw{grid-template-columns:96px minmax(0,1fr)}
  .oc8-cp{grid-template-columns:84px minmax(0,1fr)}
  .oc8-gms{gap:10px}
  .oc8-gm b{font-size:14px;padding:8px 10px 0}
  .oc8-gm small{padding:0 10px 10px;font-size:12.5px}
  .oc8-gm--big .oc8-gm__ph{min-height:160px}
  .oc8-pv__lg{height:70px}
  .oc8-bl__lead{grid-template-columns:110px minmax(0,1fr)}
}
