/* Compendium major / minor god entry (detail kinds major_god, minor_god).

   Linked from compendium/partials/god_masthead.html and in the <head> of the
   Compendium browser, Tech Tree and Combat Simulator after
   compendium-detail.css, so the Events pages that embed the modal get it too
   (the second link is a cache hit). Every rule is scoped to .cmp-entry--god
   or to the god partials' own .cmp-god-* classes. The shared codex blocks it
   reuses (fact strip, History, section heads, the engine-identifier toggle,
   Continue) keep their definitions in compendium-detail.css and
   compendium-unit-detail.css; nothing shared is restyled here. Design
   reference: the Papyrus Codex unit modal. */

.cmp-entry--god {
  /* The masthead fact strip and History read these; compendium-detail.css
     defines them for units only. Same values, so both entries match. */
  --cmp-text-caption: rgba(241, 228, 198, 0.6);
  --cmp-text-fact-label: rgba(241, 228, 198, 0.66);
  --cmp-text-quote: var(--site-text);
  --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);
  --cmp-god-frame-gold: rgba(235, 199, 119, 0.72);
  --cmp-god-grid-gold: rgba(213, 177, 101, 0.28);
  --cmp-god-cell-hover: rgba(43, 43, 46, 0.92);
  --cmp-god-icon-border: rgba(213, 177, 101, 0.42);
}

/* ---- Masthead ------------------------------------------------------------
   God art is a standing portrait (about 6:7), so the framed slot is taller
   than the square unit portrait and crops from the top. */
.cmp-entry.cmp-entry--god .cmp-entry-portrait {
  --ps-ornate-frame-width: 20px;
  width: 196px;
  height: 232px;
}

.cmp-entry.cmp-entry--god .cmp-entry-portrait > img {
  object-fit: cover;
  object-position: 50% 10%;
}

.cmp-entry--god .cmp-entry-masthead-copy {
  /* Same as the unit masthead: the fact strip's columns follow the copy. */
  align-self: stretch;
  container: cmp-masthead / inline-size;
}

/* "Worshipped by" does not fit a half-width cell on a phone; unlike the
   unit strip's short labels it may wrap. */
.cmp-entry--god .cmp-entry-fact-label {
  white-space: normal;
}

.cmp-god-focus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 2px 0 0;
}

.cmp-god-focus-label {
  color: var(--cmp-text-caption);
  font-family: var(--site-font-title);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.cmp-god-focus-value {
  color: var(--site-gold-strong);
  font-size: 1.25rem;
  line-height: 1.3;
}

/* The STR_CIV bullets, one per line, with a small gold lozenge. */
.cmp-god-traits {
  display: grid;
  gap: 6px;
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-god-traits > li {
  position: relative;
  padding-left: 22px;
  color: var(--cmp-text-lede);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.cmp-god-traits > li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 4px;
  width: 6px;
  height: 6px;
  background: var(--site-gold);
  transform: rotate(45deg);
}

/* ---- Body ------------------------------------------------------------------ */
.cmp-god-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  min-width: 0;
}

.cmp-god-section {
  min-width: 0;
}

.cmp-god-section .cmp-entry-section-head {
  flex-wrap: wrap;
  row-gap: 6px;
  margin-bottom: 14px;
}

.cmp-god-section .cmp-entry-section-note {
  margin-left: auto;
}

/* ---- God power: one framed grid, like the combat profile ----------------- */
.cmp-god-power-grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 2px solid var(--cmp-god-frame-gold);
  border-radius: var(--site-radius-lg);
  background: var(--cmp-god-grid-gold);
}

.cmp-god-power {
  display: grid;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  min-width: 0;
}

.cmp-god-power-main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  min-height: 44px;
  padding: 18px 22px;
  border: 0;
  color: var(--site-text);
  background: var(--cmp-fill-cell);
  font: inherit;
  text-align: left;
}

button.cmp-god-power-main {
  cursor: pointer;
  transition: background-color 180ms ease;
}

button.cmp-god-power-main:is(:hover, :focus-visible) {
  background-color: var(--cmp-god-cell-hover);
}

.cmp-god-power-icon {
  flex: none;
  width: 64px;
  height: 64px;
  border: 1px solid var(--cmp-god-icon-border);
  border-radius: var(--site-radius-md);
  background: rgba(0, 0, 0, 0.28);
  object-fit: contain;
}

.cmp-god-power-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cmp-god-power-kicker,
.cmp-god-power-stat dt {
  color: var(--cmp-text-fact-label);
  font-family: var(--site-font-title);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.cmp-god-power-name {
  color: var(--site-gold-strong);
  font-family: var(--site-font-title);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* A linked power name carries the fact-link underline. */
button.cmp-god-power-main .cmp-god-power-name {
  align-self: flex-start;
  text-decoration: underline;
  text-decoration-color: var(--cmp-link-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 180ms ease;
}

button.cmp-god-power-main:is(:hover, :focus-visible) .cmp-god-power-name {
  text-decoration-color: currentColor;
}

.cmp-god-power-desc {
  color: var(--cmp-text-prose);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.cmp-god-power-stats {
  display: grid;
  grid-auto-columns: minmax(7.5rem, auto);
  grid-auto-flow: column;
  gap: 1px;
  margin: 0;
}

.cmp-god-power-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 22px;
  background: var(--cmp-fill-cell);
}

.cmp-god-power-stat dd {
  margin: 0;
  color: var(--site-gold-strong);
  white-space: nowrap;
  font-size: 1.75rem;
  line-height: 1.1;
}

/* Passive powers (God Blessings, Bushido ways): a quieter second row. */
.cmp-god-power.is-passive .cmp-god-power-main {
  padding-block: 13px;
}

.cmp-god-power.is-passive .cmp-god-power-icon {
  width: 46px;
  height: 46px;
}

.cmp-god-power.is-passive .cmp-god-power-name {
  font-size: 1.125rem;
}

/* ---- Bonuses -----------------------------------------------------------------
   Rule-list language (compendium-unit-detail.css .cmp-rules): up to three
   columns of subject groups, balanced server-side (god_detail.bonus_columns)
   so a column is never left empty. */
.cmp-god-bonus-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 22px 28px;
}

.cmp-god-bonus-column {
  display: grid;
  align-content: start;
  gap: 22px;
  min-width: 0;
}

.cmp-god-bonus-group {
  min-width: 0;
}

.cmp-god-bonus-subject {
  margin: 0;
  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.4;
  text-transform: uppercase;
}

/* Subject names that are entries of their own open them in place. */
.cmp-god-bonus-link {
  padding: 0;
  border: 0;
  color: var(--site-gold);
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--cmp-link-border);
  text-decoration-thickness: 1px;
  text-transform: inherit;
  text-underline-offset: 4px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.cmp-god-bonus-link:is(:hover, :focus-visible) {
  color: var(--site-gold-strong);
  text-decoration-color: currentColor;
}

.cmp-god-bonus-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-god-bonus {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--cmp-unit-row-rule);
  color: var(--cmp-unit-text-row);
  font-size: 1rem;
  line-height: 1.3;
}

.cmp-god-bonus:last-child {
  border-bottom: 0;
}

.cmp-god-bonus-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cmp-god-bonus-when {
  color: var(--cmp-text-note);
  font-size: 0.875rem;
}

.cmp-god-bonus-source {
  display: none;
  color: var(--site-text-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cmp-god-bonus-source code {
  color: var(--site-gold);
  font-size: 0.75rem;
}

.cmp-god-bonuses:has(.cmp-rules-toggle[open]) .cmp-god-bonus-source {
  display: block;
}

/* ---- Minor god path: one framed grid, an age per row --------------------- */
.cmp-god-path {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--cmp-god-frame-gold);
  border-radius: var(--site-radius-lg);
  background: var(--cmp-god-grid-gold);
  list-style: none;
}

.cmp-god-path-age {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1px;
  min-width: 0;
}

.cmp-god-path-label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  color: var(--site-gold);
  background: var(--cmp-fill-cell);
  font-family: var(--site-font-title);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cmp-god-path-label > img {
  flex: none;
  width: 44px;
  height: 44px;
}

.cmp-god-path-choices {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 1px;
  min-width: 0;
}

.cmp-god-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 44px;
  padding: 14px 18px;
  border: 0;
  color: var(--site-text);
  background: var(--cmp-fill-cell);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background-color 180ms ease;
}

.cmp-god-choice:is(:hover, :focus-visible) {
  background-color: var(--cmp-god-cell-hover);
}

/* Cells sit edge to edge inside a clipped frame: draw focus inside them. */
.cmp-god-choice:focus-visible,
button.cmp-god-power-main:focus-visible {
  outline: 2px solid var(--site-gold);
  outline-offset: -4px;
}

.cmp-god-choice-portrait {
  flex: none;
  width: 64px;
  height: 64px;
  border: 1px solid var(--cmp-god-icon-border);
  border-radius: var(--site-radius-md);
  background: rgba(0, 0, 0, 0.28);
  object-fit: cover;
}

.cmp-god-choice-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cmp-god-choice-name {
  align-self: flex-start;
  color: var(--site-gold-strong);
  font-family: var(--site-font-title);
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: var(--cmp-link-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 180ms ease;
}

.cmp-god-choice:is(:hover, :focus-visible) .cmp-god-choice-name {
  text-decoration-color: currentColor;
}

.cmp-god-choice-epithet {
  color: var(--cmp-text-note);
  font-size: 0.9375rem;
  line-height: 1.35;
}

/* Slice G: the minor god's own age-up cost, time and building. */
.cmp-god-choice-ageup {
  color: var(--cmp-text-note);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.cmp-god-choice-grants {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 4px;
  color: var(--cmp-text-label);
  font-size: 0.9375rem;
  line-height: 1.3;
}

.cmp-god-choice-grant {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cmp-god-choice-grant > img {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ---- Card groups: myth units / technologies, unique content --------------- */
.cmp-god-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 12px;
}

.cmp-god-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 13px 16px;
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-md);
  color: var(--site-text);
  background: var(--cmp-fill-cell);
  box-shadow: var(--cmp-unit-card-inset);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.cmp-god-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 224, 142, 0.72);
  box-shadow: var(--cmp-unit-card-inset), 0 0 24px rgba(225, 173, 76, 0.18);
  transform: translateY(-2px);
}

.cmp-god-card-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--cmp-god-icon-border);
  border-radius: var(--site-radius-md);
  background: rgba(0, 0, 0, 0.28);
  object-fit: contain;
}

.cmp-god-card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cmp-god-card-kind {
  color: rgba(232, 196, 111, 0.8);
  font-family: var(--site-font-title);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cmp-god-card-name {
  color: rgba(241, 228, 198, 0.9);
  font-family: var(--site-font-title);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.cmp-god-card-note {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  color: var(--cmp-text-note);
  font-size: 0.9375rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 980px) {
  .cmp-god-bonus-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmp-god-path-age {
    grid-template-columns: 9.5rem minmax(0, 1fr);
  }

  .cmp-god-path-label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
  }
}

@media (max-width: 760px) {
  .cmp-entry.cmp-entry--god .cmp-entry-portrait {
    --ps-ornate-frame-width: 10px;
    width: 140px;
    height: 166px;
  }

  .cmp-god-bonus-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The age becomes a header row above its two choices. */
  .cmp-god-path-age {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-god-path-label {
    flex-direction: row;
    align-items: center;
    padding: 10px 16px;
  }

  .cmp-god-path-label > img {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 620px) {
  .cmp-entry.cmp-entry--god .cmp-entry-portrait {
    width: 124px;
    height: 148px;
    padding: 6px;
  }

  .cmp-god-traits > li {
    font-size: 1rem;
  }

  .cmp-god-power {
    grid-auto-flow: row;
  }

  .cmp-god-power-main {
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }

  .cmp-god-power-icon {
    width: 52px;
    height: 52px;
  }

  .cmp-god-power-stats {
    grid-auto-columns: minmax(0, 1fr);
  }

  /* Uses, Recharge, Favor cost and Each recast: two per row. */
  .cmp-god-power-stats:has(> :nth-child(3)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .cmp-god-power-stat {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 16px;
  }

  .cmp-god-power-stat dd {
    font-size: 1.375rem;
  }

  .cmp-god-path-choices {
    grid-auto-flow: row;
  }

  .cmp-god-choice {
    padding: 12px 16px;
  }

  .cmp-god-choice-portrait {
    width: 56px;
    height: 56px;
  }

  .cmp-god-card {
    padding: 12px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  button.cmp-god-power-main,
  button.cmp-god-power-main .cmp-god-power-name,
  .cmp-god-bonus-link,
  .cmp-god-choice,
  .cmp-god-choice-name,
  .cmp-god-card {
    transition: none;
  }

  .cmp-god-card:is(:hover, :focus-visible) {
    transform: none;
  }
}