/**
 * product-details.css
 */

/* Component: Product Details */
.product-details {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  margin-bottom: 64px;

  .product-description,
  .product-properties {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
  }

  /* The properties keep their column when the product has no description. */
  .product-properties {
    grid-column: 2;
  }

  .details-title {
    margin: 0;
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  /* The description is free content, so every heading level shares the subheader style of the sections. */
  .details-text {
    color: var(--color-grey-dark);
    font-size: var(--font-size-medium);
    line-height: var(--line-height-single);
    overflow-wrap: anywhere;

    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 24px 0 12px;
      color: var(--color-black-light);
      font-size: var(--font-size-medium);
      font-weight: 600;
      line-height: var(--line-height-body);
      letter-spacing: 0.5px;
      text-transform: uppercase;

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

    p {
      margin: 0 0 8px;
    }

    /* The reset zeroes the padding, which leaves the markers hanging outside the column. */
    ul,
    ol {
      margin: 0 0 8px;
      padding-left: 20px;
      list-style-position: outside;

      ul,
      ol {
        margin: 2px 0 0;
      }
    }

    ul {
      list-style-type: disc;

      ul {
        list-style-type: circle;
      }
    }

    ol {
      list-style-type: decimal;
    }

    li {
      margin: 0 0 2px;
      padding-left: 2px;
    }

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

    p:last-child,
    ul:last-child,
    ol:last-child {
      margin-bottom: 0;
    }

    a {
      color: var(--color-primary);
      text-decoration: underline;
      text-underline-offset: 2px;

      &:hover {
        text-decoration: none;
      }
    }
  }

  .details-section {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .details-heading {
      margin: 0;
      color: var(--color-black-light);
      font-size: var(--font-size-medium);
      font-weight: 600;
      line-height: var(--line-height-body);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .details-empty {
      margin: 0;
      color: var(--color-grey);
      font-size: var(--font-size-medium);
      line-height: var(--line-height-single);
    }

    .details-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      border-radius: var(--border-radius-default);
      color: var(--color-grey-dark);
      font-size: var(--font-size-medium);
      line-height: var(--line-height-body);

      tr {
        background: var(--color-white);
      }

      tr:nth-child(even) {
        background: var(--color-white-dark);
      }

      th,
      td {
        padding: 10px 12px;
        text-align: left;
        vertical-align: top;
      }

      th {
        width: 45%;
        color: var(--color-black-light);
        font-weight: 600;
      }

      a {
        color: var(--color-primary);
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
          text-decoration: none;
        }
      }
    }
  }
}

/* Tablet: Product Details */
@media (max-width: 1024px) {
  .product-details {
    gap: 32px;
  }
}

/* Mobile: Product Details */
@media (max-width: 767px) {
  .product-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-bottom: 48px;

    .product-properties {
      grid-column: auto;
    }
  }
}