/* Custom styles layered on top of the Webflow mirror.
   Kept separate so the mirrored stylesheet stays untouched and re-mirrorable. */

/* The hero "As seen in:" badge carries two logos, stacked at every width.
   Scoped to .lq-logo-row so the mirrored .logo-item_video rule is left alone. */
.lq-logo-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}

/* Sized so the two wordmarks come out at roughly the same WIDTH, which reads
   tidier stacked and left-aligned. Women's Health is ~4.16:1 and Mindvalley
   ~6.40:1, so Mindvalley sits at ~0.65x the height.
   Sizes are 50% up on the previous pass, both breakpoints. */
.lq-logo-row .logo-item_video {
  max-height: 1.8rem;
}
.lq-logo-row .logo-item_video.is-mindvalley {
  max-height: 1.17rem;
}

@media screen and (max-width: 479px) {
  .lq-logo-row { gap: .2rem; }
  .lq-logo-row .logo-item_video { max-height: 1.05rem; }
  .lq-logo-row .logo-item_video.is-mindvalley { max-height: .68rem; }
}

/* Hero video on mobile.
   The stylesheet hid the single Vidalytics player below 480px and showed a separate
   wrapper that a script filled with a Wistia player. That Wistia media id is dead, and
   the site now uses Vidalytics — which keys a player to its container id, so the same
   video cannot be embedded twice on one page. The one real player is shown at every
   width instead, and the empty mobile wrapper stays hidden. */
@media screen and (max-width: 479px) {
  .video-wrap_hero { display: flex; top: 0; }
  .video-wrap_hero.mobile-view { display: none; }
}

/* Wall of love on mobile: one full-width column.
   The mirrored stylesheet already flips this container to a flex column below 480px,
   so the three .wall-column divs stack — but `place-items: start`, set on the grid
   layout above and never reset, means `align-items: start` now applies to that flex
   column and shrinks each stacked column to its content width. That collapsed width is
   what produced the gap after the first video: the video placeholder derives its height
   from a percentage of the container width, so a collapsed width gives a wrong height.
   Stretching everything to full width removes both the ragged columns and the gap. */
@media screen and (max-width: 479px) {
  .wall-images-group { align-items: stretch; }
  .wall-column { width: 100%; }
  .wall-image-item,
  .wall-video-item { width: 100%; }
  .image-wall { width: 100%; height: auto; }
}

/* Press logo strip under "The Power of the Brain-Skin Connection".
   Webflow's .w-layout-hflex sets align-items but no justify-content, so the six logos
   pack to the left inside a centred 940px container. Below 480px the mirrored CSS
   replaces this with its own centred grid, so only wider viewports need fixing. */
@media screen and (min-width: 480px) {
  .flex-block {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* Belt-and-braces left alignment for the hero "As seen in:" logos.
   The mirrored badge already sets align-items:flex-start, so nothing in the stylesheet
   should be centring these — stated explicitly so no inherited rule can override it. */
.video-overflow-item {
  align-items: flex-start;
  text-align: left;
}
.lq-logo-row {
  justify-content: flex-start;
}
.lq-logo-row .logo-item_video {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
  object-position: left center;
}

/* The Women's Health artwork carries a sliver of transparent padding down its left
   edge, so it reads as indented beside Mindvalley even though both sit flush left.
   Nudged 3px to compensate — an optical correction, not a geometric one. */
.lq-logo-row .logo-item_video:not(.is-mindvalley) {
  margin-left: -3px;
}

/* Same logo strip on mobile. The mirrored rule sets `place-items: center stretch`,
   i.e. justify-items:stretch — but these images carry a definite width from their HTML
   `width="150"` attribute, so stretch cannot apply and falls back to `start`, pinning
   them flush left with ~42px of dead space on the right at 390px wide.
   Measured in-page: 0/42 before, 21/21 after. */
@media screen and (max-width: 479px) {
  .flex-block {
    justify-items: center;
  }
}

/* "Clear mind = clear skin" wordmark + heart doodle, moved out of the Brain-Skin
   Self-Healing System section to replace the "new kind of woman emerging" line.
   Mirrors the box that paragraph occupied (.additional-quote: 26.3rem, flush left);
   the images keep their original classes, whose align-self:center does the centring. */
.lq-clear-mind-block {
  display: flex;
  flex-direction: column;
  max-width: 26.3rem;
  margin-left: 0;
  margin-top: 2rem;
}

/* Wall of love: the images now carry intrinsic width/height attributes, so the browser
   reserves correct space from the aspect ratio before each lazy image loads. Without
   them, unloaded images below the fold collapsed to zero height while the inline
   `height: 120rem` on .wall-images-group held the box open — which is what produced the
   large empty gap after the first video on mobile. */

/* CTA section background. The mirrored rule caps this image at max-height:40rem, so once
   the section grows past ~569px the image stops covering it and a strip of page
   background shows through above the next section. Replacing the paragraph with the
   taller clear-mind + heart images pushed it over that line. The image already uses
   object-fit:fill and is stretched from its natural aspect, so lifting the cap keeps the
   existing behaviour and simply lets it cover whatever height the section needs.
   Measured: 27px gap at a 596px section, 0px after. (<=479px already sets max-height:none.) */
.bg-image.is-cta {
  max-height: none;
}

/* Mobile: tighten the break above the 1-2-3 steps in the Brain-Skin Self-Healing System
   section. Two things opened it up. The description carries a 3rem bottom margin, and
   .about-items-wrap is a flex row with align-items:center whose other child — the mobile
   photo — keeps its 16rem height even before it loads (width collapses to 0, height does
   not), so the steps were being centred against that phantom height. Aligning to the top
   removes the offset regardless of whether the photo has loaded. */
@media screen and (max-width: 479px) {
  .about-description {
    margin-bottom: 1.25rem;
  }
  .about-items-wrap {
    align-items: flex-start;
  }
}

/* Wall of love: two of the eleven videos are missing their .wall-video-item wrapper in
   the Webflow markup, so .video-wall sits as a direct child of .wall-column. Its
   height:100% is harmless inside the wrapper (height:auto resolves it to auto) but as a
   flex child of the column it resolves against the COLUMN's height — producing boxes
   4810px and 4463px tall, i.e. the huge empty gap after the first video on mobile.
   Measured at 390px: 4810px -> 192px, with the nine correctly wrapped videos untouched. */
.wall-column > .video-wall {
  height: auto;
}