/*
 * Article page: the two-column reading layout, the sticky outline, and the
 * typography for content the admin wrote.
 *
 * Separate file for now because the main stylesheet is being edited in
 * parallel; nothing here depends on being separate, only on the tokens
 * storefront.css defines. Fold it in once that settles.
 */

/* Layout ----------------------------------------------------------------- */

.client-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 44px;
    align-items: start;
    padding-block: 28px 72px;
}

.client-article__main { min-width: 0; }

/*
 * Sticky rather than fixed: it travels with the article until it reaches the
 * top, then holds — and because it is a grid item it stops at the end of the
 * column instead of sliding over the footer. `top` clears the sticky header.
 *
 * Sticky dies inside an ancestor with `overflow: hidden`, so nothing between
 * this and <body> may clip.
 */
.client-article__aside {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 4px;
}

/* Header ----------------------------------------------------------------- */

.client-article__head { margin-bottom: 20px; }

.client-article__title {
    font-size: clamp(26px, 3.2vw, 34px);
    line-height: 1.25;
    margin: 0 0 12px;
}

.client-article__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 14px;
    color: var(--client-muted);
}

.client-article__meta a { color: var(--client-accent); text-decoration: none; }
.client-article__meta a:hover { text-decoration: underline; }

.client-article__lead {
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.7;
    color: #46464e;
}

.client-article__cover {
    width: 100%;
    border-radius: 14px;
    display: block;
    margin-bottom: 28px;
}

/* Table of contents ------------------------------------------------------ */

.client-toc {
    border: 1px solid var(--client-line);
    border-radius: var(--client-radius);
    background: var(--client-surface);
    padding: 18px 20px;
}

.client-toc__title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 12px;
    color: var(--client-muted);
}

.client-toc__list {
    list-style: none;
    counter-reset: client-toc;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

.client-toc__item { margin: 0; }

.client-toc__item > a {
    display: block;
    padding: 7px 0 7px 14px;
    border-left: 2px solid transparent;
    color: var(--client-ink);
    text-decoration: none;
}

.client-toc__item > a:hover { color: var(--client-accent); border-left-color: var(--client-line); }

/* The section currently under the reader, marked by article.js. */
.client-toc__item > a[aria-current="true"] {
    color: var(--client-accent);
    border-left-color: var(--client-accent);
    font-weight: 600;
}

.client-toc__item--sub > a {
    padding-left: 28px;
    font-size: 13px;
    color: var(--client-muted);
}

/* Related posts ---------------------------------------------------------- */

.client-related { list-style: none; margin: 0; padding: 0; }
.client-related__item + .client-related__item { border-top: 1px solid var(--client-line); }

.client-related__link {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    text-decoration: none;
    color: inherit;
}

.client-related__thumb {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--client-soft);
}

.client-related__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    /* Three lines keeps the list scannable without cutting titles too short. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.client-related__link:hover .client-related__title { color: var(--client-accent); }

.client-related__date {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--client-muted);
}

/* Article body ----------------------------------------------------------- */

.client-rte {
    font-size: 17px;
    line-height: 1.78;
    color: #2a2a31;
}

/* Imported WordPress articles contain inline font declarations such as
   `font-size: 120%` and `font-family: Arial`. Keep authored colour and
   alignment, but make the article read in the storefront's typography. */
.client-rte [style] {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/*
 * The imported content still carries the WordPress plugin's own table of
 * contents. The storefront renders its own in the sidebar, so showing both
 * would put two outlines on one page. Hidden rather than stripped from the
 * database: the markup is harmless where it sits, and this is one line to undo.
 */
.client-rte #ez-toc-container { display: none; }

.client-rte > *:first-child { margin-top: 0; }

.client-rte h1,
.client-rte h2 {
    font-size: 24px;
    line-height: 1.3;
    margin: 38px 0 14px;
    /* Clears the sticky header when the reader jumps here from the outline. */
    scroll-margin-top: 96px;
}

.client-rte h3 {
    font-size: 19px;
    margin: 30px 0 12px;
    scroll-margin-top: 96px;
}

.client-rte h4 {
    font-size: 17px;
    margin: 24px 0 10px;
    scroll-margin-top: 96px;
}

.client-rte p { margin: 0 0 18px; }
.client-rte a { color: var(--client-accent); text-underline-offset: 2px; }

.client-rte ul,
.client-rte ol { margin: 0 0 18px; padding-left: 24px; }
.client-rte li { margin-bottom: 8px; }

.client-rte blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--client-accent);
    color: #46464e;
    font-style: italic;
}

.client-rte img {
    height: auto;
    border-radius: 12px;
    display: block;
}

/* WordPress wraps most images in a figure with a caption below. */
.client-rte figure { margin: 24px auto; max-width: 100%; }

.client-rte figcaption,
.client-rte .wp-caption-text {
    margin-top: 8px;
    font-size: 14px;
    color: var(--client-muted);
    text-align: center;
}

/* Alignment classes the imported markup relies on. */
.client-rte .aligncenter { margin-left: auto; margin-right: auto; }
.client-rte .alignleft { float: left; margin: 6px 20px 12px 0; max-width: 50%; }
.client-rte .alignright { float: right; margin: 6px 0 12px 20px; max-width: 50%; }
.client-rte .wp-caption { max-width: 100%; }

/*
 * Embedded video. The markup carries width and height attributes from the
 * editor, so the ratio has to be set here or a 16:9 clip renders as a letterbox
 * on a phone.
 */
.client-rte iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
    display: block;
    margin: 24px 0;
}

.client-rte table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 20px;
    font-size: 15px;
}

.client-rte th,
.client-rte td { border: 1px solid var(--client-line); padding: 10px 12px; text-align: left; }
.client-rte th { background: var(--client-soft); font-weight: 600; }

.client-rte hr { border: 0; border-top: 1px solid var(--client-line); margin: 32px 0; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1024px) {
    .client-article { grid-template-columns: minmax(0, 1fr); gap: 28px; }

    /* Stacked, the outline belongs above the article, not floating over it. */
    .client-article__aside {
        position: static;
        max-height: none;
        overflow: visible;
        order: 2;
    }

    .client-article__main { order: 1; }
}

@media (max-width: 560px) {
    .client-rte { font-size: 16px; }
    .client-rte h1,
    .client-rte h2 { font-size: 21px; }
    .client-rte .alignleft,
    .client-rte .alignright { float: none; margin: 16px auto; max-width: 100%; }
}