/*==========================================================
  Clunky Design System (CDS) v1.0
  layout.css
  Status: Evolving
==========================================================*/


/*==========================================================
SECTION 01
Containers
==========================================================*/

.container{
    width:min(100% - 2rem,var(--width-content));
    margin-inline:auto;
}

.container-reading{
    width:min(100% - 2rem,var(--width-reading));
    margin-inline:auto;
}

.container-wide{
    width:min(100% - 2rem,var(--width-wide));
    margin-inline:auto;
}

.container-full{
    width:min(100% - 2rem,var(--width-full));
    margin-inline:auto;
}


/*==========================================================
SECTION 02
Sections
==========================================================*/

.section{
    padding-block:var(--space-12);
}

.section-sm{
    padding-block:var(--space-8);
}

.section-lg{
    padding-block:var(--space-14);
}


/*==========================================================
SECTION 03
Flex
==========================================================*/

.flex{
    display:flex;
}

.flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.flex-column{
    display:flex;
    flex-direction:column;
}

.flex-wrap{
    flex-wrap:wrap;
}


/*==========================================================
SECTION 04
Grid
==========================================================*/

.grid{
    display:grid;
    gap:var(--space-7);
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--space-7);
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-7);
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-7);
}


/*==========================================================
SECTION 05
Hero
Future additions start here
==========================================================*/

.hero{
    padding-block:7rem;
}

.hero-content{
    max-width:760px;
}


/*==========================================================
SECTION 06
Article Layout
Sprint 1 — Canonical
==========================================================*/

/*
   Desktop architecture:

   ┌──────────────┬──────────────────────┬──────────────┐
   │              │                      │              │
   │     TOC      │    ARTICLE CONTENT   │  BALANCING   │
   │     RAIL     │       780px max      │     RAIL     │
   │              │                      │              │
   └──────────────┴──────────────────────┴──────────────┘

   The equal side rails keep the article itself centred in the
   viewport while allowing the TOC to remain visible.

   IMPORTANT:
   - Do NOT use position: fixed for the TOC.
   - TOC sticky behaviour belongs in toc.css.
*/


/*==========================================================
SECTION 06
Article Layout
Sprint 1 — Canonical

Architecture:

    flexible rail | centred article | flexible rail

The article remains centred in the viewport.
The TOC occupies the left rail.
The right rail balances the TOC.

The TOC itself is NOT fixed.
Sticky behaviour belongs to toc.css.
==========================================================*/


.article-layout {

    width: min(
        calc(100% - 2rem),
        1400px
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 760px)
        minmax(0, 1fr);

    column-gap: clamp(
        2rem,
        4vw,
        4rem
    );

    align-items: start;

}


/*==========================================================
Article Content
==========================================================*/

.article-content {

    grid-column: 2;

    grid-row: 1;

    width: 100%;

    max-width: 760px;

    min-width: 0;

    margin-inline: auto;

}

/*==========================================================
Article Sidebar / TOC Rail
==========================================================*/

/*
   IMPORTANT:

   The sidebar must stretch to the full height of the
   article grid row.

   This gives the sticky TOC enough vertical space to
   actually travel with the page.

   DO NOT use:
       align-self: start;

   because that causes the sidebar to shrink to the height
   of the TOC itself, leaving no sticky scroll range.
*/

.article-sidebar {

    grid-column: 1;

    grid-row: 1;

    min-width: 0;

    align-self: stretch;

    height: 100%;

    justify-self: end;

}


/*==========================================================
Article Media Safety
==========================================================*/

.article-content img,
.article-content svg,
.article-content video,
.article-content iframe {

    max-width: 100%;

}


/*==========================================================
Desktop → Tablet Transition
==========================================================

At this width there isn't enough room for:

    TOC + gap + 760px article + gap + balancing rail

So the TOC moves above the article rather than being squeezed
or allowed to overlap the article.
==========================================================*/

@media (max-width: 1199px) {

    .article-layout {

        width: min(
            calc(100% - 2rem),
            900px
        );

        display: block;

    }


    .article-sidebar {

        width: 100%;

        max-width: 100%;

        margin-bottom: 2rem;

    }


    .article-content {

        width: 100%;

        max-width: 760px;

        margin-inline: auto;

    }

}


/*==========================================================
Mobile
==========================================================*/

@media (max-width: 600px) {

    .article-layout {

        width: min(
            calc(100% - 1.5rem),
            760px
        );

    }


    .article-sidebar {

        margin-bottom: 1.5rem;

    }

}


/*==========================================================
Article Layout — Small Mobile
==========================================================*/

@media (max-width: 600px) {

    .article-layout {

        width: min(
            calc(100% - 1.5rem),
            var(--width-reading, 780px)
        );

    }

    .article-sidebar {

        margin-bottom: 1.5rem;

    }

}