.wp-block-dandev-external-sources.dandev-sources {
    --source-bg: var(--dandev-surface, var(--wp--preset--color--surface, #0f141c));
    --source-bg-hover: var(--dandev-surface-raised, var(--wp--preset--color--surface-raised, #151c26));
    --source-text: var(--dandev-text, var(--wp--preset--color--text, #e7edf5));
    --source-muted: var(--dandev-muted, var(--wp--preset--color--muted, #94a3b8));
    --source-accent: var(--dandev-accent, var(--wp--preset--color--accent, #a78bfa));
    --source-radius: var(--dandev-radius, 0.75rem);
    margin-block: clamp(2.5rem, 7vw, 4.5rem) 1.5rem;
}

.dandev-sources__label {
    margin-bottom: 0.8rem;
    color: var(--source-muted);
    font-family: var(--wp--preset--font-family--mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dandev-sources__label span {
    color: var(--source-accent);
}

.dandev-sources__items {
    display: grid;
    gap: 0.75rem;
}

.dandev-sources__item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
    padding: 0.7rem 0.85rem 0.7rem 0.7rem;
    border-radius: var(--source-radius);
    background: var(--source-bg);
    color: var(--source-text);
    text-decoration: none;
    transition: background-color 120ms ease, transform 120ms ease;
}

.dandev-sources__item:hover {
    background: var(--source-bg-hover);
    color: var(--source-text);
    transform: translateY(-1px);
}

.dandev-sources__item:focus-visible {
    outline: 0.18rem solid var(--source-accent);
    outline-offset: 0.18rem;
}

.dandev-sources__thumbnail {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    place-items: center;
    overflow: hidden;
    border-radius: calc(var(--source-radius) - 0.18rem);
    background: var(--source-bg-hover);
}

.dandev-sources__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dandev-sources__placeholder {
    width: 2.15rem;
    height: 2.15rem;
    fill: none;
    stroke: var(--source-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3.2;
}

.dandev-sources__content {
    min-width: 0;
}

.dandev-sources__title,
.dandev-sources__site {
    display: block;
}

.dandev-sources__title {
    overflow: hidden;
    color: var(--source-text);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dandev-sources__site {
    margin-top: 0.25rem;
    overflow: hidden;
    color: var(--source-muted);
    font-family: var(--wp--preset--font-family--mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
    font-size: 0.75rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dandev-sources__external {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: var(--source-muted);
}

.dandev-sources__external svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.dandev-sources__item:hover .dandev-sources__external {
    color: var(--source-accent);
}

@media (max-width: 560px) {
    .dandev-sources__item {
        grid-template-columns: 3.5rem minmax(0, 1fr) auto;
        gap: 0.8rem;
        min-height: 3.5rem;
        padding: 0.6rem 0.7rem 0.6rem 0.6rem;
    }

    .dandev-sources__thumbnail {
        width: 3.5rem;
        height: 3.5rem;
    }

    .dandev-sources__placeholder {
        width: 1.8rem;
        height: 1.8rem;
    }

    .dandev-sources__title {
        font-size: 0.9rem;
    }
}