/*
 * DOUT / NEWS "vertical_list" widget -- internal appearance (Prompt 1474).
 *
 * Package-owned, self-contained from the start (following the Prompt 1471
 * pattern horizontal-slider.css already established): requested by
 * widget.html itself through the presentation-aware asset helper -- a page
 * that never declares `{% widget "vertical_list" ... %}` never loads this
 * file.
 *
 * Every selector here is widget-owned (`.dn-widget-vertical-list__*`) --
 * never named after any one collection this widget happens to render for a
 * given caller (Related Materials today; a future caller may as easily pass
 * it Latest articles, an Editor's pick, or an author's own articles), never
 * tied to an Article page id, and never any other page-specific parent
 * selector. The ONE exception is the heading row, which intentionally reuses
 * the shared `.dn-region-heading` primitive (common.css) unmodified -- the
 * same genuinely cross-page primitive horizontal_slider's own heading reuses.
 *
 * Visual contract: metadata (source + localized date) gets its own line
 * above each row's image/headline -- the old five-row Related list's failure
 * mode was cramming metadata beside the headline in the same narrow column.
 * The image sits to the LEFT of the headline, noticeably larger than the old
 * 84x56 thumbnails, at a size proportional to the Article rail's own width
 * (article-detail.css's `.dn-article__context`) without hard-coding that
 * page's own layout here -- this file only controls the widget's OWN
 * internal visual structure and renders correctly wherever a page gives it a
 * reasonable container width.
 */

.dn-widget-vertical-list__track {
    list-style: none;
    margin: 0;
    padding: var(--space-2, 8px) 0 0;
}

.dn-widget-vertical-list__item {
    border-bottom: 1px solid var(--dn-rule-subtle);
}

.dn-widget-vertical-list__item:last-child {
    border-bottom: 0;
}

.dn-widget-vertical-list__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px) 0;
}

/* Metadata's own line, above the image/headline row (section 16/19) -- never
 * beside the headline in the same narrow column. */
.dn-widget-vertical-list__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2, 8px);
    font-family: var(--dn-font-mono);
    font-size: 11px;
    color: var(--dn-text-secondary);
}

.dn-widget-vertical-list__source {
    font-weight: 700;
    color: var(--dn-text-primary);
}

.dn-widget-vertical-list__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
}

/* Noticeably larger than the old 84x56 Related-row thumbnail, while staying
 * proportional to the ~320px Article rail -- a fixed reserved size so a
 * missing image never shifts the headline's own alignment. */
.dn-widget-vertical-list__image {
    flex: 0 0 auto;
    width: 132px;
    height: 88px;
    object-fit: cover;
    border-radius: 1px;
    background: var(--dn-surface-panel);
}

/* Deliberate image-less state: a flat, bordered panel in the same warm
 * surface language as the rest of the page -- never a broken <img>, never
 * fake/stock imagery. */
.dn-widget-vertical-list__image--empty {
    border: 1px solid var(--dn-rule-subtle);
}

/* No clamp: a long headline wraps across several lines rather than being
 * truncated to force one fixed line count -- established editorial headline
 * typography (the same serif role every reading headline in this package
 * uses), sized/weighted to stay visually subordinate to the primary Article
 * headline itself. */
.dn-widget-vertical-list__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--dn-font-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--dn-text-primary);
}

.dn-widget-vertical-list__link:hover .dn-widget-vertical-list__title {
    color: var(--dn-accent-primary);
}