/**
 * Just Orthodontics — page templates.
 *
 * §01  Treatment detail
 * §02  News listing
 * §03  Article
 * §04  Legal
 */

/* ═══ §01 Treatment detail ════════════════════════════════════ */

/**
 * The treatment hero.
 *
 * Unlike every other hero on the site, the copy does not sit over the middle of
 * the photograph — it occupies a navy panel on the left with the image bleeding
 * off to the right. The scrim is therefore a sideways gradient rather than the
 * two-layer wash the page heroes use.
 */
/**
 * The treatment hero — measured from the Invisalign frame, which is the master
 * treatment page.
 *
 * 884 tall of a 1728 frame. The copy panel is flat navy; the photograph is a
 * clean 889-wide panel on the right, cut by the arch. Unlike a page hero the
 * photograph carries no veil at all — the two live side by side rather than one
 * over the other — so the only wash here is the short one that keeps the header
 * legible where it crosses the picture.
 */
.jo-tx-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 51.2vw, 884px);
    padding-top: calc(var(--jo-admin-bar) + var(--jo-header-height) + clamp(32px, 4vw, 72px));
    padding-bottom: clamp(48px, 5vw, 80px);
    isolation: isolate;
    overflow: hidden;
    color: var(--jo-cream);
    background: var(--jo-navy);
}

/**
 * The photograph panel and its arch.
 *
 * Figma puts the image at x839 of 1728 — 51.45% — and cuts its top-left corner
 * with a 360px circular sweep. Written as a percentage of the panel, that is
 * the same 40.5% arch proportion the site already uses for its arched media, so
 * the motif is one shape at two sizes rather than two shapes that resemble each
 * other.
 */
.jo-tx-hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 51.45%;
    z-index: -2;
    border-top-left-radius: 40.5% 41%;
    overflow: hidden;
}

.jo-tx-hero__img { width: 100%; height: 100%; object-fit: cover; }

/* Only the header wash. The panel edge does the separating, not a gradient. */
.jo-tx-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;              /* above its sibling <img>, inside the media layer */
    background: var(--jo-hero-scrim-top);
}

/* Figma insets this copy to x159 rather than to the 96 page gutter. */
.jo-tx-hero__inner { position: relative; width: 100%; padding-left: clamp(0px, 3.65vw, 63px); }
.jo-tx-hero__copy { max-width: 520px; }

.jo-tx-hero__eyebrow { margin-bottom: var(--jo-space-4); }
.jo-tx-hero__title { color: var(--jo-cream); margin-bottom: var(--jo-space-4); }

.jo-tx-hero__text {
    color: rgba(var(--jo-cream-rgb), .9);
    font-size: var(--jo-card-body);
    line-height: 1.65;
    max-width: 52ch;
}

/* ── Pricing ──────────────────────────────────────────────── */

.jo-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 150px;
    padding: var(--jo-card-pad-lg);
    text-align: center;
    background: var(--jo-white);
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
}

/* The highlighted option — one clear recommendation, as drawn. */
.jo-price.is-featured {
    background: var(--jo-navy);
    border-color: var(--jo-navy);
    color: var(--jo-cream);
    box-shadow: var(--jo-shadow-card);
}

.jo-price__label {
    font-family: var(--jo-font-body);
    font-size: var(--jo-body-sm);
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--jo-soft);
}

.jo-price.is-featured .jo-price__label { color: var(--jo-on-navy); }

.jo-price__value {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--jo-font-display);
}

.jo-price__prefix { font-size: var(--jo-h5); color: var(--jo-muted); }
.jo-price.is-featured .jo-price__prefix { color: var(--jo-on-navy); }

.jo-price__figure {
    font-size: clamp(28px, 2.4vw, 38px);
    line-height: 1.1;
    color: var(--jo-heading);
}

.jo-price.is-featured .jo-price__figure { color: var(--jo-cream); }

.jo-price__note { font-size: var(--jo-body-sm); color: var(--jo-soft); }
.jo-price.is-featured .jo-price__note { color: var(--jo-on-navy); }

.jo-price__footnote {
    margin-top: var(--jo-space-6);
    text-align: center;
    font-size: var(--jo-body-sm);
    color: var(--jo-soft);
}

/* ── Before / after ───────────────────────────────────────── */

.jo-case {
    margin: 0;
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    background: var(--jo-white);
    overflow: hidden;
}

.jo-case__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }

.jo-case__half { position: relative; }

.jo-case__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.jo-case__label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 11px;
    border-radius: var(--jo-radius-pill);
    background: rgba(var(--jo-navy-rgb), .78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--jo-cream);
    font-size: var(--jo-label-size);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.jo-case__body { padding: var(--jo-card-pad); display: grid; gap: 5px; }

.jo-case__meta {
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    text-transform: uppercase;
    color: var(--jo-soft);
}

.jo-case__text { font-size: var(--jo-card-body); line-height: 1.5; color: var(--jo-body); }

.jo-case__footnote {
    margin-top: var(--jo-space-7);
    text-align: center;
    font-family: var(--jo-font-display);
    font-style: italic;
    font-size: var(--jo-h4);
    color: var(--jo-muted);
}

/* ═══ §02 News listing ════════════════════════════════════════ */

.jo-news { display: grid; gap: clamp(20px, 2.4vw, 34px); }

/**
 * The featured article.
 *
 * Its own deliberate layout — image beside copy, at roughly half and half — and
 * explicitly not part of the news grid, which keeps its fixed card shape.
 */
.jo-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    background: var(--jo-white);
    overflow: hidden;
}

.jo-featured__media { display: block; background: var(--jo-surface); }

.jo-featured__img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    transition: transform var(--jo-dur-slow) var(--jo-ease);
}

.jo-featured:hover .jo-featured__img { transform: scale(1.03); }

.jo-featured__body {
    display: flex;
    flex-direction: column;
    gap: var(--jo-space-3);
    padding: clamp(24px, 2.6vw, 40px);
    justify-content: center;
}

.jo-featured__date {
    font-family: var(--jo-font-display);
    font-style: italic;
    font-size: var(--jo-h4);
    color: var(--jo-muted);
}

.jo-featured__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    color: var(--jo-soft);
}

.jo-featured__dot { opacity: .6; }
.jo-featured__flag { color: var(--jo-navy); font-weight: 700; }

.jo-featured__title a {
    color: var(--jo-heading);
    transition: color var(--jo-dur-fast) var(--jo-ease);
}

.jo-featured__title a:hover { color: var(--jo-navy); }

.jo-featured__text { font-size: var(--jo-card-body); line-height: 1.6; color: var(--jo-soft); }
.jo-featured .jo-btn { align-self: flex-start; margin-top: var(--jo-space-3); }

.jo-news__more { display: flex; justify-content: center; margin-top: var(--jo-space-4); }
.jo-news__more .jo-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ═══ §03 Article ═════════════════════════════════════════════ */

.jo-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    align-items: start;
    gap: clamp(28px, 3.4vw, 64px);
}

.jo-article__main { max-width: 760px; }

.jo-article__header .jo-eyebrow-pill { margin-bottom: var(--jo-space-4); }

.jo-article__title { margin-bottom: var(--jo-space-4); }

.jo-article__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: var(--jo-body-sm);
    color: var(--jo-soft);
    margin-bottom: var(--jo-space-6);
}

.jo-article__dot { opacity: .6; }

.jo-article__lead { margin-bottom: var(--jo-space-6); }

.jo-article__lead-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--jo-radius-md);
}

.jo-article__standfirst {
    font-size: var(--jo-body-lg);
    line-height: 1.7;
    color: var(--jo-body);
    margin-bottom: var(--jo-space-6);
}

.jo-article__content > * + * { margin-top: 1.3em; }

.jo-article__heading {
    font-family: var(--jo-font-display);
    font-size: var(--jo-h4);
    line-height: var(--jo-lh-h4);
    font-weight: 500;
    color: var(--jo-navy);
    margin-top: 1.9em !important;
}

.jo-article__figure { margin: 2em 0 !important; }

.jo-article__figure-img {
    width: 100%;
    border-radius: var(--jo-radius-md);
}

/* A wide image breaks out of the reading column by a measured amount, and only
   where there is room for it to do so. */
.jo-article__figure.is-wide { width: min(100%, 860px); margin-inline: 0; }

.jo-article__caption {
    margin-top: 9px;
    font-size: var(--jo-body-sm);
    color: var(--jo-soft);
}

.jo-article__quote {
    position: relative;
    margin: 2em 0 !important;
    padding: clamp(20px, 2vw, 30px) clamp(22px, 2.4vw, 34px);
    border-left: 2px solid var(--jo-navy);
    background: var(--jo-surface);
    border-radius: 0 var(--jo-radius-md) var(--jo-radius-md) 0;
}

.jo-article__quote-mark { color: var(--jo-pill); margin-bottom: 10px; }

.jo-article__quote p {
    font-family: var(--jo-font-display);
    font-size: var(--jo-h4);
    line-height: 1.4;
    color: var(--jo-heading);
}

.jo-article__quote cite {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-size: var(--jo-body-sm);
    color: var(--jo-muted);
}

.jo-article__list { display: grid; gap: 9px; padding-left: 0 !important; }

.jo-article__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    list-style: none;
    margin: 0;
}

.jo-article__list--bullet li::before {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-top: .62em;
    border-radius: 50%;
    background: var(--jo-navy);
}

.jo-article__list--number { counter-reset: jo-list; }

.jo-article__list--number li::before {
    counter-increment: jo-list;
    content: counter(jo-list) '.';
    flex: 0 0 auto;
    min-width: 1.2em;
    font-weight: 600;
    color: var(--jo-navy);
}

.jo-article__list-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: .34em;
    color: var(--jo-navy);
}

/**
 * The fixed closing CTA.
 *
 * Part of the template rather than part of the content: an editor can change its
 * wording but cannot reorder it into the article or delete it by accident.
 */
.jo-article-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jo-space-5);
    flex-wrap: wrap;
    margin-top: clamp(40px, 4vw, 64px);
    padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.6vw, 36px);
    border-radius: var(--jo-radius-md);
    background: var(--jo-navy);
    color: var(--jo-cream);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.jo-article-cta__eyebrow {
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    text-transform: uppercase;
    color: var(--jo-on-navy);
    margin-bottom: 5px;
}

.jo-article-cta__title {
    font-family: var(--jo-font-display);
    font-size: var(--jo-h4);
    line-height: 1.25;
    color: var(--jo-cream);
}

.jo-article-cta__text {
    margin-top: 4px;
    font-size: var(--jo-body-sm);
    color: var(--jo-on-navy);
}

/* ── The sticky rail ──────────────────────────────────────── */

.jo-article-rail {
    padding: var(--jo-card-pad-lg);
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    background: var(--jo-band);
}

.jo-article-rail__title {
    font-family: var(--jo-font-display);
    font-size: var(--jo-h5);
    font-weight: 500;
    color: var(--jo-heading);
    margin-bottom: var(--jo-space-3);
}

.jo-article-rail__title + * { margin-bottom: var(--jo-space-6); }
.jo-article-rail > :last-child { margin-bottom: 0; }

.jo-share { display: flex; gap: 8px; }

.jo-share__btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--jo-navy);
    color: var(--jo-cream);
    transition: background-color var(--jo-dur-fast) var(--jo-ease),
                transform var(--jo-dur-fast) var(--jo-ease);
}

.jo-share__btn:hover { background: var(--jo-navy-deep); transform: translateY(-1px); }
.jo-share__btn.is-copied { background: var(--jo-pill); color: var(--jo-navy); }

.jo-article-rail__list { display: grid; }

.jo-article-rail__list li { border-bottom: 1px solid var(--jo-border); }
.jo-article-rail__list li:last-child { border-bottom: 0; }

.jo-article-rail__list a {
    display: block;
    padding: 10px 0;
    font-size: var(--jo-body-sm);
    color: var(--jo-body);
    transition: color var(--jo-dur-fast) var(--jo-ease);
}

.jo-article-rail__list a:hover { color: var(--jo-navy); }
.jo-article-rail__list--related a { line-height: 1.4; }

/* ═══ §04 Legal ═══════════════════════════════════════════════ */

.jo-legal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    align-items: start;
    gap: clamp(28px, 3.4vw, 64px);
}

.jo-legal__main { max-width: 740px; }

.jo-legal__title { margin-bottom: var(--jo-space-3); }

.jo-legal__updated {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    color: var(--jo-soft);
    margin-bottom: var(--jo-space-6);
}

.jo-legal__intro { margin-bottom: var(--jo-space-7); }

.jo-legal__section + .jo-legal__section { margin-top: clamp(28px, 3vw, 42px); }

.jo-legal__heading {
    display: flex;
    gap: 9px;
    font-family: var(--jo-font-display);
    font-size: var(--jo-h4);
    line-height: var(--jo-lh-h4);
    font-weight: 500;
    color: var(--jo-navy);
    margin-bottom: var(--jo-space-3);
    /* Anchored policy sections land below the sticky header. */
    scroll-margin-top: var(--jo-sticky-offset);
}

.jo-legal__number { color: var(--jo-soft); }

.jo-legal-nav {
    padding: var(--jo-card-pad-lg);
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    background: var(--jo-surface);
}

.jo-legal-nav__title {
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--jo-soft);
    margin-bottom: var(--jo-space-3);
}

.jo-legal-nav li { border-bottom: 1px solid var(--jo-border); }
.jo-legal-nav li:last-child { border-bottom: 0; }

.jo-legal-nav a {
    display: block;
    padding: 11px 0;
    font-size: var(--jo-body-sm);
    color: var(--jo-body);
    transition: color var(--jo-dur-fast) var(--jo-ease);
}

.jo-legal-nav a:hover { color: var(--jo-navy); }
.jo-legal-nav .is-current a { color: var(--jo-navy); font-weight: 600; }

/* ═══ Responsive ══════════════════════════════════════════════ */

@media (max-width: 1000px) {
    .jo-article,
    .jo-legal { grid-template-columns: minmax(0, 1fr); }

    .jo-article__main,
    .jo-legal__main { max-width: none; }

    /*
     * The two rails stack in opposite directions, because they do opposite
     * jobs. An article's rail is about the piece you have just read — sharing
     * it, what to read next — so it follows the article. The legal rail is how
     * you choose which policy to read at all, so it has to come first; sending
     * it to the bottom would hide the way between policies behind the whole of
     * whichever one you happened to land on.
     */
    .jo-article__side { order: 2; }
    .jo-legal__side   { order: -1; }

    /* Stacked, it is a list to read past, not a rail to keep in view. */
    .jo-legal__side .jo-sticky { position: static; }

    .jo-featured { grid-template-columns: minmax(0, 1fr); }
    .jo-featured__img { min-height: 0; aspect-ratio: 16 / 9; }

    /*
     * Stacked, the photograph goes full-bleed behind the copy and the arch
     * comes off with it: a 40% sweep across the whole width is a shape, not a
     * corner, and it reads as a mistake rather than as the motif it is at
     * desktop where the picture is only half the band.
     */
    .jo-tx-hero__media {
        width: 100%;
        border-top-left-radius: 0;
    }

    .jo-tx-hero__scrim {
        background: linear-gradient(180deg,
            rgba(var(--jo-navy-rgb), .62) 0%,
            rgba(var(--jo-navy-rgb), .78) 55%,
            rgba(var(--jo-navy-rgb), .92) 100%);
    }
}

@media (max-width: 700px) {
    .jo-article-cta { flex-direction: column; align-items: flex-start; }
    .jo-article-cta .jo-btn { width: 100%; }
    .jo-case__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/**
 * The article prompt, over a photograph.
 *
 * Unlike the CTA bands, this panel's photograph is inside it rather than behind
 * it — the prompt sits in the article column, not across a full-width section.
 * That rules out backdrop-filter: it blurs what is behind the element it is on,
 * which here is the white article page, not the picture. So the depth is built
 * by stacking instead — navy ground, the picture held back over it, a navy wash
 * over that — and the panel keeps the solid background it always had.
 */
.jo-article-cta > .jo-cta-backdrop {
    border-radius: inherit;
    overflow: hidden;
}

.jo-article-cta--has-backdrop > .jo-article-cta__copy,
.jo-article-cta--has-backdrop > .jo-btn { position: relative; z-index: 1; }

/* A little more of the picture than the wide bands show, because this panel is
   small and the image would otherwise read as a smudge. */
.jo-article-cta--has-backdrop .jo-cta-backdrop__img { --jo-cta-image-opacity: .30; }