.work-logs {

  .main-header, .form-title {
    font-size: 2.25rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.25rem;
  }

 /* Work log section headings */
  h2 {
    text-align: left;
    font-weight: var(--font-weight-extrabold);
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  /* A grid that supports displaying a dynamic number of work logs. */
  /* By default, the grid is arranged horizontally. */
  /* On small screens, the grid shifts to a vertical layout with duplicated headings. */
  .work-log-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(min-content, auto)) min-content; /* 8 columns */
    grid-auto-flow: dense;

    @media screen and (max-width: 992px ){
      grid-template-columns: min-content auto; /* 2 columns (small screens only) */
    }

    /* Different table configuration for in-progress logs */
    &.in-progress {
      grid-template-columns: repeat(5, minmax(min-content, auto)) repeat(2, min-content); /* 7 columns */

      @media screen and (max-width: 992px ){
        grid-template-columns: min-content auto; /* 2 columns (small screens only) */
      }

      /* Reduced padding on Finish/Edit columns */
      .grid-cell {
        &:nth-child(8n) {
          padding-right: 0;
        }

        &:nth-child(7n) {
          padding-right: 1rem;
        }
      }
    }

    /* A pair of headings and data for one work log */
    .grid-item {
      display: contents;

      &:first-child {
        .grid-row-header {
          display: contents;
        }
      }
    }

    /* Data row */
    .grid-row {
      display: contents;

      /* Header row */
      /* Not displayed by default, unless it's the first grid-item (top of the table) or unless using mobile layout */
    }

    .grid-row-header {
      display: none;

      /* On mobile, transform grid columns into rows */
      @media screen and (max-width: 992px ){
        .grid-cell {
          grid-column-start: 1;

          &:not(:last-child) {
            border-bottom: none;
          }
        }
      }

      @media screen and (max-width: 992px ){
        display: contents;
      }
    }

    /* Header row cell */
    .grid-cell-header {
      font-weight: var(--font-weight-semibold);
      color: var(--ink-gray);
      border-top: 1px solid var(--light-gray);
      border-bottom: 1px solid var(--light-gray);
    }

    /* Subdivided grid cell */
    .grid-cell-subdiv {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 0.5rem;

      @media screen and (max-width: var(--screen-lg) ){
        flex-direction: column;
      }

      em {
        color: var(--ink-gray);
        font-style: normal;
        font-weight: var(--font-weight-medium);
      }
    }

    /* A single cell in the grid */
    .grid-cell {
      position: relative;
      padding: .75rem 2rem 0.75rem 0;
      font-size: 1rem;
      border-bottom: 1px solid var(--light-gray);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.75rem;

      @media screen and (max-width: var(--screen-xl) ){
        padding: .75rem 1rem 0.75rem 0;
      }

      @media screen and (max-width: var(--screen-lg) ){
        padding: .75rem 0.75rem 0.75rem 0;
      }

      @media screen and (max-width: 992px ){
        padding-left: 1rem;
        padding-right: 1rem;
        border-top: 1px solid var(--light-gray);
        border-bottom: none;

        /* Colorize top row only */
        &:first-child {
          background-color: var(--brand-charcoal-lightest);
        }

        &:last-child {
          border-bottom: 1px solid var(--light-gray);
        }
      }

      &.center-content {
        text-align: center;
        align-items: center;

        @media screen and (max-width: 992px ){
          text-align: left;
          align-items: flex-start;
        }
      }

      /* Reduced padding on Edit column */
      &:nth-child(8n) {
        padding-right: 0;
      }

      /* Creator and partner user profiles */
      .user-profile {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        font-weight: var(--font-weight-semibold);

        .partner-label {
          position: relative;
          font-size: 0.75rem;
          text-transform: lowercase;
          padding: 0.25rem .5rem 0.25rem .5rem;
          border-radius: 4px;
          background-color: var(--yellow-lighter);
          color: var(--yellow-darker);
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.work-log-images {
  display: grid;
  gap: 50px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 800px;
  width: 100%;
  padding: 10px;
}

/* Individual images */
.work-log-image__preview{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  transform: scale(1.05);
}

.work-log-images:only-child,
.work-log-image__preview:only-child {
  max-width: 300px;
}

.work-log-image__download-btn {
  cursor: pointer;
  position: absolute;
  display: block;
  width: 36px;
  height: 36px;
  right: -8px;
  top: -8px;
  border-radius: 50%;

  &::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    display: block;
    width: 36px;
    height: 36px;
    background-color: var(--success);
    border-radius: 50%;
  }

  &:hover::before {
    background-color: var(--success-dark);
  }

  svg {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 1.3rem;
    height: auto;
    z-index: 1;
    fill: var(--off-white);
    stroke: var(--off-white);
  }
}