/* CSS Variables Setup - Default values */
.external-posts-container {
    --post-accent-color: #dd3545;
    /* Default Red Accent */
    --post-date-bg: #e0e7ff;
    /* Default Date BG */
    --post-date-text: #4338ca;
    /* Default Date Text */
    --post-title-color: #1f2937;
    --post-border-color: #6366f1;
    /* Default Card Border */
    --post-border-width: 3px;
    /* Default Border Width */
    --post-hover-overlay-color: rgba(0, 0, 0, 0.3);
    /* Default Overlay */

    display: grid;
    gap: 20px;
    margin: 20px 0;
}

/* Column layouts */
.external-posts-container[data-columns="1"] {
    grid-template-columns: 1fr;
}

.external-posts-container[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.external-posts-container[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.external-posts-container[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.external-posts-container[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.external-posts-container[data-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
}

.external-post-card {
    background: #fff;
    border-radius: 8px;
    /* Remove default/top/left borders */
    border: none;
    /* Right and Bottom borders - Accent Color (Thick) */
    border-right: var(--post-border-width) solid var(--post-accent-color);
    border-bottom: var(--post-border-width) solid var(--post-accent-color);

    /* Transparent top/left to allow transition. Match width of accent border or keep 0? 
       To avoid jump, we should ideally have them exist. 
       Let's set them to transparent with same width, so layout is stable.
    */
    border-top: var(--post-border-width) solid transparent;
    border-left: var(--post-border-width) solid transparent;

    overflow: hidden;
    box-shadow: none;
    transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    /* Create a subtle shadow to replace the lost border definition if needed, or stick to none as requested */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Slight shadow to define shape since no top border */
}

.external-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* Make top/left borders visible on hover */
    border-top-color: var(--post-accent-color);
    border-left-color: var(--post-accent-color);
}

.external-post-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
    background: #f3f4f6;
    z-index: 1;
}

/* Hover Overlay */
.external-post-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--post-hover-overlay-color);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.external-post-card:hover .external-post-image::after {
    opacity: 1;
}

.external-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: transform 0.4s ease;
}

.external-post-card:hover .external-post-image img {
    transform: scale(1.05);
}

.external-post-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-top: -22px;
    position: relative;
    z-index: 10;
    backdrop-filter: blur(160px);
    width: 90%;
}

.external-post-date {
    display: inline-block;
    background-color: var(--post-date-bg);
    color: var(--post-date-text);
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-weight: 600;
    align-self: flex-start;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.external-post-taxonomies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.external-post-category,
.external-post-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.external-post-category {
    background-color: #e0e7ff;
    color: #667eea;
}

.external-post-tag {
    background-color: #d1fae5;
    color: #10b981;
}

.external-post-title {
    margin: 0 0 16px 0;
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 700;
    color: var(--post-title-color);
}

.external-post-title a {
    color: var(--post-title-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.external-post-title a:hover {
    color: #4f46e5;
}

.external-post-excerpt {
    color: #4b5563;
    margin: 0 0 20px 0;
    line-height: 1.6;
    font-size: 0.95rem;
    flex-grow: 1;
}

.external-post-link {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    align-self: flex-start;
}

.external-post-link:hover {
    color: #4338ca;
}

.external-posts-error {
    padding: 15px;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

/* Responsive breakpoints */
@media (max-width: 1400px) {

    .external-posts-container[data-columns="6"],
    .external-posts-container[data-columns="5"] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {

    .external-posts-container[data-columns="6"],
    .external-posts-container[data-columns="5"],
    .external-posts-container[data-columns="4"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    .external-posts-container[data-columns="6"],
    .external-posts-container[data-columns="5"],
    .external-posts-container[data-columns="4"],
    .external-posts-container[data-columns="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .external-posts-container {
        grid-template-columns: 1fr !important;
    }
}