/* Bundle pages: header image, chapter strip, article and boxes. */

.bundle-page {
  --bundle-colour-primary: transparent;
  --bundle-rule: #dcdfe1;
  --bundle-muted: #6b6b6b;
}
html[data-theme="dark"] .bundle-page {
  --bundle-rule: #3a3a3a;
  --bundle-muted: #a8a8a8;
}

/* Core sizes the two columns with a percentage basis, which contributes nothing
   to the row's own width, so the row collapsed to about half. Grow it to the two
   capped columns (core: 440px each) and the 32px gap. Desktop only: below 640px
   the columns stack. */
@media (min-width: 640px) {
  .bundle-page .dg-layout-default__rhs {
    flex-grow: 1;
    max-width: calc(440px * 2 + 32px);
  }
}

/* Header image, full width up to the page container */
.bundle-hero__inner {
  max-width: 1248px;
  margin: 0 auto;
}
.bundle-hero__image {
  display: block;
  width: 100%;
  height: auto;
}
.bundle-hero--viewport {
  background: var(--bundle-band-colour, var(--bundle-colour-primary, transparent));
}

/* Header image of a header_inline bundle: in the article column */
.bundle-header-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 16px;
}

/* Bundle name */
.bundle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bundle-title {
  font-family: 'Heading default', Georgia, serif;
  font-weight: 700;
  line-height: var(--line-height-heading);
}

/* Chapter strip: scrolls sideways, the current chapter is boxed */
.bundle-chapters {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
/* From tablet up the arrows beside the name replace the scrollbar; a phone just swipes */
@media (min-width: 640px) {
  .bundle-chapters {
    scrollbar-width: none;
  }
  .bundle-chapters::-webkit-scrollbar {
    display: none;
  }
}
.bundle-chapters__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bundle-chapters__item {
  flex: 0 0 108px;
  /* A long word in a label must not stretch its item past the others (a flex item's automatic minimum is its longest word) */
  min-width: 0;
  scroll-snap-align: start;
  border-left: 1px solid var(--bundle-rule);
}
/* Every item keeps its divider's 1px (the first one's is invisible) so all items and thumbnails come out the same size */
.bundle-chapters__item:first-child {
  border-left-color: transparent;
}
/* The current chapter draws its own box, so the dividers either side of it are hidden (kept transparent so nothing shifts) rather than doubling its left and right edges */
.bundle-chapters__item--active,
.bundle-chapters__item--active + .bundle-chapters__item {
  border-left-color: transparent;
}
.bundle-chapters .bundle-chapters__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  /* The 108px item less its 1px divider, this link's 2px border and 16px of padding leaves 89px for the thumbnail and the label (same edges), enough for a long word like "Classifications" (87px bold) on one line */
  padding: 4px 8px;
  border: 1px solid transparent;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}
.bundle-chapters .bundle-chapters__link:visited {
  color: inherit;
}
.bundle-chapters .bundle-chapters__link:hover {
  text-decoration: underline;
}
.bundle-chapters .bundle-chapters__item--active .bundle-chapters__link {
  border-color: var(--bundle-rule);
  font-weight: 700;
}
.bundle-chapters__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bundle-rule);
  overflow: hidden;
}
.bundle-chapters__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bundle-chapters__label {
  font-size: var(--font-size-sub-1);
  line-height: var(--line-height-default);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Article */
.bundle-article {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bundle-article__title {
  font-size: var(--font-size-plus-2);
  margin: 0;
}
.bundle-article__intro {
  font-weight: 700;
}
.bundle-article__intro p,
.bundle-article__body p {
  margin: 0 0 16px;
}
.bundle-article__body strong,
.bundle-article__body b,
.bundle-article__body h2,
.bundle-article__body h3,
.bundle-article__body h4 {
  font-weight: 700;
}
.bundle-article__body h2 {
  font-size: var(--font-size-plus-1);
}
.bundle-article__body h3 {
  font-size: var(--font-size-base);
}
.bundle-article__body h2,
.bundle-article__body h3 {
  margin: 24px 0 0;
  padding-bottom: 6px;
}
.bundle-article__body h2:first-child,
.bundle-article__body h3:first-child {
  margin-top: 0;
}
.bundle-article__lead,
.bundle-article__image,
.bundle-article__body img {
  display: block;
  max-width: 100%;
  height: auto;
}
.bundle-article__body .long-form__image {
  margin: 16px 0;
}
.bundle-article__body .long-form__list {
  margin: 0 0 16px;
  padding-left: 24px;
}
.bundle-article__body .long-form__quote {
  border-left: .125rem solid #cacaca;
  font-style: italic;
  margin: 0 0 16px;
  padding: 0 1.25em;
}
.bundle-article__body .long-form__quote cite {
  display: block;
  font-size: var(--font-size-sub-1);
}
@media (min-width: 640px) {
  .bundle-article__body .long-form__image--left {
    float: left;
    max-width: 50%;
    margin: 0 16px 16px 0;
  }
  .bundle-article__body .long-form__image--right {
    float: right;
    max-width: 50%;
    margin: 0 0 16px 16px;
  }
  /* A heading, divider or following image paragraph clears the previous left-floated image. */
  .bundle-article__body p:has(.long-form__image--left) + :is(h2, h3, h4, hr, p:empty, p:has(.long-form__image--left)) {
    clear: left;
  }
}
.bundle-article__body::after {
  content: "";
  display: table;
  clear: both;
}

/* In-content boxes, one per row as on /cocktails/new */
.bundle-linked {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Previous / next chapter */
.bundle-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.bundle-pager .bundle-pager__link,
.bundle-pager .bundle-pager__link:visited {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
}
.bundle-pager__link--next {
  margin-left: auto;
  text-align: right;
}
.bundle-pager__hint {
  font-size: var(--font-size-sub-1);
  color: var(--bundle-muted);
}

/* Right column: the producer details and the related boxes are two separate grey boxes (core's content column supplies the 16px gap between them on desktop). On a phone only the producer details get the box and the column stacks under the article. */
.bundle-producer {
  padding: 1rem;
  background: #f6f6f6;
}
html[data-theme="dark"] .bundle-producer {
  background: #2a2a2a;
}
@media (max-width: 639px) {
  .bundle-page .dg-layout-default__rhs {
    gap: 16px;
  }
  .bundle-aside {
    gap: 32px;
  }
}
@media (min-width: 640px) {
  .bundle-aside {
    align-self: flex-start;
  }
  .bundle-aside__related {
    padding: 1rem;
    background: #f6f6f6;
  }
  html[data-theme="dark"] .bundle-aside__related {
    background: #2a2a2a;
  }
}

/* Producer facts */
.bundle-producer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bundle-producer__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: var(--font-size-sub-1);
}
.bundle-producer__facts dt {
  font-weight: 700;
}
.bundle-producer__facts dd {
  margin: 0;
}