/* ============================================
   P4U Prikbord Stylesheet
   Kleuren: rood #B46D86 | lichtroze #D095AA | donkergroen #B2BB76 | lichtgroen #E1E4BE
   ============================================ */

/* ── Board wrapper (cork) ── */
.zaz-prikbord-board {
    background-color: #c8a97a;
    background-image:
        radial-gradient(ellipse at 18% 28%, rgba(160,120,50,0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 72%, rgba(190,155,80,0.25) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='5' height='5' fill='%23c8a97a'/%3E%3Ccircle cx='1' cy='1' r='.7' fill='%23b08050' opacity='.35'/%3E%3Ccircle cx='4' cy='4' r='.5' fill='%23d4b880' opacity='.25'/%3E%3Ccircle cx='4' cy='1' r='.4' fill='%23a07030' opacity='.2'/%3E%3Ccircle cx='1' cy='4' r='.6' fill='%23c09050' opacity='.28'/%3E%3C/svg%3E");
    border: 7px solid #7a5c35;
    outline: 3px solid #8b6b40;
    border-radius: 6px;
    padding: 44px 36px 48px;
    box-shadow:
        inset 0 3px 10px rgba(0,0,0,0.22),
        0 10px 36px rgba(0,0,0,0.28),
        0 2px 6px rgba(0,0,0,0.14);
}

/* ── Board label strip ── */
.zaz-prikbord-label {
    display: block;
    width: fit-content;
    margin: 0 auto 36px;
    background: #B46D86;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 9px 28px;
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

/* ── Grid ── */
.zaz-prikbord-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 44px 28px;
    padding: 8px 4px;
}

/* ── Single card ── */
.zaz-kaart {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fffef7;
    border-radius: 2px;
    padding: 30px 22px 22px;
    color: inherit;
    text-decoration: none;
    box-shadow:
        3px 4px 12px rgba(0,0,0,0.22),
        0 1px 3px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.75);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    z-index: 1;
    /* subtle lined paper effect */
    background-image: repeating-linear-gradient(
        transparent,
        transparent 27px,
        rgba(0,0,0,0.04) 27px,
        rgba(0,0,0,0.04) 28px
    );
    background-position: 0 36px;
}

/* Slight random tilt per nth-child */
.zaz-kaart:nth-child(1)  { transform: rotate(-1.6deg); }
.zaz-kaart:nth-child(2)  { transform: rotate(1.1deg); }
.zaz-kaart:nth-child(3)  { transform: rotate(-0.9deg); }
.zaz-kaart:nth-child(4)  { transform: rotate(1.6deg); }
.zaz-kaart:nth-child(5)  { transform: rotate(-1.3deg); }
.zaz-kaart:nth-child(6)  { transform: rotate(0.8deg); }
.zaz-kaart:nth-child(7)  { transform: rotate(-1.9deg); }
.zaz-kaart:nth-child(8)  { transform: rotate(0.5deg); }
.zaz-kaart:nth-child(9)  { transform: rotate(-1.1deg); }
.zaz-kaart:nth-child(10) { transform: rotate(1.4deg); }
.zaz-kaart:nth-child(11) { transform: rotate(-0.7deg); }
.zaz-kaart:nth-child(12) { transform: rotate(1.9deg); }

.zaz-kaart:hover {
    transform: rotate(0deg) scale(1.05) translateY(-5px) !important;
    box-shadow:
        7px 14px 30px rgba(0,0,0,0.28),
        0 4px 10px rgba(0,0,0,0.16);
    z-index: 20;
}

/* ── Pin ── */
.zaz-pin {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.zaz-pin-hoofd {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--pin-color) 70%, white), var(--pin-color));
    /* fallback if color-mix not supported */
    background: radial-gradient(circle at 35% 35%, #D095AA, var(--pin-color));
    box-shadow:
        0 3px 6px rgba(0,0,0,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        inset 3px 3px 5px rgba(255,255,255,0.3);
    position: relative;
}

.zaz-pin-hoofd::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 7px;
    height: 7px;
    background: rgba(255,255,255,0.45);
    border-radius: 50%;
}

.zaz-pin-naald {
    width: 2px;
    height: 14px;
    background: linear-gradient(to bottom, #999 0%, #555 100%);
    border-radius: 0 0 2px 2px;
}

/* ── Card image ── */
.zaz-kaart-afb {
    margin: -30px -22px 16px;
    overflow: hidden;
    height: 120px;
}

.zaz-kaart-afb img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    filter: sepia(12%) contrast(1.04);
    transition: filter 0.3s;
}

.zaz-kaart:hover .zaz-kaart-afb img {
    filter: sepia(0%) contrast(1.08);
}

/* ── Category label ── */
.zaz-kaart-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
    align-self: flex-start;
}

/* ── Title ── */
.zaz-kaart-titel {
    font-size: 17px;
    font-weight: 700;
    color: #2a2a2a;
    margin: 0 0 10px;
    line-height: 1.35;
}

/* ── Excerpt ── */
.zaz-kaart-tekst {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 14px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(4 * 1.6em);
}

/* ── Date ── */
.zaz-kaart-datum {
    font-size: 11px;
    color: #999;
    display: block;
    border-top: 1px dashed #ddd;
    padding-top: 10px;
    margin-bottom: 8px;
}

.zaz-kaart-datum::before {
    content: '📅  ';
}

/* ── Read more ── */
.zaz-kaart-meer {
    font-size: 13px;
    font-weight: 600;
    color: #B46D86;
    transition: color 0.2s;
}

.zaz-kaart:hover .zaz-kaart-meer {
    color: #B2BB76;
}

/* ── Empty state ── */
.zaz-prikbord-leeg {
    text-align: center;
    padding: 60px 20px;
    color: #B46D86;
    font-size: 18px;
}

.zaz-knop {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 28px;
    background: #B46D86;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.2s;
}

.zaz-knop:hover {
    background: #B2BB76;
    color: #fff;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .zaz-prikbord-board { padding: 30px 14px 36px; }
    .zaz-prikbord-grid  { grid-template-columns: 1fr; gap: 48px 0; }
    .zaz-kaart          { transform: none !important; }
    .zaz-kaart:hover    { transform: scale(1.02) !important; }
}

@media (max-width: 480px) {
    .zaz-prikbord-board { padding: 22px 10px 28px; border-width: 5px; }
}