/* =====================================================================
   Shared list components — article cards, service (product) cards,
   category filter, pagination, skeleton loaders.
   Used on: /index, landing pages, /blogs, /services
   ===================================================================== */

/* ---------- List pages: list section sits directly under the banner ----------
   The global rule "section#banner + section { margin-top:-15em }" is meant for
   landing overlaps; on list pages we don't overlap, so neutralise it.        */
section#banner + section#articles,
section#banner + section#products,
section#banner + section#article-body,
section#banner + section#service-content,
section#banner + section#related-block {
    margin-top: 0;
}
section#banner:has(+ section#articles),
section#banner:has(+ section#products),
section#banner:has(+ section#article-body),
section#banner:has(+ section#service-content),
section#banner:has(+ section#related-block) {
    padding-bottom: 5em;
}

/* ---------- Service (product) card icon ----------
   Works with any admin-pasted SVG (fill- or stroke-based): the filter
   forces it white, and the !important resets neutralise any classes
   (e.g. svg.icon) the pasted markup may carry.                        */
section#products .product .p-ico {
    position: absolute;
    right: -2.8em;
    width: 3.5em;
    height: 3.5em;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    pointer-events: none;
}
section#products .product:hover .p-ico,
section#products .product.active .p-ico {
    opacity: 0.4;
    transform: translateX(-1.8em);
}
    section#products .product .p-ico svg {
        width: 100%;
        height: 100%;
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        filter: brightness(0) invert(1);   /* force white for any icon */
    }

/* ---------- Detail-page meta (date · author) on the banner ---------- */
.section-title .detail-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    width: 100%;
    color: rgba(255,255,255,0.6);
    font-size: 0.9em;
    margin-top: 0.9em;
    text-align: center;
}
    .section-title .detail-meta .dm-sep { opacity: 0.45; }

    /* author link looks exactly like the date (no underline / same colour) */
    .section-title .detail-meta .dm-author {
        text-decoration: none;
        transition: color 0.2s;
    }
    .section-title .detail-meta a.dm-author:hover { color: #fff; }

/* ---------- List containers always span full width ----------
   (.container is display:flex, so these would otherwise shrink
   next to the section title.)                                  */
.article-list,
.service-list {
    width: 100%;
    flex: 0 0 100%;
}

/* ---------- Category filter pills (list pages) ---------- */
.cat-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6em;
    width: 100%;
    margin-bottom: 2.5em;
}

    .cat-filter a {
        padding: 0.5em 1.5em;
        border-radius: 2em;
        text-decoration: none;
        font-size: 0.9em;
        font-weight: 500;
        color: rgba(0,0,0,0.6);
        border: solid 1px rgba(0,0,0,0.12);
        background-color: #fff;
        transition: 0.2s;
    }

        .cat-filter a:hover { border-color: var(--primary); color: var(--primary); }

        .cat-filter a.active {
            background-color: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }

/* ---------- "More" button ---------- */
.list-more {
    width: 100%;
    text-align: center;
    padding-top: 2.5em;
}

    .list-more a {
        display: inline-flex;
        align-items: center;
        gap: 0.6em;
        padding: 0.8em 2.2em;
        border-radius: 2em;
        background-color: var(--primary);
        color: #fff;
        text-decoration: none;
        font-size: 0.92em;
        font-weight: 600;
        box-shadow: 0 4px 16px rgba(20,110,245,0.3);
        transition: 0.2s;
    }

        .list-more a:hover { background-color: #0b57c9; transform: translateY(-2px); }
        .list-more a svg { width: 1em; height: 1em; }
        .list-more a svg path { fill: #fff; }

/* ---------- Pagination ---------- */
.list-pager {
    display: flex;
    gap: 0.5em;
    justify-content: center;
    width: 100%;
    padding-top: 2.5em;
}

    .list-pager a, .list-pager span {
        min-width: 2.6em;
        height: 2.6em;
        padding: 0 0.6em;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.4em;
        text-decoration: none;
        font-size: 0.9em;
        border: solid 1px rgba(0,0,0,0.12);
        color: rgba(0,0,0,0.6);
        cursor: pointer;
        transition: 0.2s;
    }

        .list-pager a:hover { border-color: var(--primary); color: var(--primary); }
        .list-pager .cur { background-color: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Empty state ---------- */
.list-empty {
    width: 100%;
    text-align: center;
    padding: 3em 1em;
    color: rgba(0,0,0,0.4);
}

/* =====================================================================
   Skeleton loaders
   ===================================================================== */
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-box {
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 0.4em;
}

/* article skeleton card mirrors .article */
.skel-article {
    box-sizing: border-box;
    width: calc(33.33% - 0.94em);
    background-color: #fff;
    border: solid 1px rgba(0,0,0,0.08);
    border-radius: 0.6em;
    overflow: hidden;
}
    .skel-article .skel-img   { height: 9em; border-radius: 0; }
    .skel-article .skel-body  { padding: 1.4em; }
    .skel-article .skel-line  { height: 0.9em; margin-bottom: 0.7em; }
    .skel-article .skel-line.w-70 { width: 70%; }
    .skel-article .skel-line.w-90 { width: 90%; }
    .skel-article .skel-line.w-40 { width: 40%; }

/* service (product bar) skeleton mirrors .product */
.skel-product {
    width: calc(33.33% - 0.9em);
    height: 5em;
    border-radius: 0.3em;
    margin-bottom: 1.5em;
}

/* client logo skeleton mirrors .client (section#clients .client) */
.skel-client {
    width: 16%;
    max-width: 8em;
    min-width: 4.5em;
    height: 4em;
    margin: 2em calc(1em + 1vw) 2em;
}

@media (max-width: 1200px) {
    .skel-product { width: calc(50% - 0.9em); }
}
@media (max-width: 992px) {
    .skel-article { width: calc(50% - 0.7em); }
}
@media (max-width: 768px) {
    .skel-product { width: 100%; }
}
@media (max-width: 576px) {
    .skel-article { width: 100%; }
}