/*!
 * 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), used
 *                                 because the site ships no cover images
 *   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;
}

.ct-hero-grid {
    display: grid;
    gap: 40px;
    padding-block: 56px;
}

@media (min-width: 1000px) {
    .ct-hero-grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: center;
        gap: 56px;
        padding-block: 84px;
    }
}

.ct-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    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: 22px 0 0;
    color: var(--theme-dark-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

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

.ct-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 44px;
    margin: 34px 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: 30px;
    font-weight: 700;
    line-height: 1.1;
}

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

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

/* the category index of the band */
.ct-hero-aside {
    padding: 26px;
    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 0 14px;
    padding-bottom: 12px;
    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 {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-hero-cats li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.ct-hero-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    color: var(--theme-dark-text-strong);
    font-size: 14.5px;
}

.ct-hero-cats a:hover,
.ct-hero-cats a:focus {
    color: #ffffff;
}

.ct-hero-cat-count {
    flex: 0 0 auto;
    color: var(--theme-dark-text);
    font-size: 12px;
    font-style: normal;
}

/* 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: 32px;
    }

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

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

    .ct-hero-grid {
        padding-block: 40px;
        gap: 30px;
    }

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

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

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

    .ct-hero-aside {
        padding: 20px;
    }

    .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%);
}

.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;
}