/**
 * Glossary term (single-glossary.php), Figma "Glossary / Article" 23231:5563 / 23231:5564
 * (updated 02.11: no hero band, the heading lives in the article column).
 * The page reuses the blog article styles (css/post-new.css, body.post-new); this file
 * only holds what the glossary does differently: the heading block (breadcrumbs, title,
 * "Share article:", divider), the 800 + 320 grid with the sidebar level with the
 * breadcrumbs, and the article spacing.
 */

/* Desktop: heading and article in an 800px column (text 720px), sidebar 320px on the
   right from the very top, 80px apart (Figma article-content 1200 = 800 + 80 + 320). */
.glossary-term .post-main-content {
    padding: 48px 0 80px;
}

.glossary-term .post-main-content__wrapper {
    display: grid;
    grid-template-columns: minmax(0, 800px) 320px;
    grid-template-areas:
        "heading side"
        "text side";
    grid-template-rows: auto 1fr;
    justify-content: space-between;
    column-gap: 80px;
    row-gap: 0;
    margin-left: 0;
}

.glossary-term .glossary-term__heading {
    grid-area: heading;
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 720px;
    /* 40px, the 1px divider, 40px to the first paragraph (Figma article-heading). */
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #e5e5e5;
}

.glossary-term .post-main-content__column-left {
    grid-area: text;
    max-width: 720px;
    min-width: 0;
}

.glossary-term .post-main-content__column-right {
    grid-area: side;
    width: auto;
    padding-top: 0;
}

.glossary-term .glossary-term__heading .post-hero__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.glossary-term .glossary-term__heading .post-hero__breadcrumbs a,
.glossary-term .glossary-term__heading .post-hero__breadcrumbs span[aria-current] {
    color: rgba(0, 0, 0, .75);
    text-decoration: none;
}

.glossary-term .glossary-term__heading .post-hero__breadcrumbs a:hover {
    color: #262626;
    text-decoration: underline;
    text-underline-position: from-font;
}

.glossary-term .glossary-term__heading .post-hero__breadcrumb-sep {
    color: rgba(0, 0, 0, .55);
}

.glossary-term .glossary-term__heading .post__title {
    margin: 0;
    color: #262626;
    text-align: left;
}

.glossary-term .glossary-term__share {
    display: flex;
    align-items: center;
    gap: 16px;
}

.glossary-term .glossary-term__share-label {
    color: rgba(0, 0, 0, .55);
}

.glossary-term .glossary-term__share .sd-social-share {
    margin: 0;
}

/* The article's first element drops its own top spacing (an h2 carries 40px), so the
   text always starts 40px under the divider, whatever the term begins with.
   js/toc.js puts an empty div.scroll-anchor before every h2. */
.glossary-term .post-main-content__text > :first-child,
.glossary-term .post-main-content__text > .scroll-anchor:first-child + * {
    margin-top: 0;
    padding-top: 0;
}

.glossary-term .post-main-content__text h3 {
    padding-bottom: 16px;
}

/* Figma h4 (e.g. "Factors Affecting ACV:"): 18/26 semibold in the body colour.
   !important: post-new.css styles h3 and h4 alike with !important type. */
.glossary-term .post-main-content__text h4 {
    padding: 24px 0 16px;
}

.glossary-term .post-main-content__text h4,
.glossary-term .post-main-content__text h4 b,
.glossary-term .post-main-content__text h4 strong,
.glossary-term .post-main-content__text h4 span {
    color: rgba(0, 0, 0, .75) !important;
    font-size: 18px !important;
    line-height: 26px !important;
    font-weight: 600 !important;
    letter-spacing: .135px !important;
}

/* Tables look exactly like the blog's (post-new.css, wrapped by post-table-normalize.php).
   Some terms paint their header row with an inline background (#d4e6db): drop it so the
   blog's sand header and white rows show. !important beats the inline style. */
.glossary-term .post-main-content__text .post-table-scroll tr[style],
.glossary-term .post-main-content__text .post-table-scroll th[style],
.glossary-term .post-main-content__text .post-table-scroll td[style],
.glossary-term .post-main-content__text .post-table-scroll [bgcolor] {
    background: transparent !important;
}

/* Term content still carries <hr> between sections; the Figma article has none,
   the h2's own 40px top padding separates them. */
.glossary-term .post-main-content__text hr {
    display: none;
}

/* Tablet and phones: one column, heading, the collapsed TOC card, then the article. */
@media (max-width: 992px) {
    .glossary-term .post-main-content__wrapper {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "heading"
            "side"
            "text";
        grid-template-rows: auto;
        row-gap: 24px;
    }

    .glossary-term .glossary-term__heading,
    .glossary-term .post-main-content__column-left {
        max-width: none;
    }

    .glossary-term .glossary-term__heading {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }
}

@media (max-width: 767px) {
    /* Figma 390 frame: article-body padding 24 / 20 / 48. */
    .glossary-term .container-post {
        padding-left: 20px;
        padding-right: 20px;
    }

    .glossary-term .post-main-content {
        padding: 24px 0 48px;
    }

    .glossary-term .glossary-term__heading {
        gap: 24px;
    }

    /* "Share article:" sits above the icons on phones. */
    .glossary-term .glossary-term__share {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .glossary-term .post-main-content__text h3,
    .glossary-term .post-main-content__text h4 {
        padding: 12px 0 8px;
    }

    .glossary-term .post-main-content__text h4,
    .glossary-term .post-main-content__text h4 b,
    .glossary-term .post-main-content__text h4 strong,
    .glossary-term .post-main-content__text h4 span {
        font-size: 16px !important;
        line-height: 24px !important;
        letter-spacing: .12px !important;
    }
}