/**
* CSS Layouts
* 
* @author: Sean Ockert
* @repo: https://github.com/seanockert/css-layouts
*
* Included layouts:
* 1. Stack: stack items in a column
* 2. Inline: align items in a row
* 3. Grid Sidebar: content with scrollable sidebar
* 4. Grid ACB: order items header (A), image (B), content (B)
* 5. Grid Blocks: a block of N items per row
* 6. Grid Inline: collapse block when items hit min width
* 7. Breakout: wider columns that 'break out' of the standard width
*/

/* Variables */
:root {
  --size-base: 0.75rem;
  --size-half: 0.375rem;
  --size-quarter: 0.1875rem;
  --size-2x: 1.5rem;
  --size-4x: 3rem;
}

/* Inline and Stack layout */
[class^='inline'],
[class*=' inline'],
[class^='stack'],
[class*=' stack'] {
  --gap: var(--size-base);
  display: flex;
  gap: var(--gap);
}

ul[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

[class^='inline'],
[class*=' inline'] {
  align-items: center;
  justify-content: flex-start;
}

[class^='stack'],
[class*=' stack'] {
  flex-direction: column;
}

[class^='inline'] > [class^='stack'] {
  flex: 1;
}

.inline-zero,
.stack-zero {
  display: inline-flex;
  gap: 0;
}

.inline-quarter,
.stack-quarter {
  --gap: var(--size-quarter);
}

.inline-half,
.stack-half {
  --gap: var(--size-half);
}

.inline-2x,
.stack-2x {
  --gap: var(--size-2x);
}

.inline-4x,
.stack-4x {
  --gap: var(--size-4x);
}

.inline-between {
  justify-content: space-between;
}

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

.stack-end > :last-child {
  margin-top: auto;
}

.align-top {
  align-items: flex-start;
  align-self: flex-start;
}

/* Grid ACB */
.grid-acb {
  display: grid;
  /* Image spans 2 rows */
  grid-template-areas:
    'a c'
    'b c';
  /* So header takes up min space */
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 1fr;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  aspect-ratio: 3 / 4;
  grid-area: c;
}

/* Grid Sidebar */
.grid-sidebar {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'header  header'
    'sidebar content';
  /* Container must have a height, could be 100vh */
  height: 20rem;
}

.header {
  background-color: #aaffd5;
  grid-area: header;
}

.content {
  background-color: #d0aaff;
  grid-area: content;
}

.sidebar {
  background-color: #edffaa;
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  overflow: hidden;
}

.scroll-container {
  justify-content: space-between;
  overflow: auto;
}

/* Grid Blocks */
[class^='grid-blocks'] {
  --rows: 5;
  display: grid;
  grid-template-columns: repeat(var(--rows), minmax(0, 1fr));
  list-style: none;
  padding: 0;
}

/* Define how many rows you want */
.grid-blocks-4 {
  --rows: 4;
}

.grid-blocks-5 {
  --rows: 5;
}

/* Grid Inline */
.grid-inline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  list-style: none;
  padding: 0;
}

/* Breakout */
.breakout {
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(50ch, 100% - var(--gap) * 2);
  --feature: minmax(0, 5rem);

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [feature-start] var(--feature)
    [content-start] var(--content) [content-end]
    var(--feature) [feature-end]
    var(--full) [full-end];
}

.breakout > * {
  grid-column: content;
}

.feature {
  grid-column: feature;
}

.full {
  grid-column: full;
}

@media (max-width: 40rem) {
  /* Stacking order on mobile: a -> c -> b */
  .grid-acb {
    grid-template-columns: 1fr;
    grid-template-areas:
      'a'
      'c'
      'b';
  }

  /* Reduce items per row */
  [class^='grid-blocks'] {
    --rows: 2;
  }

  .grid-sidebar {
    grid-template-columns: auto;
    grid-template-areas:
      'header'
      'sidebar'
      'content';
  }
}