/* =====================================================
   BAOIAM - GUIDE ARTICLE PAGE

   One stylesheet behind every page in pages/guides/. The
   cards that link here live in css/resources.css, so the
   two share their vocabulary on purpose: the same .rs-tag
   pill opens the article, and the "keep reading" strip at
   the foot reuses .rs-guide-grid rather than re-styling a
   second card.

   Section rhythm follows the rest of the site: eyebrow ->
   big heading with one orange word -> sub -> content, on
   the fluid tokens in Global.css. Nothing here hard-codes
   a section size.
===================================================== */

.gd-page{
    background:#FFFFFF;
}

/* ==========================
   HERO
========================== */

/* The cream wash rather than the resources hero's animated bands. An
   article opens on its own title, and a second field of moving sparks
   above a wall of body copy competes with the thing you came to read. */

.gd-hero{
    padding:calc(var(--space-section) - 8px) 0 var(--space-section-sm);
    background:var(--wash-top);
    border-bottom:1px solid var(--border-soft);
}

.gd-hero-inner{
    max-width:820px;
    margin-inline:auto;
    text-align:center;
}

/* Back to the index, sitting above the tag so the article never becomes a
   dead end for someone who arrived from search rather than from the grid. */

.gd-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-sans);
    font-size:var(--fs-meta);
    font-weight:600;
    color:var(--ink-500);
    text-decoration:none;
    transition:color var(--dur-base) var(--ease-out);
}

.gd-back:hover{
    color:var(--primary);
}

.gd-back i{
    font-size:11px;
}

/* The tag is inline-block by default, and the back link above it is
   inline-flex, so without this the two share a line. Block plus fit-content
   keeps the pill its own width while putting it on a row of its own. */

.gd-hero .rs-tag{
    display:block;
    width:fit-content;
    margin:22px auto 0;
}

.gd-title{
    margin-top:16px;
    font-family:var(--font-sans);
    font-size:var(--fs-hero);
    font-weight:800;
    line-height:1.15;
    /* Article titles run longer than a section title, so the lines are
       evened out rather than left to break wherever the measure ends. */
    text-wrap:balance;
    color:var(--ink);
}

.gd-standfirst{
    margin-top:18px;
    font-family:var(--font-sans);
    font-size:clamp(15px,1.5vw,19px);
    line-height:1.6;
    text-wrap:pretty;
    color:var(--ink-500);
}

/* The three facts about the article itself. Dots between them are drawn by
   the separator rule below rather than typed, so a missing field cannot
   leave a stranded middot. */

.gd-meta{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px 18px;
    margin-top:24px;
    font-family:var(--font-sans);
    font-size:var(--fs-meta);
    font-weight:500;
    color:var(--ink-400);
}

.gd-meta span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.gd-meta span + span::before{
    content:"";
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--border-grey);
    /* The dot belongs to the gap, not to the label beside it. */
    margin-right:11px;
}

.gd-meta i{
    color:var(--primary);
}

/* ==========================
   BODY
========================== */

.gd-body{
    padding:var(--space-section) 0;
}

/* Narrower than the site container on purpose. The article holds a 720px
   measure, so at the full container width the two columns were pushed apart
   and ~200px of nothing sat between the text and the aside. 720 + 56 + 296
   is the width at which the pair sits together and the whole block centres. */

.gd-shell{
    max-width:1072px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 296px;
    gap:56px;
    align-items:start;
}

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

.gd-article{
    /* A measure, not the column width. Running copy past ~72 characters
       costs more in lost lines than it gains in fewer of them. */
    max-width:720px;
    font-family:var(--font-sans);
    font-size:var(--fs-body);
    line-height:1.75;
    color:var(--ink-600);
}

.gd-article > p{
    margin-top:18px;
    text-wrap:pretty;
}

.gd-article > p:first-child{
    margin-top:0;
}

.gd-lead{
    font-size:clamp(16px,1.25vw,18px);
    font-weight:500;
    line-height:1.7;
    color:var(--ink-800);
}

.gd-article h2{
    margin-top:44px;
    font-family:var(--font-sans);
    font-size:var(--fs-sub);
    font-weight:700;
    line-height:1.3;
    text-wrap:balance;
    color:var(--ink);
    /* Cleared so a jump from the contents list does not park the heading
       under the sticky navbar. */
    scroll-margin-top:96px;
}

.gd-article h3{
    margin-top:28px;
    font-family:var(--font-sans);
    font-size:var(--fs-card-sm);
    font-weight:700;
    line-height:1.35;
    color:var(--ink-900);
}

.gd-article strong{
    font-weight:700;
    color:var(--ink-900);
}

.gd-article a:not(.gd-btn){
    color:var(--primary);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:3px;
}

/* ---- Lists ---- */

/* Markers are drawn rather than inherited: the default disc sits too high
   against a 1.75 line-height and a native ol counter cannot take the brand
   colour without a pseudo-element anyway. */

.gd-list,
.gd-steps{
    margin-top:18px;
    padding:0;
    list-style:none;
}

.gd-list li,
.gd-steps li{
    position:relative;
    margin-top:10px;
    padding-left:30px;
    text-wrap:pretty;
}

.gd-list li::before{
    content:"";
    position:absolute;
    left:8px;
    top:.72em;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--primary);
}

.gd-steps{
    counter-reset:gd-step;
}

.gd-steps li{
    counter-increment:gd-step;
    padding-left:38px;
    margin-top:14px;
}

.gd-steps li::before{
    content:counter(gd-step);
    position:absolute;
    left:0;
    top:.28em;
    display:grid;
    place-items:center;
    width:23px;
    height:23px;
    border-radius:50%;
    background:var(--primary-10);
    font-size:12px;
    font-weight:700;
    line-height:1;
    color:var(--primary);
}

/* ---- Callout ---- */

.gd-callout{
    margin-top:26px;
    padding:20px 22px;
    border:1px solid var(--primary-20);
    border-left:3px solid var(--primary);
    border-radius:var(--radius-md);
    background:var(--cream-50);
}

.gd-callout strong{
    display:block;
    font-size:var(--fs-card-sm);
    color:var(--ink-900);
}

.gd-callout p{
    margin-top:6px;
    font-size:var(--fs-body);
    line-height:1.65;
    color:var(--ink-600);
}

/* ---- Table ---- */

/* The wrapper is what scrolls. Letting the table itself overflow would put
   a horizontal bar on the whole page at narrow widths. */

.gd-table-wrap{
    margin-top:24px;
    overflow-x:auto;
    border:1px solid var(--border-soft);
    border-radius:var(--radius-md);
}

.gd-table{
    width:100%;
    min-width:460px;
    border-collapse:collapse;
    font-size:14.5px;
}

.gd-table th,
.gd-table td{
    padding:12px 16px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid var(--border-soft);
}

.gd-table thead th{
    background:var(--cream-50);
    font-weight:700;
    font-size:13px;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--ink-800);
}

.gd-table tbody tr:last-child td{
    border-bottom:0;
}

.gd-table td:first-child{
    font-weight:600;
    color:var(--ink-900);
}

/* ---- Code ---- */

.gd-code{
    margin-top:22px;
    padding:18px 20px;
    overflow-x:auto;
    border:1px solid var(--border-soft);
    border-radius:var(--radius-md);
    background:var(--paper);
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
    font-size:13.5px;
    line-height:1.7;
    color:var(--ink-800);
}

.gd-code code{
    font:inherit;
    white-space:pre;
}

/* ---- Takeaways ---- */

.gd-takeaways{
    margin-top:26px;
    padding:24px 26px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-15);
    background:#fff;
    box-shadow:var(--shadow-soft);
}

.gd-takeaways h2{
    margin-top:0;
    font-size:var(--fs-card);
}

.gd-takeaways .gd-list{
    margin-top:14px;
}

/* ---- End-of-article call to action ---- */

.gd-endcta{
    margin-top:40px;
    padding:28px 30px;
    border-radius:var(--r-20);
    background:var(--grad-cta);
    color:#fff;
}

.gd-endcta h2{
    margin-top:0;
    font-family:var(--font-sans);
    font-size:var(--fs-sub);
    font-weight:800;
    line-height:1.3;
    color:#fff;
}

.gd-endcta p{
    margin-top:10px;
    font-size:var(--fs-body);
    line-height:1.65;
    color:rgba(255,255,255,.92);
}

.gd-btn{
    display:inline-block;
    margin-top:18px;
    padding:12px 26px;
    border-radius:var(--r-50);
    background:#fff;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:700;
    color:var(--primary);
    text-decoration:none;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.gd-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* ==========================
   ASIDE
========================== */

.gd-aside{
    position:sticky;
    top:96px;
    display:grid;
    gap:20px;
}

.gd-panel{
    padding:22px;
    border:1.5px solid var(--border-soft);
    border-radius:var(--r-15);
    background:#fff;
}

.gd-panel-title{
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-400);
}

.gd-toc{
    margin-top:14px;
    padding:0;
    list-style:none;
    counter-reset:gd-toc;
}

.gd-toc li{
    counter-increment:gd-toc;
    border-top:1px solid var(--border-soft);
}

.gd-toc li:first-child{
    border-top:0;
}

.gd-toc a{
    display:block;
    padding:10px 0;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:500;
    line-height:1.45;
    color:var(--ink-600);
    text-decoration:none;
    transition:color var(--dur-base) var(--ease-out);
}

.gd-toc a::before{
    content:counter(gd-toc) ". ";
    font-weight:700;
    color:var(--primary);
}

.gd-toc a:hover{
    color:var(--primary);
}

/* The side card that sends a reader on to a course. Peach rather than the
   orange gradient the article ends on -- two full-strength orange blocks
   on one screen and neither is a call to action any more. */

.gd-side-cta{
    padding:24px 22px;
    border:1.5px solid var(--primary-20);
    border-radius:var(--r-15);
    background:var(--cream-50);
}

.gd-side-cta h3{
    font-family:var(--font-sans);
    font-size:var(--fs-card-sm);
    font-weight:700;
    line-height:1.35;
    color:var(--ink-900);
}

.gd-side-cta p{
    margin-top:8px;
    font-family:var(--font-sans);
    font-size:13.5px;
    line-height:1.6;
    color:var(--ink-500);
}

.gd-side-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:14px;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:700;
    color:var(--primary);
    text-decoration:none;
}

.gd-side-link i{
    font-size:11px;
    transition:transform var(--dur-base) var(--ease-out);
}

.gd-side-link:hover i{
    transform:translateX(3px);
}

/* ==========================
   KEEP READING
========================== */

.gd-related{
    padding:var(--space-section-sm) 0 var(--space-section);
    background:var(--section-bg);
    border-top:1px solid var(--border-soft);
}

/* Three across here, not the four the resources index runs -- the strip is
   a footer to the article, and four cards at this width squeeze the titles
   onto three lines each. */

.gd-related .rs-guide-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

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

@media (max-width:1080px){

    .gd-shell{
        grid-template-columns:minmax(0,1fr);
        gap:40px;
    }

    /* Unstuck once it is below the article rather than beside it, or it
       would pin itself to the top of a section it has already scrolled
       past. */
    .gd-aside{
        position:static;
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-items:start;
    }

    .gd-article{
        max-width:none;
    }

    .gd-related .rs-guide-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:640px){

    html,
    body.gd-page{
        overflow-x:hidden !important;
        width:100% !important;
    }

    .gd-hero{
        padding:clamp(24px, 5vw, 36px) 16px var(--space-tight) !important;
        box-sizing:border-box !important;
    }

    .gd-hero-inner{
        width:100% !important;
        max-width:100% !important;
        padding:0 !important;
    }

    .gd-back{
        font-size:11.5px !important;
        gap:6px !important;
    }

    .gd-hero .rs-tag{
        font-size:9.5px !important;
        padding:3px 8px !important;
        margin:12px auto 0 !important;
    }

    .gd-title{
        font-size:clamp(20px, 5.5vw, 26px) !important;
        line-height:1.2 !important;
        margin-top:10px !important;
    }

    .gd-standfirst{
        font-size:clamp(11.5px, 2.8vw, 13.5px) !important;
        line-height:1.45 !important;
        margin-top:8px !important;
        max-width:96% !important;
        margin-inline:auto !important;
    }

    .gd-meta{
        font-size:10.5px !important;
        gap:6px 12px !important;
        margin-top:14px !important;
        justify-content:center !important;
    }

    .gd-meta span + span::before{
        margin-right:8px !important;
    }

    /* Body & Layout */
    .gd-body{
        padding:clamp(24px, 5vw, 36px) 16px !important;
        box-sizing:border-box !important;
        overflow-x:hidden !important;
    }

    .gd-shell{
        width:100% !important;
        max-width:100% !important;
        gap:24px !important;
    }

    .gd-article{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .gd-lead{
        font-size:12.5px !important;
        line-height:1.55 !important;
    }

    .gd-article p{
        font-size:12px !important;
        line-height:1.55 !important;
        margin-top:10px !important;
    }

    .gd-article h2{
        font-size:clamp(16px, 4.2vw, 19px) !important;
        line-height:1.25 !important;
        margin-top:22px !important;
    }

    .gd-article h3{
        font-size:clamp(13.5px, 3.5vw, 15.5px) !important;
        line-height:1.3 !important;
        margin-top:16px !important;
    }

    .gd-list li,
    .gd-steps li{
        font-size:12px !important;
        line-height:1.5 !important;
        margin-top:8px !important;
        padding-left:24px !important;
    }

    .gd-steps li{
        padding-left:32px !important;
    }

    .gd-steps li::before{
        width:20px !important;
        height:20px !important;
        font-size:11px !important;
    }

    /* Code Blocks */
    .gd-code{
        margin-top:14px !important;
        padding:12px 14px !important;
        font-size:11.5px !important;
        line-height:1.5 !important;
        border-radius:10px !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }

    /* Callouts */
    .gd-callout{
        margin-top:16px !important;
        padding:12px 14px !important;
        border-radius:10px !important;
    }

    .gd-callout strong{
        font-size:12.5px !important;
    }

    .gd-callout p{
        font-size:11.5px !important;
        line-height:1.4 !important;
        margin-top:4px !important;
    }

    /* Tables */
    .gd-table-wrap{
        margin-top:16px !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
        border-radius:10px !important;
    }

    .gd-table{
        font-size:11.5px !important;
        min-width:320px !important;
    }

    .gd-table th,
    .gd-table td{
        padding:8px 10px !important;
    }

    .gd-table thead th{
        font-size:11px !important;
    }

    /* Takeaways */
    .gd-takeaways{
        margin-top:20px !important;
        padding:14px 16px !important;
        border-radius:14px !important;
    }

    .gd-takeaways h2{
        font-size:15px !important;
        margin-top:0 !important;
    }

    .gd-takeaways .gd-list{
        margin-top:10px !important;
    }

    /* End CTA */
    .gd-endcta{
        margin-top:24px !important;
        padding:18px 16px !important;
        border-radius:16px !important;
        text-align:center !important;
    }

    .gd-endcta h2{
        font-size:clamp(16px, 4.5vw, 19px) !important;
        line-height:1.25 !important;
    }

    .gd-endcta p{
        font-size:11.5px !important;
        line-height:1.4 !important;
        margin-top:6px !important;
    }

    .gd-btn{
        margin-top:12px !important;
        padding:9px 20px !important;
        font-size:12px !important;
        font-weight:700 !important;
        border-radius:999px !important;
        display:inline-block !important;
    }

    /* Aside */
    .gd-aside{
        grid-template-columns:minmax(0,1fr) !important;
        gap:16px !important;
        width:100% !important;
        box-sizing:border-box !important;
    }

    .gd-panel{
        padding:14px !important;
        border-radius:14px !important;
    }

    .gd-panel-title{
        font-size:10.5px !important;
    }

    .gd-toc a{
        font-size:11.5px !important;
        padding:7px 0 !important;
    }

    .gd-side-cta{
        padding:14px !important;
        border-radius:14px !important;
    }

    .gd-side-cta h3{
        font-size:13.5px !important;
    }

    .gd-side-cta p{
        font-size:11.5px !important;
        line-height:1.4 !important;
    }

    .gd-side-link{
        font-size:11.5px !important;
        margin-top:10px !important;
    }

    /* Keep Reading Related Section */
    .gd-related{
        padding:clamp(24px, 5vw, 36px) 16px !important;
        box-sizing:border-box !important;
    }

    .gd-related .rs-guide-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px !important;
        margin-top:14px !important;
        width:100% !important;
    }

}