/*
 * "What's Boom Smoking?" -- the editorial break between the racks and the
 * category grid.
 *
 * It is deliberately not built out of .featured-card. Both racks above it are
 * that card, and the whole argument of this section is that these three are a
 * person's picks rather than a generated list -- so it has to LOOK like a
 * different kind of statement, not like a third helping of the same one. Hence
 * the dark ground, the one large panel, and the line set as a pull quote rather
 * than as blurb text.
 *
 * The colour comes from each product's own category, through --card-accent, the
 * same token and the same seven themes styles-content.css maps for the featured
 * cards. A lineup of a flower, an edible and a vape reads purple, red and blue.
 */

/* The section is a plain block with no display of its own, so `hidden` already
   wins. Stated anyway: a later `.boom-smoking { display: grid }` would unhide
   an empty column without anyone noticing. new-issues.css says the same. */
.boom-smoking[hidden] { display: none; }

.boom-smoking {
  position: relative;
  color: var(--paper);
  background: #0b0a0d;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.boom-smoking .section-heading { margin-bottom: clamp(32px, 4vw, 48px); }
.boom-smoking .kicker { color: var(--brand); }
.boom-smoking .concept-label { color: rgba(242, 239, 233, .62); }

/*
 * One large panel, two beside it -- and on a narrow screen, three stacked with
 * the first still the tall one. `auto-fit` is deliberately not used: the lead is
 * lead because the operator said so, and a grid that reflows it into an equal
 * third on some width would quietly overrule her.
 */
.smoking-lineup {
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: 1fr;
  align-items: stretch;
}
.smoking-pick {
  --card-accent: var(--brand);
  position: relative;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  /* The category colour reads as a printed band across the head of the panel,
     which is the featured card's own device -- the one thing carried over, so
     the two sections are recognisably the same brand. */
  border-top: 10px solid var(--card-accent);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, .5);
}
.smoking-pick[data-theme="purple"] { --card-accent: var(--brand); }
.smoking-pick[data-theme="red"] { --card-accent: var(--red); }
.smoking-pick[data-theme="ink"] { --card-accent: #343139; }
.smoking-pick[data-theme="gold"] { --card-accent: var(--gold); }
.smoking-pick[data-theme="blue"] { --card-accent: var(--blue); }
.smoking-pick[data-theme="green"] { --card-accent: var(--green); }
.smoking-pick[data-theme="paper"] { --card-accent: var(--brand-tint); }

/* The whole panel is the link. There is one destination and nothing else in it
   to press, so a small "See this drop" anchor inside a large clickable-looking
   card would be a target you have to aim at for no reason. */
.smoking-pick-link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.smoking-pick-art {
  display: block;
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
  background: var(--brand-tint);
  /* Shorter than the desktop band on purpose: full viewport width makes any
     16:10+ ratio read as a wall of photo before a phone shopper reaches the
     line Boom actually wrote. The lead stays taller than the other two, just
     not taller by as much -- three stacked panels near half the screen each
     is what "awfully big" meant. */
  aspect-ratio: 2.4 / 1;
}
.smoking-pick.is-lead .smoking-pick-art { aspect-ratio: 2 / 1; }
.smoking-pick-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1.4, .36, 1);
}
.smoking-pick-chip {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--brand-deep);
}
.smoking-pick-link:hover .smoking-pick-photo,
.smoking-pick-link:focus-visible .smoking-pick-photo { transform: scale(1.04); }

.smoking-pick-copy {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: clamp(14px, 2.2vw, 26px);
}
.smoking-pick-category {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.smoking-pick-name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: .96;
}
.smoking-pick.is-lead .smoking-pick-name { font-size: clamp(1.9rem, 4vw, 3.4rem); }

/*
 * Boom's line, set as a pull quote.
 *
 * The quotation marks are drawn here rather than stored with the string: the
 * operator types a sentence, not a quotation, and typing the marks into the box
 * is how you end up with a line wearing two sets of them. They are content on a
 * ::before/::after so they cannot be selected or read aloud twice.
 */
.smoking-pick-note {
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.42;
  font-style: italic;
  padding-left: 14px;
  border-left: 4px solid var(--card-accent);
}
.smoking-pick-note::before { content: "\201C"; }
.smoking-pick-note::after { content: "\201D"; }

.smoking-pick-cta {
  margin-top: 6px;
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.smoking-pick-link:hover .smoking-pick-cta,
.smoking-pick-link:focus-visible .smoking-pick-cta { text-decoration: underline; }

/* The panel is the target, so the ring belongs on the panel and not on the
   inner anchor box -- otherwise a keyboard user gets an outline around the text
   column with the artwork sitting outside it. */
.smoking-pick-link:focus-visible { outline: none; }
.smoking-pick:has(.smoking-pick-link:focus-visible) {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .smoking-pick-photo { transition: none; }
  .smoking-pick-link:hover .smoking-pick-photo { transform: none; }
}

/*
 * The desktop band. LAST in the file on purpose: every rule in it overrides a
 * base rule of the same specificity above, and the first version of this block
 * sat before them -- so the aspect ratios won and the lead panel came out 987px
 * tall with the artwork overflowing its own row onto the text.
 */
@media (min-width: 860px) {
  /*
   * A fixed band rather than a column that grows to fit.
   *
   * Left to size itself the lead came out 987px tall on a 1280 page -- taller
   * than the viewport, so the section could not be seen at once and the whole
   * point of it, three things side by side, was gone. This is a break between
   * two racks, not a third rack: it gets a band and the pictures fill it.
   */
  .smoking-lineup {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(430px, 44vw, 600px);
  }
  .smoking-pick.is-lead { grid-row: span 2; }
  /*
   * Inside a panel of fixed height the slack goes to the photograph, not to
   * empty paper under the text: art takes the row that stretches and the copy
   * keeps only what it needs. The aspect ratios these undo are for the stacked
   * layout, where there is no band to fill and a panel sizes itself.
   */
  .smoking-pick-link { grid-template-rows: minmax(0, 1fr) auto; }
  .smoking-pick-art,
  .smoking-pick.is-lead .smoking-pick-art { aspect-ratio: auto; }
}