/**
 × layout_css v2.15 × updated 2026-10-07 ×
 × created 2025-12-03 × raimundo p. solar ×
 × Layout variables, grid and spacing utilities ×
 **/

/****
        Layout variables.
 ****/

:root {
  --gap-x:
    clamp(
      1rem,
      4vw,
      4rem
    );

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

  --breche-l: 48px;
  --breche-m: 24px;
  --breche-s: 12px;

  --header-offset: 0px;
  --sticky-gap: 2.4rem;
}


/****
        Margins and spacing.
 ****/

.marges {
  padding-inline:
    var(--gap-x);

  text-align: left;
}

.marges-l {
  padding:
    0
    calc(
      var(--gap-x) * 3
    )
    0
    var(--gap-x);

  text-align: left;
}

.padding-top {
  padding-top:
    1rem;
}

.padding-top-s {
  padding-top:
    0.5rem;
}

.padding-bottom {
  padding-bottom:
    1rem;
}

.nohero-topspacer {
  padding-top:
    1rem;
}


/****
        Separators.
 ****/

hr {
  height: 0;

  border: 0;
}

.separator {
  margin:
    0
    var(--gap-x)
    0.25rem;

  border-bottom:
    0.9px
    solid
    var(--color-black);
}

/*
 * Page-top line (first thing in <main>): right under the
 * header, almost touching it, on every main page. Below
 * it, the same room as the homepage sections (title
 * capitals ~21px under the line), both columns together.
 */
main > .separator:first-child,
main > .screen-reader-text:first-child + .separator {
  margin-top: 0.15rem;
  margin-bottom: 0.6rem;
}

main > .separator:first-child hr,
main > .screen-reader-text:first-child + .separator hr {
  margin: 0;
}


/****
        Optical alignment.
 ****/

.fixspace {
  margin-top: 0;

  transform:
    translateY(
      -0.2em
    );
}

/*
 * Right column next to a title (same grid row): its
 * first line's capitals sit on the title's capitals.
 */
.grid > .fixspace + .text-sm {
  margin-top: -0.13em;
}

.grid > .fixspace + .index-list {
  margin-top: -0.05rem;
}

/* Empty list: a plain paragraph instead of links. */
.grid > .fixspace + .index-list > p.text-sm:first-child {
  margin-top: -0.08em;
}


/****
        Grid system.
 ****/

.grid,
.grid-4 {
  display: grid;

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

  width: 100%;

  column-gap:
    var(--breche-l);

  row-gap:
    var(--breche-s);
}

.grid-4 {
  column-gap:
    var(--breche-s);
}

.grid > *,
.grid-4 > * {
  min-width: 0;
}


/****
        Desktop 12-column grid.
 ****/

@media (min-width: 640px) {

  .grid {
    grid-template-columns:
      repeat(
        12,
        minmax(
          0,
          1fr
        )
      );
  }


  /****
          Sticky left column.
   ****/

  .sticky-left {
    position: sticky;

    top:
      calc(
        var(
          --header-offset,
          0px
        )
        +
        var(
          --sticky-gap,
          0rem
        )
      );

    align-self:
      start;
  }


  /****
          8 / 4 layout.
   ****/

  .grid.tt
  > :first-child {
    grid-column:
      1
      / span 8;

    grid-row:
      1
      / -1;
  }

  .grid.tt
  > :not(:first-child) {
    grid-column:
      9
      / -1;
  }


  /****
          Three equal columns.
   ****/

  .grid.three
  > * {
    grid-column:
      span 4;
  }


  /****
          Two equal columns.

          Generic 50 / 50 structure.
          Page-specific behaviour belongs in
          the corresponding component stylesheet.
   ****/

  .grid.two
  > * {
    grid-column:
      span 6;
  }


  /****
          4 / 8 layout.

          Used by:
          About
          Objectives
          History
          Members
          Working Groups
   ****/

  .grid.tf
  > :first-child {
    grid-column:
      1
      / span 4;

    grid-row:
      1
      / -1;
  }

  .grid.tf
  > :not(:first-child) {
    grid-column:
      5
      / -1;
  }
}


/****
        Grid 4 — tablet.
 ****/

@media (min-width: 900px) {

  .grid-4 {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/****
        Grid 4 — large desktop.
 ****/

@media (min-width: 1200px) {

  .grid-4 {
    grid-template-columns:
      repeat(
        12,
        minmax(
          0,
          1fr
        )
      );
  }

  .grid-4
  > * {
    grid-column:
      span 3;
  }
}


/****
        TT content.
 ****/

.tt-main {
  margin-bottom:
    var(--breche-s);

  line-height:
    1.4rem;
}

.tt-main h3 {
  display:
    inline;
}

.tt-main p {
  margin-top:
    0.0rem;

  font-style:
    normal;
}

.tt-main address {
  margin-bottom:
    0.2rem;

  font-style:
    normal;
}

.tt-side {
  margin-bottom:
    var(--breche-s);
}

.tt-side:last-child {
  margin-bottom: 0;
}


/****
        Pages without a hero.
 ****/

body.no-hero main {
  padding-top:
    var(--header-offset);
}


/****
        Right side of a TF grid.

        Used when the left column is deliberately
        empty or already occupied independently.
 ****/

.tf-right {
  grid-column:
    1
    / -1;
}

@media (min-width: 640px) {

  .grid.tf
  > .tf-right {
    grid-column:
      5
      / -1;
  }
}


/****
        Generic index list.

        Used by Working Groups and other
        lightweight textual indexes.
 ****/

.index-list {
  width: 100%;
}

.index-list__item {
  border-bottom:
    0.9px
    solid
    var(--color-black);
}

.index-list__item:last-child {
  border-bottom: 0;
}


/*
 * First row has no top padding so it aligns
 * optically with the adjacent heading.
 */

.index-list__link {
  display: block;

  width: 100%;

  padding:
    0
    0
    0.3rem;

  color:
    inherit;
}


/*
 * Every subsequent row gets its breathing
 * room after the previous separator.
 */

.index-list__item
+ .index-list__item
.index-list__link {
  padding-top:
    0.25rem;
}