/*!
 * StaticPress theme "Blocksy" - modules.css
 *
 * Layer 5: the news components of the front page and of the archives.
 *
 * These modules have no Blocksy counterpart to port: the original ships them
 * as separate blocks of its own starter sites / companion plugins, so the
 * selectors below are new while the vocabulary is the theme one (the palette
 * and spacing tokens of tokens.css, the `.ct-*` prefix, the breakpoints
 * sm 480 / md 690 / lg 1000). The one exception is the slider: its markup is
 * the Blocksy flexy slider, so the `.flexy-*` class names are kept.
 *
 *   .ct-notice    公告条   rotating announcement lines, driven purely by CSS
 *   .ct-ticker    快讯条   the breaking-news bar, marquee + live.js/ticker.js
 *   .ct-slider    头条     the flexy headline carousel
 *   .ct-featured  精选     the magazine grid of the pinned posts
 *   .ct-cat-block 分类板块 one block per category with published posts
 *   .ct-popular   热门排行 the sidebar ranking, filled by live.js
 *   .ct-load-more 加载更多 the archive "load more" button / infinite scroll
 *   .ct-search    站内搜索 the search form, its overlay and its result list
 *
 * Every module is optional: base.html only loads its stylesheet rule set here,
 * and index.html only prints the markup while the matching theme.json option
 * is on.
 */

/* ================================================================ notice */
.ct-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
    padding: 14px 18px;
    border: var(--card-border);
    border-inline-start: 3px solid var(--theme-palette-color-1);
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-palette-color-8);
}

.ct-notice-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: rgba(40, 114, 250, 0.1);
    color: var(--theme-palette-color-1);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.ct-notice-single {
    margin: 0;
    color: var(--theme-palette-color-4);
    font-size: 14.5px;
}

/* The rotator keeps one line of height; every line is absolutely placed in it
   and its own `animation-delay` phases it into the cycle. The number of lines
   picks the keyframe (data-count), because a keyframe cannot read a variable
   in its percentage selectors. */
.ct-notice-rotator {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-notice-rotator li {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    color: var(--theme-palette-color-4);
    font-size: 14.5px;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
    animation-duration: var(--notice-cycle, 12s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: ct-notice-2;
}

.ct-notice-rotator[data-count='2'] li { animation-name: ct-notice-2; }
.ct-notice-rotator[data-count='3'] li { animation-name: ct-notice-3; }
.ct-notice-rotator[data-count='4'] li { animation-name: ct-notice-4; }
.ct-notice-rotator[data-count='5'] li { animation-name: ct-notice-5; }

@keyframes ct-notice-2 {
    0% { opacity: 0; transform: translateY(8px); }
    6% { opacity: 1; transform: translateY(0); }
    44% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

@keyframes ct-notice-3 {
    0% { opacity: 0; transform: translateY(8px); }
    6% { opacity: 1; transform: translateY(0); }
    27% { opacity: 1; transform: translateY(0); }
    33.33% { opacity: 0; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

@keyframes ct-notice-4 {
    0% { opacity: 0; transform: translateY(8px); }
    6% { opacity: 1; transform: translateY(0); }
    19% { opacity: 1; transform: translateY(0); }
    25% { opacity: 0; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

@keyframes ct-notice-5 {
    0% { opacity: 0; transform: translateY(8px); }
    6% { opacity: 1; transform: translateY(0); }
    14% { opacity: 1; transform: translateY(0); }
    20% { opacity: 0; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

/* ================================================================ ticker */
/* The dark bar of the news portal; the light archive below it is the
   "深浅混搭" contrast the front page is built on. */
.ct-ticker {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 34px;
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-dark-surface);
    color: var(--theme-dark-text);
    overflow: hidden;
}

.ct-ticker-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 12px 18px;
    background-color: var(--theme-palette-color-1);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.ct-ticker-viewport {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-block: 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
}

.ct-ticker-track {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0 30px 0 18px;
    list-style: none;
    white-space: nowrap;
    animation: ct-ticker-scroll var(--ticker-duration, 60s) linear infinite;
    will-change: transform;
}

.ct-ticker:hover .ct-ticker-track,
.ct-ticker:focus-within .ct-ticker-track {
    animation-play-state: paused;
}

.ct-ticker-item {
    flex: 0 0 auto;
}

.ct-ticker-item a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--theme-dark-text-strong);
    font-size: 14px;
}

.ct-ticker-item a:hover,
.ct-ticker-item a:focus {
    color: #ffffff;
}

.ct-ticker-item time {
    flex: 0 0 auto;
    color: var(--theme-palette-color-1);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ct-ticker-item a::after {
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    margin-inline-start: 18px;
    background-color: var(--theme-dark-border);
}

.ct-ticker-item:last-child a::after {
    display: none;
}

/* The track is duplicated once by ticker.js, so -50% is exactly one cycle. */
@keyframes ct-ticker-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* ================================================================ slider */
.ct-slider {
    margin-bottom: 46px;
}

.flexy-container {
    position: relative;
}

.flexy-view {
    overflow: hidden;
    border-radius: var(--theme-border-radius);
}

/* `--current-item` is the slide index slider.js writes on the track (a plain
   number, 0 based), which is the contract of the Blocksy flexy slider. */
.flexy-items {
    --current-item: 0;
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translate3d(calc(var(--current-item) * -100%), 0, 0);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.flexy-item {
    flex: 0 0 100%;
    min-width: 0;
}

.ct-slide {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 380px;
    overflow: hidden;
    background-color: var(--theme-dark-surface);
    background-image: linear-gradient(180deg, var(--theme-dark-surface) 0%, var(--theme-dark-surface-2) 100%);
}

.ct-slide-media {
    position: absolute;
    inset: 0;
    display: block;
}

.ct-slide-media img {
    width: 100%;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
}

.ct-slide-media--gradient {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
        radial-gradient(60% 120% at 12% 0%, rgba(40, 114, 250, 0.42) 0%, rgba(40, 114, 250, 0) 64%),
        radial-gradient(50% 110% at 100% 100%, rgba(40, 114, 250, 0.2) 0%, rgba(40, 114, 250, 0) 70%);
    color: rgba(255, 255, 255, 0.07);
    font-size: 128px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

/* the scrim that keeps the headline readable over a photo */
.ct-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(8, 15, 26, 0) 30%, rgba(8, 15, 26, 0.86) 100%);
}

.ct-slide-body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 40px 44px;
}

.ct-slide-cat {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background-color: var(--theme-palette-color-1);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.ct-slide-title {
    margin: 16px 0 0;
    max-width: 900px;
    font-size: 34px;
    line-height: 1.3;
}

.ct-slide-title a {
    color: var(--theme-dark-heading);
}

.ct-slide-title a:hover,
.ct-slide-title a:focus {
    color: #ffffff;
}

.ct-slide-excerpt {
    max-width: 720px;
    margin: 12px 0 0;
    color: var(--theme-dark-text);
    font-size: 15.5px;
    line-height: 1.7;
}

.ct-slide-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    color: var(--theme-dark-text);
    font-size: 12.5px;
}

/* arrows */
.flexy-arrow-prev,
.flexy-arrow-next {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 100%;
    background-color: rgba(8, 15, 26, 0.55);
    color: #ffffff;
    transform: scale(0.92);
    opacity: 0;
    transition: var(--theme-transition);
}

.flexy-arrow-prev { inset-inline-start: 18px; }
.flexy-arrow-next { inset-inline-end: 18px; }

.ct-slider:hover .flexy-arrow-prev,
.ct-slider:hover .flexy-arrow-next,
.flexy-arrow-prev:focus-visible,
.flexy-arrow-next:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.flexy-arrow-prev:hover,
.flexy-arrow-next:hover {
    background-color: var(--theme-palette-color-1);
}

/* pills */
.flexy-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.flexy-pills button {
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 100%;
    background-color: var(--theme-palette-color-5);
    transition: var(--theme-transition);
}

.flexy-pills li.active button,
.flexy-pills button:hover {
    background-color: var(--theme-palette-color-1);
    transform: scale(1.2);
}

/* ============================================================== featured */
.ct-featured {
    margin-bottom: 46px;
}

.ct-featured-grid {
    display: grid;
    gap: 24px;
}

@media (min-width: 690px) {
    .ct-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .ct-featured-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* the wide lead card of the magazine composition */
    .ct-featured-lead {
        grid-column: span 2;
        grid-row: span 2;
    }
}

.ct-featured-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--card-border);
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-palette-color-8);
    box-shadow: var(--theme-box-shadow);
    transition: var(--theme-transition);
}

.ct-featured-card:hover {
    border-color: var(--theme-palette-color-1);
    box-shadow: var(--theme-box-shadow-strong);
    transform: translateY(-2px);
}

.ct-featured-media {
    display: block;
    position: relative;
    overflow: hidden;
    background-color: var(--theme-palette-color-6);
}

.ct-featured-media img {
    width: 100%;
    object-fit: cover;
}

.ct-featured-media--gradient {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background-image: linear-gradient(135deg, var(--theme-dark-surface) 0%, #1b3a6b 100%);
    color: rgba(255, 255, 255, 0.12);
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.ct-featured-lead .ct-featured-media--gradient {
    aspect-ratio: 16 / 9;
    font-size: 64px;
}

.ct-featured-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 24px;
}

.ct-featured-cat {
    align-self: flex-start;
    color: var(--theme-palette-color-1);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ct-featured-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.42;
}

.ct-featured-lead .ct-featured-title {
    font-size: 24px;
}

.ct-featured-title a {
    color: var(--theme-palette-color-4);
}

.ct-featured-title a:hover,
.ct-featured-title a:focus {
    color: var(--theme-palette-color-1);
}

.ct-featured-excerpt {
    margin: 0;
    color: var(--theme-text-color);
    font-size: 14.5px;
    line-height: 1.68;
}

.ct-featured-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    color: var(--theme-text-color);
    font-size: 12.5px;
}

/* =========================================================== cat blocks */
.ct-cat-blocks {
    display: grid;
    gap: 34px;
    margin-bottom: 46px;
}

@media (min-width: 1000px) {
    .ct-cat-blocks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 40px;
    }
}

.ct-cat-block .ct-module-title {
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.ct-cat-block .ct-module-heading {
    font-size: 19px;
}

.ct-cat-block .ct-module-more {
    font-size: 12.5px;
}

.ct-cat-block-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-cat-block-item + .ct-cat-block-item {
    border-top: 1px solid var(--theme-border-color);
}

.ct-cat-block-item a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

.ct-cat-block-item.is-lead a {
    padding-top: 0;
}

.ct-cat-block-item.is-lead .ct-cat-block-title {
    font-size: 17px;
    font-weight: 600;
}

.ct-cat-block-title {
    color: var(--theme-palette-color-4);
    font-size: 15px;
    line-height: 1.55;
}

.ct-cat-block-item a:hover .ct-cat-block-title,
.ct-cat-block-item a:focus .ct-cat-block-title {
    color: var(--theme-palette-color-1);
}

.ct-cat-block-meta {
    flex: 0 0 auto;
    color: var(--theme-text-color);
    font-size: 12.5px;
}

/* ============================================================== popular */
/* live.js replaces the skeleton items with the ranking of /api/rankings; the
   shimmer below is what the visitor sees until the request settles. */
.ct-popular {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ct-popular;
}

.ct-popular-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
}

.ct-popular-item + .ct-popular-item {
    border-top: 1px solid var(--theme-border-color);
}

.ct-popular-item.is-placeholder .ct-popular-title {
    flex: 1;
    min-width: 0;
    height: 14px;
    border-radius: 3px;
    background-image: linear-gradient(90deg, var(--theme-palette-color-6) 25%, var(--theme-palette-color-5) 50%, var(--theme-palette-color-6) 75%);
    background-size: 200% 100%;
    color: transparent;
    animation: ct-shimmer 1.4s linear infinite;
}

.ct-popular-item.is-placeholder .ct-popular-title .ct-icon {
    display: none;
}

.ct-popular-rank {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background-color: var(--theme-palette-color-6);
    color: var(--theme-text-color);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* the first three ranks carry the accent, the classic hot-list look */
.ct-popular-item[data-rank='1'] .ct-popular-rank,
.ct-popular-item[data-rank='2'] .ct-popular-rank,
.ct-popular-item[data-rank='3'] .ct-popular-rank {
    background-color: var(--theme-palette-color-1);
    color: #ffffff;
}

.ct-popular-title {
    flex: 1;
    min-width: 0;
    color: var(--theme-palette-color-4);
    font-size: 14.5px;
    line-height: 1.5;
}

a.ct-popular-title:hover,
a.ct-popular-title:focus {
    color: var(--theme-palette-color-1);
}

.ct-popular-views {
    flex: 0 0 auto;
    color: var(--theme-text-color);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ct-popular-empty {
    margin: 0;
    color: var(--theme-text-color);
    font-size: 13.5px;
}

@keyframes ct-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================ load more */
.ct-load-more {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
}

.ct-load-more-button {
    min-width: 190px;
}

.ct-load-more.is-loading .ct-load-more-button {
    opacity: 0.6;
    pointer-events: none;
}

.ct-load-more.is-done .ct-load-more-button {
    display: none;
}

.ct-load-more-status {
    color: var(--theme-text-color);
    font-size: 13px;
}

.ct-load-more-status.is-error {
    color: #b3541e;
}

.ct-load-more-sentinel {
    width: 100%;
    height: 1px;
}

/* =============================================================== search */
.ct-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.ct-search-field .ct-icon {
    position: absolute;
    inset-inline-start: 13px;
    color: var(--theme-text-color);
    pointer-events: none;
}

.ct-search-field input[type='search'] {
    width: 100%;
    min-height: var(--theme-button-min-height);
    padding: 6px 14px 6px 38px;
    border: var(--card-border);
    border-radius: var(--theme-button-border-radius);
    background-color: var(--theme-palette-color-8);
    color: var(--theme-palette-color-4);
    -webkit-appearance: none;
    appearance: none;
}

.ct-search-field input[type='search']:focus {
    border-color: var(--theme-palette-color-1);
    outline: none;
}

.ct-search-field input[type='search']::-webkit-search-cancel-button {
    cursor: pointer;
}

/* the search panel is centered by [data-behaviour*='modal'] in layout.css and
   its field stack is the one of a dialog, not of the header */
.ct-search-form.is-compact {
    flex-direction: column;
    align-items: stretch;
}

.ct-search-form.is-compact input[type='search'] {
    padding-inline-start: 40px;
}

.ct-search-results {
    min-height: 60px;
}

.ct-search-hint,
.ct-search-status {
    margin: 0;
    color: var(--theme-text-color);
    font-size: 13.5px;
}

.ct-search-status.is-error {
    color: #b3541e;
}

.ct-search-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-search-list li + li {
    border-top: 1px solid var(--theme-border-color);
}

.ct-search-item {
    display: block;
    padding: 14px 0;
}

.ct-search-item-type {
    display: inline-flex;
    align-items: center;
    margin-inline-end: 8px;
    padding: 2px 8px;
    border-radius: 3px;
    background-color: var(--theme-palette-color-6);
    color: var(--theme-palette-color-3);
    font-size: 11.5px;
    letter-spacing: 0.04em;
}

.ct-search-item-title {
    color: var(--theme-palette-color-4);
    font-size: 15.5px;
    font-weight: 600;
}

.ct-search-item:hover .ct-search-item-title,
.ct-search-item:focus .ct-search-item-title {
    color: var(--theme-palette-color-1);
}

.ct-search-item-excerpt {
    margin: 6px 0 0;
    color: var(--theme-text-color);
    font-size: 13.5px;
    line-height: 1.6;
}

.ct-search-item mark {
    padding: 0 2px;
    background-color: rgba(40, 114, 250, 0.16);
    color: inherit;
}

.ct-search-page {
    max-width: var(--theme-narrow-container-max-width);
    margin-inline: auto;
}

.ct-search-page-head {
    margin-bottom: 24px;
}

.ct-search-page-title {
    margin: 0;
    font-size: 30px;
}

.ct-search-page-desc {
    margin: 8px 0 0;
    color: var(--theme-text-color);
    font-size: 15px;
}

.ct-search-page .ct-search-results {
    margin-top: 26px;
}

/* ========================================================== responsive */
@media (max-width: 999.98px) {
    .ct-slide {
        min-height: 320px;
    }

    .ct-slide-body {
        padding: 32px 30px;
    }

    .ct-slide-title {
        font-size: 27px;
    }

    .ct-featured-lead .ct-featured-title {
        font-size: 21px;
    }
}

@media (max-width: 689.98px) {
    .ct-notice {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ct-ticker-label {
        padding: 12px;
    }

    .ct-slide {
        min-height: 260px;
    }

    .ct-slide-body {
        padding: 24px 20px;
    }

    .ct-slide-title {
        font-size: 22px;
    }

    .ct-slide-excerpt {
        display: none;
    }

    .flexy-arrow-prev,
    .flexy-arrow-next {
        display: none;
    }

    .ct-featured-body {
        padding: 18px;
    }

    .ct-search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .ct-cat-block-item a {
        flex-direction: column;
        gap: 4px;
    }
}

/* tokens.css shortens every animation to 0.01ms under reduced motion, which
   would turn an infinite marquee into a flicker: the two loops are switched
   off explicitly and the rotator falls back to its first line. */
@media (prefers-reduced-motion: reduce) {
    .ct-ticker-track,
    .ct-notice-rotator li,
    .ct-popular-item.is-placeholder .ct-popular-title {
        animation: none !important;
    }

    .ct-notice-rotator li:not(:first-child) {
        display: none;
    }

    .ct-notice-rotator li:first-child {
        opacity: 1;
    }

    .ct-popular-item.is-placeholder .ct-popular-title {
        background-image: none;
        background-color: var(--theme-palette-color-6);
    }
}