/*
  The cocktails landing page, `/cocktails` (#3240), copied from homepage.css
  while the page starts as a copy of the homepage. Every rule is scoped under
  .cocktails-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 — stacked,
   growing it just widens the box around the columns. Same fix as events.css. */
@media (min-width: 640px) {
  .cocktails-page .dg-layout-default__rhs {
    flex-grow: 1;
    max-width: calc(440px * 2 + 32px);
  }
}

/* Column split. The markup is in the medium-up order: feature boxes and
   scrollers in the left column, link boxes in the right. Each
   .cocktails-group is a run of boxes that sat together in the page's original
   single stack, numbered in that stack's order.

   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` puts them back in the original stack. Each
   group carries the 16px gap and 440px cap its column used to. Each run of
   link boxes (2, 4, 6, 8) has 16px more above it, so every section break is
   32px (#3240); group 6 no longer has an extra margin of its own. */
.cocktails-page .cocktails-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 440px;
}
.cocktails-page .cocktails-group--1 { order: 1; }
.cocktails-page .cocktails-group--2 { order: 2; }
.cocktails-page .cocktails-group--3 { order: 3; }
.cocktails-page .cocktails-group--4 { order: 4; }
.cocktails-page .cocktails-group--5 { order: 5; }
.cocktails-page .cocktails-group--6 { order: 6; }
.cocktails-page .cocktails-group--7 { order: 7; }
.cocktails-page .cocktails-group--8 { order: 8; }

@media (max-width: 639.98px) {
  .cocktails-page .dg-layout-default__rhs {
    gap: 1rem;
  }
  .cocktails-page .dg-layout-default__rhs > .dg-layout-default__content {
    display: contents;
  }
  /* The runs of link boxes (#3240): 16px above each sets it off from the
     feature box before it in the single stack, where a divider line once sat.
     Medium up the groups are display: contents, so this applies here only. */
  .cocktails-page .cocktails-group--2,
  .cocktails-page .cocktails-group--4,
  .cocktails-page .cocktails-group--6,
  .cocktails-page .cocktails-group--8 {
    padding-top: 1rem;
  }
  /* Cocktail of the Day's link box, first in the stack: 16px more above it
     (#3240). Small screens only; medium up it heads the left column as is. */
  .cocktails-page .cocktails-group--1 > .dg-component-link-box {
    margin-top: 1rem;
  }
}

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