/* Mobile fixes for the Admix Tech microsite (tech.admix.nl).
 *
 * Scoped to `body.dark` — that class comes from the root node's `siteClass`
 * property (master.cshtml), which only the Admix Tech root sets. admix.nl has
 * an empty siteClass, so nothing here can reach it.
 *
 * Hand-written on purpose: the Hexcore stylesheets are committed build
 * artifacts and CI does not rebuild them, so a vite run would be required to
 * ship a SCSS change. Loaded after blocks.*.build.css in master.cshtml.
 *
 * The three underlying bugs are Hexcore-wide and also affect admix.nl; these
 * overrides deliberately do not fix them there.
 */

/* ---------------------------------------------------------------------------
 * 1. Hero button row collides when it wraps
 *
 * Views emit `<div class="space-x-4">` around the buttons — no `flex`. The
 * buttons are `display: inline-flex; height: fit-content`, so once the row is
 * too narrow they wrap as inline boxes: no vertical gap (their padding runs
 * into the next line box) and the second button keeps its `margin-left: 1rem`
 * on the new line. Make the row a real flex container instead.
 * ------------------------------------------------------------------------- */
/* Target .space-x-4 at any depth: the hero nests it in a
 * .button-container_wrapper, the CTA block puts it directly under
 * .button-container. Matching only the first structure missed the CTA. */
body.dark .button-container .space-x-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Neutralise the Tailwind space-x-4 margin now that `gap` owns the spacing,
 * otherwise wrapped lines stay indented by 1rem. */
body.dark .button-container .space-x-4 > * + * {
  margin-left: 0;
}

/* On narrow phones two buttons never fit side by side — stack them full width
 * so the row reads as a deliberate button list rather than a ragged wrap. */
@media (max-width: 479px) {
  body.dark .button-container .space-x-4 {
    flex-direction: column;
    align-items: stretch;
  }

  /* .button-secondary sets `width: fit-content`, which is an explicit cross
   * size and therefore beats `align-items: stretch` — without this the two
   * stacked buttons end up different widths. */
  body.dark .button-container .space-x-4 > * {
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
 * 1b. Hero clips its own content
 *
 * .hero-fullwidth_shadow is a fixed `height: clamp(420px, 69vh, 760px)` with
 * `overflow: hidden`, while all the hero text lives inside it. Stacking the
 * buttons above made that content taller than the box, so the last button was
 * cut in half. Let the box grow on mobile and keep the clamp as a floor; the
 * background image is `position: absolute; inset: 0` so it still covers.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  body.dark .hero-fullwidth .hero-fullwidth_shadow {
    height: auto;
    min-height: clamp(420px, 69vh, 760px);
  }
}

/* ---------------------------------------------------------------------------
 * 2. Hero title overflows the viewport
 *
 * _typography.scss drops the home hero title to a fixed 40px below 1023px. A
 * long unbroken token ("EvolveCMS.Editor", 16 chars) is still wider than a
 * 375px viewport at that size. Scale with the viewport instead of stepping,
 * with break-word as a safety net for anything longer.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  body.dark .hex-page-home .hero-fullwidth .hero-fullwidth_title {
    font-size: clamp(28px, 8.5vw, 40px);
    overflow-wrap: break-word;
  }
}

/* ---------------------------------------------------------------------------
 * 2b. Closing CTA title overflows the viewport
 *
 * Same class of bug as the hero title, different element: _typography.scss
 * steps `.cta-noimage_title span` to a fixed 56px below 1024px, and
 * "EvolveCMS.Editor" at 56px is wider than a 375px viewport on its own.
 * 9vw keeps that token inside the container down to ~320px.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.dark .cta-container .cta-noimage_title span {
    font-size: clamp(28px, 9vw, 56px);
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Card list CTA hangs left under a centred heading
 *
 * cards.scss turns .cardlist-header into `flex-direction: column;
 * align-items: self-start` below 1024px. A centred intro
 * (.hex-intro-centerAligned centres itself with auto margins) then sits centred
 * while the CTA button stays pinned left — visible under "Laatste nieuws".
 * Match the CTA to the intro's alignment.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.dark
    .cardlist-container
    .cardlist-header:has(.hex-intro-centerAligned)
    .cardlist-cta {
    align-self: center;
  }
}