/* oce-hm — хабы главной onlinecasinoexpert.net (ЭТАП 08b). Палитра «Nattblå» из oce.css.
   Подключается только на главной; донорские li:before / text-indent гасятся внутри блока. */
body .oce-hm{margin:30px 0 34px;padding:0;clear:both;box-sizing:border-box;max-width:100%}
body .oce-hm *{box-sizing:border-box}
body .oce-hm ul,body .oce-hm ol{list-style:none;margin:0;padding:0}
body .oce-hm li{margin:0;padding:0;text-indent:0;background:none}
body .oce-hm li:before,body .oce-hm li:after{content:none!important;display:none!important}
body .oce-hm a{text-decoration:none;color:inherit}
body .oce-hm img{display:block;width:100%;height:auto;max-width:100%;border:0}
body .oce-hm h2{margin:0 0 10px}
body .oce-hm>p{margin:0 0 16px}
.oce-hm__hd{margin:0 0 16px;border-left:4px solid var(--oce-orange);padding:2px 0 2px 14px}
.oce-hm__k{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--oce-orange-dk)}
body .oce-hm__hd h3{font-size:21px;line-height:1.25;margin:3px 0 0;color:var(--oce-navy)}
body .oce-hm p.oce-hm__l{margin:6px 0 0;font-size:15px;color:var(--oce-mut)}
.oce-hm__b{display:block;min-width:0}
.oce-hm__b b{display:block;font-size:16px;line-height:1.3;color:var(--oce-navy)}
.oce-hm__b i{display:block;font-style:normal;font-size:14px;line-height:1.5;color:var(--oce-mut);margin-top:3px}
body .oce-hm p.oce-hm__all{margin:14px 0 0;text-align:right}
body .oce-hm p.oce-hm__all a{font-weight:700;font-size:15px;color:var(--oce-orange-dk)}
body .oce-hm p.oce-hm__all a:hover{text-decoration:underline}
.oce-hm__ico{width:30px;height:30px;flex:none}
body .oce-hm a:focus-visible{outline:3px solid var(--oce-orange);outline-offset:2px}

/* 1 · ведущая карточка + список */
.oce-hm__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.oce-hm__lead{display:block;background:var(--oce-navy);border-radius:12px;overflow:hidden}
.oce-hm__lead img{aspect-ratio:3/2;object-fit:cover}
.oce-hm__lead .oce-hm__b{padding:16px 18px 18px}
.oce-hm__lead .oce-hm__b b{color:#fff;font-size:19px}
.oce-hm__lead .oce-hm__b i{color:#c9d2df}
.oce-hm__lead em{display:inline-block;margin-top:12px;font-style:normal;font-weight:700;font-size:14px;color:#fff;background:var(--oce-orange-dk);padding:7px 14px;border-radius:6px}
.oce-hm__lead:hover em{background:var(--oce-orange)}
.oce-hm__rows li+li{border-top:1px solid var(--oce-line)}
.oce-hm__row{display:flex;gap:12px;align-items:flex-start;padding:10px 4px}
.oce-hm__ri{width:26px;height:26px;flex:none;color:var(--oce-orange);margin-top:2px}
.oce-hm__row .oce-hm__b b{font-size:15px}
.oce-hm__row .oce-hm__b i{font-size:13.5px}
.oce-hm__row:hover b{color:var(--oce-orange-dk)}

/* 2 · мозаика с подписью поверх кадра */
.oce-hm__mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:150px;gap:8px;grid-auto-flow:dense}
.oce-hm__mosaic li.oce-hm__big{grid-column:span 2;grid-row:span 2}
.oce-hm__mosaic li:last-child{grid-column:span 2}
.oce-hm__tile{position:relative;display:block;height:100%;border-radius:10px;overflow:hidden;background:var(--oce-navy-dk)}
.oce-hm__tile img{height:100%;object-fit:cover;transition:transform .35s}
.oce-hm__tile:hover img{transform:scale(1.04)}
.oce-hm__cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(14,26,46,.92))}
.oce-hm__cap small{display:block;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#f6b483}
.oce-hm__cap b{display:block;font-size:16px;line-height:1.2;color:#fff}
.oce-hm__big .oce-hm__cap b{font-size:24px}

/* 3 · горизонтальная лента событий */
.oce-hm__strip{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:2px 2px 8px}
.oce-hm__strip ul{display:flex;gap:14px;width:max-content}
.oce-hm__strip li{width:250px;scroll-snap-align:start}
.oce-hm__card{display:block;height:100%;background:#fff;border:1px solid var(--oce-line);border-radius:10px;overflow:hidden}
.oce-hm__card img{aspect-ratio:3/2;object-fit:cover}
.oce-hm__card .oce-hm__b{padding:12px 14px 14px}
.oce-hm__card:hover{border-color:var(--oce-orange)}

/* 4 · тематические плитки */
.oce-hm__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.oce-hm__art{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--oce-line);border-radius:10px;overflow:hidden}
.oce-hm__art:hover{border-color:var(--oce-orange)}
.oce-hm__pan{display:flex;align-items:center;justify-content:center;height:92px;color:#fff}
.oce-hm__pan .oce-hm__ico{width:44px;height:44px}
.oce-hm__pan--0{background:var(--oce-navy)}
.oce-hm__pan--1{background:var(--oce-orange-dk)}
.oce-hm__pan--2{background:#2d4a73}
.oce-hm__pan--c{aspect-ratio:3/2;height:auto;background:linear-gradient(135deg,var(--oce-navy),#2d4a73)}
.oce-hm__art .oce-hm__b{padding:12px 14px 14px}

/* 5 · медиасписок: кадр слева, список справа */
.oce-hm__media{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:18px;align-items:start}
.oce-hm__feat{display:block;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--oce-line)}
.oce-hm__feat img{aspect-ratio:4/3;object-fit:cover}
.oce-hm__feat .oce-hm__b{padding:14px 16px 16px}
.oce-hm__feat:hover b{color:var(--oce-orange-dk)}
.oce-hm__media ul{display:grid;gap:8px}
.oce-hm__med{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--oce-bg);border-radius:8px}
.oce-hm__med:hover{background:#eceff4}
.oce-hm__dot{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--oce-navy);color:#fff}
.oce-hm__dot .oce-hm__ico{width:22px;height:22px}
.oce-hm__med .oce-hm__b b{font-size:15px}
.oce-hm__med .oce-hm__b i{font-size:13.5px}

/* 6 · касса: логотип · факт · ссылка */
.oce-hm__cashier{border:1px solid var(--oce-line);border-radius:12px;overflow:hidden;background:#fff}
.oce-hm__cashier li+li{border-top:1px solid var(--oce-line)}
.oce-hm__cash{display:grid;grid-template-columns:132px 110px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 16px}
.oce-hm__cash:hover{background:var(--oce-bg)}
.oce-hm__plate{display:flex;align-items:center;justify-content:center;height:56px;background:#fff;border:1px solid var(--oce-line);border-radius:8px;padding:4px 8px}
.oce-hm__plate img.oce-hm__logo{width:auto;max-width:100%;max-height:46px}
.oce-hm__cash>b{font-size:16px;color:var(--oce-navy)}
.oce-hm__cash>i{font-style:normal;font-size:14px;line-height:1.5;color:var(--oce-mut)}
.oce-hm__cash>em{font-style:normal;font-weight:700;font-size:14px;color:var(--oce-orange-dk);white-space:nowrap}
.oce-hm__cash:hover>em{text-decoration:underline}

/* 7 · нумерованный курс */
.oce-hm__course{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;counter-reset:none}
.oce-hm__step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--oce-line);border-radius:10px;background:#fff;height:100%}
.oce-hm__step:hover{border-color:var(--oce-orange)}
.oce-hm__n{flex:none;font-weight:800;font-size:20px;line-height:1;color:var(--oce-orange-dk);min-width:28px;padding-top:4px}
.oce-hm__step .oce-hm__ico{width:28px;height:28px;color:var(--oce-navy);margin-top:1px}
.oce-hm__step .oce-hm__b b{font-size:15px}
.oce-hm__step .oce-hm__b i{font-size:13.5px}

/* 8 · сетка фото-карточек */
.oce-hm__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.oce-hm__ph{display:block;height:100%;background:#fff;border:1px solid var(--oce-line);border-radius:10px;overflow:hidden}
.oce-hm__ph img{aspect-ratio:3/2;object-fit:cover}
.oce-hm__ph .oce-hm__pan .oce-hm__ico{width:52px;height:52px}
.oce-hm__ph .oce-hm__b{padding:12px 14px 14px}
.oce-hm__ph:hover{border-color:var(--oce-orange)}

/* 9 · разворот: большая карточка + малые */
.oce-hm__spread{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.oce-hm__spread ul{display:contents}
.oce-hm__hero{grid-column:span 2;grid-row:span 2;position:relative;display:block;border-radius:12px;overflow:hidden;background:var(--oce-navy-dk);min-height:340px}
.oce-hm__hero img{position:absolute;inset:0;height:100%;object-fit:cover}
.oce-hm__hero .oce-hm__b{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 18px;background:linear-gradient(transparent,rgba(14,26,46,.94))}
.oce-hm__hero .oce-hm__b b{color:#fff;font-size:22px}
.oce-hm__hero .oce-hm__b i{color:#d4dbe6;font-size:14.5px}
.oce-hm__spread li{min-width:0}
.oce-hm__sm{display:block;height:100%;background:#fff;border:1px solid var(--oce-line);border-radius:10px;overflow:hidden}
.oce-hm__sm img{aspect-ratio:16/9;object-fit:cover}
.oce-hm__sm .oce-hm__b{padding:10px 12px 12px}
.oce-hm__sm .oce-hm__b b{font-size:15px}
.oce-hm__sm .oce-hm__b i{font-size:13px}
.oce-hm__sm:hover{border-color:var(--oce-orange)}

@media (max-width:760px){
  .oce-hm__split,.oce-hm__media{grid-template-columns:minmax(0,1fr)}
  .oce-hm__mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:120px}
  .oce-hm__mosaic li:last-child{grid-column:span 2}
  .oce-hm__big .oce-hm__cap b{font-size:20px}
  .oce-hm__tiles,.oce-hm__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .oce-hm__grid li:first-child{grid-column:span 2}
  .oce-hm__pan{height:72px}
  .oce-hm__course{grid-template-columns:minmax(0,1fr)}
  .oce-hm__cash{grid-template-columns:100px minmax(0,1fr);gap:6px 12px}
  .oce-hm__cash .oce-hm__plate{grid-row:span 3;height:52px}
  .oce-hm__cash>em{white-space:normal}
  .oce-hm__spread{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .oce-hm__hero{grid-column:span 2;grid-row:auto;min-height:260px}
  .oce-hm__spread li:last-child{grid-column:span 2}
  .oce-hm__strip li{width:230px}
}
@media (max-width:420px){
  .oce-hm__tiles{grid-template-columns:minmax(0,1fr)}
  .oce-hm__art{flex-direction:row}
  .oce-hm__art .oce-hm__pan{width:76px;height:auto;flex:none}
}
body p.oce-hm-cred{margin:28px 0 0;padding-top:10px;border-top:1px solid var(--oce-line);font-size:12px;line-height:1.5;color:var(--oce-mut)}
body p.oce-hm-cred a{color:var(--oce-mut)}
body .oce-hm p.oce-hm__also{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--oce-mut)}
body .oce-hm p.oce-hm__also b{color:var(--oce-navy);margin-right:4px}
body .oce-hm p.oce-hm__also a{color:var(--oce-orange-dk);text-decoration:underline;text-underline-offset:2px}
body section.oce-hm--strip{overflow:hidden;max-width:100%}
body .oce-hm div.oce-hm__strip{overflow-x:auto!important;overflow-y:hidden!important;max-width:100%;width:100%;margin:0;padding:2px 0 8px}
body .oce-hm__big img{object-position:50% 85%}
/* H1 главной «Välkommen till OnlineCasinoExpert.net»: длинное слово без пробела выталкивало страницу на 390 px */
body main h1{overflow-wrap:anywhere}
@media (max-width:760px){body .oce-hm__mosaic li:last-child{grid-column:auto}}