/*
 * DOUT / NEWS "horizontal_slider" widget -- internal appearance (Prompt 1471).
 *
 * Prompt 1470 first extracted this carousel out of Article-detail-specific
 * markup/JS but left its CSS in common.css, so every desktop page downloaded
 * these rules even when the widget was never used. This file completes the
 * extraction: the widget is now fully self-contained (HTML + CSS + JS), all
 * requested by widget.html itself through the same presentation-aware asset
 * convention already used for its JS -- a page that never declares
 * `{% widget "horizontal_slider" ... %}` never loads this file at all.
 *
 * Every selector here is widget-owned (`.dn-widget-horizontal-slider__*`,
 * scoped under the root `data-dn-widget="horizontal-slider"` marker) --
 * nothing depends on an Article page id, on `.dn-article-related-*`, or on
 * 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 -- that primitive is genuinely cross-page already
 * (homepage section headings use it too), so it stays where genuinely shared
 * rules belong, not duplicated here.
 *
 * Article-specific rail placement/width (`.dn-article__context`) remains in
 * article-detail.css -- 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-horizontal-slider__nav {
    display: flex;
    gap: var(--space-2, 8px);
}

.dn-widget-horizontal-slider__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--dn-rule-subtle);
    border-radius: 2px;
    background: none;
    font-size: 13px;
    color: var(--dn-text-secondary);
    cursor: pointer;
}

.dn-widget-horizontal-slider__control:hover:not(:disabled) {
    border-color: var(--dn-accent-primary);
    color: var(--dn-accent-primary);
}

/* Non-wrapping boundary state: Previous/Next disable at the first/last item
 * rather than looping back around -- horizontal-slider.js sets this the same
 * way native form controls do, so it needs no extra ARIA. */
.dn-widget-horizontal-slider__control:disabled {
    opacity: 0.35;
    cursor: default;
}

.dn-widget-horizontal-slider__track {
    list-style: none;
    margin: 0;
    padding: var(--space-4, 16px) 0 0;
}

/* Inactive slides: hidden server-side by default for every slide but the
 * first, and toggled the same way by horizontal-slider.js. This explicit rule
 * guarantees the hidden state wins over `.dn-widget-horizontal-slider__link`'s
 * own `display` below -- author rules for a normal state cannot be trusted to
 * lose to the `hidden` attribute on specificity alone. */
.dn-widget-horizontal-slider__slide[hidden] {
    display: none;
}

.dn-widget-horizontal-slider__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.dn-widget-horizontal-slider__image {
    display: block;
    width: 100%;
    height: 168px;
    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-horizontal-slider__image--empty {
    border: 1px solid var(--dn-rule-subtle);
}

/* Metadata sits above the headline and wraps independently of it, so a long
 * source name never collides with a long headline. */
.dn-widget-horizontal-slider__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-horizontal-slider__source {
    font-weight: 700;
    color: var(--dn-text-primary);
}

/* No clamp: a long headline wraps across several lines rather than being
 * truncated to force one fixed line count. */
.dn-widget-horizontal-slider__title {
    font-family: var(--dn-font-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dn-text-primary);
}

.dn-widget-horizontal-slider__link:hover .dn-widget-horizontal-slider__title {
    color: var(--dn-accent-primary);
}

.dn-widget-horizontal-slider__dots {
    display: flex;
    margin-top: var(--space-3, 12px);
}

/* Each dot's real hit target (20px) is larger than its visible mark (6px,
 * centered via ::after) -- a restrained mark without a cramped click target. */
.dn-widget-horizontal-slider__dot {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.dn-widget-horizontal-slider__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dn-rule-subtle);
    transform: translate(-50%, -50%);
}

.dn-widget-horizontal-slider__dot[aria-current="true"]::after {
    background: var(--dn-accent-primary);
}