/**
 * @file
 * Software detail page layout. Semantic label/value rows (D7 parity), with the
 * ratings widget floated to the side on wide viewports as it was in D7.
 */

.ba-software__warning {
  margin-bottom: 1.5rem;
}

.ba-software__ratings {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.ba-software__ratings-list {
  margin: 0;
  border: 1px solid #ddd;
  padding: 0.5rem 0.75rem;
}

.ba-software__rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0;
}

.ba-software__rating dt {
  font-weight: normal;
  white-space: nowrap;
}

.ba-software__rating dd {
  margin: 0;
}

.ba-software__details {
  margin: 0;
}

.ba-software__row {
  display: flex;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.ba-software__row > dt {
  flex: 0 0 12rem;
  max-width: 12rem;
  font-weight: bold;
}

.ba-software__row > dd {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Field formatters emit their own item lists; keep them inline and unbulleted. */
.ba-software__row > dd ul,
.ba-software__row > dd ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ba-software__row > dd .field__items,
.ba-software__row > dd .field__item {
  display: inline;
}

.ba-software__row > dd .field__item:not(:last-child)::after {
  content: ", ";
}

.ba-software__comments {
  clear: both;
  margin-top: 2rem;
}

/*
 * Review header: title, permalink, then the "Submitted by" footer, stacked
 * above the body (D7's order).
 *
 * The theme's compiled style.css carries a bare `footer { padding: 2rem 0 }`,
 * meant for the page footer but matching every <footer> element, comment__meta
 * included. That was tolerable when the footer opened the comment; now it sits
 * between the permalink and the body, where 2rem of padding either side reads as
 * three disconnected blocks. Reset it to a normal paragraph rhythm --
 * .comment__submitted brings its own 1rem bottom margin, which is the gap before
 * the body.
 *
 * Scoped through .ba-comment__header, which only this module's template emits,
 * so comments of any other type keep the theme's spacing. That also puts the
 * selector at (0,2,0) against the theme's (0,0,1), which matters here: module
 * CSS loads BEFORE theme CSS, so an equally specific rule would lose.
 */
.ba-comment__header {
  margin-bottom: 0.5rem;
}

.ba-comment__permalink {
  margin-bottom: 0;
}

.ba-comment__header + .comment__meta {
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * Per-review ratings box. It reuses the .ba-software__ratings* rules above --
 * same widget, same float -- so only the containment differs: without this the
 * box would escape its own comment and overlap the next one.
 */
.ba-comment__content::after {
  content: "";
  display: table;
  clear: both;
}

.ba-comment__content .ba-software__ratings {
  margin-top: 0.5rem;
}

/* Publisher "Programs" bulleted list. */
.ba-detail__programs {
  margin: 0;
  padding-left: 1.2rem;
}

/* data_format / design_code "List of related programs" table. */
.ba-detail__related-heading {
  clear: both;
  margin-top: 2rem;
}

.ba-detail__related-wrap {
  overflow-x: auto;
}

.ba-detail__related-table {
  width: 100%;
  border-collapse: collapse;
}

.ba-detail__related-table th,
.ba-detail__related-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid #eee;
}

.ba-detail__related-table th {
  border-bottom: 2px solid #ccc;
  white-space: nowrap;
}

@media (max-width: 48rem) {
  .ba-software__ratings {
    float: none;
    margin-left: 0;
  }

  .ba-software__row {
    flex-direction: column;
    gap: 0.15rem;
  }

  .ba-software__row > dt {
    flex-basis: auto;
    max-width: none;
  }
}