/* ==========================================================================
   One crypto news item — two-column layout and sidebar (2026-11-11).

   Loaded only on is_singular('cryptonews'), after cryptonews.css, whose
   `--cn-*` tokens (light + dark) are reused here. `.arz-cns-side` is not
   inside `.arz-cn-single`, so it declares the same token scope by sharing
   the dark re-point below. Plain CSS, logical properties only (RTL).
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */

.arz-cns-side {
    --cn-surface: #ffffff;
    --cn-surface-sunken: rgb(242 244 250);
    --cn-hairline: rgb(211 214 227);
    --cn-border: rgb(182 185 204);
    --cn-title: rgb(55 59 79);
    --cn-text: rgb(78 83 107);
    --cn-muted: rgb(104 109 135);
    --cn-faint: rgb(128 133 158);
    --cn-primary: rgb(0 203 140);
    --cn-primary-strong: rgb(0 158 109);
    --cn-primary-wash: rgb(230 252 245);
    --cn-danger-mark: rgb(255 25 59);
    --cn-shadow: 0px 3px 15px 0px rgba(55, 59, 79, 0.06);
}

html.dark-mode .arz-cns-side {
    --cn-surface: rgb(var(--arz-c-block));
    --cn-surface-sunken: rgb(var(--arz-c-over));
    --cn-hairline: rgb(var(--arz-c-border));
    --cn-border: rgb(var(--arz-c-border-strong));
    --cn-title: rgb(var(--arz-c-title));
    --cn-text: rgb(var(--arz-c-text));
    --cn-muted: rgb(var(--arz-c-muted));
    --cn-faint: rgb(var(--arz-c-caption));
    --cn-primary: rgb(var(--arz-c-primary));
    --cn-primary-strong: rgb(var(--arz-c-primary-strong));
    --cn-primary-wash: rgb(var(--arz-c-primary-tint));
    --cn-danger-mark: rgb(255 101 124);
    --cn-shadow: 0 0 0 1px rgb(var(--arz-c-border));
}

/* ---------------------------------------------------------------- layout */

.arz-cns-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.arz-cns-main {
    min-width: 0;
}

@media (min-width: 1024px) {
    .arz-cns-layout {
        display: grid;
        /* DOM order main → aside; in RTL the aside lands on the left. */
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 2rem;
        align-items: start;
    }
}

/* ---------------------------------------------------------------- the item card */

.arz-cns-main .arz-cn-single {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}

.arz-cns-main .arz-cn-single::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(to left, var(--cn-primary), var(--cn-primary-strong));
}

@media (min-width: 768px) {
    .arz-cns-main .arz-cn-single {
        padding: 2rem 2.5rem;
    }
}

.arz-cns-main .arz-cn-single__body.entry-content {
    padding-block: 1.5rem;
    font-size: 1.1875rem;
    line-height: 2.25;
    color: var(--cn-title);
}

.arz-cns-main .arz-cn-single__source {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--cn-surface-sunken);
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- share bar */

.arz-cns-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 1rem;
}

.arz-cns-share__label {
    font-size: 0.875rem;
    color: var(--cn-muted);
    margin-inline-end: 0.25rem;
}

.arz-cns-share__btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 0.875rem;
    border-radius: 999px;
    border: 1px solid var(--cn-hairline);
    background: var(--cn-surface);
    color: var(--cn-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.arz-cns-share__btn:hover,
.arz-cns-share__btn:focus-visible {
    border-color: var(--cn-primary);
    color: var(--cn-primary-strong);
    background: var(--cn-primary-wash);
}

/* ---------------------------------------------------------------- sidebar */

.arz-cns-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (min-width: 1024px) {
    .arz-cns-side {
        margin-block-start: 1.5rem; /* lines up with the item card */
        gap: 1.25rem;
    }
}

.arz-cns-card {
    display: block;
    padding: 1.25rem;
    border-radius: 1rem;
    background: var(--cn-surface);
    box-shadow: var(--cn-shadow);
    color: var(--cn-text);
}

.arz-cns-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cn-title);
}

.arz-cns-card__title::before {
    content: "";
    width: 4px;
    height: 1.1em;
    border-radius: 2px;
    background: var(--cn-primary);
}

.arz-cns-card__more {
    display: inline-block;
    margin-block-start: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cn-primary-strong);
    text-decoration: none;
}

.arz-cns-card__more:hover { text-decoration: underline; }

/* coin */

.arz-cns-coin__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.arz-cns-coin__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0;
}

.arz-cns-coin__names {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

.arz-cns-coin__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cn-title);
}

.arz-cns-coin__symbol {
    font-size: 0.8125rem;
    color: var(--cn-faint);
    text-align: end;
}

.arz-cns-coin__text {
    margin: 0.75rem 0 1rem;
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--cn-muted);
}

.arz-cns-coin__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.arz-cns-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 0.625rem;
    border: 1px solid var(--cn-hairline);
    color: var(--cn-title);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.arz-cns-btn:hover { border-color: var(--cn-primary); color: var(--cn-primary-strong); }

.arz-cns-btn--primary {
    border-color: transparent;
    background: var(--cn-primary-strong);
    color: #fff;
}

.arz-cns-btn--primary:hover {
    background: var(--cn-primary);
    color: #fff;
    border-color: transparent;
}

/* latest */

.arz-cns-latest {
    margin: 0;
    padding: 0;
    list-style: none;
}

.arz-cns-latest__item + .arz-cns-latest__item {
    border-block-start: 1px solid var(--cn-hairline);
}

.arz-cns-latest__link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 0.75rem;
    text-decoration: none;
}

.arz-cns-latest__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.85;
    color: var(--cn-title);
    transition: color 0.2s;
}

.arz-cns-latest__link:hover .arz-cns-latest__title { color: var(--cn-primary-strong); }

.arz-cns-latest__item.is-breaking .arz-cns-latest__title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: 0.4rem;
    border-radius: 50%;
    background: var(--cn-danger-mark);
    vertical-align: middle;
}

.arz-cns-latest__meta {
    display: flex;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--cn-faint);
}

/* weekly report */

.arz-cns-weekly {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    text-decoration: none;
    background: linear-gradient(135deg, var(--cn-primary-wash), var(--cn-surface));
    border: 1px solid var(--cn-hairline);
}

.arz-cns-weekly__kicker { font-size: 0.8125rem; font-weight: 700; color: var(--cn-primary-strong); }
.arz-cns-weekly__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.8; color: var(--cn-title); }
.arz-cns-weekly__text { font-size: 0.875rem; line-height: 1.9; color: var(--cn-muted); }
.arz-cns-weekly__cta { margin-block-start: 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--cn-primary-strong); }
.arz-cns-weekly:hover .arz-cns-weekly__title { color: var(--cn-primary-strong); }

/* The shared «Follow us» box carries Tailwind spacing meant for the article
   sidebar; inside this column the flex gap handles it. */
.arz-cns-side > .mt-4 { margin-block-start: 0 !important; }