/*
  The BWS landing page, `/beer-wine-spirits` (#3245), built on cocktails.css.
  Every rule is scoped under .bws-page so it cannot leak into the shared
  header, nav or footer this stylesheet also loads on.
*/

/* The two content columns are capped at 440px by core and share the row 50/50,
   but the row itself is content-sized (flex: 0 1 auto), so it shrinks to fit
   whatever the columns hold. Growing the row puts both columns on their cap;
   the max-width stops it claiming more than the two capped columns and core's
   own 32px gap can use. Only above 640px, where the row is a row. Same fix as
   cocktails.css and events.css. */
@media (min-width: 640px) {
  .bws-page .dg-layout-default__rhs {
    flex-grow: 1;
    max-width: calc(440px * 2 + 32px);
  }
}

/* Column split, as on /cocktails. The markup is in the medium-up order: the
   first link box and the scrollers in the left column, the other link boxes
   in the right.

   Medium up, the groups are display: contents, so their boxes are the
   columns' own flex items and keep core's 16px __content gap.

   Small, the columns are display: contents instead. The groups become flex
   items of __rhs, and `order` interleaves them into one stack: the first
   link box, then each scroller, followed by its run of link boxes. Each group
   carries the 16px gap and 440px cap its column used to. The runs that follow
   a scroller (4, 6, 8) have 16px more above them, so every section break is
   32px; group 2 continues group 1's link box, so it has none. */
.bws-page .bws-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 440px;
}
.bws-page .bws-group--1 { order: 1; }
.bws-page .bws-group--2 { order: 2; }
.bws-page .bws-group--3 { order: 3; }
.bws-page .bws-group--4 { order: 4; }
.bws-page .bws-group--5 { order: 5; }
.bws-page .bws-group--6 { order: 6; }
.bws-page .bws-group--7 { order: 7; }
.bws-page .bws-group--8 { order: 8; }

@media (max-width: 639.98px) {
  .bws-page .dg-layout-default__rhs {
    gap: 1rem;
  }
  .bws-page .dg-layout-default__rhs > .dg-layout-default__content {
    display: contents;
  }
  .bws-page .bws-group--4,
  .bws-page .bws-group--6,
  .bws-page .bws-group--8 {
    padding-top: 1rem;
  }
  /* The first latest box opens the stack, link box or feature box: 16px
     more above it, as /cocktails' Cocktail of the Day. Small screens only;
     medium up it heads the left column as is. */
  .bws-page .bws-group--1 > :first-child {
    margin-top: 1rem;
  }
}

@media (min-width: 640px) {
  .bws-page .bws-group {
    display: contents;
  }
}

/* Liqueurs A-Z (#3245): Dan's cards are the liqueur's name over its picture,
   with no logo. The core card style always draws one (the item's logo, else
   the Difford's Guide logo), so it is hidden for this scroller only. */
.bws-page [data-test-id="bws-liqueurs"] .dg-component-feature-scroller__logo {
  display: none;
}