/* Themed exchange pages (/sports/, /bollywood/, ...), loaded only by them through $pageStylesheets. Only .coll-* selectors,
   colours from the global.css tokens and no !important (CollectionCssBudgetTest); the accent comes from .coll--<theme> in layout.css. */

.coll-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-black);
  color: var(--color-white);
  border-left: 12px solid var(--color-coll-accent);
  padding: 7px 12px;
  margin-bottom: 10px;
}
.coll-masthead__logo { height: 70px; width: auto; }
.coll-masthead__tagline {
  margin: 0 0 2px;
  color: var(--color-white);
  font-size: 1.5em;
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
}
.coll-masthead .coll-masthead__credit {
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-faint);
  text-align: right;
}

.coll-summary { display: flex; flex-wrap: wrap; gap: 20px; }          /* intro | security_summary */
.coll-summary > .security_summary { flex: 0 1 380px; }
.coll-intro { flex: 1 1 400px; }
.coll-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.coll-stats { display: flex; justify-content: space-between; gap: 20px; }

/* Body row: main column and sidebar fill the 1200px row; the sidebar is a third of it, 330px (a 300px ad fits) to 390px.
   layout.css caps div.columns.eight/.four at 725px/325px above 1200px, so the caps are lifted here. */
.coll-body.column-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(330px, 33%, 390px);
  align-items: start;
}
.coll-body > .columns.coll-main,
.coll-body > .columns.coll-side { width: auto; max-width: none; min-width: 0; }

/* Now Trading table: header text aligns with its cells (right on the numeric columns), both with 6px 8px padding, and the header
   keeps 16px on the side where layout.css draws the sort arrow (right edge, left edge on th.right). position: relative contains the
   cells' absolutely positioned .visually-hidden spans, which would otherwise widen the page when the table scrolls. */
.coll-table { position: relative; }
.coll-table th,
.coll-table td { padding: 6px 8px; text-align: left; }
.coll-table th { padding-right: 16px; }
.coll-table th.right,
.coll-table td.right { text-align: right; }
.coll-table th.right { padding: 6px 8px 6px 16px; }
.coll-table .coll-facet-header,
.coll-table .coll-facet-cell { white-space: nowrap; }

/* Opening Soon: the cards sit on a grid sized by the section's own width (a container query), so it holds with or without the
   sidebar. Rows are always full: 3 cards show 2 at two columns, 4 show 3 at three, and 2 use two tracks; the cards left out stay in
   Now Trading. Written for the registry's spotlight_max of 4. The extra class beats layout.css's div.hotproperty-container, div.hotproperty.tall and 700px rule. */
.coll-spotlight { container: coll-opening / inline-size; }
.coll-spotlight .coll-spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.coll-spotlight .coll-spotlight-grid > .coll-spotlight-card { width: auto; min-width: 0; margin: 0; }
.coll-spotlight .coll-spotlight-grid > .coll-spotlight-card.IPO .security-content { flex-wrap: wrap; }   /* shares remaining wrap under the price in a narrow track */
@container coll-opening (min-width: 520px) {
  .coll-spotlight .coll-spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;                                               /* side by side, every card is the same size */
  }
}
@container coll-opening (min-width: 520px) and (not (min-width: 780px)) {
  .coll-spotlight .coll-spotlight-grid > .coll-spotlight-card:nth-child(3):last-child { display: none; }
}
@container coll-opening (min-width: 780px) {
  .coll-spotlight .coll-spotlight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coll-spotlight .coll-spotlight-grid:has(> .coll-spotlight-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coll-spotlight .coll-spotlight-grid > .coll-spotlight-card:nth-child(n+4) { display: none; }
}

svg.coll-icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  color: var(--color-text-muted);
}
.coll-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.coll-signup { margin: 10px 5px; }
/* In the footer's "What is HSX all about?" column, under the section text (which already ends in two line breaks); the footer's own text colour applies. */
.coll-trademark {
  margin: 0;
  text-align: left;
}

@media (max-width: 960px) {
  .coll-body.column-row { grid-template-columns: minmax(0, 1fr); }     /* keep the table full-width before the sidebar narrows it */
}

@media (max-width: 680px) {                                            /* same breakpoint as #header */
  .coll-masthead { flex-direction: column; align-items: flex-start; }
  .coll-masthead__logo { max-width: 100%; height: auto; }              /* shrink with the box instead of widening the page */
  .coll-masthead__tagline,
  .coll-masthead__credit { display: none; }
  /* The sport becomes icon-only; the label stays available to screen readers (display: none would drop it). */
  .coll-sport-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}