/* === Reset === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* === Variables === */
:root {
  --gap: clamp(1rem, 4vw, 1.5rem);
  --col: 20rem;
  --col--checkins: 22ch;
  --font-family-sl: 'Maven Pro', system-ui, -apple-system, sans-serif;
  --content: calc(100% - var(--gap) * 2);
  --full: minmax(var(--gap), 1fr);

  --gray-1: #f8f9fa;
  --gray-2: #e9ecef;
  --gray-8: #495057;
  --gray-11: #212529;

  --link-color: var(--gray-11);
  --foreground: var(--gray-11);
  --foreground-lower: var(--gray-8);

  --font-size-1: 0.875rem;
  --font-size-2: 1rem;
  --font-size-3: 1.125rem;
  --font-size-3-5: 1.35rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;

  --font-weight-6: 600;

  color-scheme: light;
}

/* === Typography === */
@font-face {
  font-family: 'Maven Pro';
  src: url('../fonts/MavenPro-VariableFont_wght.ttf');
  font-weight: normal;
  font-display: swap;
}

body {
  font-family: var(--font-family-sl);
  font-size: var(--font-size-2);
  color: var(--foreground);
  line-height: 1.2;
}

a,
a:hover,
a:focus,
a:visited {
  color: var(--link-color);
  text-decoration: none;
}

h1, h2, h3, h4 {
  margin-top: 0;
  font-weight: var(--font-weight-6);
  line-height: 1.2;
  text-wrap: unset;
  hyphens: auto;
}

@supports (font-variation-settings: "wght" 600) {
  h1, h2, h3, h4, strong {
    font-variation-settings: "wght" 600;
    font-weight: normal;
  }
}

h1 { font-size: var(--font-size-5); }
h2 { font-size: var(--font-size-4); }
h3 { font-size: var(--font-size-3-5); }

main > article {
  aside {
    font-size: var(--font-size-1);
  }

  figcaption {
    h3, h4 {
      margin-block-end: 0.5rem;
    }

    a {
      text-transform: uppercase;
    }
  }
}

/* === Layout === */
body {
  display: flex;
  flex-flow: column wrap;
  gap: 0;
  padding-block: var(--gap);

  @supports (grid-area: auto) {
    display: grid;
    grid-template-columns: [full-start] var(--full) [content-start] var(--content) [content-end] var(--full) [full-end];
  }

  > * {
    grid-column: content;
    display: grid;
    gap: var(--gap);
  }

  > main {
    gap: calc(var(--gap) * 2) var(--gap);
  }

  > footer {
    padding: 1rem;
    text-align: center;
  }
}

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

main {
  @media (width >= 40rem) {
    > .has-users {
      display: grid;
      grid-template-columns: 2fr minmax(150px, 1fr);
    }
  }

  > article {
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    > figure {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      width: 100%;
      justify-items: center;
    }
  }

  > article:not(.checkin) figcaption {
    text-align: center;

    @media (width >= 40rem) {
      text-align: start;
    }
  }

  @media (width >= 40rem) {
    article:not(.checkin) > figure {
      grid-template-columns: clamp(160px, 20%, 300px) 1fr;
      justify-items: start;

      > figcaption:only-child {
        grid-column: 1 / -1;
      }
    }
  }
}

/* Checkin grid */
body > main:has(> .checkin),
.grid--checkins {
  --col: var(--col--checkins);
  grid-template-columns: repeat(auto-fill, minmax(var(--col), 1fr));

  > article {
    @media (width >= 40rem) {
      display: grid;
    }
  }
}

.checkin {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 0.5);

  > figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
  }

  main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 0.5);
    padding-inline: calc(var(--gap) * 0.5);
    padding-block-end: calc(var(--gap) * 0.5);

    h2 {
      font-size: var(--font-size-3);
      line-height: 1.2;
    }

    > span {
      font-size: var(--font-size-2);
      color: var(--foreground-lower);

      time {
        display: block;
      }
    }
  }

  &.usertrophy {
    --avatar-size: 64px;
    flex-direction: row;
    align-items: flex-start;

    > figure img {
      width: var(--avatar-size);
      min-width: var(--avatar-size);
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 50%;
    }
  }
}

/* Users sidebar */
article > aside {
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) * 0.5);

  @media (width >= 40rem) {
    flex-direction: column;
  }

  > figure {
    display: grid;
    grid-template-columns: minmax(0, 64px) 1fr;
    gap: calc(var(--gap) * 0.5);
    align-items: flex-start;
    padding: 0;

    img {
      aspect-ratio: 1;
      width: 100%;
      max-width: 100%;
      height: auto;
    }
  }
}

h1, h2, h3, h4 {
  grid-column: -1/1;
}

/* Description */
.description {
  gap: var(--gap);
  justify-items: center;

  > main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
  }
}

@media (width >= 40rem) {
  .description {
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  }
}

/* Logos */
.logos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

@media (width >= 30rem) {
  .logos {
    flex-direction: row;

    a:first-child {
      margin-inline-end: auto;
    }
  }
}

/* User trophy (hall of fame) grid */
.grid--usertrophies {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

/* Trophy grid */
.grid--trophies {
  grid-template-columns: repeat(auto-fill, minmax(var(--col), 1fr));

  .trophy-grid-card {
    text-align: center;

    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(var(--gap) * 0.5);
    }

    img {
      width: 100%;
      max-width: 160px;
      height: auto;
    }

    h3 {
      font-size: var(--font-size-3);
    }

    p {
      font-size: var(--font-size-1);
      color: var(--foreground-lower);
    }
  }
}

/* === Dialog === */
dialog {
  margin: auto;
  position: relative;

  img {
    max-height: 80vh;
  }

  &,
  &::backdrop {
    transition:
      display 1s ease,
      overlay 1s ease,
      opacity 1s ease,
      transform 1s ease;
    opacity: 0;
  }

  &[open] {
    opacity: 1;
    position: fixed;

    &::backdrop {
      opacity: 0.8;
    }
  }

  html:has(&[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;

    body {
      padding: 0;
    }
  }

  @starting-style {
    &[open],
    &[open]::backdrop {
      opacity: 0;
    }
  }

  &::backdrop {
    margin: calc(var(--gap) * -1);
    background-image:
      radial-gradient(circle at 1px 1px,
        #0007 1px,
        #000c 0);
    background-size: 20px 20px;
  }
}