/* =========================================================================
   drug-landing.css — the ten Drug Addiction landing pages
   The Beekeeper House

   Everything here is scoped to `.drug-page`, the second class on <body> of
   amphetamine / cannabis / cocaine / ecstasy / GHB / heroin / ketamine /
   kratom / meth / nitrous-oxide. The components it adjusts (.symptoms,
   .quoteband, .prog, .holistic__grid, .crew) are shared with roughly forty
   other interior pages, and those pages are deliberately left alone — so
   none of this may be lifted into interior.css without re-measuring there.

   Loaded after interior.css, so equal-specificity rules would already win;
   the .drug-page prefix is what keeps the blast radius where it is, not a
   specificity trick.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. The symptom cards align to the heading, not to the flower

   .sec-head__mark is a 72px drawing with --space-4 beneath it, and it sits
   inside the copy column's .sec-head. That pushes the eyebrow and the H2
   down by 96px while the cards column beside it still starts at the top of
   the grid row — so the first card lines up with the flower and sits a
   clear 96px above the words it belongs to.

   Offsetting the cards by the mark's own height puts the top of the first
   card on the eyebrow instead. Only above 1000px: that is where
   .symptoms--even becomes two columns, and below it the two blocks are
   stacked, where an offset would just be a gap.

   :has() scopes this to the bands that actually carry a mark — #symptoms is
   the only one on these pages today, but .symptoms--even is also used by
   #international and #team with no mark, and those must not move.
   ------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  body:has(.bk-drug-page) .bk-w.bk-scope.bk-inner .symptoms--even:has(.sec-head__mark) .symptoms__cards {
    margin-top: calc(72px + var(--space-4));
  }
}


/* -------------------------------------------------------------------------
   2. The bee flourish is not cropped

   interior.css sizes the flourish off the container's well and centres it on
   a band shallower than the drawing, so the top and bottom are cut by the
   band edges. The note there records that as deliberate, and that fitting it
   to the band was tried once and reverted for leaving the drawing too small
   to carry the band. This overrides that decision for these ten pages only,
   on the client's instruction, and takes the middle of the two: the band
   gets deeper and the drawing gets smaller, rather than either one of them
   absorbing the whole difference.

   padding-block goes --space-8 -> --space-10, which takes a one-line band
   from 237px to 365px. The width multiplier goes 0.52 -> 0.42, which at the
   1280px container is 504px wide and 359px tall against that 365px band.

   That arithmetic only holds while the quote is one line. max-height is the
   guarantee: with background-size: contain the drawing scales to whatever
   box it is given, so capping the box at the band's inner height means no
   viewport, quote length or font fallback can crop it again. Without it the
   two numbers above are an assumption about text wrapping.
   ------------------------------------------------------------------------- */
body:has(.bk-drug-page) .bk-w.bk-scope.bk-inner .quoteband {
  padding-block: var(--space-10);
}

body:has(.bk-drug-page) .bk-w.bk-scope.bk-inner .quoteband::before {
  width: max(260px, calc(var(--qb-well) * 0.42));
  max-height: calc(100% - 2 * var(--space-3));
  background-position: left center;
}


/* -------------------------------------------------------------------------
   3. No band taller than the screen

   House rule from the client: a section may fill a screen and no more. Where
   a band ran over, the tail goes behind a disclosure rather than out of the
   document — LAYOUT-RULES rule 5, "never delete text, hide it". Most of that
   is done in markup with .fold / data-fold, which detail-more.js already
   understands. What is left here is the cases a wrapper cannot express.

   The measurements quoted are at 1920x900, which is the viewport the bands
   were reported from. Each is the band's own height, not the page's.
   ------------------------------------------------------------------------- */

/* #treatment, 964px on nine pages and 1131px on heroin. Per-card .fold
   wrappers with one data-fold-group control were built and reverted: the
   fold splits a card's paragraph at the first sentence, and the third card's
   paragraph is a single sentence on every one of the ten briefs, so that
   card never folded, stayed full height, and set the row for the other two.
   The band came out 87px taller than before the change.

   Clamping is what works, because it bounds every card whatever its prose
   does. The cards are summaries and each already carries "Find out more"
   through to the full page, so the clamp costs a reader nothing they cannot
   reach; the text stays in the DOM for search and for screen readers, which
   is the part LAYOUT-RULES rule 5 actually asks for. */
body:has(.bk-drug-page) .bk-w.bk-scope.bk-inner .prog > p:not(.prog__link) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

/* #lead is NOT fixed here, and the reason is worth recording so the obvious
   fix is not tried again. It measures 1017-1108px and the first guess — that
   the photograph is too tall, since .split__media img carries aspect-ratio
   4/5 — is wrong. Measured: the copy column is 589px on its own (a 191px
   three-line heading plus a 365px folded body), the split is align-items:
   stretch, and the figure is simply matching it. Setting a wider
   aspect-ratio on the image changes the computed value and not one pixel of
   the layout, because object-fit: cover then crops to the stretched box.

   What is left is 128px of padding, that 589px row, and the 265px safety
   notice. Reaching 900 means cutting the notice out of the opening band or
   shortening approved clinical copy, so it is left alone and flagged.

   #team, 1037px. Two things carry it: a 281px portrait on each of the three
   members the fold leaves showing, and a bio that runs to seven lines. The
   portrait comes down to 4/3 and the bio clamps to four lines, which is the
   roughly 140px the band is over.

   The bio is clamped rather than folded because the three bios are already
   inside a data-fold-group — a second control inside the first would be two
   disclosures on one band, and the group's own control is the one that
   matters here. Clamping keeps every word in the DOM. */
body:has(.bk-drug-page) .bk-w.bk-scope.bk-inner .crew__member picture img {
  aspect-ratio: 4 / 3;
}

body:has(.bk-drug-page) .bk-w.bk-scope.bk-inner .crew__bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* #why, 962px. Folding .holistic__grid was the obvious move and is the wrong
   one: measured, the three reasons are a single 306px row, so hiding two of
   them behind a control removes a third of the band's content and none of
   its height. The height is in the two hex buttons underneath, which stretch
   to fill the grid and cost 133px stacked. Ranged on one row they are 54px —
   the same pair under #team already sits that way — which is the 79px that
   takes this band under the cap. */
@media (min-width: 700px) {
  body:has(.bk-drug-page) .bk-w.bk-scope.bk-inner #why .actions--grid {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }
}