/*
  Bar detail page. Layout and naming only — every size comes from the core
  token, every space from the 16px base unit. Mirrors cocktail.css so the two
  pages stay in step; class names are app-local, so the rules cannot be shared.
*/

.bar-page {
  line-height: var(--line-height-body);
}

/* Headings use the body typeface at 700 (UIUXRULES: the permitted weight for
   sub-headings where the heading typeface is not used). */
.bar-page h1,
.bar-page h2,
.bar-page h3,
.bar-page h4,
.bar-page h5,
.bar-page h6 {
  font-family: 'Body default', Georgia, serif;
  font-weight: 700;
}

.bar-page ol,
.bar-page ul {
  padding-left: 1rem;
  margin: 0;
}

/*
  Column row. Both columns keep core's `flex: 1 1 50%`, a percentage basis that
  contributes nothing intrinsically, so a row whose rail is empty collapses and
  drags the narrative column down with it. The rail carries real content now, so
  this is insurance for a bar with no contact details, no hours, no attributes
  and unfilled ad slots.

  The basis goes on the ROW, never on the column: a definite basis on the column
  stops it shrinking, and at 1024px it holds its full width while the copy is
  squeezed. Written as the column width twice plus the gutter — core's own
  values (.dg-layout-default__content max-width 440px, desktop gutter 32px) —
  rather than as 912px. See cocktail.css:250-268.

  Desktop only: below medium __rhs stacks its children.
*/
@media (min-width: 640px) {
  .bar-rhs {
    flex: 0 1 calc(440px * 2 + 32px);
  }
}

.bar-header__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
}

.bar-title {
  font-size: var(--font-size-plus-3);
  margin: 0;
}

/* "See More" labels the boxes directly beneath it, so it closes up against
   them: .bar-heading's 1rem margin-bottom is the right lead-in for a section of
   prose, but here it reads as a hole between the title and the list it heads.

   TWO things space them and both have to go — the heading's own margin, and the
   16px flex gap the aside inherits from core's .dg-layout-default__content.
   Zeroing either alone still leaves 16px. Both overrides are scoped to the rail:
   Review, Gallery and Comments keep their lead-in, and the content column keeps
   the layout gap. */
.bar-content-right-column {
  row-gap: 0;
}

.bar-content-right-column > .bar-heading {
  margin-bottom: 0;
}

/* The page's opening image. Shaped and rounded to match the gallery component's
   lead exactly (aspect-ratio 6/4, 0.25rem, cover) so the same photograph reads
   identically here and at the top of the Gallery section below. */
.bar-hero__image {
  aspect-ratio: 6 / 4;
  border-radius: 0.25rem;
  display: block;
  object-fit: cover;
  width: 100%;
}

.bar-heading {
  font-size: var(--font-size-plus-2);
  margin: 0 0 1rem;
  text-align: left;
}

/* Rail section headings: heading level h2 for structure, one visual step down
   so the rail stays subordinate to the narrative column. */
.bar-sub-heading {
  font-size: var(--font-size-base);
  margin: 0 0 0.5rem;
}

/* Essential Info leads a content section, so it sits one step above the rail
   sub-heading and one below .bar-heading — the reference layout's 19px/700,
   which is core's +1. */
.bar-essentials-heading {
  font-size: var(--font-size-plus-1);
  margin: 0 0 0.5rem;
}

/* Run-in label opening a line of body text — "Door:", "Style:", "Words by:". */
.bar-inline-heading {
  font-weight: 700;
}

.bar-rating {
  display: flex;
  align-items: center;
  line-height: 1;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--font-size-sub-1);
  font-weight: 500;
}

.bar-rating__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Essential Info's fact rows — the reference layout's run-in "Label: value"
   lines at the -1 step. Each row is one wrapping paragraph, so the label and
   its value are inline and the row pitch comes from the leading alone; the PDF
   has no gap between rows. */
.bar-facts {
  font-size: var(--font-size-sub-1);
  line-height: var(--line-height-body);
  margin: 0;
}

.bar-facts__row dt,
.bar-facts__row dd {
  display: inline;
  margin: 0;
}

/* 700 is the permitted weight for a sub-heading in the body face, which is what
   a run-in label is. The newline between </dt> and <dd> supplies the space
   after the colon. */
.bar-facts__row dt {
  font-weight: 700;
}

.bar-facts address {
  display: inline;
  font-style: normal;
}

/* A bar with one day-group reads as the PDF's single line, so the first group
   stays inline with the label. A bar whose week is not uniform drops each
   further group onto its own line rather than running them together. */
.bar-hours__group + .bar-hours__group {
  display: block;
}

/* A footnote to the facts, not part of them: the only italic on the page. */
.bar-essentials-disclaimer {
  font-size: var(--font-size-sub-1);
  font-style: italic;
  line-height: var(--line-height-body);
  margin: 0.5rem 0 0;
}

/* Editorial copy. The reference layout sets the review at the base step in the
   body face's 500 — see the changelog entry: the PDF annotates the body
   "Baseline 16px 500" and the standfirst "700", a deliberate two-step
   distinction, which is why this is not the 400 default.
   Declared BEFORE .bar-lead so the standfirst's 700 wins on source order. */
.bar-copy {
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: var(--line-height-body);
}

/* Standfirst: the editorial verdict opening the review. It is the same size as
   the copy it introduces now — the reference layout separates them by weight
   alone, not by a step up the scale. */
.bar-lead {
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--line-height-body);
}

/* The standfirst and the review are two blocks in one section, so the gap
   between them has to be declared: paragraphs space themselves with
   margin-bottom alone, and `.bar-copy > :last-child` zeroes the standfirst's.
   1rem is the paragraph rhythm, so the seam is invisible. */
.bar-lead + .bar-copy {
  margin-top: 1rem;
}

.bar-copy > :first-child {
  margin-top: 0;
}

.bar-copy > :last-child {
  margin-bottom: 0;
}

/* A trust footnote, not body copy. */
.bar-credits {
  font-size: var(--font-size-sub-1);
}

.bar-new-comment {
  margin-bottom: 1.5rem;
}

.bar-comments-forum-link {
  margin-top: 1rem;
}

/* Essential Info groups. In the narrative column with no panel around them, so
   the gap does the separating that .dg-rule-top used to do in the rail. */
.bar-essentials {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Rail groups. Dividers come from core's .dg-rule-top on every group after the
   first, so no border is declared here. */
.bar-facts-panel,
.bar-related-boxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Stacked on mobile, the rail follows the comments and core's 32px layout gutter
   becomes 32px of vertical space above the "See More" rule — a hole between two
   sections that every other seam on this page closes with the rule alone.
   row-gap only: the gutter BETWEEN the columns on desktop is column-gap, and it
   is left alone. Selector doubled up (.dg-layout-default__rhs.bar-rhs) to
   outrank core's own single-class rule whichever order the sheets load in. */
@media (max-width: 639px) {
  .dg-layout-default__rhs.bar-rhs {
    row-gap: 0;
  }
}

@media (min-width: 640px) {
  .bar-content-right-column {
    align-self: flex-start;
  }
  /* The rule above "See More" is a MOBILE divider. Stacked under the comments it
     separates the rail from them exactly as the reference layout has it; in the
     desktop right-hand column there is nothing above it to divide, so it just
     caps the column at a height that lines up with nothing. Core still owns how
     the rule looks — this only switches it off. */
  .bar-content-right-column.dg-rule-top {
    border-top: 0;
    padding-top: 0;
  }
  /* The panel surface wraps the bar's details only — the ad slots and the
     navigation boxes below it sit outside the grey. */
  .bar-facts-panel {
    padding: 1rem;
    background: #f6f6f6;
  }
  /* Dark palette's `off` tone, spelled out because this file is plain CSS with
     no access to the Sass config. */
  html[data-theme="dark"] .bar-facts-panel {
    background: #2a2a2a;
  }
}