/*
 * Tennis Agent - Layout System
 * ============================
 * CSS Grid / Flexbox layout primitives. Mobile-first: base rules target the
 * smallest breakpoint (375px) and each media query progressively enhances
 * for wider viewports.
 *
 * Breakpoints:
 *   375px  - small phone   (base, no media query)
 *   768px  - tablet
 *   1024px - small desktop
 *   1280px - large desktop
 *
 * Patterns included: Container, Grid, Stack, Cluster, Sidebar
 * (Stack/Cluster/Sidebar follow the "Every Layout" naming convention.)
 */

/* -------------------------------------------------------------------- */
/* Container                                                             */
/* -------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-sm {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-lg {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .container,
  .container-lg {
    padding-inline: var(--space-xl);
  }
}

/* -------------------------------------------------------------------- */
/* Grid - auto-responsive, collapses to 1 column on small screens        */
/* -------------------------------------------------------------------- */
.grid-2 {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

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

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 1024px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------------- */
/* Stack - vertical rhythm between children                              */
/* -------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-space, var(--space-md));
}

.stack-sm {
  --stack-space: var(--space-sm);
}

.stack-lg {
  --stack-space: var(--space-lg);
}

/* -------------------------------------------------------------------- */
/* Cluster - horizontal group that wraps, e.g. badges, nav items          */
/* -------------------------------------------------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-space, var(--space-sm));
}

.cluster-tight {
  --cluster-space: var(--space-xs);
}

.cluster-loose {
  --cluster-space: var(--space-md);
}

/* -------------------------------------------------------------------- */
/* Field row - du semantiškai susiję formos laukai (pvz. data + laikas)  */
/* vienoje eilutėje VISADA, ne tik nuo 768px kaip `.grid-2` - tinka, kai  */
/* patys laukai siauri ir sutelpa greta net 360px ekrane.                */
/* -------------------------------------------------------------------- */
.field-row {
  display: flex;
  gap: var(--space-sm);
}

.field-row > .field {
  flex: 1 1 0;
  min-width: 0;
}

/* -------------------------------------------------------------------- */
/* Sidebar - one flexible side + one fixed-width side, wraps on narrow    */
/* viewports. Used for the main-content + chat-panel page shell.         */
/* -------------------------------------------------------------------- */
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.sidebar > .sidebar__main {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 260px;
}

.sidebar > .sidebar__aside {
  flex-basis: 320px;
  flex-grow: 1;
}

@media (min-width: 768px) {
  .sidebar > .sidebar__aside {
    position: sticky;
    top: 88px;
    align-self: flex-start;
  }
}

@media (min-width: 1024px) {
  .sidebar {
    flex-wrap: nowrap;
  }
}

/* -------------------------------------------------------------------- */
/* Paslėpimas                                                            */
/* Šie primityvai nustato display (grid/flex), kuris nugalėtų [hidden]    */
/* atributą, todėl paslėpimas jiems nurodomas atskirai.                  */
/* -------------------------------------------------------------------- */
.grid-2[hidden],
.grid-3[hidden],
.stack[hidden],
.cluster[hidden],
.sidebar[hidden] {
  display: none;
}

/* -------------------------------------------------------------------- */
/* Page shell                                                            */
/* -------------------------------------------------------------------- */
/* Lipni viršutinė juosta uždengtų antraštę, į kurią nuslinkta (nuoroda su
   fragmentu, fokusas klaviatūra). Atitraukimas nurodomas dokumento lygiu,
   todėl galioja visiems puslapiams vienodai. */
html {
  scroll-padding-top: calc(var(--nav-top-height) + var(--space-md));
}

.page {
  padding: var(--space-md);
  /* Rezervas plaukiojančiam mygtukui: nė viena turinio eilutė negali likti po
     juo. Kartojamas ir platesniuose ekranuose - `padding` trumpinys žemiau
     kitaip perrašytų šią reikšmę. */
  padding-bottom: var(--fab-clearance);
  max-width: 480px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .page {
    max-width: 1100px;
    padding: var(--space-lg) var(--space-xl);
    padding-bottom: var(--fab-clearance);
  }
}

@media (min-width: 1280px) {
  .page {
    max-width: 1280px;
  }
}