.spl {
    --spl-text: #17211c;
    --spl-muted: #728078;
    --spl-border: rgba(23,33,28,.10);
    --spl-accent: #176b4d;
    --spl-radius: 14px;
    color: var(--spl-text);
    width: 100%;
    box-sizing: border-box;
}

.spl *, .spl *::before, .spl *::after { box-sizing: border-box; }

.spl a { color: inherit; text-decoration: none; }

.spl-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 20px;
}

.spl-filter-item {
    appearance: none;
    border: 1px solid var(--spl-border);
    background: #fff;
    color: var(--spl-muted);
    padding: 8px 13px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    transition: .2s ease;
}

.spl-filter-item:hover,
.spl-filter-item.is-active {
    background: var(--spl-accent);
    border-color: var(--spl-accent);
    color: #fff;
}

.spl-results.is-loading { opacity: .45; pointer-events: none; transition: opacity .2s; }

.spl-grid {
    display: grid;
    gap: 22px;
}

.spl-columns-1 { grid-template-columns: 1fr; }
.spl-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spl-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spl-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spl-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.spl-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.spl-card {
    overflow: hidden;
    border: 1px solid var(--spl-border);
    border-radius: var(--spl-radius);
    background: #fff;
    box-shadow: 0 7px 25px rgba(15,30,22,.055);
    height: 100%;
}

.spl-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eef2ef;
}

.spl-media img,
.spl-slider-media img,
.spl-thumb-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.spl-card:hover .spl-media img { transform: scale(1.035); }

.spl-card-body { padding: 16px 17px 18px; }

.spl-category {
    display: inline-block;
    color: var(--spl-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.spl-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}

.spl-title a:hover { color: var(--spl-accent); }

.spl-meta {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    color: var(--spl-muted);
    font-size: 12px;
    margin-top: 9px;
}

.spl-excerpt {
    color: var(--spl-muted);
    font-size: 14px;
    line-height: 1.65;
    margin-top: 10px;
}

.spl-list {
    display: grid;
    gap: 15px;
}

.spl-list-item {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
    padding: 14px;
    border: 1px solid var(--spl-border);
    border-radius: var(--spl-radius);
    background: #fff;
}

.spl-list-media {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 10px;
    background: #eef2ef;
}

.spl-list-media img { width:100%; height:100%; object-fit:cover; display:block; }

.spl-list-body { align-self: center; }

.spl-carousel {
    position: relative;
    overflow: hidden;
    padding: 2px;
}

.spl-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.spl-track::-webkit-scrollbar { display:none; }

.spl-slide {
    flex: 0 0 calc((100% - 36px) / 3);
    scroll-snap-align: start;
}

.spl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 1px solid var(--spl-border);
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: var(--spl-text);
    box-shadow: 0 5px 18px rgba(0,0,0,.10);
    cursor: pointer;
    font-size: 23px;
    line-height: 1;
    z-index: 3;
}

.spl-prev { left: 10px; }
.spl-next { right: 10px; }

.spl-slider {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border-radius: var(--spl-radius);
    background: #111;
}

.spl-main-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease;
}

.spl-main-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.spl-slider-media { position:absolute; inset:0; display:block; }

.spl-slider-media::after {
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.08));
}

.spl-slider-content {
    position: absolute;
    left: 7%;
    bottom: 9%;
    max-width: 680px;
    color: #fff;
    z-index: 2;
}

.spl-slider-content .spl-category { color: #bfe9d5; }
.spl-slider-content .spl-meta { color: rgba(255,255,255,.75); }
.spl-slider-content .spl-title { font-size: clamp(26px, 4vw, 48px); }

.spl-dots {
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    display:flex;
    gap:7px;
    z-index:4;
}

.spl-dot {
    width:7px;
    height:7px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    cursor:pointer;
}

.spl-dot.is-active { background:#fff; transform:scale(1.25); }

.spl-thumb-slider { display:grid; gap:13px; }

.spl-thumb-main {
    position:relative;
    min-height:420px;
    border-radius:var(--spl-radius);
    overflow:hidden;
    background:#111;
}

.spl-thumb-main-item {
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
}

.spl-thumb-main-item.is-active { opacity:1; visibility:visible; }

.spl-thumb-main-image { display:block; height:100%; }

.spl-thumb-main-image::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 65%);
}

.spl-thumb-main-item h3 {
    position:absolute;
    z-index:2;
    left:30px;
    right:30px;
    bottom:30px;
    margin:0;
    color:#fff;
    font-size:clamp(22px,3vw,38px);
    line-height:1.25;
}

.spl-thumbnails {
    display:flex;
    gap:9px;
    overflow-x:auto;
    scrollbar-width:none;
}

.spl-thumbnail {
    flex:0 0 95px;
    height:65px;
    padding:0;
    overflow:hidden;
    border:2px solid transparent;
    border-radius:8px;
    background:#eee;
    cursor:pointer;
    opacity:.65;
}

.spl-thumbnail.is-active { border-color:var(--spl-accent); opacity:1; }

.spl-thumbnail img { width:100%; height:100%; object-fit:cover; display:block; }

.spl-ticker {
    display:flex;
    align-items:center;
    min-height:44px;
    overflow:hidden;
    border:1px solid var(--spl-border);
    border-radius:9px;
    background:#fff;
}

.spl-ticker-label {
    flex:0 0 auto;
    padding:12px 15px;
    background:var(--spl-accent);
    color:#fff;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.spl-ticker-window { min-width:0; overflow:hidden; flex:1; }

.spl-ticker-track {
    display:flex;
    width:max-content;
    animation:splTicker 28s linear infinite;
}

.spl-ticker-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 22px;
    white-space:nowrap;
    font-size:14px;
}

.spl-ticker-item:hover { color:var(--spl-accent); }

@keyframes splTicker {
    from { transform:translateX(0); }
    to { transform:translateX(-50%); }
}

.spl-empty {
    padding:28px;
    text-align:center;
    border:1px dashed var(--spl-border);
    border-radius:var(--spl-radius);
    color:var(--spl-muted);
}

@media (max-width: 900px) {
    .spl-columns-4,
    .spl-columns-5,
    .spl-columns-6 { grid-template-columns:repeat(2,minmax(0,1fr)); }

    .spl-slide { flex-basis:calc((100% - 18px) / 2); }
}

@media (max-width: 640px) {
    .spl-columns-2,
    .spl-columns-3,
    .spl-columns-4,
    .spl-columns-5,
    .spl-columns-6 { grid-template-columns:1fr; }

    .spl-slide { flex-basis:100%; }

    .spl-list-item { grid-template-columns:100px minmax(0,1fr); gap:13px; padding:10px; }
    .spl-list-body .spl-title { font-size:16px; }

    .spl-slider,
    .spl-thumb-main { min-height:340px; }

    .spl-slider-content { left:22px; right:22px; bottom:25px; }
    .spl-slider-content .spl-title { font-size:25px; }

    .spl-card-body { padding:13px 14px 15px; }
}