/* Columna — archive and taxonomy listing styles
   Design review 2026-06-08: token substitutions, hero border, H1 scale,
   badge pill radius, button token, series-label + muted-text tokens applied.
*/

/* -----------------------------------------------------------------------
   Columns section — dark editorial red color scheme
   Activated by body.is-columns-section (added via Columna_Templates::add_section_class).
   Overrides the site-wide --color-accent token to shift the header, buttons,
   and all accent-colored elements from navy to dark red on /columns/ and
   /for/publishers/ pages. Contrast: white on #5c1a1a = 12.5:1 (WCAG AAA).
----------------------------------------------------------------------- */

body.is-columns-section {
    --color-accent:        #5c1a1a;
    --color-accent-strong: #3a0e0e;
    --color-accent-soft:   #fdf0f0;
}

/* The site-header gradient uses the blue endpoint #1a4065. Override with
   matching red tones so the gradient stays coherent on the columns header. */
body.is-columns-section .site-header {
    background: linear-gradient( 140deg, var( --color-accent-strong ), #5c1a1a ) !important;
}

/* -----------------------------------------------------------------------
   Archive wrapper
----------------------------------------------------------------------- */

/* Outer wrapper: site-shell constrains inline; rhythm comes from children */
.columna-archive {}

/* -----------------------------------------------------------------------
   Hero header
----------------------------------------------------------------------- */

.columna-archive-hero {
    padding-block: clamp( 2.5rem, 5vw, 4.5rem ) clamp( 2rem, 4vw, 3rem );
    border-block-end: 1px solid var( --color-border );
}

.columna-archive-hero__inner {
    max-width: 64ch;
}

.columna-archive__title {
    margin-block: 0.75rem 0.85rem;
    font-size: var( --fs-display, clamp( 2.4rem, 1.6rem + 3vw, 4rem ) );
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.04;
    text-wrap: balance;
}

.columna-archive__lead {
    margin: 0;
    color: var( --color-muted );
    font-size: clamp( 1rem, 0.9rem + 0.4vw, 1.15rem );
    line-height: 1.55;
    max-width: 60ch;
}

/* Taxonomy term header (no outer section hero) */
.columna-archive-term-header.site-shell {
    padding-block: clamp( 2.5rem, 5vw, 4.5rem ) clamp( 2rem, 4vw, 3rem );
    border-block-end: 1px solid var( --color-border );
}

.columna-archive__back {
    margin-block-end: 0.75rem;
    font-size: 0.9em;
}

.columna-archive__back a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* -----------------------------------------------------------------------
   Series navigation
----------------------------------------------------------------------- */

.columna-archive__series-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 2rem;
}

.columna-archive__series-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var( --color-muted );
    white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Card grid
----------------------------------------------------------------------- */

.columna-archive-body.site-shell {
    padding-block-start: clamp( 2.5rem, 5vw, 4rem );
}

.columna-archive__grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( min( 100%, 320px ), 1fr ) );
    gap: 1.5rem;
    margin-block-end: 2.5rem;
}

/* -----------------------------------------------------------------------
   Article card
----------------------------------------------------------------------- */

.columna-article-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var( --color-border );
    border-radius: var( --radius-card );
    background: var( --color-surface );
}

.columna-article-card--retired {
    opacity: 0.5;
}

.columna-article-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.columna-article-card__title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.35;
}

.columna-article-card__title a {
    color: inherit;
    text-decoration: none;
}

.columna-article-card__title a:hover,
.columna-article-card__title a:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.columna-article-card__teaser {
    margin: 0;
    font-size: 0.9em;
    color: var( --color-muted );
    line-height: 1.55;
    flex-grow: 1;
}

.columna-article-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var( --color-border );
    margin-block-start: auto;
}

.columna-article-card__word-count {
    font-size: 0.8em;
    color: var( --color-muted );
}

.columna-article-card__request {
    font-size: 0.85em;
    color: var( --color-accent );
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Theme .button sized for card footer; min-height matches 44px touch target */
.columna-article-card__download.button {
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    min-height: 44px;
}

/* -----------------------------------------------------------------------
   Badges
----------------------------------------------------------------------- */

.columna-badge {
    display: inline-block;
    padding: 0.2em 0.65em;
    border-radius: var( --radius-pill );
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Status badges — intentional semantic colors, not brand tokens */
.columna-badge--available {
    background: #edfaef;
    color: #00641a;
}

.columna-badge--running {
    background: #fef8ee;
    color: #8a6000;
}

.columna-badge--retired {
    background: #f0f0f1;
    color: #50575e;
}

.columna-badge--geo {
    background: #edf4fa;
    color: #135e96;
}

.columna-badge--series {
    background: #f5f5f5;
    color: var( --color-muted );
    text-decoration: none;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}

.columna-badge--series:hover,
.columna-badge--series:focus {
    background: var( --color-accent-soft );
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* -----------------------------------------------------------------------
   Archive body — add bottom rhythm before footer strip
----------------------------------------------------------------------- */

.columna-archive-body.site-shell {
    padding-block-end: clamp( 2.5rem, 5vw, 4rem );
}

/* -----------------------------------------------------------------------
   RSS subscribe link (in hero)
----------------------------------------------------------------------- */

.columna-archive__rss {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-block-start: 1rem;
    font-size: 0.85em;
    color: var( --color-muted );
    text-decoration: none;
}

.columna-archive__rss:hover,
.columna-archive__rss:focus {
    color: var( --color-accent );
    text-decoration: underline;
    text-underline-offset: 2px;
}

.columna-archive__rss svg {
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Single column post — header meta block + publisher sidebar
----------------------------------------------------------------------- */

.columna-column-meta {
    margin-block-end: 0.85rem;
}

.columna-single-header {
    padding-block: clamp( 2.5rem, 5vw, 4.5rem ) clamp( 1.5rem, 3vw, 2rem );
    border-block-end: 1px solid var( --color-border );
    margin-block-end: clamp( 1.5rem, 3vw, 2.5rem );
}

/* -----------------------------------------------------------------------
   Author bio — sidebar and archive footer variants
----------------------------------------------------------------------- */

.columna-author-bio {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding-block-end: 1rem;
    border-block-end: 1px solid var( --color-border );
}

.columna-author-bio__photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
}

.columna-author-bio__content {
    flex: 1;
    min-width: 0;
}

.columna-author-bio__name {
    margin: 0 0 0.25rem;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.3;
}

.columna-author-bio__text {
    margin: 0 0 0.4rem;
    font-size: 0.8em;
    line-height: 1.55;
    color: var( --color-muted );
}

.columna-author-bio__links {
    margin: 0;
    font-size: 0.8em;
    color: var( --color-muted );
}

.columna-author-bio__links a {
    color: var( --color-accent );
    text-underline-offset: 2px;
}

/* Larger version in the archive footer */
.columna-archive-bio .columna-author-bio {
    border-block-end: none;
    padding-block-end: 0;
    align-items: center;
    gap: 1.25rem;
    margin-block-end: 1.25rem;
}

.columna-archive-bio .columna-author-bio__photo {
    width: 80px;
    height: 80px;
}

.columna-archive-bio .columna-author-bio__name {
    font-size: 1em;
    margin-block-end: 0.35rem;
}

.columna-archive-bio .columna-author-bio__text {
    font-size: 0.875em;
}

/* Publication date on single column post */
.columna-single-date {
    font-size: 0.85em;
    color: var( --color-muted );
    margin-block-start: 0.5rem;
}

/* -----------------------------------------------------------------------
   Publisher sidebar — download + attribution + catalog links
----------------------------------------------------------------------- */
.columna-publisher-sidebar {
    padding: 1.25rem 1.5rem;
    border: 1px solid var( --color-border );
    border-radius: var( --radius-card );
    background: var( --color-surface );
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.9em;
    position: sticky;
    top: 1.5rem;
}

.columna-publisher-sidebar__heading {
    margin: 0;
    font-size: 0.75em;
    font-weight: 600;
    color: var( --color-muted );
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Stack download buttons full-width; 44px touch target */
.columna-publisher-sidebar__download {
    display: block;
    width: 100%;
    text-align: center;
    min-height: 44px;
    box-sizing: border-box;
}

.columna-publisher-sidebar__meta {
    margin: 0;
    font-size: 0.8em;
    color: var( --color-muted );
    line-height: 1.5;
}

.columna-publisher-sidebar__attribution {
    padding: 0.75rem;
    border: 1px solid var( --color-border );
    border-radius: var( --radius-card );
    line-height: 1.5;
}

.columna-publisher-sidebar__attribution p {
    margin: 0 0 0.3rem;
    font-size: 0.85em;
    color: var( --color-muted );
}

.columna-publisher-sidebar__attribution code {
    display: block;
    font-size: 0.9em;
    font-family: ui-monospace, monospace;
    color: inherit;
}

.columna-publisher-sidebar__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-block-start: 1px solid var( --color-border );
    padding-block-start: 1rem;
}

.columna-publisher-sidebar__links a {
    color: var( --color-accent );
    text-underline-offset: 2px;
}

/* -----------------------------------------------------------------------
   Archive footer strip (bio + terms + custom-writing CTA)
----------------------------------------------------------------------- */

.columna-archive-footer.site-shell {
    padding-block: clamp( 2.5rem, 5vw, 4rem );
    border-block-start: 1px solid var( --color-border );
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media ( min-width: 48em ) {
    .columna-archive-footer.site-shell {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.columna-archive-bio__heading,
.columna-archive-terms__heading {
    margin-block: 0 0.6rem;
    font-size: 0.8em;
    font-weight: 600;
    color: var( --color-muted );
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.columna-archive-bio__body {
    font-size: 0.9em;
    line-height: 1.65;
    margin: 0 0 0.75rem;
}

.columna-archive-bio__body:last-child {
    margin-block-end: 0;
}

.columna-archive-terms__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.columna-archive-terms__list li {
    font-size: 0.85em;
    line-height: 1.55;
    color: var( --color-muted );
}

.columna-archive-terms__list strong {
    color: inherit;
    font-weight: 600;
}

.columna-archive-terms__list a,
.columna-archive-bio__body a {
    color: var( --color-accent );
    text-underline-offset: 2px;
}

.columna-archive-cta {
    margin-block-start: 1.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var( --color-border );
}

.columna-archive-cta p {
    font-size: 0.85em;
    line-height: 1.55;
    margin: 0;
    color: var( --color-muted );
}

.columna-archive-cta a {
    color: var( --color-accent );
    text-underline-offset: 2px;
}

/* -----------------------------------------------------------------------
   Empty state + pagination
----------------------------------------------------------------------- */

.columna-archive__empty {
    color: var( --color-muted );
    font-style: italic;
}

.columna-archive__pagination {
    padding-block-start: 1rem;
}

/* -----------------------------------------------------------------------
   Publisher landing page (/for/publishers/)
----------------------------------------------------------------------- */

.pub-landing-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 1.5rem;
}

.pub-landing-section-heading {
    margin-block: 0 1.5rem;
    font-size: clamp( 1.3rem, 1rem + 1.2vw, 1.8rem );
    font-weight: 400;
    letter-spacing: -0.02em;
}

/* How it works — numbered steps */
.pub-landing-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.pub-landing-step {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.pub-landing-step__number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var( --color-accent );
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 0.1em;
}

.pub-landing-step__body {
    flex: 1;
}

.pub-landing-step__body strong {
    display: block;
    margin-block-end: 0.4rem;
    font-size: 1.05em;
}

.pub-landing-step__body p {
    margin: 0;
    font-size: 0.9em;
    color: var( --color-muted );
    line-height: 1.6;
}

.pub-landing-step__body code {
    font-family: ui-monospace, monospace;
    font-size: 0.9em;
    background: var( --color-accent-soft );
    padding: 0.1em 0.4em;
    border-radius: 3px;
}

/* Two-column series grid */
.pub-landing-series-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-block-end: 1.5rem;
}

@media ( min-width: 42em ) {
    .pub-landing-series-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.pub-landing-series-card {
    padding: 1.25rem 1.5rem;
    border: 1px solid var( --color-border );
    border-radius: var( --radius-card );
    background: var( --color-surface );
}

.pub-landing-series-card__title {
    margin: 0 0 0.65rem;
    font-size: 1.1rem;
    font-weight: 500;
}

.pub-landing-series-card__desc {
    margin: 0 0 0.85rem;
    font-size: 0.875em;
    color: var( --color-muted );
    line-height: 1.6;
}

.pub-landing-series-card__link {
    font-size: 0.85em;
    color: var( --color-accent );
    text-underline-offset: 2px;
}

.pub-landing-series-rss {
    margin: 0;
}

/* About section — larger headshot */
.pub-landing-author-bio .columna-author-bio__photo {
    width: 120px;
    height: 120px;
}

/* Section spacing */
.pub-landing-how.section-wrap,
.pub-landing-series.section-wrap,
.pub-landing-about.section-wrap {
    padding-block: clamp( 3rem, 6vw, 5rem );
    border-block-start: 1px solid var( --color-border );
}