.wppt-wrap,
.wppt-wrap * { box-sizing: border-box; }

.wppt-wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
}

.wppt-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.wppt-heading-group { min-width: 0; }

.wppt-title {
    margin: 0;
    color: #0662a6;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 800;
}

.wppt-title::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 9px;
    border-radius: 3px;
    background: #ffcf54;
}

.wppt-subtitle {
    margin: 8px 0 0;
    color: #7a8692;
    font-size: 14px;
    line-height: 1.5;
}

.wppt-all-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0662a6;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .2s ease, transform .2s ease;
}

.wppt-all-link::after {
    content: "→";
    color: #ffcf54;
    font-size: 18px;
    line-height: 1;
}

.wppt-all-link:hover {
    color: #0662a6;
    transform: translateX(2px);
}

.wppt-grid {
    display: grid;
    gap: 26px;
}

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

.wppt-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e7ebf0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(26, 52, 78, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.wppt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(26, 52, 78, .14);
}

.wppt-image-link {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 190px;
    background: #eef2f5;
    text-decoration: none;
}

.wppt-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.wppt-card:hover .wppt-image { transform: scale(1.035); }

.wppt-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #8290a0;
    font-size: 13px;
    background: linear-gradient(135deg, #edf2f6, #f8fafc);
}

.wppt-badge {
    position: absolute;
    left: 18px;
    bottom: -1px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 12px;
    border-radius: 15px 15px 0 0;
    background: #0662a6;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.wppt-content {
    display: flex;
    flex-direction: column;
    min-height: 190px;
    padding: 16px 19px 18px;
}

.wppt-date {
    display: block;
    margin-bottom: 10px;
    color: #8793a0;
    font-size: 11px;
    line-height: 1.3;
}

.wppt-card-title {
    margin: 0 0 17px;
    color: #0662a6;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 800;
}

.wppt-card-title a {
    color: inherit;
    text-decoration: none !important;
}

.wppt-card-title a:hover { color: #0662a6; }

.wppt-read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    color: #0662a6;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none !important;
}

.wppt-read-more::after {
    content: "→";
    font-size: 16px;
    transition: transform .2s ease;
}

.wppt-read-more:hover::after { transform: translateX(3px); }

.wppt-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 20px;
    border: 1px solid #e7ebf0;
    border-radius: 8px;
    background: #fff;
}

@media (max-width: 1024px) {
    .wppt-cols-4,
    .wppt-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .wppt-header {
        align-items: flex-start;
        margin-bottom: 16px;
    }
    .wppt-title { font-size: 22px; }
    .wppt-all-link { margin-top: 4px; font-size: 12px; }
    .wppt-cols-2,
    .wppt-cols-3,
    .wppt-cols-4 { grid-template-columns: 1fr; }
    .wppt-grid { gap: 18px; }
    .wppt-image-link { height: 210px; }
}

@media (max-width: 480px) {
    .wppt-header { gap: 12px; }
    .wppt-all-link { max-width: 42%; white-space: normal; text-align: right; justify-content: flex-end; }
    .wppt-image-link { height: 185px; }
}

/* === v1.6.3: horizontalni slider za WP Posts Theme === */
.wppt-slider-shell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.wppt-viewport {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.wppt-slider-shell .wppt-grid {
    display: flex;
    gap: 26px;
    transition: transform .45s ease;
    will-change: transform;
}

.wppt-slider-shell .wppt-card {
    flex: 0 0 calc((100% - (var(--wppt-visible, 3) - 1) * 26px) / var(--wppt-visible, 3));
}

.wppt-nav {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid #d8e1ec;
    border-radius: 50%;
    background: #fff;
    color: #0662a6;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(26,52,78,.08);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.wppt-nav:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(26,52,78,.14); }
.wppt-nav:disabled { opacity: .3; cursor: default; transform: none; box-shadow: none; }
.wppt-nav.is-hidden { visibility: hidden; pointer-events: none; }

@media (max-width: 1024px) {
    .wppt-slider-shell { --wppt-visible: 2 !important; }
}
@media (max-width: 767px) {
    .wppt-slider-shell { --wppt-visible: 1 !important; gap: 8px; }
    .wppt-nav { flex-basis: 36px; width: 36px; height: 36px; font-size: 24px; }
}


/* === Global typography: Clash Display titles / Archivo descriptions === */
12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

/* Titles, headings, labels, buttons and links */
h1, h2, h3, h4, h5, h6,
.wpht-title, .wpht-eyebrow,
.wppt-about-kicker, .wppt-about-board-title,
.wppt-library-title, .wppt-library-card-title, .wppt-library-badge,
.wppt-res-badge,
.proj-filters button, .proj-image b,
button, a {
    font-family: "Clash Display", "Archivo", Arial, sans-serif;
}

/* Descriptions and regular content text */
p, .wpht-description,
.wppt-about-story-text, .wppt-about-board-info .role, .wppt-about-board-info .extra-text,
.wppt-library-subtitle, .wppt-library-meta,
.wppt-karike-text, .wppt-res-body p, .wppt-res-meta,
.proj-body p {
    font-family: "Archivo", Arial, Helvetica, sans-serif;
}