/* Suggestion strip on awards and articles. Sales pages style the same
   markup from salesDetails.css. This file is linked only when the strip
   is rendered outside the sales directory. */

.soldTopBanner {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0.5rem 0 1.25rem;
  padding: 8px 0 10px;
  background: #14110c;
  border: 1px solid #ffcc00;
  border-radius: 8px;
  color: #ffcc00;
  text-align: center;
  hyphens: manual;
}

/* Awards, articles, and projects. The fit script sets the used width to the
   visible page, so this box is not stuck in the centered 1000px column.
   Sales pages do not load this file.
   The site footer is position:fixed, and these pages put the strip after
   the hand-written copy. A short page would leave the strip in the middle
   of the viewport. The page shell becomes a column at least as tall as the
   screen; .pageColumnDock takes only the leftover space, so the strip sits
   on the bottom edge, just above the footer padding. A long page has no
   leftover space, and the strip stays after the copy. */
body:has(.pageColumnStrip) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* .textJustify sets justify-content: space-evenly on these same bodies.
     Pack the copy at the top so that rule does not spread the page. */
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
}

/* A column flex item with the browser's automatic side margins collapses
   an hr to its 2px border. Stretch it across the card column instead. */
body:has(.pageColumnStrip) > hr {
  align-self: stretch;
  flex: none;
  box-sizing: border-box;
  width: auto;
  min-width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-inline: 0;
  border: 0;
  height: 1px;
  background-color: #fff;
  overflow: visible;
}

.pageColumnDock {
  flex: 1 0 0.5rem;
  width: 100%;
  min-height: 0.5rem;
}

.soldTopBanner.pageColumnStrip {
  align-self: flex-start;
  max-width: none;
  margin-top: 0;
  margin-bottom: 0;
}

.soldTopBanner .relatedSalesHeading {
  margin: 0 12px 0.75rem;
  padding: 2px 8px 0;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  hyphens: manual;
}

.soldBannerRow {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 24px;
  overflow: hidden;
}

.soldTopBanner a.soldBannerCard {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 240px;
  height: auto;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
}

.soldBannerCard[hidden] {
  display: none !important;
}

.soldTopBanner a.soldBannerCard:hover,
.soldTopBanner a.soldBannerCard:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.soldBannerThumb {
  display: block;
  width: 240px;
  max-width: 240px;
  height: 160px;
  object-fit: cover;
  background: #1a1a1a;
  border: 2px solid #ffffff;
  border-radius: 8px;
  box-sizing: border-box;
}

.soldTopBanner a.soldBannerCard:hover .soldBannerThumb,
.soldTopBanner a.soldBannerCard:focus-visible .soldBannerThumb {
  border-color: #1fe8de;
}

.soldBannerCardTitle {
  position: static;
  display: block;
  width: 100%;
  height: 1.3em;
  margin: 8px 0 0;
  padding: 0 4px;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.soldTopBanner a.soldBannerSeeAll {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 180px;
  max-width: 200px;
  height: 160px;
  padding: 16px 14px;
  overflow: hidden;
  color: #ffcc00;
  background: #1a1200;
  border: 2px solid #ffcc00;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
}

.soldTopBanner a.soldBannerSeeAll:hover,
.soldTopBanner a.soldBannerSeeAll:focus-visible {
  color: #111111;
  background: #ffcc00;
  text-decoration: none;
}

@media (max-width: 700px),
       only screen and (max-device-width: 799px) and (orientation: portrait) {
  .soldTopBanner {
    max-width: 100%;
    padding: 6px 0 7px;
  }

  .soldBannerRow {
    gap: 12px;
    padding: 0 12px;
  }

  .soldTopBanner a.soldBannerCard {
    width: 112px;
    height: 80px;
    border-radius: 6px;
  }

  .soldBannerThumb {
    width: 112px;
    max-width: 112px;
    height: 80px;
    border-radius: 6px;
  }

  .soldBannerCardTitle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 3px 5px;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 11px;
    line-height: 1.2;
    text-align: left;
  }

  .soldTopBanner a.soldBannerSeeAll {
    width: 124px;
    max-width: 148px;
    height: 80px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.1;
  }
}

@media only screen and (orientation: landscape) and (max-device-height: 500px),
       (orientation: landscape) and (max-height: 500px) {
  .soldBannerRow {
    gap: 12px;
    padding: 0 12px;
  }

  .soldTopBanner a.soldBannerCard {
    width: 112px;
    height: 80px;
    border-radius: 6px;
  }

  .soldBannerThumb {
    width: 112px;
    max-width: 112px;
    height: 80px;
    border-radius: 6px;
  }

  .soldBannerCardTitle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 3px 5px;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 11px;
    line-height: 1.2;
    text-align: left;
  }

  .soldTopBanner a.soldBannerSeeAll {
    width: 124px;
    max-width: 148px;
    height: 80px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.1;
  }
}