/*
 * Rare detail page (/rare/{slug}/): one connected card.
 *
 * The stage, the details, the value history, the specs and About used to be
 * separate boxes. They are now cells of one card that share hairlines, like
 * the sections of the Habbo lookup result. Loaded only by the live rare page,
 * after habbend.css; the /rare-beta/ card has its own sheet.
 *
 * Not every rare has every cell (no valuation, no value history, a Noco cost
 * or not, currency), so htdocs/rare/index.php picks one arrangement:
 *
 *   .rare-detail--flat         stage | details
 *                              specs (full width, four facts a row)
 *                              About (full width)
 *
 *   .rare-detail--about-right  stage | details
 *                              specs | value history
 *                                    | About
 *
 *   .rare-detail--about-left   stage | details
 *                              specs | value history
 *                              About |
 *
 * A cell that is not in the markup takes no room and draws no line. The
 * column wrappers are display: contents at every width, so each section is a
 * direct cell of the card.
 */

.rare-detail.rare-detail--joined {
  gap: 0;
  background: var(--content-box-bg);
  border: 1px solid var(--content-box-border);
  border-radius: var(--content-box-radius);
  box-shadow: var(--content-box-shadow);
  overflow: hidden;
}

.rare-detail.rare-detail--joined .rare-detail-col {
  display: contents;
}

/* Cells: the box chrome goes, the card carries it. */
.rare-detail.rare-detail--joined .rare-stage,
.rare-detail.rare-detail--joined .rare-info,
.rare-detail.rare-detail--joined .rare-price-history,
.rare-detail.rare-detail--joined .rare-stage-detail,
.rare-detail.rare-detail--joined .furni-sounds,
.rare-detail.rare-detail--joined .rare-related-stack,
.rare-detail.rare-detail--joined > .rare-stage-seo {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rare-detail.rare-detail--joined .rare-info,
.rare-detail.rare-detail--joined .rare-price-history,
.rare-detail.rare-detail--joined .rare-stage-detail,
.rare-detail.rare-detail--joined .furni-sounds,
.rare-detail.rare-detail--joined > .rare-stage-seo {
  background: transparent;
  border-top: 1px solid var(--content-box-border);
}

.rare-detail.rare-detail--joined .rare-info {
  padding: 1.15rem 1.2rem 1.25rem;
}

.rare-detail.rare-detail--joined .rare-price-history,
.rare-detail.rare-detail--joined .rare-stage-detail,
.rare-detail.rare-detail--joined .furni-sounds {
  padding: 1rem 1.2rem 1.15rem;
}

.rare-detail.rare-detail--joined > .rare-stage-seo {
  padding: 1rem 1.2rem 1.1rem;
}

.rare-detail.rare-detail--joined .rare-stage-detail-heading {
  margin-bottom: 0.55rem;
}

.rare-detail.rare-detail--joined .rare-price-history-head {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Fact grids: the last row fills the width, so an odd count (no last
   valuation, no views yet) never leaves an empty grey cell. */
.rare-detail.rare-detail--joined .rare-facts--meta,
.rare-detail.rare-detail--joined .rare-facts--stage {
  display: flex;
  flex-wrap: wrap;
}

.rare-detail.rare-detail--joined .rare-facts--meta > .rare-fact,
.rare-detail.rare-detail--joined .rare-facts--stage > .rare-fact {
  flex: 1 1 calc(50% - 1px);
  box-sizing: border-box;
}

.rare-detail.rare-detail--joined .rare-facts--meta > .rare-fact--noco,
.rare-detail.rare-detail--joined .rare-facts--stage > .rare-fact--interact {
  flex-basis: 100%;
}

@container rare-info (max-width: 299px) {
  .rare-detail.rare-detail--joined .rare-facts--meta > .rare-fact {
    flex-basis: 100%;
  }
}

/* Full-width specs (the flat arrangement on desktop): four facts a row and
   the interaction flags four across. */
@container rare-stage-detail (min-width: 640px) {
  .rare-detail.rare-detail--joined .rare-facts--stage > .rare-fact {
    flex-basis: calc(25% - 1px);
  }

  .rare-detail.rare-detail--joined .rare-facts--stage > .rare-fact--interact {
    flex-basis: 100%;
  }

  .rare-detail.rare-detail--joined .rare-facts dd.rare-interact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem 1.6rem;
  }
}

@media (max-width: 859.98px) {
  /* Stacked: the stage is the first cell, so it has no line above it. */
  .rare-detail.rare-detail--joined .rare-stage {
    border-top: 0;
  }
}

@media (min-width: 860px) {
  .rare-detail.rare-detail--joined {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.15fr);
    align-items: stretch;
  }

  .rare-detail--joined.rare-detail--flat {
    grid-template-areas:
      "stage info"
      "specs specs"
      "about about"
      "sounds sounds"
      "related related";
  }

  /* The spanning cell's spare height goes to the last row, so the short
     cell above it keeps its own height and the lines stay where they are. */
  .rare-detail--joined.rare-detail--about-right {
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "stage info"
      "specs history"
      "specs about"
      "sounds sounds"
      "related related";
  }

  .rare-detail--joined.rare-detail--about-left {
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "stage info"
      "specs history"
      "about history"
      "sounds sounds"
      "related related";
  }

  .rare-detail.rare-detail--joined .rare-stage {
    grid-area: stage;
    /* The stage is as tall as the details beside it, never under 360px. */
    height: auto;
    min-height: 360px;
    align-self: stretch;
    border-right: 1px solid var(--content-box-border);
  }

  .rare-detail.rare-detail--joined .rare-info {
    grid-area: info;
    border-top: 0;
  }

  .rare-detail.rare-detail--joined .rare-stage-detail {
    grid-area: specs;
  }

  .rare-detail.rare-detail--joined .rare-price-history {
    grid-area: history;
  }

  .rare-detail.rare-detail--joined > .rare-stage-seo {
    grid-area: about;
  }

  .rare-detail.rare-detail--joined .furni-sounds {
    grid-area: sounds;
  }

  .rare-detail.rare-detail--joined .rare-related-stack {
    grid-area: related;
  }

  /* The line between the two columns, below the stage. */
  .rare-detail--joined.rare-detail--about-right .rare-stage-detail,
  .rare-detail--joined.rare-detail--about-left .rare-stage-detail,
  .rare-detail--joined.rare-detail--about-left > .rare-stage-seo {
    border-right: 1px solid var(--content-box-border);
  }
}