/**
 * JOY-TEX Section Typography
 *
 * Shared editorial typography for section headings
 * and optional section introductions.
 *
 * Scope:
 * - .joy-section__title
 * - .joy-section__intro
 *
 * Does not style all h2 elements globally.
 * Does not override Homepage Hero typography.
 *
 * @version 1.0.0
 */

/* =========================================================
   01. Section Title
   ========================================================= */

.joy-section__title {
    margin: 0;

    color: var(--joy-color-editorial-heading);

    font-family: var(--joy-font-sans);
    font-size: 2rem;
    font-weight: var(--joy-font-weight-medium);
    line-height: 1.25;
    letter-spacing: -0.015em;

    overflow-wrap: break-word;
}

/* =========================================================
   02. Optional Section Intro
   ========================================================= */

.joy-section__intro {
    margin: 1rem 0 0;
    max-width: 42rem;

    color: var(--joy-color-editorial-secondary);

    font-family: inherit;
    font-size: 1rem;
    font-weight: var(--joy-font-weight-regular);
    line-height: 1.7;
}


/* =========================================================
   03. Content Item Title
   ========================================================= */

.joy-content-title {
    margin: 0;

    color: var(--joy-color-editorial-heading);

    font-family: var(--joy-font-sans);
    font-size: 1.125rem; /* 18px */
    font-weight: var(--joy-font-weight-medium);
    line-height: 1.35;
}


/* =========================================================
   04. Content Item Description
   ========================================================= */

.joy-content-description {
    margin: 0.75rem 0 0;

    color: var(--joy-color-editorial-secondary);

    font-family: inherit;
    font-size: 1rem;
    font-weight: var(--joy-font-weight-regular);
    line-height: 1.7;
}

/* =========================================================
   Typography on Dark Backgrounds
   ========================================================= */

.joy-on-dark .joy-section__title,
.joy-on-dark .joy-content-title {
    color: var(--joy-color-on-dark-heading);
}

.joy-on-dark .joy-section__intro,
.joy-on-dark .joy-content-description {
    color: var(--joy-color-on-dark-secondary);
}


/* =========================================================
   05. Tablet
   ========================================================= */

@media (max-width: 999px) {

    .joy-section__title {
        font-size: 1.75rem;
    }

}

/* =========================================================
   06. Mobile
   ========================================================= */

@media (max-width: 767px) {

    .joy-section__title {
        font-size: 1.625rem;
        line-height: 1.3;
    }

    .joy-section__intro {
        line-height: 1.65;
    }

    .joy-content-description {
        line-height: 1.65;
    }

}