:root {
  --gutter: 10px;
  --spacing: 48px;
  --gallery-photo-height: 512px;
  --narrow-content-max-width: 512px;
  --medium-content-max-width: 768px;
  --wide-content-max-width: 1024px;
  --paragraph-spacing: 0.5em;
  --paragraph-spacing-rem: 0.5rem;
  --small-font-size: 0.85rem;

  /*
   * In the guestbook layout, controls the left-margin of the entries placed
   * furthest to the right
   */
  --max-left-margin: 30%;
}

body {
  padding: var(--spacing) var(--gutter);
}

/*
 * Apply to things like the body itself that should have gap of vertical spacing
 */
.vertical-spacing {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

/*
 * <p> elements are already styled to have vertical spacing. But in a context
 * with a bunch of heterogeneous block elements that should be spaced like
 * paragraphs, putting this class on the container is the easy button (just be
 * careful not to also use paragraphs internally, which will produce double
 * margin)
 */
.paragraph-spacing {
  display: flex;
  flex-direction: column;
  gap: var(--paragraph-spacing-rem);
}

p {
  margin-top: var(--paragraph-spacing);
  margin-bottom: var(--paragraph-spacing);

  &:first-child {
    margin-top: unset;
  }

  &:last-child {
    margin-bottom: unset;
  }
}

.admin-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: 0.5ch;
  width: fit-content;
}

.card {
  padding: var(--gutter);
  border-radius: var(--gutter);
}

.card-caption {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: end;
  gap: 0.5ch;

  margin-right: var(--gutter);

  font-size: var(--small-font-size);
}

.inline-icon {
  display: inline-block;

  img {
    height: 1lh;
    width: 1lh;
    vertical-align: text-bottom;
  }
}

#header-group {
  text-align: center;
}

/*
 * Apply these classes to anything that should be centered and confined to a max
 * width. Pay attention to nesting--sometimes you want the centering to apply to
 * a wrapper element. Assumes the parent is `flex-direction: column;`
 */
.centered-narrow {
  align-self: center;
  width: 100%;
  max-width: var(--narrow-content-max-width);
}
.centered-medium {
  align-self: center;
  width: 100%;
  max-width: var(--medium-content-max-width);
}
.centered-wide {
  align-self: center;
  width: 100%;
  max-width: var(--wide-content-max-width);
}

.photo-wrapper {
  figure {
    img {
      max-width: 100%;
      border-radius: var(--gutter);
    }
  }

  .admin-controls {
    align-self: flex-end;
    font-size: var(--small-font-size);
  }
}

.entry-list-item {
  max-width: max(
    calc(100% - var(--max-left-margin)),
    var(--narrow-content-max-width)
  );

  &:nth-child(4n + 1) {
    margin-left: 0;
  }

  &:nth-child(4n + 2) {
    margin-left: calc(var(--max-left-margin) * 2 / 3);
  }

  &:nth-child(4n + 3) {
    margin-left: calc(var(--max-left-margin) * 1 / 3);
  }

  &:nth-child(4n + 4) {
    margin-left: 30%;
  }
}

/*
 * For e.g. the login form where "password:" and the text box should be side by
 * side as long as viewport is wide enough
 */
.grid-form {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(16ch, 1fr));

  row-gap: var(--paragraph-spacing);
  column-gap: var(--gutter);
  align-items: baseline;

  .text-input-wrapper {
    display: contents;

    label {
      grid-column: 1;
    }

    label,
    input {
      display: block;
    }

    input[type="text"],
    input[type="password"],
    input[type="color"] {
      max-width: 48ch;
    }

    /* If additional content in the form, make it a full row */
    & + * {
      grid-column-start: 1;
      grid-column-end: -1;
    }
  }
}

/*
 * Container for a label-input pair that should stack vertically like
 * paragraphs, e.g. in photo upload form
 */
.label-input-block {
  label,
  input {
    display: block;
  }

  input[type="text"],
  input[type="password"],
  input[type="color"] {
    max-width: 20ch;
  }

  textarea {
    height: 4.5lh;
  }
}