/* public/css/tavern.css
   Dedicated stylesheet for the public Tavern page (View/Tavern.ejs). Every
   selector is scoped under .tavern-page so nothing here can affect any
   other page -- same convention as public/css/publicRankings.css. Reuses
   the site's existing --df-* custom properties (public/css/style.css) for
   visual consistency instead of inventing a new palette.

   Per-card individuality (an entry's stored background_color/text_color)
   is applied as an inline `style="background-color:...;color:...;"`
   attribute directly on .tavern-card (built server-side in
   services/tavernEntryPresenter.js, never in this file or the view). Every
   other color in a card below is written as `currentColor`/`opacity` or a
   neutral, brightness-agnostic overlay rather than a fixed light- or
   dark-only value, specifically so a card still reads correctly no matter
   which background/text color combination an admin picked. */

.tavern-page {
  padding-bottom: 2.5rem;
}

/* ── Intro (reuses .home-intro/.home-kicker from style.css, unchanged) ─── */

.tavern-page .home-intro {
  margin-top: 1.5rem;
}

/* ── Card grid ────────────────────────────────────────────────────────── */

.tavern-grid {
  margin-top: .5rem;
}

.tavern-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, var(--df-surface), var(--df-surface-alt));
  color: var(--df-text-light);
  border: 1px solid var(--df-border-subtle);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  overflow: hidden;
}

/* Custom background mode (bug fix): `background` above is a shorthand, so
   it paints a background-image (the gradient) layer -- a plain inline
   `background-color` (services/tavernEntryPresenter.js's `cardStyle`)
   paints UNDER that image and was being completely hidden by it. This
   modifier, added only via the presenter's `cardModifierClass` when an
   entry is genuinely in custom-color mode, clears just the image layer so
   the inline background-color (which always wins on its own property,
   inline styles being highest specificity) actually shows. Default-mode
   cards never receive this class and render exactly as before. */
.tavern-card--custom-bg {
  background-image: none;
}

/* ── Media (logo/image) ──────────────────────────────────────────────────
   Fixed-height letterbox so wildly different logo shapes (wide banners,
   tall marks, square icons) all sit at a predictable, card-sized area.
   object-fit: contain + width/height:auto preserves aspect ratio and never
   crops or stretches the source image. */

.tavern-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: 1rem;
  background: rgba(127, 127, 127, .12);
  border-bottom: 1px solid rgba(127, 127, 127, .2);
}

.tavern-card__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* No-image fallback: a deliberate monogram badge, not an empty box. */
.tavern-card__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(205, 236, 30, .16);
  border: 1px solid rgba(205, 236, 30, .35);
  color: var(--df-GoblinGold);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
}

/* ── Body ─────────────────────────────────────────────────────────────── */

.tavern-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.1rem 1.25rem 1.25rem;
}

.tavern-card__name {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .2rem;
  color: inherit;
}

.tavern-card__creator {
  font-size: .8rem;
  opacity: .7;
  margin-bottom: .75rem;
}

/* The Fantasy Goblin recommendation -- given the most visual weight of the
   supporting text (left accent rule + bold label) since it's the whole
   point of a curated Tavern entry, but still well below the card name. */
.tavern-card__description {
  font-size: .92rem;
  line-height: 1.5;
  margin: 0 0 .65rem;
  padding-left: .65rem;
  border-left: 2px solid currentColor;
}

.tavern-card__description-label {
  font-weight: 700;
  margin-right: .3rem;
}

.tavern-card__what {
  font-size: .85rem;
  line-height: 1.5;
  opacity: .8;
  margin: 0 0 .85rem;
}

/* Small creator-spotlight Q&A -- a single question, deliberately kept
   compact (small font, tucked near the bottom of the card, not styled like
   a full interview section). */
.tavern-card__qa {
  margin: 0 0 1rem;
  padding: .65rem .8rem;
  border-radius: 10px;
  background: rgba(127, 127, 127, .14);
  border: 1px solid rgba(127, 127, 127, .18);
}

.tavern-card__question {
  font-size: .82rem;
  font-style: italic;
  font-weight: 600;
  margin: 0 0 .3rem;
}

.tavern-card__answer {
  font-size: .82rem;
  opacity: .82;
  margin: 0;
}

.tavern-card__visit {
  margin-top: auto;
  align-self: flex-start;
}

/* ── Empty state ──────────────────────────────────────────────────────────
   Sits directly on the page's cream background (no dark card), matching
   .home-intro's own light-page color treatment rather than the card
   gradient above. */

.tavern-empty {
  max-width: 34rem;
  margin: 2.5rem auto 0;
  padding: 2rem 1.5rem;
  text-align: center;
  border-radius: var(--df-radius);
  border: 1px dashed rgba(24, 24, 27, .18);
}

.tavern-empty__icon {
  font-size: 2rem;
  margin-bottom: .5rem;
}

.tavern-empty__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--df-text-dark);
  margin: 0 0 .4rem;
}

.tavern-empty__copy {
  color: rgba(24, 24, 27, .7);
  margin: 0;
}

/* ── Closing callout ──────────────────────────────────────────────────────
   Deliberately understated -- a top border/divider instead of a boxed
   panel, small heading, short copy, one existing-style button. Sits
   directly on the page's cream background like .tavern-empty, and appears
   whether or not there are any cards (it's a page-level invitation, not
   tied to card count). Not a hero, not a signup form -- just a link to the
   site's existing /Contact page. */

.tavern-closing {
  max-width: 34rem;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(24, 24, 27, .12);
  text-align: center;
}

.tavern-closing__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--df-text-dark);
  margin: 0 0 .5rem;
}

.tavern-closing__copy {
  color: rgba(24, 24, 27, .72);
  line-height: 1.6;
  margin: 0 0 1.1rem;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .tavern-card__media {
    height: 120px;
  }
}