/*-----------------------------------------------------
TIMELINE ITEM
-----------------------------------------------------*/

/* Timeline item container styling */
.timeline-item {
    display: flex;
    align-items: left;
    gap: 0;
    height: 60px;
    text-decoration: none;
    position: relative;
}

/* Timeline item dot styling */
.timeline-item .timeline-item-dot {
    height: 100%;
    width: 20px;
    background-image: url(../images/timeline/timeline_dot_middle.png);
    background-size: cover;
}

/* Timeline item dot top styling */
.timeline-item .timeline-item-dot.top {
    background-image: url(../images/timeline/timeline_dot_top.png);
}

/* Timeline item dot bottom styling */
.timeline-item .timeline-item-dot.bottom { 
    background-image: url(../images/timeline/timeline_dot_bottom.png);
}

/* Timeline item dot styling */
.timeline-item.new .timeline-item-dot {
    background-image: url(../images/timeline/timeline_dot_middle_gold.png);
}

/* Timeline item dot top styling */
.timeline-item.new .timeline-item-dot.top {
    background-image: url(../images/timeline/timeline_dot_top_gold.png);
}

/* Timeline item dot bottom styling */
.timeline-item.new .timeline-item-dot.bottom { 
    background-image: url(../images/timeline/timeline_dot_bottom_gold.png);
}

/* Timeline item image styling */
.timeline-item .timeline-item-image {
    width: 64px;
    height: 64px;
    background-size: 60px 60px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    border: 1px solid #6dabb6;
    box-sizing: border-box;
    position: relative;
}

/* Timeline item image styling for new items */
.timeline-item.new .timeline-item-image {
    border: 1px solid #d59800;
}

/* Timeline item text container styling */
.timeline-item-text {
    font-size: 16px;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    color: #6dabb6;
    text-decoration: none;
    padding: 2px 0 0 10px;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.timeline-item-type {
    font-size: 13px;
    color: #446e75;
    font-weight: 400;
    height: 10px;
    margin-bottom: 6px;
    text-transform: lowercase;
}

/* Timeline item stardate styling */
.timeline-item-stardate {
    font-size: 12px;
    color: #446e75;
    font-weight: 400;
    height: 10px;
    margin-bottom: 6px;
    opacity: 0.6;
}

/* Timeline item title styling */
.timeline-item-title {
    font-size: 16px;
    color: #6dabb6;
    font-weight: 400;
    height: 45px;
    width: 205px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Timeline item space styling */
.timeline-item-space {
    height: 20px;
}

/* Timeline item line styling */
.timeline-item-line {
    width: 20px;
    height: 20px;
    background-image: url(../images/timeline/timeline_space.png);
    background-size: cover;
}

/* Timeline item hover effect - brightness only */
.timeline-item:hover .timeline-item-image {
    filter: brightness(1.7);
    transition: filter 0.2s ease;
}

/* Timeline item text hover effect - brightness only */
.timeline-item:hover .timeline-item-text {
    filter: brightness(1.7);
    transition: filter 0.2s ease;
}

/* Timeline item cursor */
.timeline-item {
    cursor: pointer;
}

/* Timeline item elements transition */
.timeline-item-image,
.timeline-item-text {
    transition: filter 0.2s ease;
}

/* Timeline dot with new content gets gold styling */
.timeline-item-dot.marker.new 
{
    background: linear-gradient(45deg, #ffd700, #ffed4e) !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
    animation: timeline-new-pulse 2s ease-in-out infinite;
}

@keyframes timeline-new-pulse 
{
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Hide the badge for timeline items */
.timeline-item-image .timeline-item-badge {
    display: none !important;
}

/*-----------------------------------------------------
HIGHLIGHT
-----------------------------------------------------*/

/* Highlight container styling */
.highlight {
}

/* Highlight dropcap flex container styling */
.highlight .dropcap-flex {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

/* Highlight dropcap styling */
.highlight .dropcap {
    background: none;
    width: clamp(60px, 12vw, 160px);
    height: clamp(60px, 12vw, 160px);
    margin-right: 18px;
    margin-bottom: 0;
    display: block;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 120%;
    background-position: center center;
}

/* Highlight dropcap title styling */
.highlight .dropcap-title {
    font-family: 'Cormorant', serif;
    font-size: clamp(24px, 3vw, 40px);
    font-weight: normal;
    color: #71c1cf;
    line-height: 1.3;
    text-transform: none !important;
    display: block;
    word-break: break-word;
    min-width: 0;
    flex: 1 1 0%;
}

/* Highlight main excerpt styling */
.highlight .main-excerpt {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    text-align: left;
    hyphens: auto;
    color: #5b88b2;
    word-wrap: break-word;
    margin: 0 20px 0 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Highlight main image styling */
.highlight .main-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    margin-top: 20px;
    border-radius: 10px;
    transition: filter 0.3s ease;
    position: relative;
}

.highlight .main-image .main-image-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 60px;
    height: 60px;
    background-image: url(../images/badges/badge_new.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) brightness(1.3);
    display: none;
}

.highlight .main-image.new .main-image-badge {
    display: block;
}

/* Highlight type styling - net boven image */
.highlight .highlight-type {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: #3a787f;
    margin: 10px 0 0 0;
}

.highlight .highlight-type b {
    color: #71c1cf;
    font-weight: 600;
}

/* Highlight link styling */
.highlight-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    border: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Remove all selection effects on click */
.highlight-link:active,
.highlight-link:visited {
    outline: none;
    border: none;
    box-shadow: none;
}

/* Highlight link hover effect */
.highlight-link:hover .main-image {
    filter: brightness(1.4);
    transition: filter 0.3s ease;
}

.highlight-link:hover .dropcap-title {
    filter: brightness(1.4);
    transition: filter 0.3s ease;
}

.highlight-link:hover .main-excerpt {
    filter: brightness(1.4);
    transition: filter 0.3s ease;
}

/* Highlight elements styling */
.highlight .main-image,
.highlight .dropcap-title,
.highlight .main-excerpt {
    transition: filter 0.3s ease;
}

/*-----------------------------------------------------
TILE
-----------------------------------------------------*/

/* Tile link styling */
.tile-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    border: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Remove all selection effects on click */
.tile-link:active,
.tile-link:visited {
    outline: none;
    border: none;
    box-shadow: none;
}

/* Tile container styling */
.tile {
    grid-column: 2 / 3;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 10px;
    position: relative; /* Add this line */
}

/* Tile hover effect - image zoom and brightness */
.tile:hover {
    filter: brightness(1.5);
}

/* Tile positioning styling */
.tile.tile-1 { grid-row: 1 / 2; }
.tile.tile-2 { grid-row: 2 / 3; }
.tile.tile-3 { grid-row: 3 / 4; }

/* Tile content container styling */
.tile .tile-content {
    padding: 10px 10px 0 20px;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Tile type styling */
.tile .tile-type {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    hyphens: auto;
    color: #5b88b2;
    word-wrap: break-word;
    text-transform: uppercase;
    text-shadow:
    0 2px 8px rgba(0,0,0,0.85),
    0 0px 2px rgba(0,0,0,0.7),
    0 1px 0 rgba(0,0,0,0.8),
    0 0 12px rgba(0,0,0,0.5);
}

/* Tile title styling */
.tile .tile-title {
    font-family: 'Outfit', sans-serif;
    width: 100%;
    font-size: clamp(16px, 2.1vw, 21px);
    font-weight: 400;
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-shadow:
        0 2px 10px rgba(0,0,0,0.95),
        0 0px 4px rgba(0,0,0,0.85),
        0 1px 0 rgba(0,0,0,0.9),
        0 0 15px rgba(0,0,0,0.7);
    color: #71c1cf;
}

.tile .tile-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    background-image: url(../images/badges/badge_new.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) brightness(1.3);
    display: none;
}

.tile.new .tile-badge {
    display: block;
}

/* Bottom tiles: slightly taller tiles on desktop */
.bottom-tiles .tile {
    height: 220px;
}

/* Responsive design for tiles */
@media (max-width: 1200px) {
    /* Responsive side tiles */
    .side-tiles {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        width: 100%;
    }
    
    /* Responsive tile styling */
    .tile {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0;
        height: 200px;
    }
    
    /* Responsive bottom tiles */
    .bottom-tiles {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
        grid-row: 3 / 4;
        grid-column: 1 / 2;
        width: 100%;
    }

    /* Bottom tiles: a bit taller on medium screens */
    .bottom-tiles .tile {
        height: 210px;
    }
}

@media (max-width: 640px) {
    /* Responsive side tiles for small screens */
    .frontpage-layout .side-tiles {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px;
    }
    
    /* First tile spans both columns on small screens */
    .frontpage-layout .side-tiles .tile:nth-child(1) {
        grid-column: 1 / 3 !important;
    }
    
    /* Responsive tile height for small screens */
    .tile {
        height: 160px;
    }
    
    /* Responsive bottom tiles for small screens */
    .bottom-tiles {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px;
    }
}

/*-----------------------------------------------------
CATEGORIES
-----------------------------------------------------*/

.content-category-title {
    margin-top: 10px;
    text-align: left; 
}

/* Content category link styling */
.content-category-link {
    font-size: 20px;
    color: #6dabb6;
    font-weight: 400;
    font-family: "Outfit", sans-serif;
    margin-bottom: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Content category link anchor styling */
.content-category-link a {
    color: #6dabb6;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    position: relative;
}

/* Content category link bullet styling */
.content-category-link a::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% + 2px);
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url(../images/categories/bullet.png);
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Content category link marker styling */
.content-category-link.new  a::before {
    background-image: url(../images/categories/bullet_gold.png);
}

/* Content category link type styling */
.category-link-type {
    font-weight: 600;
    color: #3f6d98;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Content category link title styling */
.category-link-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Content category link hover styling */
.content-category-link a:hover {
    color: #9de6f1;
}

.content-category-link a:hover .category-link-type {
    color: #9de6f1;
}

/* Responsive design for content category links */
@media (max-width: 1200px) {
    .content-category-link,
    .content-category-link a {
        font-size: 16px;
    }
    
    .content-category-link a {
        padding-left: 18px;
    }
    
    .content-category-link a::before {
        width: 10px;
        height: 10px;
        background-size: 10px 10px;
    }
    
    .category-link-type {
        margin-right: 8px;
    }
}

@media (max-width: 900px) {
    .content-category-link,
    .content-category-link a {
        font-size: 14px;
    }
    
    .content-category-link a {
        padding-left: 16px;
    }
    
    .content-category-link a::before {
        width: 8px;
        height: 8px;
        background-size: 8px 8px;
    }
    
    .category-link-type {
        margin-right: 6px;
    }
}

@media (max-width: 640px) {
    .content-category-link,
    .content-category-link a {
        font-size: 12px;
    }
    
    .content-category-link a {
        padding-left: 14px;
    }
    
    .content-category-link a::before {
        width: 6px;
        height: 6px;
        background-size: 6px 6px;
    }
    
    .category-link-type {
        margin-right: 4px;
    }
}

/*-----------------------------------------------------
ARTICLE
-----------------------------------------------------*/

/* Article page container styling */
.article-page {
    width: 100%;
    max-width: 100%;
}

/* Article content container styling */
.article-content {
    width: 100%;
    max-width: 100%;
}

/* Article full display styling */
.article-full {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

}

/* Article dropcap flex container styling */
.article-full .dropcap-flex {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    margin-bottom: 30px;
}

/* Article dropcap styling */
.article-full .dropcap {
    background: none;
    width: clamp(80px, 15vw, 200px);
    height: clamp(80px, 15vw, 200px);
    margin-right: 25px;
    margin-bottom: 0;
    display: block;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 120%;
    background-position: center center;
}

/* Article dropcap title styling */
.article-full .dropcap-title {
    font-family: 'Cormorant', serif;
    font-size: clamp(30px, 4vw, 50px);
    font-weight: normal;
    color: #71c1cf;
    line-height: 1.2;
    text-transform: none !important;
    display: block;
    word-break: break-word;
    min-width: 0;
    flex: 1 1 0%;
    margin-top: 10px;
}

/* Article stardate styling
.article-full .article-stardate {
    font-size: 22px;
    color: #50787f;
    font-weight: 400;
    text-align: left;
} */

/* Article image styling */
.article-full .article-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 10px;
    position: relative;
}

.article-full .article-image .article-image-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 64px;
    height: 64px;
    background-image: url(../images/badges/badge_new.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) brightness(1.3);
    display: none;
}

.article-full .article-image.new .article-image-badge {
    display: block;
}

/* Article excerpt styling */
.article-full .article-excerpt {
    font-family: 'Crimson Text', serif;
    font-size: 29px;
    line-height: 1.6;
    text-align: left;
    hyphens: auto;
    color: #6f9dc8;
    word-wrap: break-word;
    margin: 30px 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 400;
    padding-top: 10px;
}

.article-full .article-excerpt p {
    margin: 0;
    padding: 0;
}

/* Article body styling */
.article-full .article-body {
    font-family: 'Crimson Text', serif;
    font-size: 29px;
    line-height: 1.6;
    text-align: left;
    hyphens: auto;
    color: #6daab8;
    word-wrap: break-word;
    margin: 30px 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 400;
}

.article-full .article-body strong {
    color: #d4a574;
    font-weight: 400;
    font-family: 'Outfit', sans-serif;
    font-size: 25px;
}

.article-full .article-body b {
    color: #90c8d5;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
}

.article-full .article-body p {
    margin: 0 0 20px 0;
    padding: 0;
}

.article-full .article-body p:last-child {
    margin-bottom: 0;
}

/* Article conclusion styling */
.article-full .article-conclusion {
    font-family: 'Crimson Text', serif;
    font-size: 29px;
    line-height: 1.6;
    text-align: left;
    hyphens: auto;
    color: #6f9dc8;
    word-wrap: break-word;
    margin: 40px 0 30px 0;
    box-sizing: border-box;
    font-weight: 400;
}

.article-full .article-conclusion p {
    margin: 0 0 20px 0;
    padding: 0;
}

.article-full .article-conclusion p:last-child {
    margin-bottom: 0;
}

.article-full .article-conclusion strong {
    color: #71c1cf;
    font-weight: 600;
}

/* Article meta styling */
.article-full .article-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0 10px 0;
    align-items: flex-start;
    font-size: 25px;
}

/* Article meta bold styling */
.article-full .article-meta .meta-label {
    display: inline-block;
    color: #71c1cf;
    font-weight: 400;
    width: 110px;
}

/* Article type styling */
.article-full .article-type
{
    font-family: 'Outfit', sans-serif;
    line-height: 1.3;
    text-align: left;
    color: #3a787f;
    margin: 0;
}

/* Ensure the first meta value (type) has no fixed width and does not wrap */
.article-full .article-type .meta-value
{
    display: inline;
    width: auto;
    white-space: nowrap;
}

.article-full .article-source {
    font-family: 'Crimson Text', serif;
    font-size: 20px;
    line-height: 1.3;
    text-align: left;
    color: #6f9dc8;
    margin: 0;
    opacity: 0.6;
    font-style: italic;
    cursor: pointer;
}

.article-full .article-source:hover {
    opacity: 1;
}

.article-full .article-type .meta-label {
    color: #3a787f;
}

/* Article author styling - zoals oude stardate */
.article-full .article-author {
    font-family: 'Outfit', sans-serif;
    line-height: 1.3;
    text-align: left;
    color: #3a787f;
}

/* Article location styling - zoals oude stardate */
.article-full .article-location {
    font-family: 'Outfit', sans-serif;
    line-height: 1.3;
    text-align: left;
    color: #3a787f;
}

/* Article stardate styling - nu met labels zoals oude author/location */
.article-full .article-stardate {
    font-family: 'Outfit', sans-serif;
    line-height: 1.3;
    text-align: left;
    color: #3a787f;
}

/* Article rating styling */
.article-full .article-rating {
    display: block;
    font-family: 'Outfit', sans-serif;
    line-height: 1.3;
    text-align: left;
    color: #3a787f;
}

/* Media queries for smaller screens - Article fonts */
@media (max-width: 768px) {
    .article-full .article-excerpt {
        font-size: 24px;
    }
    
    .article-full .article-body {
        font-size: 24px;
    }
    
    .article-full .article-conclusion {
        font-size: 24px;
    }
    
    .article-full .article-body strong {
        font-size: 21px;
    }
    
    .article-full .article-body b {
        font-size: 22px;
    }
}

@media (max-width: 640px) {
    .article-full .article-excerpt {
        font-size: 22px;
    }
    
    .article-full .article-body {
        font-size: 22px;
    }
    
    .article-full .article-conclusion {
        font-size: 22px;
    }
    
    .article-full .article-body strong {
        font-size: 19px;
    }
    
    .article-full .article-body b {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .article-full .article-excerpt {
        font-size: 20px;
    }
    
    .article-full .article-body {
        font-size: 20px;
    }
    
    .article-full .article-conclusion {
        font-size: 20px;
    }
    
    .article-full .article-body strong {
        font-size: 17px;
    }
    
    .article-full .article-body b {
        font-size: 18px;
    }
}

/*======================================================================================*/
/* RATING */
/*======================================================================================*/

.star-rating 
{
    display: inline-flex;
    align-items: center;
    margin: 0;
    vertical-align: middle;
}

.star 
{
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-right: 4px;
}

.star-full 
{
    background-image: url('../images/rating/rating_full.png');
}

.star-half 
{
    background-image: url('../images/rating/rating_half.png');
}

.star-empty 
{
    background-image: url('../images/rating/rating_empty.png');
}

.rating-score 
{
    font-size: 1em;
    color: #3a787f;
    margin-left: 10px;
    padding-bottom: 2px;
}

/* Rating in meta section */
.article-meta .star-rating 
{
    margin: 0;
}

.article-meta .star 
{
    width: 26px;
    height: 26px;
}

.article-meta .rating-score 
{
    font-size: 0.9em;
}

/*===================================================*/
/*===================================================*/
/*===================================================*/
/*-----------------------------------------------------
LITTLE CONTENT
-----------------------------------------------------*/
/*===================================================*/
/*===================================================*/
/*===================================================*/

/* Little ads page styling */
.little-content-page {
    width: 100%;
    max-width: 100%;
}

/* Little ads grid */
.little-content-page .little-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

/* Responsive breakpoint - 1 column on smaller screens */
@media (max-width: 1024px) {
    .little-content-page .little-content-grid {
        grid-template-columns: 1fr;
    }
}

.little-content {
    width: 100%;
    box-sizing: border-box;
    padding: 25px 25px 5px 25px;
    border: 1px solid #2f5960;
    border-radius: 8px;
    /* background: radial-gradient(circle at bottom right, #11292f, #000000); */
    background-color: #061013;
    /* background-color: #010709; */
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* Text elements */
.little-content .dropcap-flex,
.little-content .stardate,
.little-content .title,
.little-content .body,
.little-content .conclusion,
.little-content .contact,
.little-content .author {
    position: relative;
    z-index: 10;
    max-width: 100%;
    pointer-events: none;
}

/* Dropcap layout */
.little-content .dropcap-flex {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    max-width: none;
    padding-right: 40px;
}

/* Dropcap styling */
.little-content .dropcap {
    background: none;
    width: clamp(70px, 8.4vw, 95px);
    height: clamp(70px, 8.4vw, 95px);
    margin-bottom: 0;
    display: block;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 120%;
    background-position: center center;
    flex-shrink: 0;
}

/* Title next to dropcap */
.little-content .dropcap-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(20px, 2.8vw, 30px);
    font-weight: normal;
    color: #9de6f1;
    line-height: 1.2;
    text-transform: none !important;
    display: block;
    word-break: break-word;
    min-width: 0;
    flex: 1 1 0%;
    margin-top: -8px;
    margin-left: 5px;
    max-width: 85%;
    height: clamp(90px, 8.4vw, 110px);
    display: flex;
    align-items: flex-start;
    padding-top: 3px;
}

/* Stardate styling */
.little-content .stardate {
    font-size: 22px;
    color: #50787f;
    font-weight: 400;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 15px;
    margin-top: 10px;
}

/* Body text styling */
.little-content .body {
    font-family: 'Crimson Text', serif;
    font-size: clamp(20px, 2.8vw, 27px);
    line-height: 1.3;
    text-align: left;
    hyphens: auto;
    color: #6daab8;
    word-wrap: break-word;
    padding: 0;
    box-sizing: border-box;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: clamp(15px, 2vw, 25px); /* Scalable margin */
}

.little-content .bottom-elements {
    margin-bottom: 65px;
}

/* Conclusion styling */
.little-content .conclusion {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(18px, 2.8vw, 22px);
    font-weight: normal;
    color: #9de6f1;
    line-height: 1.3;
    text-transform: none !important;
    display: block;
    word-break: break-word;
    min-width: 0;
    margin-top: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: clamp(12px, 1.8vw, 20px); /* Scalable margin */

}

/* Contact styling */
.little-content .contact {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(18px, 2.8vw, 22px);
    line-height: 1.3;
    text-align: left;
    hyphens: auto;
    word-wrap: break-word;
    color: #6f9dc8;
    margin-top: 10px;
    font-style: italic;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: clamp(12px, 1.8vw, 20px); /* Scalable margin */
}

/* Author styling */
.little-content .author {
    position: absolute;
    bottom: 20px;
    left: 25px;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #355a5e;
    text-align: left;
    margin-bottom: 10px;
    margin-top: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1.0);
}

/* Background image styling */
.little-content .image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 512px;
    height: 512px;
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: 1;
    -webkit-mask-image: radial-gradient(
      circle at bottom right,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 20%,
      rgba(255,255,255,0) 70%
    );
    mask-image: radial-gradient(
      circle at bottom right,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 20%,
      rgba(255,255,255,0) 70%
    );
    cursor: pointer;
    transition: filter 0.3s ease;
}

/* Behoud de originele image hover */
.little-content:hover .image {
    filter: brightness(1.2);
}

/* Voeg toe: image licht ook bij link hover */
.little-content .content-entity-link:hover ~ .image,
.little-content .content-entity-link:hover + .image {
    filter: brightness(1.2);
}

/* Badge styling */
.little-content .badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 52px;
    height: 52px;
    background-image: url(../images/badges/badge_new.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) brightness(1.3);
    display: none;
    z-index: 10;
}

/* Badge styling */
.little-content.new .badge {
    display: block;
}

/* Meta label styling */
.little-content .meta-label {
    color: #248e99;
    font-weight: 400;
    display: inline-block;
    text-align: left;
}

/* Meta label colon */
.little-content .meta-label::after {
    content: ":";
}

.little-content .body .content-entity-link {
    font-family: 'Crimson Text', serif;
    pointer-events: auto;
    font-weight: 600;
}

.little-content .conclusion .content-entity-link {
    pointer-events: auto;
    font-weight: 600;
}

.little-content .content-entity-link:hover {
    background-color: transparent;
    color: white;
}

/* Responsive adjustments */
@media (max-width: 800px) {
    .little-content .body,
    .little-content .contact,
    .little-content .author {
        max-width: 100%;
    }
}

/*-----------------------------------------------------
REACTIONS
-----------------------------------------------------*/

.article-reactions {
    margin-top: 40px;
}

.article-reactions h3 {
    margin: 30px 0 30px 0;
}

.article-reactions h4,
.article-reactions h5 {
    font-family: 'Outfit', sans-serif;
    font-size: 23px;
    font-weight: 400;
    color: #8984c2;
    text-align: left;
    margin-bottom: 0;
    margin-top: 0;
}

/* .article-reactions h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 23px;
    font-weight: 400;
    color: #8984c2;
    text-align: left;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    padding-left: 20px;
}

.article-reactions h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #cd5757;
    border-radius: 50%;
} */

.article-reactions h5 {
    font-size: 20px;
    opacity: 0.7;
    margin-bottom: 10px;
}

.article-reactions p {
    font-family: 'Crimson Text', serif;
    font-size: 25px;
    line-height: 1.4;
    color: #4a5ca9;
    margin: 0 0 20px 0;
    font-weight: 400;
}

.article-reactions p strong {
    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    line-height: 1.4;
    color: #9b72c1;
    font-weight: normal;
}

/* Interview styling - extra ruimte tussen sprekers */
.article-full.interview .article-body strong {
    display: block;
    margin-top: 20px;
    margin-bottom: 0;
}

/* Eerste spreker heeft geen margin-top */
.article-full.interview .article-body strong:first-of-type {
    margin-top: 0;
}

/*-----------------------------------------------------
RELATED CONTENT
-----------------------------------------------------*/

.related-contents {
    margin-top: 30px;
}

.related-contents h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 34px;
    color: #5b88b2;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 0;
}

.related-item {
    display: flex;
    margin-bottom: 1rem;
    margin-top: 30px;
    width: 100%;
    min-width: 0; /* Allow flex items to shrink below content size */
}

.related-link {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.related-image {
    width: 90px;
    height: 90px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    margin-right: 1rem;
    margin-top: 6px;
    border: 1px solid #6dabb6;
    border-radius: 12px;
    position: relative;
}

.related-content {
    flex: 1;
    min-width: 0; /* Allow flex item to shrink */
    overflow: hidden; /* Contain any overflow */
}

.related-meta {
    font-size: 0.9em;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.related-type {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    color: #5d8792;
    font-weight: 400;
    margin-bottom: 0;
    text-transform: lowercase;
    transition: opacity 0.2s ease;
}

.related-stardate {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    color: #446e75;
    font-weight: 400;
    margin-bottom: 0;
    text-transform: lowercase;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.related-title {
    font-family: "Outfit", sans-serif;
    font-size: 18px;
    color: #6dabb6;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -6px;
    transition: color 0.2s ease;
}

.related-excerpt {
    font-family: 'Crimson Text', serif;
    font-size: 20px;
    color: #6f99c0;
    opacity: 0.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    transition: opacity 0.2s ease;
}

/* Related item hover effect - brightness only */
.related-link:hover .related-image {
    filter: brightness(1.7);
    transition: filter 0.2s ease;
}

/* Related text hover effect */
.related-link:hover .related-type,
.related-link:hover .related-stardate {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.related-link:hover .related-title {
    color: #8fc4d0;
    transition: color 0.2s ease;
}

.related-link:hover .related-excerpt {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Related image transition */
.related-image {
    transition: filter 0.2s ease;
}

/*-----------------------------------------------------
ENTITY LINKS
-----------------------------------------------------*/

/* Entity link styling */
.content-entity-link {
    cursor: pointer;
    color: #6d93b8;
    font-style: italic;
    transition: all 0.2s ease;
}

.content-entity-link:hover {
    background-color: rgba(152, 239, 248, 0.1);
}

.article-full .article-excerpt .content-entity-link,
.article-full .article-conclusion .content-entity-link {
    color: #6f82c8;
}

/*-----------------------------------------------------
DEBUG INFO
-----------------------------------------------------*/

.debug-info {
    font-family: 'Outfit', sans-serif;
    position: absolute;
    top: 3px;
    left: 4px;
    color: black;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1px;
    border-radius: 5px;
    background-color: #fff;
    z-index: 1000;
    border: 1px solid black;
    opacity: 0.5;
}