/**
 * JOY-TEX — Editorial Archive
 *
 * Shared by Insights and native Post Category archives.
 *
 * Scope:
 * - Archive H1
 * - Archive introduction
 *
 * Global container, section spacing, background,
 * typography tokens and breadcrumb are inherited.
 */

/* S02 — Archive Introduction */

.joy-editorial-intro__title {
    margin: 0;
    color: var(--joy-color-editorial-heading);
    font-size: 2rem;
    line-height: 1.2;
}

.joy-editorial-intro__description {
    max-width: 47.5rem;
    margin-top: var(--joy-space-5);
    color: var(--joy-color-editorial-secondary);
    line-height: 1.7;
}

/* Normalize WordPress description paragraphs */

.joy-editorial-intro__description > :first-child {
    margin-top: 0;
}

.joy-editorial-intro__description > :last-child {
    margin-bottom: 0;
}

/* Tablet */

@media (max-width: 999px) {
    .joy-editorial-intro__title {
        font-size: 1.875rem;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .joy-editorial-intro__title {
        font-size: 1.75rem;
    }
}



/* =========================================
   JOY-TEX — Editorial Article Listing
   Phase 5.3 / Step 3

   Shared by Insights and Category Archives.
   ========================================= */

/* 01. Listing Container */

.joy-editorial-listing {
    min-width: 0;
}

.joy-editorial-listing__items {
    width: 100%;
    min-width: 0;
}


/* 02. Article Row */

.joy-editorial-article {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;

    padding-block: 32px;
    border-bottom: 1px solid var(--joy-color-rule);
}

.joy-editorial-article:first-child {
    padding-top: 0;
}

.joy-editorial-article:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}


/* 03. Media Column */

.joy-editorial-article__media {
    width: 100%;
    min-width: 0;
}

.joy-editorial-article__media-link {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    text-decoration: none;
}

.joy-editorial-article__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * No-image articles retain the grid media column.
 * No placeholder image or forced aspect ratio.
 */

.joy-editorial-article--no-image
.joy-editorial-article__media {
    min-height: 0;
}


/* 04. Editorial Content */

.joy-editorial-article__content {
    min-width: 0;
}


/* 05. Metadata */

.joy-editorial-article__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 4px;

    margin-bottom: 12px;

    font-size: 14px;
    line-height: 1.5;
}

.joy-editorial-article__category,
.joy-editorial-article__category:visited {
    color: var(--joy-color-editorial-heading);
    text-decoration: none;
    font-weight: var(--joy-font-weight-medium);
    transition: color 160ms ease;
}

.joy-editorial-article__category:hover {
    color: var(--joy-color-accent-red);
}

.joy-editorial-article__date {
    color: var(--joy-color-editorial-secondary);
}


/* 06. Article Title */

.joy-editorial-article__title {
    margin: 0;

    color: var(--joy-color-editorial-heading);
    font-family: var(--joy-font-sans);
    font-size: 24px;
    font-weight: var(--joy-font-weight-medium);
    line-height: 1.3;
    letter-spacing: -0.01em;

    overflow-wrap: anywhere;
}

.joy-editorial-article__title a,
.joy-editorial-article__title a:visited {
    color: inherit;
    text-decoration: none;
    transition: color 160ms ease;
}

.joy-editorial-article__title a:hover {
    color: var(--joy-color-accent-red);
}


/* 07. Excerpt */

.joy-editorial-article__excerpt {
    margin: 16px 0 0;

    color: var(--joy-color-editorial-secondary);
    font-size: 16px;
    line-height: 1.7;

    overflow-wrap: anywhere;
}


/* 08. Empty State */

.joy-editorial-listing__empty {
    margin: 0;
    color: var(--joy-color-editorial-secondary);
    font-size: 16px;
    line-height: 1.7;
}


/* 09. Tablet */

@media (min-width: 768px) and (max-width: 999px) {

    .joy-editorial-article {
        grid-template-columns: 200px minmax(0, 1fr);
        column-gap: 24px;
    }

    .joy-editorial-article__title {
        font-size: 22px;
    }
}


/* 10. Mobile */

@media (max-width: 767px) {

    .joy-editorial-article {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
        padding-block: 28px;
    }

    .joy-editorial-article__media-link {
        aspect-ratio: 4 / 3;
    }

    /*
     * Hide empty media containers.
     * Articles without images begin with metadata.
     */

    .joy-editorial-article--no-image
    .joy-editorial-article__media {
        display: none;
    }

    .joy-editorial-article__title {
        font-size: 20px;
        line-height: 1.35;
    }

    .joy-editorial-article__meta {
        margin-bottom: 12px;
    }

    .joy-editorial-article__excerpt {
        margin-top: 16px;
    }
}


/* 11. Keyboard Focus */

.joy-editorial-article__category:focus-visible,
.joy-editorial-article__title a:focus-visible {
    outline: 2px solid var(--joy-color-accent-red);
    outline-offset: 4px;
}


/* 12. Reduced Motion */

@media (prefers-reduced-motion: reduce) {

    .joy-editorial-article__category,
    .joy-editorial-article__title a {
        transition: none;
    }
}


/* =========================================================
   Editorial Archive — Final CTA Configuration
   Shared by Insights and Post Category Archives
   ========================================================= */

.joy-final-cta--editorial {
    --joy-final-cta-bg-color: #171e4a;

    /* Temporary image — shared with Company */
    --joy-final-cta-image:
        url("/wp-content/uploads/2026/10/joy-tex-functional-fabric-swatches-insights-cta.avif");

    --joy-final-cta-overlay: rgba(10, 18, 43, 0.48);
    --joy-final-cta-bg-position: center;
}

/* Single-column editorial CTA */

.joy-final-cta--editorial .joy-final-cta__layout {
    grid-template-columns: minmax(0, 1fr);
}

.joy-final-cta--editorial .joy-final-cta__heading {
    min-width: 0;
}

.joy-final-cta--editorial
.joy-final-cta__heading .joy-section__intro {
    margin-top: var(--joy-space-5);
}

@media (min-width: 1000px) {
    .joy-final-cta--editorial.joy-final-cta--wide
    .joy-final-cta__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .joy-final-cta--editorial .joy-final-cta__heading {
        width: 100%;
        max-width: 42rem;
    }
}

@media (min-width: 768px) and (max-width: 999px) {
    .joy-final-cta--editorial .joy-final-cta__heading {
        width: 100%;
        max-width: 38rem;
    }
}

@media (max-width: 767px) {
    .joy-final-cta--editorial .joy-final-cta__heading {
        width: 100%;
        max-width: none;
    }
}