/* =========================================================
GP23 / NOVOSTI — EXACT DOM FIX
Нақты Joomla құрылымына арналған:
.article-list.cols-4 > .row > .col-lg-3 > .article
========================================================= */
/* Жалпы бет */
#sp-main-body{
background:#f7fafb !important;
padding:26px 0 46px !important;
}
#sp-main-body > .container{
max-width:1420px !important;
}
#sp-component{
font-family:"Segoe UI",Arial,Helvetica,sans-serif !important;
color:#213e45 !important;
}
/* Бет тақырыбы */
#sp-component .blog.com-content-category-blog > .page-header{
margin:0 0 28px !important;
padding:21px 26px !important;
border:0 !important;
border-radius:16px !important;
background:linear-gradient(135deg,#0b777c,#10979b) !important;
box-shadow:0 8px 24px rgba(10,111,117,.12) !important;
}
#sp-component .blog.com-content-category-blog > .page-header h1,
#sp-component .blog.com-content-category-blog > .page-header h2{
margin:0 !important;
padding:0 !important;
color:#fff !important;
font-size:29px !important;
line-height:1.15 !important;
font-weight:800 !important;
}
#sp-component .blog.com-content-category-blog > .page-header:after{
content:"Последние события и важная информация поликлиники";
display:block;
margin-top:7px;
color:rgba(255,255,255,.86);
font-size:13px;
line-height:1.4;
font-weight:500;
}
/* =========================================================
4 КАРТОЧКА БІР ҚАТАРДА
========================================================= */
#sp-component .article-list.cols-4{
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
/* Joomla-ның әр .row блогын 4 бағандық grid етеміз */
#sp-component .article-list.cols-4 > .row{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:28px !important;
width:100% !important;
max-width:none !important;
margin:0 0 30px !important;
padding:0 !important;
align-items:stretch !important;
}
/* Bootstrap col-lg-3 енін толық өшіреміз */
#sp-component .article-list.cols-4 > .row > .col-lg-3{
width:auto !important;
max-width:none !important;
min-width:0 !important;
flex:none !important;
margin:0 !important;
padding:0 !important;
}
/* =========================================================
КАРТОЧКА
========================================================= */
#sp-component .article-list.cols-4 .article{
position:relative !important;
display:flex !important;
flex-direction:column !important;
width:100% !important;
min-width:0 !important;
height:560px !important;
min-height:560px !important;
max-height:560px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
background:#fff !important;
border:1px solid #e1e6e8 !important;
border-radius:2px !important;
box-shadow:0 3px 12px rgba(0,0,0,.14) !important;
}
/* =========================================================
ФОТО — ЖОҒАРЫДА БӨЛЕК
========================================================= */
/* Сіздің DOM-да сурет article-дың бірінші тікелей ішінде */
#sp-component .article-list.cols-4 .article > a:first-child{
display:block !important;
flex:0 0 240px !important;
width:100% !important;
height:240px !important;
min-height:240px !important;
max-height:240px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
background:#e8eff0 !important;
}
/* Егер Joomla image wrapper қолданса */
#sp-component .article-list.cols-4 .article .item-image,
#sp-component .article-list.cols-4 .article .article-intro-image,
#sp-component .article-list.cols-4 .article .article-full-image{
display:block !important;
flex:0 0 240px !important;
width:100% !important;
height:240px !important;
min-height:240px !important;
max-height:240px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}
#sp-component .article-list.cols-4 .article > a:first-child img,
#sp-component .article-list.cols-4 .article .item-image img,
#sp-component .article-list.cols-4 .article .article-intro-image img,
#sp-component .article-list.cols-4 .article .article-full-image img{
display:block !important;
width:100% !important;
height:240px !important;
min-height:240px !important;
max-height:240px !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
object-fit:cover !important;
object-position:center !important;
border:0 !important;
border-radius:0 !important;
}
/* Ескі slider стрелкаларын карточка ішінде көрсетпейміз */
#sp-component .article-list.cols-4 .article .carousel-control-prev,
#sp-component .article-list.cols-4 .article .carousel-control-next,
#sp-component .article-list.cols-4 .article .swiper-button-prev,
#sp-component .article-list.cols-4 .article .swiper-button-next,
#sp-component .article-list.cols-4 .article .splide__arrow{
display:none !important;
}
/* =========================================================
ТӨМЕНГІ АҚ АҚПАРАТ БЛОГЫ
========================================================= */
#sp-component .article-list.cols-4 .article > .article-body{
position:relative !important;
display:flex !important;
flex-direction:column !important;
flex:1 1 auto !important;
min-height:0 !important;
margin:0 !important;
padding:25px 29px 52px !important;
overflow:hidden !important;
background:#fff !important;
}
/* Тақырып */
#sp-component .article-list.cols-4 .article-header{
margin:0 0 13px !important;
padding:0 !important;
}
#sp-component .article-list.cols-4 .article-header h2,
#sp-component .article-list.cols-4 .article-header h3{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:3 !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
color:#111 !important;
font-size:18px !important;
line-height:1.32 !important;
font-weight:800 !important;
}
#sp-component .article-list.cols-4 .article-header h2 a,
#sp-component .article-list.cols-4 .article-header h3 a{
color:#111 !important;
text-decoration:none !important;
}
/* Күнді карточканың төменгі оң жағына қоямыз */
#sp-component .article-list.cols-4 .article-info{
position:absolute !important;
right:29px !important;
bottom:22px !important;
z-index:3 !important;
display:block !important;
width:auto !important;
max-width:46% !important;
margin:0 !important;
padding:0 !important;
color:#59666a !important;
text-align:right !important;
font-size:11px !important;
line-height:1.3 !important;
}
/* Автор/категория сияқты артық метаны жасырамыз */
#sp-component .article-list.cols-4 .article-info > *{
display:none !important;
}
#sp-component .article-list.cols-4 .article-info .published,
#sp-component .article-list.cols-4 .article-info time{
display:block !important;
margin:0 !important;
padding:0 !important;
}
/* =========================================================
ҚЫСҚА МӘТІН — дәл 4 жол
========================================================= */
#sp-component .article-list.cols-4 .article-introtext{
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
color:#252525 !important;
font-size:12.5px !important;
line-height:1.5 !important;
}
/* Барлық paragraph-ты жасырып, біріншісін ғана көрсетеміз */
#sp-component .article-list.cols-4 .article-introtext > p{
display:none !important;
}
#sp-component .article-list.cols-4 .article-introtext > p:first-child,
#sp-component .article-list.cols-4 .article-introtext > p:first-of-type{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:4 !important;
max-height:75px !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
color:#252525 !important;
font-size:12.5px !important;
line-height:1.5 !important;
}
/* Егер мәтін p-сыз тұрса */
#sp-component .article-list.cols-4 .article-introtext{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:4 !important;
max-height:75px !important;
}
/* Ұзын элементтер preview-де көрінбесін */
#sp-component .article-list.cols-4 .article-introtext ul,
#sp-component .article-list.cols-4 .article-introtext ol,
#sp-component .article-list.cols-4 .article-introtext table,
#sp-component .article-list.cols-4 .article-introtext iframe,
#sp-component .article-list.cols-4 .article-introtext video,
#sp-component .article-list.cols-4 .article-introtext img{
display:none !important;
}
/* =========================================================
"ПОДРОБНЕЕ" — ТӨМЕНГІ СОЛ ЖАҚТА
========================================================= */
#sp-component .article-list.cols-4 .readmore{
position:absolute !important;
left:29px !important;
bottom:18px !important;
z-index:4 !important;
margin:0 !important;
padding:0 !important;
}
#sp-component .article-list.cols-4 .readmore a,
#sp-component .article-list.cols-4 .readmore .btn{
display:inline-flex !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
min-height:28px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#222 !important;
font-size:11px !important;
line-height:1.2 !important;
font-weight:400 !important;
text-decoration:none !important;
}
#sp-component .article-list.cols-4 .readmore a:after,
#sp-component .article-list.cols-4 .readmore .btn:after{
content:"›";
display:inline-block;
margin-left:9px;
color:#9ba5a8;
font-size:18px;
line-height:1;
}
/* =========================================================
ЕКІ ҚАТАР АРАСЫ
========================================================= */
#sp-component .article-list.cols-4 > .row + .row{
margin-top:4px !important;
}
/* =========================================================
PAGINATION
========================================================= */
#sp-component .com-content-category-blog__navigation{
width:100% !important;
margin:36px 0 0 !important;
padding:0 !important;
}
#sp-component .pagination,
#sp-component ul.pagination{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:center !important;
gap:8px !important;
margin:0 !important;
padding:0 !important;
}
#sp-component .pagination li{
margin:0 !important;
padding:0 !important;
}
#sp-component .pagination a,
#sp-component .pagination span{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-width:38px !important;
height:38px !important;
padding:0 10px !important;
border:1px solid #d5e4e6 !important;
border-radius:8px !important;
background:#fff !important;
color:#334f55 !important;
font-size:12px !important;
font-weight:650 !important;
}
#sp-component .pagination .active a,
#sp-component .pagination .active span,
#sp-component .pagination li.active a,
#sp-component .pagination li.active span{
border-color:#0d8d92 !important;
background:#0d8d92 !important;
color:#fff !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1150px){
#sp-component .article-list.cols-4 > .row{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
}
@media(max-width:850px){
#sp-component .article-list.cols-4 > .row{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:22px !important;
}
}
@media(max-width:560px){
#sp-component .article-list.cols-4 > .row{
grid-template-columns:1fr !important;
gap:18px !important;
}
#sp-component .article-list.cols-4 .article{
height:540px !important;
min-height:540px !important;
max-height:540px !important;
}
#sp-component .article-list.cols-4 .article > a:first-child,
#sp-component .article-list.cols-4 .article .item-image,
#sp-component .article-list.cols-4 .article .article-intro-image,
#sp-component .article-list.cols-4 .article .article-full-image,
#sp-component .article-list.cols-4 .article > a:first-child img,
#sp-component .article-list.cols-4 .article .item-image img,
#sp-component .article-list.cols-4 .article .article-intro-image img,
#sp-component .article-list.cols-4 .article .article-full-image img{
height:225px !important;
min-height:225px !important;
max-height:225px !important;
}
}
/* GP23 NEWS ROUNDED CARDS 2026 */
#sp-component .article-list.cols-4 .article{
border:1px solid #dce6e8 !important;
border-radius:18px !important;
box-shadow:0 8px 24px rgba(20,55,62,.10) !important;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease !important;
}
#sp-component .article-list.cols-4 .article:hover{
transform:translateY(-4px);
border-color:#9fd2d5 !important;
box-shadow:0 16px 34px rgba(20,55,62,.16) !important;
}
#sp-component .article-list.cols-4 .article>a:first-child,
#sp-component .article-list.cols-4 .article .item-image,
#sp-component .article-list.cols-4 .article .article-intro-image,
#sp-component .article-list.cols-4 .article .article-full-image{
border-radius:18px 18px 0 0 !important;
}
#sp-component .article-list.cols-4 .article>a:first-child img,
#sp-component .article-list.cols-4 .article .item-image img,
#sp-component .article-list.cols-4 .article .article-intro-image img,
#sp-component .article-list.cols-4 .article .article-full-image img{
width:100% !important;
height:240px !important;
min-height:240px !important;
max-height:240px !important;
object-fit:cover !important;
object-position:center !important;
}
#sp-component .article-list.cols-4 .article:not(:has(img))::before{
content:"№23";
display:flex !important;
align-items:center;
justify-content:center;
flex:0 0 240px;
width:100%;
height:240px;
min-height:240px;
color:#fff;
font-size:42px;
line-height:1;
font-weight:800;
letter-spacing:.08em;
background:linear-gradient(135deg,#117f82 0%,#22a8ad 100%);
border-radius:18px 18px 0 0;
}
#sp-component .article-list.cols-4 .article-header h2 a::after,
#sp-component .article-list.cols-4 .article-header h3 a::after{
content:"Подробнее";
position:absolute;
left:29px;
bottom:17px;
z-index:8;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:8px 15px;
border:1px solid #188f94;
border-radius:999px;
background:#fff;
color:#126f74;
font-size:11px;
line-height:1;
font-weight:750;
text-decoration:none;
cursor:pointer;
box-shadow:0 4px 12px rgba(15,111,116,.10);
}
body.kk-kz #sp-component .article-list.cols-4 .article-header h2 a::after,
body.kk-kz #sp-component .article-list.cols-4 .article-header h3 a::after{content:"Толығырақ";}
#sp-component .article-list.cols-4 .article-header h2 a:hover::after,
#sp-component .article-list.cols-4 .article-header h3 a:hover::after{
background:#188f94;
color:#fff;
}
@media(max-width:560px){
#sp-component .article-list.cols-4 .article:not(:has(img))::before{
flex-basis:225px;
height:225px;
min-height:225px;
}
}
/* GP23 NEWS GENERATED COVER CLEANUP 2026 */
#sp-component .article-list.cols-4 .article.gp23-news-generated-cover .article-introtext .carousel,
#sp-component .article-list.cols-4 .article.gp23-news-generated-cover .article-introtext img{display:none !important;}
/* =========================================================
GP23 / NOVOSTI — EXACT DOM FIX
Нақты Joomla құрылымына арналған:
.article-list.cols-4 > .row > .col-lg-3 > .article
========================================================= */
/* Жалпы бет */
#sp-main-body{
background:#f7fafb !important;
padding:26px 0 46px !important;
}
#sp-main-body > .container{
max-width:1420px !important;
}
#sp-component{
font-family:"Segoe UI",Arial,Helvetica,sans-serif !important;
color:#213e45 !important;
}
/* Бет тақырыбы */
#sp-component .blog.com-content-category-blog > .page-header{
margin:0 0 28px !important;
padding:21px 26px !important;
border:0 !important;
border-radius:16px !important;
background:linear-gradient(135deg,#0b777c,#10979b) !important;
box-shadow:0 8px 24px rgba(10,111,117,.12) !important;
}
#sp-component .blog.com-content-category-blog > .page-header h1,
#sp-component .blog.com-content-category-blog > .page-header h2{
margin:0 !important;
padding:0 !important;
color:#fff !important;
font-size:29px !important;
line-height:1.15 !important;
font-weight:800 !important;
}
#sp-component .blog.com-content-category-blog > .page-header:after{
content:"Последние события и важная информация поликлиники";
display:block;
margin-top:7px;
color:rgba(255,255,255,.86);
font-size:13px;
line-height:1.4;
font-weight:500;
}
/* =========================================================
4 КАРТОЧКА БІР ҚАТАРДА
========================================================= */
#sp-component .article-list.cols-4{
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
/* Joomla-ның әр .row блогын 4 бағандық grid етеміз */
#sp-component .article-list.cols-4 > .row{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:28px !important;
width:100% !important;
max-width:none !important;
margin:0 0 30px !important;
padding:0 !important;
align-items:stretch !important;
}
/* Bootstrap col-lg-3 енін толық өшіреміз */
#sp-component .article-list.cols-4 > .row > .col-lg-3{
width:auto !important;
max-width:none !important;
min-width:0 !important;
flex:none !important;
margin:0 !important;
padding:0 !important;
}
/* =========================================================
КАРТОЧКА
========================================================= */
#sp-component .article-list.cols-4 .article{
position:relative !important;
display:flex !important;
flex-direction:column !important;
width:100% !important;
min-width:0 !important;
height:560px !important;
min-height:560px !important;
max-height:560px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
background:#fff !important;
border:1px solid #e1e6e8 !important;
border-radius:2px !important;
box-shadow:0 3px 12px rgba(0,0,0,.14) !important;
}
/* =========================================================
ФОТО — ЖОҒАРЫДА БӨЛЕК
========================================================= */
/* Сіздің DOM-да сурет article-дың бірінші тікелей ішінде */
#sp-component .article-list.cols-4 .article > a:first-child{
display:block !important;
flex:0 0 240px !important;
width:100% !important;
height:240px !important;
min-height:240px !important;
max-height:240px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
background:#e8eff0 !important;
}
/* Егер Joomla image wrapper қолданса */
#sp-component .article-list.cols-4 .article .item-image,
#sp-component .article-list.cols-4 .article .article-intro-image,
#sp-component .article-list.cols-4 .article .article-full-image{
display:block !important;
flex:0 0 240px !important;
width:100% !important;
height:240px !important;
min-height:240px !important;
max-height:240px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}
#sp-component .article-list.cols-4 .article > a:first-child img,
#sp-component .article-list.cols-4 .article .item-image img,
#sp-component .article-list.cols-4 .article .article-intro-image img,
#sp-component .article-list.cols-4 .article .article-full-image img{
display:block !important;
width:100% !important;
height:240px !important;
min-height:240px !important;
max-height:240px !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
object-fit:cover !important;
object-position:center !important;
border:0 !important;
border-radius:0 !important;
}
/* Ескі slider стрелкаларын карточка ішінде көрсетпейміз */
#sp-component .article-list.cols-4 .article .carousel-control-prev,
#sp-component .article-list.cols-4 .article .carousel-control-next,
#sp-component .article-list.cols-4 .article .swiper-button-prev,
#sp-component .article-list.cols-4 .article .swiper-button-next,
#sp-component .article-list.cols-4 .article .splide__arrow{
display:none !important;
}
/* =========================================================
ТӨМЕНГІ АҚ АҚПАРАТ БЛОГЫ
========================================================= */
#sp-component .article-list.cols-4 .article > .article-body{
position:relative !important;
display:flex !important;
flex-direction:column !important;
flex:1 1 auto !important;
min-height:0 !important;
margin:0 !important;
padding:25px 29px 52px !important;
overflow:hidden !important;
background:#fff !important;
}
/* Тақырып */
#sp-component .article-list.cols-4 .article-header{
margin:0 0 13px !important;
padding:0 !important;
}
#sp-component .article-list.cols-4 .article-header h2,
#sp-component .article-list.cols-4 .article-header h3{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:3 !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
color:#111 !important;
font-size:18px !important;
line-height:1.32 !important;
font-weight:800 !important;
}
#sp-component .article-list.cols-4 .article-header h2 a,
#sp-component .article-list.cols-4 .article-header h3 a{
color:#111 !important;
text-decoration:none !important;
}
/* Күнді карточканың төменгі оң жағына қоямыз */
#sp-component .article-list.cols-4 .article-info{
position:absolute !important;
right:29px !important;
bottom:22px !important;
z-index:3 !important;
display:block !important;
width:auto !important;
max-width:46% !important;
margin:0 !important;
padding:0 !important;
color:#59666a !important;
text-align:right !important;
font-size:11px !important;
line-height:1.3 !important;
}
/* Автор/категория сияқты артық метаны жасырамыз */
#sp-component .article-list.cols-4 .article-info > *{
display:none !important;
}
#sp-component .article-list.cols-4 .article-info .published,
#sp-component .article-list.cols-4 .article-info time{
display:block !important;
margin:0 !important;
padding:0 !important;
}
/* =========================================================
ҚЫСҚА МӘТІН — дәл 4 жол
========================================================= */
#sp-component .article-list.cols-4 .article-introtext{
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
color:#252525 !important;
font-size:12.5px !important;
line-height:1.5 !important;
}
/* Барлық paragraph-ты жасырып, біріншісін ғана көрсетеміз */
#sp-component .article-list.cols-4 .article-introtext > p{
display:none !important;
}
#sp-component .article-list.cols-4 .article-introtext > p:first-child,
#sp-component .article-list.cols-4 .article-introtext > p:first-of-type{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:4 !important;
max-height:75px !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
color:#252525 !important;
font-size:12.5px !important;
line-height:1.5 !important;
}
/* Егер мәтін p-сыз тұрса */
#sp-component .article-list.cols-4 .article-introtext{
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:4 !important;
max-height:75px !important;
}
/* Ұзын элементтер preview-де көрінбесін */
#sp-component .article-list.cols-4 .article-introtext ul,
#sp-component .article-list.cols-4 .article-introtext ol,
#sp-component .article-list.cols-4 .article-introtext table,
#sp-component .article-list.cols-4 .article-introtext iframe,
#sp-component .article-list.cols-4 .article-introtext video,
#sp-component .article-list.cols-4 .article-introtext img{
display:none !important;
}
/* =========================================================
"ПОДРОБНЕЕ" — ТӨМЕНГІ СОЛ ЖАҚТА
========================================================= */
#sp-component .article-list.cols-4 .readmore{
position:absolute !important;
left:29px !important;
bottom:18px !important;
z-index:4 !important;
margin:0 !important;
padding:0 !important;
}
#sp-component .article-list.cols-4 .readmore a,
#sp-component .article-list.cols-4 .readmore .btn{
display:inline-flex !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
min-height:28px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#222 !important;
font-size:11px !important;
line-height:1.2 !important;
font-weight:400 !important;
text-decoration:none !important;
}
#sp-component .article-list.cols-4 .readmore a:after,
#sp-component .article-list.cols-4 .readmore .btn:after{
content:"›";
display:inline-block;
margin-left:9px;
color:#9ba5a8;
font-size:18px;
line-height:1;
}
/* =========================================================
ЕКІ ҚАТАР АРАСЫ
========================================================= */
#sp-component .article-list.cols-4 > .row + .row{
margin-top:4px !important;
}
/* =========================================================
PAGINATION
========================================================= */
#sp-component .com-content-category-blog__navigation{
width:100% !important;
margin:36px 0 0 !important;
padding:0 !important;
}
#sp-component .pagination,
#sp-component ul.pagination{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:center !important;
gap:8px !important;
margin:0 !important;
padding:0 !important;
}
#sp-component .pagination li{
margin:0 !important;
padding:0 !important;
}
#sp-component .pagination a,
#sp-component .pagination span{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-width:38px !important;
height:38px !important;
padding:0 10px !important;
border:1px solid #d5e4e6 !important;
border-radius:8px !important;
background:#fff !important;
color:#334f55 !important;
font-size:12px !important;
font-weight:650 !important;
}
#sp-component .pagination .active a,
#sp-component .pagination .active span,
#sp-component .pagination li.active a,
#sp-component .pagination li.active span{
border-color:#0d8d92 !important;
background:#0d8d92 !important;
color:#fff !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1150px){
#sp-component .article-list.cols-4 > .row{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
}
@media(max-width:850px){
#sp-component .article-list.cols-4 > .row{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:22px !important;
}
}
@media(max-width:560px){
#sp-component .article-list.cols-4 > .row{
grid-template-columns:1fr !important;
gap:18px !important;
}
#sp-component .article-list.cols-4 .article{
height:540px !important;
min-height:540px !important;
max-height:540px !important;
}
#sp-component .article-list.cols-4 .article > a:first-child,
#sp-component .article-list.cols-4 .article .item-image,
#sp-component .article-list.cols-4 .article .article-intro-image,
#sp-component .article-list.cols-4 .article .article-full-image,
#sp-component .article-list.cols-4 .article > a:first-child img,
#sp-component .article-list.cols-4 .article .item-image img,
#sp-component .article-list.cols-4 .article .article-intro-image img,
#sp-component .article-list.cols-4 .article .article-full-image img{
height:225px !important;
min-height:225px !important;
max-height:225px !important;
}
}
/* GP23 NEWS ROUNDED CARDS 2026 */
#sp-component .article-list.cols-4 .article{
border:1px solid #dce6e8 !important;
border-radius:18px !important;
box-shadow:0 8px 24px rgba(20,55,62,.10) !important;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease !important;
}
#sp-component .article-list.cols-4 .article:hover{
transform:translateY(-4px);
border-color:#9fd2d5 !important;
box-shadow:0 16px 34px rgba(20,55,62,.16) !important;
}
#sp-component .article-list.cols-4 .article>a:first-child,
#sp-component .article-list.cols-4 .article .item-image,
#sp-component .article-list.cols-4 .article .article-intro-image,
#sp-component .article-list.cols-4 .article .article-full-image{
border-radius:18px 18px 0 0 !important;
}
#sp-component .article-list.cols-4 .article>a:first-child img,
#sp-component .article-list.cols-4 .article .item-image img,
#sp-component .article-list.cols-4 .article .article-intro-image img,
#sp-component .article-list.cols-4 .article .article-full-image img{
width:100% !important;
height:240px !important;
min-height:240px !important;
max-height:240px !important;
object-fit:cover !important;
object-position:center !important;
}
#sp-component .article-list.cols-4 .article:not(:has(>a:first-child))::before{
content:"№23";
display:flex !important;
align-items:center;
justify-content:center;
flex:0 0 240px;
width:100%;
height:240px;
min-height:240px;
color:#fff;
font-size:42px;
line-height:1;
font-weight:800;
letter-spacing:.08em;
background:linear-gradient(135deg,#117f82 0%,#22a8ad 100%);
border-radius:18px 18px 0 0;
}
#sp-component .article-list.cols-4 .article-header h2 a::after,
#sp-component .article-list.cols-4 .article-header h3 a::after{
content:"Подробнее";
position:absolute;
left:29px;
bottom:17px;
z-index:8;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:8px 15px;
border:1px solid #188f94;
border-radius:999px;
background:#fff;
color:#126f74;
font-size:11px;
line-height:1;
font-weight:750;
text-decoration:none;
cursor:pointer;
box-shadow:0 4px 12px rgba(15,111,116,.10);
}
body.kk-kz #sp-component .article-list.cols-4 .article-header h2 a::after,
body.kk-kz #sp-component .article-list.cols-4 .article-header h3 a::after{content:"Толығырақ";}
#sp-component .article-list.cols-4 .article-header h2 a:hover::after,
#sp-component .article-list.cols-4 .article-header h3 a:hover::after{
background:#188f94;
color:#fff;
}
@media(max-width:560px){
#sp-component .article-list.cols-4 .article:not(:has(>a:first-child))::before{
flex-basis:225px;
height:225px;
min-height:225px;
}
}