/*!
 * StaticPress theme "Blocksy" - pages.css
 *
 * Layer 4 of 4: the page-level modules.
 *
 * These are the screens and modules the original builds from its PHP
 * components, so each block below names the file it is ported from:
 *
 *   5-modules/page-title/*        .hero-section type-1 / type-2 page titles
 *   8-integrations/editors-common [data-content] article widths
 *   7-pages/*                     single / page reading column
 *   the front page band           a tech-news module built from the template
 *                                 context (site / categories / tags), which
 *                                 also carries the article pictures now that
 *                                 the renderer derives them
 *   the download screens          the StaticPress screens that have no
 *                                 Blocksy counterpart, built with the same
 *                                 container, card and hero vocabulary
 *   template-parts/404.php        the "no results" screen
 *
 * The front page band and the dark hero bands are the "深浅混搭" half of the
 * design: the archive keeps the light Blocksy look, the two full-bleed bands
 * carry the dark surface, which is what gives the site its news-portal
 * rhythm without a single image.
 */

/* =========================================================== front page */
/* The band is a full-bleed dark module on top of the archive container.
   It replaces the hero image a news theme would use. */
.ct-hero-band {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--theme-dark-border);
    background-color: var(--theme-dark-surface);
    background-image: linear-gradient(180deg, var(--theme-dark-surface) 0%, var(--theme-dark-surface-2) 100%);
    color: var(--theme-dark-text);
}

/* accent glow, the stand-in for the featured image */
.ct-hero-band::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(58% 120% at 10% 0%, rgba(40, 114, 250, 0.34) 0%, rgba(40, 114, 250, 0) 62%),
        radial-gradient(46% 100% at 100% 100%, rgba(40, 114, 250, 0.18) 0%, rgba(40, 114, 250, 0) 70%);
}

.ct-hero-band > .ct-container {
    position: relative;
    z-index: 2;
}

/* The band is a slim info bar, not a full hero: it keeps its identity (the
   site name, the counters, the two buttons, the category index) with the
   spacing tuned so the bar stays small. The category card is the one part
   that follows its content, one extra row per four categories. */
.ct-hero-grid {
    display: grid;
    gap: 16px;
    padding-block: 18px;
}

@media (min-width: 1000px) {
    .ct-hero-grid {
        /* The category card gets a wider column: 100% / 2.8 is the share the
           old 1.8fr/1fr split gave it, so adding 50px widens the card by
           exactly 50px and the text column keeps the rest. */
        grid-template-columns: minmax(0, 1fr) minmax(0, calc(100% / 2.8 + 50px));
        align-items: center;
        gap: 40px;
        padding-block: 20px;
    }
}

.ct-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border: 1px solid var(--theme-dark-border);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--theme-dark-text-strong);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ct-hero-title {
    margin: 12px 0 0;
    color: var(--theme-dark-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ct-hero-desc {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--theme-dark-text);
    font-size: 15.5px;
    line-height: 1.6;
}

.ct-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 34px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.ct-hero-stats li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-hero-stats strong {
    color: var(--theme-dark-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}

.ct-hero-stats span {
    color: var(--theme-dark-text);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ct-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* The category index of the band: a four-column grid of pills that wraps to
   as many rows as the site needs. It used to be a vertical list (the band grew
   with every category) and then a single scrolling row (a scrollbar showed up
   as soon as the categories got long) - the grid shows every category at once
   with no scrolling and no clipped name. */
.ct-hero-aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--theme-dark-border);
    border-radius: var(--theme-border-radius);
    background-color: rgba(255, 255, 255, 0.04);
}

.ct-hero-aside-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--theme-dark-border);
    color: var(--theme-dark-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ct-hero-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-hero-cats li {
    min-width: 0;
}

.ct-hero-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid var(--theme-dark-border);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--theme-dark-text-strong);
    font-size: 12.5px;
    line-height: 1.4;
    transition: var(--theme-transition);
}

.ct-hero-cats a:hover,
.ct-hero-cats a:focus {
    border-color: var(--theme-palette-color-1);
    background-color: rgba(40, 114, 250, 0.22);
    color: #ffffff;
}

/* the name gives way first: a long category is shortened, the pill keeps its
   column and the count stays readable */
.ct-hero-cat-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-hero-cat-count {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 11px;
    font-style: normal;
    line-height: 1.5;
}

/* buttons on the dark surfaces */
.ct-hero-band .ct-button-ghost,
.ct-hero-dark .ct-button-ghost {
    border-color: var(--theme-dark-border);
    color: var(--theme-dark-text-strong);
}

.ct-hero-band .ct-button-ghost:hover,
.ct-hero-band .ct-button-ghost:focus,
.ct-hero-dark .ct-button-ghost:hover,
.ct-hero-dark .ct-button-ghost:focus {
    border-color: #ffffff;
    color: #ffffff;
}

/* section heading of the listing below the band */
.ct-module-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--theme-border-color);
}

.ct-module-heading {
    position: relative;
    margin: 0;
    padding-inline-start: 16px;
    color: var(--theme-palette-color-4);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.ct-module-heading::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background-color: var(--theme-palette-color-1);
}

.ct-module-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-text-color);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}

.ct-module-more:hover,
.ct-module-more:focus {
    color: var(--theme-palette-color-1);
}

@media (max-width: 999.98px) {
    .ct-hero-band .ct-hero-title {
        font-size: 26px;
    }

    .ct-hero-grid {
        padding-block: 18px;
    }
}

@media (max-width: 689.98px) {
    .ct-hero-band .ct-hero-title {
        font-size: 23px;
    }

    .ct-hero-grid {
        padding-block: 16px;
        gap: 14px;
    }

    .ct-hero-stats {
        gap: 14px 26px;
        margin-top: 14px;
    }

    .ct-hero-stats strong {
        font-size: 21px;
    }

    .ct-hero-actions {
        margin-top: 14px;
    }

    .ct-hero-aside {
        gap: 8px;
        padding: 12px 14px;
    }

    /* Three columns on a phone: at 375px a fourth column would leave the name
       about two characters wide. The pills keep a touch-sized height. */
    .ct-hero-cats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .ct-hero-cats a {
        padding: 6px 8px;
        font-size: 12px;
    }

    .ct-module-heading {
        font-size: 20px;
    }
}

/* ============================================================ page title */
/* 5-modules/page-title/main.scss: every element after the first one in the
   hero header is spaced by --item-spacing (20px in the original). */
.hero-section .entry-header > *:not(:first-child) {
    margin-top: var(--item-spacing, 20px);
}

.hero-section .entry-header .page-title {
    margin-bottom: 0;
}

.hero-section .entry-header .page-description {
    color: var(--theme-text-color);
}

.hero-section .entry-header .page-description > *:last-child {
    margin-bottom: 0;
}

/* hero type-1 (5-modules/page-title/type-1.scss): the light inline title the
   archives print above their listing. */
.hero-section[data-type='type-1'] {
    text-align: var(--alignment, start);
    margin-bottom: var(--margin-bottom, 40px);
}

.hero-section[data-type='type-1'] .page-description {
    display: inline-block;
    max-width: var(--description-max-width, 100%);
}

/* hero type-2 (5-modules/page-title/type-2.scss): the full-bleed band of the
   single screens. Its inner .entry-header is a ct-container-narrow. */
.hero-section[data-type='type-2'] {
    position: relative;
    padding-top: calc(var(--has-transparent-header, 0) * var(--header-height));
}

.hero-section[data-type='type-2'] > [class*='ct-container'] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: var(--vertical-alignment, center);
    text-align: var(--alignment, center);
    padding: var(--container-padding, 50px 0);
    min-height: var(--min-height, 250px);
}

/* the dark variant the single screens use in place of the featured image */
.ct-hero-dark {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--theme-dark-border);
    background-color: var(--theme-dark-surface);
    background-image: linear-gradient(180deg, var(--theme-dark-surface) 0%, var(--theme-dark-surface-2) 100%);
}

.ct-hero-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(60% 130% at 50% 0%, rgba(40, 114, 250, 0.30) 0%, rgba(40, 114, 250, 0) 68%),
        radial-gradient(40% 90% at 100% 100%, rgba(40, 114, 250, 0.16) 0%, rgba(40, 114, 250, 0) 70%);
}

/* --------------------------------------------------------------------------
   Hero with the article picture (`ct-hero-has-media`).

   The picture is the manual cover, or the first picture of the body (see
   app/post_media.py). It is used exactly like the pictures of the cards: a
   blurred copy fills the band, the picture itself is shown complete and
   centred over it (`object-fit: contain`, never stretched, never cropped), and
   the ::after scrim keeps the headline readable on top of it. Both layers are
   decorative (alt="", aria-hidden) and paint below the header, which keeps its
   own z-index, so nothing changes for assistive technology or for a post
   without any picture.
   -------------------------------------------------------------------------- */
.ct-hero-has-media > .entry-header {
    /* the band needs room for the picture (the hero owns this variable) */
    --min-height: 340px;
}

.ct-hero-media-blur {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    filter: blur(26px) saturate(1.15);
    transform: scale(1.1);
}

.ct-hero-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 18px 0;
    object-fit: contain;
    opacity: 0.9;
}

.ct-hero-has-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(8, 15, 26, 0.55) 0%, rgba(8, 15, 26, 0.82) 100%);
}

.ct-hero-dark .entry-header {
    z-index: 2;
}

.ct-hero-dark .page-title {
    color: var(--theme-dark-heading);
}

.ct-hero-dark .entry-header .page-description {
    color: var(--theme-dark-text);
}

.ct-hero-dark .entry-meta {
    justify-content: center;
    color: var(--theme-dark-text-strong);
}

.ct-hero-dark .entry-meta a,
.ct-hero-dark .entry-meta span {
    color: var(--theme-dark-text-strong);
}

.ct-hero-dark .entry-meta .meta-categories a,
.ct-hero-dark .entry-meta .meta-categories span {
    color: #ffffff;
}

/* the small label above the title (category on a post, "页面", "404", ...) */
.ct-title-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    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.1em;
    text-transform: uppercase;
}

.ct-title-label a {
    color: inherit;
}

.hero-section[data-type='type-2'] .ct-title-label {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.hero-section .entry-header .ct-title-label + .page-title {
    margin-top: 14px;
}

@media (max-width: 689.98px) {
    .hero-section[data-type='type-2'] > [class*='ct-container'] {
        --container-padding: 36px 0;
        --min-height: 190px;
    }
}

/* ======================================================= content columns */
/* 8-integrations/editors-common.scss: the single screens hold their article
   to the width their page structure resolves to - `narrow` is the 750px
   reading column, `normal` the 1290px container. The variables are the ones
   the original defines there; `--has-wide` / `--has-boxed` are the customiser
   switches and are dropped, the port always uses the un-boxed structure. */
[data-content='normal'] > article {
    --theme-block-width: var(--theme-container-width);
    --theme-block-max-width: var(--theme-normal-container-max-width);
    --theme-block-wide-max-width: calc(var(--theme-normal-container-max-width) + var(--theme-wide-offset) * 2);
    --theme-boxed-content-max-width: var(--theme-normal-container-max-width);
}

[data-content='narrow'] > article {
    --theme-block-width: var(--theme-container-width);
    --theme-block-max-width: var(--theme-narrow-container-max-width);
    --theme-block-wide-max-width: calc(var(--theme-narrow-container-max-width) + var(--theme-wide-offset) * 2);
    --theme-boxed-content-max-width: var(--theme-narrow-container-max-width);
}

[class*='ct-container'] > article {
    margin-inline: auto;
    width: var(--theme-container-width);
    max-width: var(--theme-boxed-content-max-width, var(--theme-normal-container-max-width));
}

/* A WordPress page falls back to the "normal" structure, and block content
   inside it is constrained to the reading column (the original wraps it in
   `is-layout-constrained`). The port does it with the prefix body attribute
   that the renderer already prints. */
[data-prefix='page'] .ct-container-full[data-content='normal'] > article > * {
    max-width: var(--theme-narrow-container-max-width);
    margin-inline: auto;
}

/* ======================================================== download cards */
.entry-card--download .ct-download-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--theme-image-border-radius);
    background-color: var(--theme-palette-color-6);
    overflow: hidden;
}

.entry-card--download .ct-download-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ct-download-figure--monogram span {
    color: var(--theme-palette-color-1);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.entry-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.entry-platform {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 3px;
    background-color: var(--theme-palette-color-6);
    color: var(--theme-palette-color-3);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.entry-card-button {
    align-self: stretch;
}

/* ====================================================== download detail */
.ct-download-facts {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    padding: 22px;
    border: var(--card-border);
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-palette-color-8);
    box-shadow: var(--theme-box-shadow);
}

.ct-download-facts-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: var(--theme-border-radius);
    object-fit: cover;
}

.ct-download-facts-icon--monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-palette-color-1);
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.ct-download-facts-body {
    min-width: 0;
}

.ct-download-facts-title {
    margin: 0 0 6px;
    color: var(--theme-palette-color-4);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}

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

.ct-download-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
}

.ct-download-note {
    color: var(--theme-text-color);
    font-size: 13.5px;
}

.ct-download-note--warn {
    color: #b3541e;
}

.ct-download-meta th {
    width: 24%;
    white-space: nowrap;
    color: var(--theme-palette-color-4);
}

.ct-download-checksum {
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

@media (max-width: 689.98px) {
    .ct-download-facts {
        flex-direction: column;
        gap: 16px;
        padding: 18px;
    }

    .ct-download-action .ct-button {
        width: 100%;
    }

    .ct-download-meta th {
        width: 32%;
    }
}

/* ========================================================== no results */
.ct-no-results-title {
    margin: 0 0 10px;
    color: var(--theme-palette-color-4);
    font-size: 20px;
    font-weight: 700;
}

.ct-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

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

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

.ct-error-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    color: var(--theme-palette-color-4);
    font-size: 15px;
}

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

.ct-error-list-date {
    flex: 0 0 auto;
    color: var(--theme-text-color);
    font-size: 12.5px;
}

.ct-error-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}