/**
 * @file layout.css
 * @description Layout primitives for responsive design.
 * @context
 *   .aspect-ratio (vars: --aspect-ratio, --aspect-ratio-padding, --aspect-ratio-border, --aspect-ratio-bg)
 *   .card (vars: --card-padding, --card-border)
 *   .carousel (vars: --carousel-gap, --carousel-item-width)
 *   .center (Flex column center)
 *   .columns (Flex wrap with min-width logic. vars: --columns-gap, --columns-min-width)
 *   .container (Centered content. vars: --container-max-width, --container-padding)
 *   .grid (CSS Grid. vars: --grid-gap, --grid-min-width, --grid-align-items)
 *   .group (Flex wrap. vars: --group-gap)
 *   .icon (Fixed size flex center. vars: --icon-width, --icon-height)
 *   .overlay (Absolute center. vars: --overlay-top, --overlay-left)
 *   .sidebar (Sidebar layout. vars: --sidebar-gap, --sidebar-side-width, --sidebar-main-min-width)
 *   .stack (Flex column/row. vars: --stack-padding, --stack-space, --stack-wrap)
 */

/* /////////////////////////////////////////////////////
// Aspect Ratio
//////////////////////////////////////////////////////*/
.aspect-ratio {
  padding: var(--aspect-ratio-padding, 0);
  border: var(--aspect-ratio-border, 1px solid #000);
  aspect-ratio: var(--aspect-ratio, 1 / 1);
  background-color: var(--aspect-ratio-bg, transparent);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aspect-ratio > img,
.aspect-ratio > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* /////////////////////////////////////////////////////
// Card 
//////////////////////////////////////////////////////*/
.card {
  padding: var(--card-padding, 1rem);
  border: var(--card-border, 1px solid var(--text-color));
}

/* /////////////////////////////////////////////////////
// Carousel
//////////////////////////////////////////////////////*/
.carousel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--carousel-gap, 1rem);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Pad the bottom so that the scrollbar doesn't overlap the content */
  padding-bottom: 1rem;
}

.carousel > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  max-width: var(--carousel-item-width, 80%);
}

/* /////////////////////////////////////////////////////
// Center
//////////////////////////////////////////////////////*/
.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* /////////////////////////////////////////////////////
// Columns
//////////////////////////////////////////////////////*/
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--columns-gap, 1rem);
}
.columns > * {
  flex: 1 1 calc((var(--columns-min-width, 500px) - 100%) * 999);
}

/* /////////////////////////////////////////////////////
// Container
//////////////////////////////////////////////////////*/
.container {
  max-width: var(--container-max-width, 1200px);
  margin: 0 auto;
  padding: var(--container-padding, 1rem);
}

/* /////////////////////////////////////////////////////
// Grid
//////////////////////////////////////////////////////*/
.grid {
  display: grid;
  gap: var(--grid-gap, 1rem);
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(var(--grid-min-width, 200px), 100%), 1fr)
  );
  align-items: var(--grid-align-items, end);
}

/* /////////////////////////////////////////////////////
// Group
//////////////////////////////////////////////////////*/
.group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--group-gap, 1rem);
}

/* /////////////////////////////////////////////////////
// Icon
//////////////////////////////////////////////////////*/
.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-width, 2rem);
  height: var(--icon-height, 2rem);
}

/* /////////////////////////////////////////////////////
// Overlay
//////////////////////////////////////////////////////*/
.overlay {
  position: absolute;
  top: var(--overlay-top, 50%);
  left: var(--overlay-left, 50%);
  transform: translate(-50%, -50%);

  /* Overflow protection */
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  margin: 0; /* Prevent margins from pushing the element out */
  overflow: auto;
}

/* /////////////////////////////////////////////////////
// Sidebar
//////////////////////////////////////////////////////*/
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, 1rem);
}

.sidebar > .side {
  flex-basis: var(--sidebar-side-width, 20rem);
  flex-grow: 1;
}

.sidebar > .main {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-main-min-width, 50%);
}

/* /////////////////////////////////////////////////////
// Stack
//////////////////////////////////////////////////////*/
.stack {
  display: flex;
  flex-direction: column;
  padding: var(--stack-padding, 0rem);
  gap: var(--stack-space, 1.5rem);
}

/* Optional support for horizontal stack */
.stack.horizontal {
  flex-direction: row;
  flex-wrap: var(--stack-wrap, wrap);
}

/* 
  Move the last child of the stack to the bottom or right
  depending on the stack direction.
*/
.stack.split:not(.horizontal) > *:last-child {
  margin-top: auto;
}

.stack.horizontal.split > *:last-child {
  margin-left: auto;
}