/* =========================================================
   JOIN POSTS SECTION
   ========================================================= */

:root {
    --join-posts-accent: #c9a46b;
    --join-posts-heading: #1f1f1b;
    --join-posts-title: #24211d;
    --join-posts-meta: #8c867d;
    --join-posts-eyebrow: #8b8987;
    --join-posts-intro: #9a9a98;
    --join-posts-underline: #3a342e;

    /* article paragraph match */
    --join-posts-excerpt: #656565;
    --join-posts-excerpt-size: 16px;
    --join-posts-excerpt-line-height: 135%;
}

.join-posts {
    position: relative;
    overflow: hidden;
    margin-bottom: 183px;
}

.join-posts .container {
    position: relative;
    z-index: 1;
}

/* =========================================================
   SECTION HEAD
   ========================================================= */

.join-posts__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 73px;
    text-align: center;
}

.join-posts__eyebrow {
    margin: 0;
    color: var(--join-posts-eyebrow);
    font-family: "Merriweather", serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.2;
}

.join-posts__title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.28em;
    color: var(--join-posts-heading);
    font-family: "Anton", sans-serif;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.join-posts__title-accent {
    color: var(--join-posts-accent);
}

.join-posts__intro {
    max-width: 390px;
    margin: 0 0 60px;
    color: var(--join-posts-intro);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}

/* =========================================================
   GRID
   ========================================================= */

.join-posts__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 42px;
    row-gap: 34px;
    align-items: start;
}

.join-posts__art {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 100%;
    pointer-events: none;
}

.join-posts__art-image {
    display: block;
    width: min(100%, 328px);
    height: auto;
    opacity: 0.92;
    user-select: none;
    -webkit-user-drag: none;
}

/* =========================================================
   TEXT POST CARD
   ========================================================= */

.tp-card--text-post {
    --tp-underline-height: 2px;
    --tp-underline-position: 92%;
    min-width: 0;
}

.tp-card--text-post .tp-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.tp-card--text-post .tp-card__link:focus-visible {
    outline: 2px solid var(--join-posts-accent);
    outline-offset: 4px;
}

.tp-card--text-post .tp-card__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tp-card--text-post .tp-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 0;
    color: var(--join-posts-meta);
}

.tp-card--text-post .tp-card__meta-text {
    display: inline-block;
    font-family: "Merriweather", serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.2;
}

.tp-card--text-post .tp-card__meta-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

.tp-card--text-post .tp-card__meta-icon--author {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25Zm2.92 2.33H5v-.92l8.06-8.06.92.92L5.92 19.58ZM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.13 1.13 3.75 3.75 1.13-1.13Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25Zm2.92 2.33H5v-.92l8.06-8.06.92.92L5.92 19.58ZM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.13 1.13 3.75 3.75 1.13-1.13Z'/%3E%3C/svg%3E");
}

.tp-card--text-post .tp-card__title {
    margin: 0;
    color: var(--join-posts-title);
    font-family: "Anton", sans-serif;
    font-size: 29px;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.tp-card--text-post .tp-card__title-text {
    display: inline;
    background-image: linear-gradient(var(--join-posts-underline),
            var(--join-posts-underline));
    background-repeat: no-repeat;
    background-position: 0 var(--tp-underline-position);
    background-size: 0 var(--tp-underline-height);
    transition: background-size 0.32s ease;
}

.tp-card--text-post .tp-card__link:hover .tp-card__title-text,
.tp-card--text-post .tp-card__link:focus-visible .tp-card__title-text {
    background-size: 100% var(--tp-underline-height);
}

.tp-card--text-post .tp-card__excerpt {
    margin: 0;
    color: var(--join-posts-excerpt);
    font-family: "Inter", sans-serif;
    font-size: var(--join-posts-excerpt-size);
    line-height: var(--join-posts-excerpt-line-height);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .join-posts {
        margin-bottom: 60px;
    }

    .join-posts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 34px;
        row-gap: 30px;
    }

    .join-posts__intro {
        margin-bottom: 50px;
    }

    .join-posts__art {
        display: none;
    }

    .tp-card--text-post .tp-card__title {
        font-size: 2rem;
    }
}

@media (max-width: 680px) {
    .join-posts__head {
        margin-bottom: 30px;
    }

    .join-posts__intro {
        max-width: 100%;
        margin-bottom: 34px;
        font-size: 17px;
    }

    .join-posts__grid {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }

    .join-posts__art {
        justify-content: center;
    }

    .join-posts__art-image {
        width: min(100%, 240px);
    }

    .tp-card--text-post .tp-card__body {
        gap: 12px;
    }

    .tp-card--text-post .tp-card__meta-text {
        font-size: 14px;
    }

    .tp-card--text-post .tp-card__title {
        font-size: 1.8rem;
        line-height: 1.05;
    }

    .tp-card--text-post .tp-card__excerpt {
        font-size: 15px;
    }
}