/*
 * Narrow-viewport corrections, loaded AFTER the frozen Laravel stylesheet.
 *
 * The legacy sheet (public/build/assets/vaultody-e3b39a30.css) ships
 * byte-identical, because the visual gate needs a fixed target and because it
 * contains IE star-property hacks LightningCSS refuses to parse. So every fix
 * here is an override in a separate file rather than an edit to that one.
 *
 * SCOPE: only defects that make content UNREACHABLE at 390px, measured rather
 * than assumed. A sweep of all 307 crawled URLs at 390px found ZERO pages where
 * anything escapes the viewport, and every wide element on 94 of them lives
 * inside a slider or carousel that is meant to be wider than the screen and has
 * its own controls. What is corrected below is the short list that was left.
 *
 * Deliberately NOT corrected here, and why:
 *   - The /pricing and /features comparison tables are wider than 390px and
 *     sit inside their own `overflow-x: auto` container. They are swipeable,
 *     which is what a table of that shape should be on a phone.
 *   - The MPC solutions carousel is 1448px wide by design. Its script steps by
 *     292px below 768px (getCardWidth), so the arrows already work there.
 *   - The hero and newsletter background images overflow their sections by
 *     design and are clipped by them; they are decoration, not content.
 */

/* ---------------------------------------------------------------------------
 * Blog pagination — pages 1 and 2 were unreachable on a phone.
 *
 * Laravel's paginator emits Bootstrap's responsive markup, and this site has
 * never loaded Bootstrap: the compiled sheet contains no `.d-none`, `.d-flex`
 * or `.d-sm-none` rule at all. The legacy sheet resolves that its own way — it
 * hides the simple previous/next block and the "Showing 1 to 12 of 152 results"
 * line outright, with `!important`, by position rather than by class:
 *
 *   .blog-pagination nav > div:first-child            { display: none !important }
 *   .blog-pagination nav > div:nth-child(2) > :first-child { display: none !important }
 *
 * So the numbered pagination is the design, at every width, and the only defect
 * is that it does not fit. Twelve pages of it is 656px wide, centred, and
 * clipped on both sides by a 390px screen: the visitor sees "3 4 5 6 7 8 9 10
 * 11", the arrows and the first two pages are off-screen, and 152 posts sit
 * behind a control that cannot reach its own beginning.
 *
 * Wrapping it is the whole fix. Supplying the missing Bootstrap utilities was
 * the wrong instinct and is not what is done here — the two `!important` rules
 * above would have kept the simple block hidden anyway, so a `d-sm-none` rule
 * would have hidden the numbered block below 576px and left the pagination
 * showing nothing at all.
 * ------------------------------------------------------------------------ */
.vaultody-v2 .blog-page .blog-pagination .pagination {
  flex-wrap: wrap;
  row-gap: 8px;
}

.vaultody-v2 .blog-page .blog-pagination nav,
.vaultody-v2 .blog-page .blog-pagination nav > div {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Blog post tables — the right-hand columns were unreachable.
 *
 * Post bodies are editor HTML, and CKEditor wraps every table in
 * `<figure class="table">`. Nothing constrains that figure, so a four-column
 * comparison table renders 467px wide inside a 390px screen, is clipped by the
 * page wrapper, and the last column simply cannot be read. Making the figure
 * the scroll container keeps the table's own layout intact.
 * ------------------------------------------------------------------------ */
.vaultody-v2 .blog-post-page figure.table {
  max-width: 100%;
  overflow-x: auto;
}

/* ---------------------------------------------------------------------------
 * Homepage hero — the rotating audience phrase was clipped when it wrapped.
 *
 * The frozen sheet gives .mpc-hero-rotating-container a fixed 67px (one line)
 * with overflow:hidden for the slide animation. At phone widths the font drops
 * to 36px but long catalog titles ("Gaming & Metaverse", "Financial
 * Institutions") wrap to two lines, and the second line vanished under the
 * clip. Height follows the content on narrow screens; overflow stays hidden so
 * the slide-in animation still enters from below the box, not over the page.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 700px) {
  .vaultody-v2 .home-page .mpc-hero-rotating-container {
    height: auto;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
 * Homepage Who-we-serve tabs — each label on ONE line.
 *
 * The strip already scrolls horizontally (frozen sheet: flex-wrap:nowrap +
 * overflow-x:auto), but the individual <button> labels wrapped internally, so
 * "Hedge Funds" stacked two lines and the active underline sat under half a
 * name. Nowrap makes each tab one row; the strip's own scrollbar absorbs the
 * width.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 700px) {
  .vaultody-v2 .home-page .who-we-serve-tab {
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
 * Homepage testimonial dots — centred on phones.
 *
 * The frozen sheet right-aligns them (justify-content:flex-end), which reads
 * as intentional beside the desktop card but floats oddly on a full-width
 * mobile card.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 700px) {
  .vaultody-v2 .home-page .who-we-serve-testimonials-dots {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
 * Solution pages — the key video obeys the card on phones.
 *
 * Desktop deliberately overflows the first capability card with a 650x650
 * key video (absolute, right:-242px). The frozen sheet's phone rules reset the
 * container (position:unset) and cap `img` at 350px — but only `img`: the
 * `video` kept the 650px !important sizing and burst out of the card. Same
 * treatment for the video. (The sources themselves are un-gated in
 * solutions/Features.astro so phones actually get the video, lazily.)
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 700px) {
  .vaultody-v2 .solutions-page .solutions-feature-image-first video {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 350px !important;
    object-fit: contain !important;
  }
}

/* ---------------------------------------------------------------------------
 * Homepage MPC-core banner — "Want to know more…?" on its own row, the
 * Learn-more button on the next.
 *
 * The frozen sheet lays the pair out as one flex ROW (gap 24px, right-aligned).
 * On a phone the two squeeze against each other and the button's own label
 * breaks onto two lines. Stack them: text row, button row, centred — and the
 * button label never wraps again.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 700px) {
  .vaultody-v2 .home-page .mpc-core-cta {
    justify-content: center;
  }
  .vaultody-v2 .home-page .mpc-core-cta-content {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .vaultody-v2 .home-page .mpc-core-cta-button {
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
 * Homepage final CTA — breathing room after the testimonials card.
 *
 * The section declares 120px vertical padding, but its decorative orb bleeds
 * to the very top edge of the section, so on a phone the orb glow starts
 * flush against the testimonial card's border and the two read as glued
 * together. A real margin separates the blocks; the orb keeps its overlap
 * INSIDE the section.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 700px) {
  .vaultody-v2 .home-page .mpc-final-section,
  .vaultody-v2 .who-we-serve-page .mpc-final-section {
    margin-top: 56px;
  }
}

/* ---------------------------------------------------------------------------
 * Comparison tables on a phone — launch review M1.
 *
 * A three-column table at 390px gave the row key its width, truncated the
 * Vaultody column mid-word ("Non-custodial b…") and pushed the competitor
 * column off-screen with no scrollbar and no visual hint that it existed — on
 * the pages whose entire job is the side-by-side.
 *
 * Below 700px each row becomes a card: the key is its heading, and the two
 * value cells name their column from the data-label the component emits, since
 * the header row is not in the reading order any more. Nothing is hidden and
 * nothing scrolls sideways.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 700px) {
  .cmp table,
  .cmp thead,
  .cmp tbody,
  .cmp tr,
  .cmp th,
  .cmp td {
    display: block;
    width: auto;
  }

  /* The header row is replaced by the per-cell labels below. */
  .cmp thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .cmp tr {
    margin-bottom: 16px;
    padding: 4px 0 8px;
    border: 1px solid var(--700, #1c3932);
    border-radius: 8px;
  }

  .cmp td {
    padding: 10px 16px;
    text-align: left;
  }

  .cmp td.pt-k {
    font-weight: 600;
    border-bottom: 1px solid var(--700, #1c3932);
    margin-bottom: 4px;
  }

  .cmp td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--400, #6d837e);
  }
}