/**
 * minCore News Component Styles
 * BEM CSS for GeorgRinger/news Extension
 *
 * Naming: min-news (Block), __element (Element), --modifier (Modifier)
 */

/* ==========================================================================
   CSS Custom Properties (News-specific)
   ========================================================================== */

:root {
    /* News Colors */
    --min-news-text: var(--mincore-text, #333);
    --min-news-text-muted: #666;
    --min-news-bg: var(--mincore-bg, #fff);
    --min-news-border: var(--mincore-border, #ddd);
    --min-news-primary: var(--mincore-primary, #0078d4);
    --min-news-hover-bg: var(--mincore-hover-bg, #f5f5f5);

    /* Spacing */
    --min-news-gap: var(--mincore-spacing-lg, 1.5rem);
    --min-news-gap-sm: var(--mincore-spacing-md, 1rem);
    --min-news-padding: var(--mincore-spacing-lg, 1.5rem);

    /* Typography */
    --min-news-title-size: 1.5rem;
    --min-news-title-size-sm: 1.25rem;
    --min-news-meta-size: 0.875rem;
    --min-news-teaser-size: 1rem;
    --min-news-line-height: 1.6;

    /* Border & Radius */
    --min-news-radius: var(--mincore-radius, 4px);
    --min-news-radius-lg: var(--mincore-radius-lg, 8px);

    /* Transitions */
    --min-news-transition: var(--mincore-transition, 0.2s ease);

    /* Image Aspect Ratios */
    --min-news-aspect-ratio-list: 16 / 9;
    --min-news-aspect-ratio-teaser: 4 / 3;
    --min-news-aspect-ratio-thumb: 1 / 1;
}

/* ==========================================================================
   Base Wrapper
   ========================================================================== */

.min-news {
    color: var(--min-news-text);
    line-height: var(--min-news-line-height);
}

/* ==========================================================================
   List View
   ========================================================================== */

.min-news--list {
    margin-bottom: var(--min-news-gap);
}

.min-news__list {
    display: grid;
    gap: var(--min-news-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Grid Layout Options */
.min-news__list--grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.min-news__list--2cols {
    grid-template-columns: repeat(2, 1fr);
}

.min-news__list--3cols {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .min-news__list--2cols,
    .min-news__list--3cols {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   List Item
   ========================================================================== */

.min-news__item {
    display: flex;
    flex-direction: column;
    background: var(--min-news-bg);
    border: 1px solid var(--min-news-border);
    border-radius: var(--min-news-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--min-news-transition),
                transform var(--min-news-transition);
}

.min-news__item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .min-news__item:hover {
        transform: none;
    }
}

.min-news__item--featured {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .min-news__item--featured {
        grid-column: span 1;
    }
}

/* Horizontal Layout */
.min-news__item--horizontal {
    flex-direction: row;
}

.min-news__item--horizontal .min-news__media-wrapper {
    flex: 0 0 40%;
    max-width: 40%;
}

@media (max-width: 640px) {
    .min-news__item--horizontal {
        flex-direction: column;
    }

    .min-news__item--horizontal .min-news__media-wrapper {
        flex: none;
        max-width: none;
    }
}

/* ==========================================================================
   Media / Images
   ========================================================================== */

.min-news__media-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--min-news-aspect-ratio-list);
    background: var(--min-news-border);
}

.min-news__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--min-news-transition);
}

.min-news__item:hover .min-news__image {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .min-news__item:hover .min-news__image {
        transform: none;
    }
}

/* Lazy Loading Placeholder */
.min-news__image[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: min-news-skeleton 1.5s ease-in-out infinite;
}

@keyframes min-news-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .min-news__image[loading="lazy"] {
        animation: none;
        background: #f0f0f0;
    }
}

/* ==========================================================================
   Content Area
   ========================================================================== */

.min-news__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--min-news-padding);
}

.min-news__header {
    margin-bottom: var(--min-news-gap-sm);
}

.min-news__title {
    margin: 0 0 0.5rem 0;
    font-size: var(--min-news-title-size);
    font-weight: 600;
    line-height: 1.3;
}

.min-news__title-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--min-news-transition);
}

.min-news__title-link:hover,
.min-news__title-link:focus {
    color: var(--min-news-primary);
}

.min-news__title-link:focus-visible {
    outline: 2px solid var(--min-news-primary);
    outline-offset: 2px;
}

.min-news__teaser {
    margin: 0;
    font-size: var(--min-news-teaser-size);
    color: var(--min-news-text-muted);
}

/* ==========================================================================
   Meta Information
   ========================================================================== */

.min-news__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: auto;
    padding-top: var(--min-news-gap-sm);
    font-size: var(--min-news-meta-size);
    color: var(--min-news-text-muted);
    border-top: 1px solid var(--min-news-border);
}

.min-news__date,
.min-news__author {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.min-news__date::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") center/contain no-repeat;
}

.min-news__author::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   Categories & Tags
   ========================================================================== */

.min-news__categories,
.min-news__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 var(--min-news-gap-sm) 0;
    padding: 0;
    list-style: none;
}

.min-news__category,
.min-news__tag {
    display: inline-block;
}

.min-news__category-link,
.min-news__tag-link {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 9999px;
    transition: background-color var(--min-news-transition),
                color var(--min-news-transition);
}

.min-news__category-link {
    background: var(--min-news-primary);
    color: #fff;
}

.min-news__category-link:hover,
.min-news__category-link:focus {
    background: color-mix(in srgb, var(--min-news-primary) 80%, #000);
}

.min-news__tag-link {
    background: var(--min-news-hover-bg);
    color: var(--min-news-text);
}

.min-news__tag-link:hover,
.min-news__tag-link:focus {
    background: var(--min-news-border);
}

/* ==========================================================================
   Read More Link
   ========================================================================== */

.min-news__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--min-news-gap-sm);
    font-weight: 500;
    color: var(--min-news-primary);
    text-decoration: none;
    transition: gap var(--min-news-transition);
}

.min-news__read-more::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform var(--min-news-transition);
}

.min-news__read-more:hover::after,
.min-news__read-more:focus::after {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .min-news__read-more:hover::after,
    .min-news__read-more:focus::after {
        transform: none;
    }
}

.min-news__read-more:focus-visible {
    outline: 2px solid var(--min-news-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Badge (New, Featured, Top)
   ========================================================================== */

.min-news__badge {
    position: absolute;
    top: var(--min-news-gap-sm);
    left: var(--min-news-gap-sm);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--min-news-radius);
    z-index: 1;
}

.min-news__badge--new {
    background: #22c55e;
    color: #fff;
}

.min-news__badge--top {
    background: #f59e0b;
    color: #fff;
}

.min-news__badge--featured {
    background: var(--min-news-primary);
    color: #fff;
}

/* ==========================================================================
   Detail View
   ========================================================================== */

.min-news--detail {
    max-width: 800px;
    margin: 0 auto;
}

.min-news__detail-header {
    margin-bottom: var(--min-news-gap);
}

.min-news__detail-header .min-news__title {
    font-size: 2rem;
    margin-bottom: var(--min-news-gap-sm);
}

@media (min-width: 768px) {
    .min-news__detail-header .min-news__title {
        font-size: 2.5rem;
    }
}

.min-news__detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: var(--min-news-gap-sm) 0;
    border-top: 1px solid var(--min-news-border);
    border-bottom: 1px solid var(--min-news-border);
    font-size: var(--min-news-meta-size);
    color: var(--min-news-text-muted);
}

.min-news__detail-image {
    width: 100%;
    height: auto;
    margin-bottom: var(--min-news-gap);
    border-radius: var(--min-news-radius-lg);
}

.min-news__detail-body {
    font-size: 1.125rem;
    line-height: 1.8;
}

.min-news__detail-body p {
    margin: 0 0 1.5rem 0;
}

.min-news__detail-body h2 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem 0;
}

.min-news__detail-body h3 {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.75rem 0;
}

.min-news__detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--min-news-radius);
}

.min-news__detail-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--min-news-primary);
    background: var(--min-news-hover-bg);
    font-style: italic;
}

.min-news__detail-footer {
    margin-top: var(--min-news-gap);
    padding-top: var(--min-news-gap);
    border-top: 1px solid var(--min-news-border);
}

/* ==========================================================================
   Related News
   ========================================================================== */

.min-news__related {
    margin-top: calc(var(--min-news-gap) * 2);
    padding-top: var(--min-news-gap);
    border-top: 1px solid var(--min-news-border);
}

.min-news__related-title {
    font-size: 1.25rem;
    margin: 0 0 var(--min-news-gap) 0;
}

.min-news__related-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--min-news-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.min-news__related-item {
    display: flex;
    gap: var(--min-news-gap-sm);
    padding: var(--min-news-gap-sm);
    background: var(--min-news-hover-bg);
    border-radius: var(--min-news-radius);
    transition: background-color var(--min-news-transition);
}

.min-news__related-item:hover {
    background: var(--min-news-border);
}

.min-news__related-item .min-news__image {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--min-news-radius);
}

.min-news__related-item .min-news__title {
    font-size: 1rem;
    margin: 0;
}

/* ==========================================================================
   Social Share
   ========================================================================== */

.min-news__social-share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.min-news__social-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--min-news-hover-bg);
    border-radius: 50%;
    color: var(--min-news-text);
    text-decoration: none;
    transition: background-color var(--min-news-transition),
                color var(--min-news-transition);
}

.min-news__social-share-link:hover,
.min-news__social-share-link:focus {
    background: var(--min-news-primary);
    color: #fff;
}

.min-news__social-share-link:focus-visible {
    outline: 2px solid var(--min-news-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Back Link
   ========================================================================== */

.min-news__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--min-news-gap);
    color: var(--min-news-text-muted);
    text-decoration: none;
    transition: color var(--min-news-transition);
}

.min-news__back-link::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform var(--min-news-transition);
}

.min-news__back-link:hover,
.min-news__back-link:focus {
    color: var(--min-news-primary);
}

.min-news__back-link:hover::before,
.min-news__back-link:focus::before {
    transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .min-news__back-link:hover::before,
    .min-news__back-link:focus::before {
        transform: none;
    }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.min-news__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--min-news-gap);
    list-style: none;
    padding: 0;
}

.min-news__pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    background: var(--min-news-bg);
    border: 1px solid var(--min-news-border);
    border-radius: var(--min-news-radius);
    color: var(--min-news-text);
    text-decoration: none;
    transition: background-color var(--min-news-transition),
                border-color var(--min-news-transition),
                color var(--min-news-transition);
}

.min-news__pagination-link:hover,
.min-news__pagination-link:focus {
    background: var(--min-news-hover-bg);
    border-color: var(--min-news-primary);
}

.min-news__pagination-link--current {
    background: var(--min-news-primary);
    border-color: var(--min-news-primary);
    color: #fff;
    pointer-events: none;
}

.min-news__pagination-link:focus-visible {
    outline: 2px solid var(--min-news-primary);
    outline-offset: 2px;
}

.min-news__pagination-prev,
.min-news__pagination-next {
    font-weight: 500;
}

/* ==========================================================================
   Teaser View (Compact)
   ========================================================================== */

.min-news--teaser .min-news__list {
    display: flex;
    flex-direction: column;
    gap: var(--min-news-gap-sm);
}

.min-news--teaser .min-news__item {
    flex-direction: row;
    padding: var(--min-news-gap-sm);
}

.min-news--teaser .min-news__media-wrapper {
    flex: 0 0 120px;
    aspect-ratio: var(--min-news-aspect-ratio-teaser);
    border-radius: var(--min-news-radius);
}

.min-news--teaser .min-news__content {
    padding: 0 0 0 var(--min-news-gap-sm);
}

.min-news--teaser .min-news__title {
    font-size: var(--min-news-title-size-sm);
}

@media (max-width: 480px) {
    .min-news--teaser .min-news__item {
        flex-direction: column;
    }

    .min-news--teaser .min-news__media-wrapper {
        flex: none;
    }

    .min-news--teaser .min-news__content {
        padding: var(--min-news-gap-sm) 0 0 0;
    }
}

/* ==========================================================================
   Author Box
   ========================================================================== */

.min-news__author-box {
    display: flex;
    gap: var(--min-news-gap);
    padding: var(--min-news-gap);
    margin-top: var(--min-news-gap);
    background: var(--min-news-hover-bg);
    border-radius: var(--min-news-radius-lg);
}

.min-news__author-image {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.min-news__author-name {
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.min-news__author-bio {
    margin: 0;
    font-size: var(--min-news-meta-size);
    color: var(--min-news-text-muted);
}

/* ==========================================================================
   No JavaScript Fallback
   ========================================================================== */

.min-news__image.no-js-visible {
    opacity: 1 !important;
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .min-news {
        --min-news-text: #e5e5e5;
        --min-news-text-muted: #a3a3a3;
        --min-news-bg: #1a1a1a;
        --min-news-border: #333;
        --min-news-hover-bg: #262626;
    }
}

/* Manual Dark Mode Class */
.min-news--dark,
[data-theme="dark"] .min-news {
    --min-news-text: #e5e5e5;
    --min-news-text-muted: #a3a3a3;
    --min-news-bg: #1a1a1a;
    --min-news-border: #333;
    --min-news-hover-bg: #262626;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .min-news__item {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .min-news__image {
        max-width: 100%;
    }

    .min-news__read-more,
    .min-news__social-share,
    .min-news__pagination {
        display: none;
    }

    .min-news__detail-body {
        font-size: 12pt;
    }
}

/* ==========================================================================
   News Bento — still-praezise, 1 lead item plus up to four following items
   ========================================================================== */

.min-news-bento {
    --min-news-bg: var(--mincore-background, #fff);
    --min-news-border: var(--mincore-border-color, #ddd);
    --min-news-text: var(--mincore-text, #1a1a1a);
    --min-news-text-muted: var(--mincore-text-muted, #666);
    --min-news-primary: var(--mincore-primary, #0078d4);
    --min-news-hover-bg: var(--mincore-hover-bg, #f5f5f5);
    --min-news-gap: var(--mincore-spacing-lg, 1.5rem);
    --min-news-padding: var(--mincore-spacing-lg, 1.5rem);
    --min-news-title-size: 1.5rem;
    --min-news-title-size-sm: 1.25rem;
    --min-news-meta-size: 0.875rem;
    --min-news-teaser-size: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(14rem, auto);
    gap: var(--min-news-gap);
}

.min-news-bento__item {
    display: flex;
    min-width: 0;
    background: var(--min-news-bg);
    border: 1px solid var(--min-news-border);
    color: var(--min-news-text);
}

.min-news-bento__item--lead {
    grid-row: span 2;
}

/* One or two records are complete compositions in their own right; no empty
   grid cells are created just to imitate a five-record Bento group. */
.min-news-bento:where(:has(> .min-news-bento__item:only-child)) {
    grid-template-columns: minmax(0, 1fr);
}

.min-news-bento:where(:has(> .min-news-bento__item:nth-child(2):last-child)) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.min-news-bento:where(:has(> .min-news-bento__item:nth-child(2):last-child)) .min-news-bento__item--lead {
    grid-row: auto;
}

.min-news-bento:where(:has(> .min-news-bento__item:nth-child(3):last-child)) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.min-news-bento__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.min-news-bento__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--min-news-hover-bg);
}

.min-news-bento__image-link,
.min-news-bento__image picture,
.min-news-bento__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.min-news-bento__image img {
    object-fit: cover;
}

.min-news-bento__item--lead .min-news-bento__image {
    flex: 1 0 48%;
    aspect-ratio: auto;
}

.min-news-bento__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.75rem;
    padding: var(--min-news-padding);
}

.min-news-bento__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    color: var(--min-news-text-muted);
    font-size: var(--min-news-meta-size);
}

.min-news-bento__category {
    color: var(--min-news-primary);
    font-weight: 600;
}

.min-news-bento__title {
    margin: 0;
    font-size: var(--min-news-title-size-sm);
    line-height: 1.25;
}

.min-news-bento__item--lead .min-news-bento__title {
    font-size: var(--min-news-title-size);
}

.min-news-bento__title-link,
.min-news-bento__readmore {
    color: inherit;
    text-decoration: none;
}

.min-news-bento__title-link:hover,
.min-news-bento__title-link:focus,
.min-news-bento__readmore:hover,
.min-news-bento__readmore:focus {
    color: var(--min-news-primary);
}

.min-news-bento__title-link:focus-visible,
.min-news-bento__readmore:focus-visible {
    outline: 2px solid var(--min-news-primary);
    outline-offset: 3px;
}

.min-news-bento__teaser {
    margin: 0;
    color: var(--min-news-text-muted);
    font-size: var(--min-news-teaser-size);
}

.min-news-bento__readmore {
    align-self: flex-start;
    margin-top: auto;
    color: var(--min-news-primary);
    font-weight: 600;
}

@media (max-width: 767px) {
    .min-news-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    .min-news-bento__item--lead {
        grid-row: auto;
    }

    .min-news-bento__item--lead .min-news-bento__image {
        aspect-ratio: 16 / 9;
    }
}

@media print {
    .min-news-bento__item {
        break-inside: avoid;
    }
}