/*
High 5's — dedicated consumer-brand stylesheet, enqueued ONLY on the /high-5s/ page
(functions.php, wp_enqueue_scripts). Scoped under .h5-page throughout.

⚠️ Third pass, 9/4/26 (Mike). First pass: black background, Yellowtail on every heading --
too far. Second pass: white background, but every section was a bordered/boxed card (hero
media card, split media card, five-item grid box, format cards) plus wood-brown color-block
sections -- "too many boxes and too many frames... I hate that signature font... I don't
like the brown." This pass: NO card wrappers, NO Yellowtail anywhere, NO solid-color section
blocks. White/cream throughout. The real white-background product photos are scaled up
large and sit directly on the page's own white background (no border, no frame -- white on
white just IS the page), some bleeding to the viewport edge. Visual rhythm comes from scale,
whitespace, and the strain-coded tag/pill treatment (the one thing Mike said he liked in the
last pass) instead of color-blocked sections. Barlow Condensed carries every heading, large
and bold, instead of a script font.
*/

.h5-page {
  --h5-sativa: #4C8A2E;
  --h5-indica: #6A55D6;
  --h5-hybrid: #F4661B;
  --h5-wood: #A9723A;
  --h5-white: #FFFFFF;
  --h5-ink: #17140F;
  --h5-cream: #FBF7EF;
  /* Second-pass sample (Mike, 9/4/26: "the image background color is a lighter gray...
     more blueish gray... can you actually see what color that is?") -- the first sample
     read raw corner pixels of the full photo, not what object-fit:cover + object-position
     actually crops and displays. Recomputed the real visible crop in JS (replicating
     cover's math against the rendered container size) and sampled THAT region: it
     consistently lands near rgb(190,198,201) -- lighter and bluer than the first guess,
     confirming Mike's read by eye. */
  --h5-hand-gray: #F1FBFD;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  color: var(--h5-ink);
  background: var(--h5-white);
  font-size: 19px;
  line-height: 1.5;
}
.h5-page * { box-sizing: border-box; }
.h5-page img { display: block; max-width: 100%; height: auto; }
.h5-page a { color: inherit; }
/* Bold emphasis throughout the page's body copy (Mike, 9/4/26: "the whole page needs
   bolding on key phrasing... it's so lackluster right now") -- Barlow Condensed's own
   bold weight reads close to regular at body size unless pushed further, so this goes
   past font-weight alone: full black weight plus the page ink color at full opacity
   against the lede's own dimmed body color, so emphasis actually pops off the page. */
.h5-page strong { font-weight: 800; color: var(--h5-ink); }

/* ---------- Section shells -- no boxes, no color blocks ---------- */
.h5-section { padding: clamp(3.5rem, 8vw, 7.5rem) clamp(1.5rem, 5vw, 4rem); }
.h5-section--cream { background: var(--h5-cream); }
.h5-inner { max-width: 1280px; margin: 0 auto; }
.h5-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0 0 0.9rem;
}
.h5-eyebrow--sativa { color: var(--h5-sativa); }
.h5-eyebrow--indica { color: var(--h5-indica); }
.h5-eyebrow--hybrid { color: var(--h5-hybrid); }
.h5-eyebrow--wood { color: var(--h5-wood); }

/* ---------- Headlines -- bold condensed grotesk, no script anywhere ---------- */
.h5-h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(2.8rem, 6.2vw, 5.6rem);
  line-height: 0.98;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}
.h5-h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.04;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
}
.h5-lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 60ch; margin: 0 0 1rem; color: #433c30; }
.h5-lede:last-child { margin-bottom: 0; }

/* ---------- Hero -- ONE large single-tube photo on the right, not a repeated pattern
   (Mike, 9/4/26: "I didn't want it to repeat I wanted 1 big tube behind it"). The tube is
   sized taller than the viewport and bleeds off the top/bottom edges; the copy column
   sits on top of it in z-order and is wide enough that its headline overlaps the tube's
   left edge -- genuine layering, not a side-by-side split. White-background photo on the
   page's own cream, so the overlap reads clean with no boxed frame. ---------- */
.h5-hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Pure white, not --h5-cream -- the product photo's own background is white (a flat
     JPG, no alpha to key out), so a tan section behind it drew a visible box around the
     image (Mike, 9/4/26: "the tan just makes it so there's a box around the white"). White
     on white removes the seam entirely, same trick as the homepage Featured Brand photo. */
  background: var(--h5-white);
  padding: clamp(6.5rem, 11vw, 9rem) 0 clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
}
.h5-hero__media {
  /* ⚠️ The source photo is square (1:1) -- sizing it by `height` alone (tried twice) makes
     it exactly as wide as it is tall, which at hero-section height is wider than most
     viewports and swallows the whole section. Fixed width AND height (top/bottom bleed,
     not a height percentage) with object-fit:cover crops the square photo down to a tall
     panel instead of scaling the whole square up. */
  position: absolute;
  top: -3%;
  bottom: -3%;
  right: clamp(0.5rem, 1vw, 2rem);
  width: clamp(340px, 36vw, 560px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/*
   ⚠️ Second pass had a fade wide enough (42% of the image) to leave a dead gap between the
   copy and the image, and the fade itself was heavy (85% opaque at its start) -- "the fade
   is just way too far... doesn't look great" (Mike, 9/4/26). Fixed two ways: the image
   itself is lightened overall (a soft opacity/brightness wash, not a hard directional mask)
   so text can sit closer to it and still read, and the leftover directional fade is now
   just a narrow, soft seam instead of a wide gradient panel.
*/
/* ⚠️ Dropped the opacity/brightness wash from the previous pass -- now that the section
   background is pure white to begin with, lightening the image just shifts its own white
   background AWAY from true #fff (a lit product photo's "white" backdrop is never a
   perfect flat white to begin with), which is what was showing as a faint box on mobile
   -- "it's like white white... the rest of the page doesn't look white." Full-quality
   image, no filter. */
.h5-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* ---------- Strain-Specific & Small-Batch photo -- same bleed/layer mechanic as the hero
   (Mike, 9/4/26: "isolated like the top image... the hand off the edge of the page, the
   text on the left"), but the mini-hand photo's own backdrop is a cool light gray, not
   white, so the SECTION matches that gray instead of the page's usual white/cream --
   same white-on-white logic as the hero, just a different sampled color. ---------- */
.h5-strainbatch { position: relative; min-height: 80vh; display: flex; align-items: center; overflow: hidden; background: var(--h5-hand-gray); padding: clamp(4rem, 8vw, 6rem) 0 clamp(4rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem); }
.h5-strainbatch__copy { position: relative; z-index: 1; max-width: 32rem; }
/* Darker than the page's usual lede gray -- against the lighter gray backdrop the default
   body-copy tone read too washed out (Mike, 9/4/26: "the text a tad bit darker"). */
.h5-strainbatch__copy .h5-lede { color: #2b271e; }
.h5-strainbatch__media {
  /* Bled fully to the viewport edge (Mike, 9/4/26: "the image doesn't run to the right
     edge, it's almost floating... should go right to the right edge") -- was clamped in
     from the edge like the hero's tube, but this section wants a true full bleed instead. */
  position: absolute;
  top: -4%;
  bottom: -4%;
  right: 0;
  width: clamp(300px, 34vw, 520px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.h5-strainbatch__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  /* Mike, 9/4/26: wants the whole gray section, backdrop included, much lighter. The gray
     is baked into the photo itself, not a CSS overlay, so a section-background change alone
     doesn't touch it -- this brightness lift is the closest CSS gets to lightening the
     photo's own backdrop without re-editing the image file. It lifts the hand/joint too,
     there's no way to target only the backdrop pixels of a real photo from CSS. */
  filter: brightness(1.26) saturate(0.92);
}
.h5-strainbatch__media::after {
  /* ⚠️ Found the real bug (Mike, 9/4/26: "what's with the transition with the white
     border... I didn't create that"): these rgba stops were hardcoded to the PREVIOUS
     --h5-hand-gray value (#E7EAE9) and never updated when that variable was resampled to
     #C0C6C4 -- the gradient was jumping from the new darker gray straight to the old much
     lighter one, which is exactly the pale/white seam visible in the screenshot. Not a
     photo artifact, a stale-value bug. Converted to rgb() of the CURRENT variable. */
  content: "";
  position: absolute;
  inset: 0;
  /* Mike, 9/4/26: "bottom of the image looks darker in the bottom left" -- that's a real
     shadow/vignette baked into the source photo's bottom-left corner, more visible now that
     the rest of the backdrop reads much lighter. A radial patch in the same flat gray,
     layered on top of the left-edge fade below, dodges that corner back up to match. Kept
     to the bottom-left quadrant only so it doesn't wash over the hand, which sits center-
     right of frame.

     Mike, 9/4/26 round 2: flat bg was targeting the photo's MID/BOTTOM tone, so the top
     (naturally the brightest part of this photo) read brighter than the flat area and the
     seam showed up there instead. Retargeted --h5-hand-gray to match the photo's actual
     TOP-edge tone (sampled at the crop's real top-left, past the fade zone) so the top is
     seamless by construction; this bottom patch's target color moved to match. */
  background:
    radial-gradient(ellipse 65% 42% at 2% 100%, rgba(241,251,253,0.62) 0%, rgba(241,251,253,0) 74%),
    linear-gradient(90deg, var(--h5-hand-gray) 0%, rgba(241,251,253,0.4) 5%, rgba(241,251,253,0) 16%);
}
@media (min-width: 901px) {
  .h5-strainbatch__copy { margin-left: clamp(1rem, 8vw, 7rem); }
}
@media (max-width: 900px) {
  .h5-strainbatch { min-height: 0; padding: 3rem 6.5rem 3rem 1.25rem; }
  .h5-strainbatch__media { width: clamp(150px, 40vw, 230px); right: 0; }
}

.h5-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--h5-white) 0%, rgba(255,255,255,0.4) 5%, rgba(255,255,255,0) 14%);
}
.h5-hero__copy { position: relative; z-index: 1; max-width: 32rem; }
/* Desktop only -- on wide viewports the copy block sat flush against the hero's own left
   padding, leaving a large dead gap before the image (Mike, 9/4/26: "text can come closer
   center on desktop... perfect on mobile, don't touch mobile"). Gated to min-width:901px,
   one above the mobile breakpoint below, so narrow viewports are provably untouched. */
@media (min-width: 901px) {
  .h5-hero__copy { margin-left: clamp(1rem, 13vw, 11rem); }
}
.h5-hero__brand {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--h5-wood);
  margin: 0 0 1.5rem;
}
.h5-hero__body {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: #433c30;
  max-width: 40ch;
  margin: 0 0 2.25rem;
}
.h5-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- Buttons -- tag-inspired pills, kept from the last pass ---------- */
.h5-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1rem;
  padding: 0.9em 1.8em;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.h5-btn:hover { transform: translateY(-2px); }
/* Compound selectors beat .h5-page a's (0,1,1) inherit tie -- see prior note, same trap. */
.h5-btn.h5-btn--solid { background: var(--h5-ink); color: var(--h5-white); }
.h5-btn.h5-btn--solid:hover { background: var(--h5-hybrid); }
.h5-btn.h5-btn--ghost { border-color: var(--h5-ink); color: var(--h5-ink); }
.h5-btn.h5-btn--ghost:hover { background: var(--h5-ink); color: var(--h5-white); }

/* ---------- Tag list -- the treatment Mike liked, reused for The Five + Ingredients ---------- */
.h5-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.h5-tags li {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  padding: 0.6em 1.2em;
  border-radius: 999px;
  border: 2px solid var(--h5-ink);
}
.h5-tags--strain li:nth-child(1) { border-color: var(--h5-sativa); color: var(--h5-sativa); }
.h5-tags--strain li:nth-child(2) { border-color: var(--h5-wood); color: var(--h5-wood); }
.h5-tags--strain li:nth-child(3) { border-color: var(--h5-indica); color: var(--h5-indica); }
.h5-tags--strain li:nth-child(4) { border-color: var(--h5-hybrid); color: var(--h5-hybrid); }
.h5-tags--strain li:nth-child(5) { border-color: var(--h5-ink); color: var(--h5-ink); }

/* ---------- The Five -- open list, no boxed grid ---------- */
.h5-five { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin: 3rem 0 0; }
.h5-five__item { border-top: 3px solid var(--h5-ink); padding-top: 1.1rem; }
.h5-five__item:nth-child(1) { border-color: var(--h5-sativa); }
.h5-five__item:nth-child(2) { border-color: var(--h5-wood); }
.h5-five__item:nth-child(3) { border-color: var(--h5-hybrid); }
.h5-five__item:nth-child(4) { border-color: var(--h5-indica); }
.h5-five__num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  margin: 0 0 0.6rem;
  color: var(--h5-ink);
}
.h5-five__title { font-weight: 700; font-size: 1.05rem; margin: 0 0 0.4rem; text-transform: uppercase; letter-spacing: 0.02em; }
.h5-five__text { font-size: 1rem; color: #4a463d; margin: 0; }

/* ---------- Full-bleed photo moments -- no frame, image sits directly on the page ---------- */
.h5-photo { margin: 3.5rem 0 0; }
.h5-photo img { width: 100%; height: auto; }
.h5-photo--contain { display: flex; justify-content: center; }
.h5-photo--contain img { width: auto; max-width: 100%; max-height: 60vh; }

/* ---------- Editorial split -- copy one side, image the other, no card ---------- */
.h5-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.h5-split--reverse .h5-split__media { order: 2; }
.h5-split__media { display: flex; align-items: center; justify-content: center; }
.h5-split__media img { width: 100%; height: auto; }

/* ---------- Exploded/annotated parts diagram -- Ingredients section (Mike, 9/4/26): "build
   a custom image showing all the different parts". Three passes: (1) flat row -- "boring...
   just a bunch of things lined up"; (2) flex columns with flat horizontal lines at matching
   heights -- Mike round 3: "looks like the old picture still... things look so small...
   Flower and Liquid Diamond Infusion as the top 2 with 2 lines going into the top of the
   pre-roll, Kief/Diamonds/H5P Coating pointing to the outside, Cone & Filter pointing
   towards the filter." That needs lines converging on SPECIFIC points on the product, not
   just matching the callout's own height, so this is a real coordinate diagram: an absolute-
   positioned stage locked to a 1000x600 unit space via aspect-ratio, an SVG line layer using
   the SAME unit numbers so callouts (positioned in %) and line endpoints (in SVG viewBox
   units) always agree regardless of the rendered width. Desktop only; collapses to a simple
   labeled grid below 900px since this needs real width to read as a diagram. ---------- */
/* Round 6 (9/5/26): the coordinate-diagram approach above (absolute-positioned SVG line
   layer + separately-positioned callout thumbs) kept resurfacing z-index/coordinate-drift
   bugs across five rounds of fixes. Replaced with a single flattened image with everything
   baked in -- nothing left that can drift apart at different viewport widths. */
.h5-exploded { width: 100%; max-width: 1120px; margin: clamp(3rem, 6vw, 4.5rem) auto 0; text-align: center; }
.h5-exploded__img { width: 100%; height: auto; display: inline-block; }

/* ---------- Proof stat -- sixth pass (Mike, 9/4/26): "that #11 bubble looks awful...
   let's just remove the bubble and put 5 stars next to each other in line above the text
   section... make the text a little bigger. That should shrink the total height of that
   section down." After five failed graphic attempts (gradient text, medallion-with-tails,
   shield-ribbon, gold medal), dropped the badge/graphic idea entirely -- just a small
   centered star row and bigger text, genuinely shorter section. ---------- */
.h5-proof-band { background: var(--h5-hand-gray); padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 5vw, 4rem); text-align: center; }
.h5-stat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.h5-stat__stars { font-size: 1.1rem; letter-spacing: 0.25em; color: #d8ab3f; }
.h5-stat__label { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; margin: 0 0 0.3rem; }
.h5-stat__cite { font-size: 0.9rem; color: #6b6353; margin: 0; }

/* ---------- Formats -- two large images, captions beneath, no card border ---------- */
/* ---------- Formats -- second pass (Mike, 9/4/26): "looks like frames on a tan
   background... we can do white on white and really make it stand out. Maybe put the
   wording on the top left of the image and the bottom left." Section is now plain white
   (no card, no cream), and the title/spec text sit directly ON the photo at its own
   corners instead of living in a separate caption block underneath -- overlay, not a
   framed card. ---------- */
.h5-formats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1px, 0.3vw, 3px); margin-top: 2.5rem; }
.h5-format-card { position: relative; }
.h5-format-card__media img { width: 100%; height: auto; display: block; }
.h5-format-card__title {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  left: clamp(1rem, 3vw, 2rem);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0;
  text-transform: uppercase;
  color: var(--h5-ink);
}
.h5-format-card__spec {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  font-size: 1.02rem;
  color: #4a463d;
  margin: 0;
}

/* ---------- Closing ---------- */
.h5-closing { text-align: center; }
.h5-closing .h5-h2 { max-width: 24ch; margin-left: auto; margin-right: auto; }
.h5-closing__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .h5-hero { min-height: 0; padding: 5.5rem 7.5rem 3rem 1.25rem; }
  .h5-hero__media { top: 6rem; bottom: 3rem; width: clamp(140px, 38vw, 220px); right: -1.5rem; }
  .h5-five { grid-template-columns: repeat(2, 1fr); }
  .h5-split { grid-template-columns: 1fr; }
  .h5-split--reverse .h5-split__media { order: -1; }
  .h5-split__media { order: -1; }
  .h5-formats { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .h5-five { grid-template-columns: 1fr; }
}