/* Compendium building detail (detail kind "building"): masthead, History,
   Combat profile with an Abilities row, Derived & technical, Rules &
   interactions, Trains & researches, Affected by technologies, Continue.

   The building body reuses the unit body's section classes (.cmp-unit-*,
   .cmp-combat-*, .cmp-derived-*, .cmp-rules-*, .cmp-tech-*, .cmp-continue-*
   from compendium-unit-detail.css) and the codex masthead/History classes
   from compendium-detail.css, so it reads as the unit modal's sibling. This
   sheet only
     - gives .cmp-entry--building the unit entry's masthead/History tokens
       and portrait size (compendium-detail.css scopes them to the unit
       entry and shrinks every other portrait), and
     - styles what only buildings have (.cmp-building-*): the Abilities row,
       the Trains & researches chip rows and the "+N more" builder count.

   Linked in the <head> of the Compendium browser, Tech Tree and Combat
   Simulator, and from compendium/partials/building_masthead.html so the
   Events pages that embed the modal get it too. Every rule is scoped to
   .cmp-entry--building. */

.cmp-entry--building {
  --cmp-text-caption: rgba(241, 228, 198, 0.6);
  --cmp-text-fact-label: rgba(241, 228, 198, 0.66);
  --cmp-text-availability: rgba(241, 228, 198, 0.68);
  --cmp-text-quote: #f8efdb;
  --cmp-fact-border: rgba(235, 199, 119, 0.72);
  --cmp-fact-rule: rgba(213, 177, 101, 0.28);
  --cmp-notes-fill: rgba(14, 14, 15, 0.6);
  --cmp-inset-ring: inset 0 0 0 2px rgba(8, 8, 9, 0.8), inset 0 0 0 3px rgba(213, 177, 101, 0.24);
}

/* ---- Masthead ------------------------------------------------------------
   Building icons are the same full-bleed 128px art as unit icons, so the
   portrait keeps the unit size instead of the small-art frame other kinds
   get. The fact strip's column count follows the masthead copy width. */
.cmp-entry.cmp-entry--building > .cmp-entry-body .cmp-entry-portrait {
  --ps-ornate-frame-width: 20px;
  width: 196px;
  height: 196px;
}

.cmp-entry.cmp-entry--building > .cmp-entry-body .cmp-entry-portrait > img {
  object-fit: cover;
}

.cmp-entry--building .cmp-entry-masthead-copy {
  align-self: stretch;
  container: cmp-masthead / inline-size;
}

.cmp-building-fact-more {
  color: var(--cmp-text-note);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.cmp-entry--building .cmp-entry-fact[title] .cmp-entry-fact-value {
  cursor: help;
}

.cmp-entry--building .cmp-entry-fact[title] .cmp-entry-fact-link {
  cursor: pointer;
}

/* ---- Combat profile: the Abilities row -----------------------------------
   Actions that deal no damage (heals, auras, spawns) share one full-width
   cell below the attack cells; each ability is a column in it. */
:is(.cmp-entry--building, .cmp-entry--unit) .cmp-combat[class] > .cmp-combat-cell--abilities {
  grid-column: 1 / -1;
}

.cmp-building-abilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 18px 28px;
}

.cmp-building-ability {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cmp-building-ability-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cmp-hairline);
  color: var(--site-gold-strong);
  font-family: var(--site-font-title);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.25;
}

.cmp-building-ability-name > img {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.cmp-building-ability-summary {
  margin: 8px 0 0;
  color: var(--cmp-text-note);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.cmp-building-ability .cmp-combat-rows {
  margin-top: 2px;
}

.cmp-building-ability .cmp-combat-row dd {
  font-size: 1.25rem;
}

.cmp-building-ability .cmp-combat-row.is-text dd {
  font-size: 1.0625rem;
}

.cmp-building-ability-note {
  margin: 8px 0 0;
  color: var(--cmp-text-note);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* The enabling technology opens its own entry in place (same hx contract as
   the relation chips); an inline text button, padded to a 44px target. */
.cmp-building-ability-tech {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  padding: 0;
  border: 0;
  color: var(--site-gold);
  background: none;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cmp-link-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.cmp-building-ability-tech:is(:hover, :focus-visible) {
  color: var(--site-gold-strong);
  text-decoration-color: currentColor;
}

/* ---- Derived & technical -------------------------------------------------
   Text values (garrison classes, drop-site resources) wrap beside a label
   that keeps its width, instead of squeezing it under the value. */
.cmp-building-body .cmp-derived-row.is-text dt {
  flex: none;
}

.cmp-building-body .cmp-derived-row.is-text dd {
  flex: 1 1 0;
}

/* ---- Trains & researches -------------------------------------------------
   Continue-style chip groups. A long shared list is split into one row per
   pantheon: the label column keeps the chips of every row aligned. */
.cmp-building-link-group + .cmp-building-link-group {
  margin-top: 22px;
}

.cmp-building-link-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--site-border-strong);
  color: var(--cmp-unit-text-title);
  font-family: var(--site-font-title);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-transform: uppercase;
}

.cmp-building-link-title > span {
  color: var(--cmp-text-note);
  font-family: var(--site-font-body);
  font-size: 0.875rem;
  letter-spacing: 0;
}

.cmp-building-link-row {
  display: grid;
  grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
  align-items: start;
  gap: 10px 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cmp-unit-row-rule);
}

.cmp-building-link-row:last-child {
  border-bottom: 0;
}

.cmp-building-link-row.is-flat {
  grid-template-columns: minmax(0, 1fr);
}

/* Level the label with the first row of 44px chips. */
.cmp-building-link-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--cmp-text-note);
  font-size: 0.9375rem;
  line-height: 1.2;
}

.cmp-building-link-label > img {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.cmp-building-link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

/* ---- Affected by technologies: the shared block ------------------------- */
.cmp-techs-civ--shared .cmp-techs-civ-title {
  color: var(--site-gold-strong);
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  /* An odd count of top cells leaves the last one alone in the two-column
     grid; it takes the row, as the unit body's odd last cell does. */
  .cmp-entry--building .cmp-combat--odd[class] > .cmp-combat-cell.is-last-top {
    grid-column: 1 / -1;
  }

  /* Four derived groups (a town center) read as two by two. */
  .cmp-building-body .cmp-derived--cols-4 {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cmp-entry.cmp-entry--building > .cmp-entry-body .cmp-entry-portrait {
    --ps-ornate-frame-width: 10px;
    width: 132px;
    height: 132px;
  }

  .cmp-building-body .cmp-derived--cols-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-building-link-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .cmp-building-link-label {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .cmp-entry.cmp-entry--building > .cmp-entry-body .cmp-entry-portrait {
    width: 120px;
    height: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-building-ability-tech {
    transition: none;
  }
}