/*
 * Mobile interaction and reading standards for Rivas.
 *
 * This file is intentionally a small-screen-only layer.  fluid-layout.css is
 * the intrinsic layout baseline; this layer only changes the <=767px
 * interaction, alignment, and form rules.  The shared header owns its own
 * responsive contract and is excluded from every generic selector below.
 */

.rivas-cta-label-mobile { display: none; }

@media (max-width: 767px) {
  .rivas-cta-label-desktop { display: none; }
  .rivas-cta-label-mobile { display: inline; }
  /*
   * A CTA is a component-level decision, not a generic link decision.
   * PrimaryCTA, PrimaryCTAButton, and ActionButton provide this marker.
   * The secondary story link uses the same full-row behavior but retains a
   * centered label and icon.
   */
  .rivas-site
    :where(.rivas-mobile-cta):not(.rivas-global-header a):not(.rivas-global-header button) {
    box-sizing: border-box;
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
    inline-size: 100%;
    min-block-size: 48px;
    white-space: nowrap;
    overflow-wrap: normal;
    padding-inline: 12px;
    gap: 8px;
    font-size: 14px;
  }

  .rivas-site
    :where([class~="flex"]:has(> .rivas-mobile-cta), .rivas-fluid-cta-group)
    > a:not(.rivas-global-header a):not(.rivas-mobile-icon-control) {
    width: 100%;
    min-height: 44px;
    align-self: stretch;
    white-space: nowrap;
  }

  .rivas-site
    :where(.rivas-primary-cta):not(.rivas-global-header a):not(.rivas-global-header button) {
    justify-content: space-between;
  }

  .rivas-site
    :where(.rivas-secondary-cta):not(.rivas-global-header a):not(.rivas-global-header button) {
    justify-content: center;
  }

  /*
   * Any existing flex row containing a CTA becomes a deliberate vertical
   * action group.  This catches the many route-level flex-wrap groups without
   * turning ordinary icon controls or inline prose links into full rows.
   */
  .rivas-site
    :where(
      div:has(> .rivas-mobile-cta),
      [class~="flex"]:has(> .rivas-mobile-cta),
      [class~="inline-flex"]:has(> .rivas-mobile-cta),
      .rivas-fluid-cta-group
    ):not(.rivas-global-header):not(.rivas-global-header *) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 14px !important;
    column-gap: 14px !important;
  }

  .rivas-site
    :where(
      div:has(> .rivas-mobile-cta),
      [class~="flex"]:has(> .rivas-mobile-cta),
      [class~="inline-flex"]:has(> .rivas-mobile-cta),
      .rivas-fluid-cta-group
    )
    > :where(.rivas-mobile-cta) {
    align-self: stretch;
  }

  .rivas-site
    :where(
      div:has(> .rivas-mobile-cta),
      [class~="flex"]:has(> .rivas-mobile-cta),
      [class~="inline-flex"]:has(> .rivas-mobile-cta),
      .rivas-fluid-cta-group
    )
    > :not(.rivas-mobile-cta) {
    align-self: flex-start;
  }

  /* Module-styled action groups follow the same rules as utility classes. */
  .rivas-site :where(div:has(> .rivas-mobile-cta))
    > :where(a, button, input):not(.rivas-global-header *) {
    inline-size: 100%;
    max-inline-size: 100%;
    align-self: stretch;
  }

  .rivas-site :where(.rivas-mobile-cta) .cta__chip {
    flex-shrink: 0;
  }

  .rivas-site :where(a[href], button, summary, [role="tab"]):focus-visible {
    outline: 2px solid #91a6ba;
    outline-offset: 4px;
  }

  .rivas-site :where(.rivas-mobile-cta):active {
    filter: brightness(.9);
  }

  /*
   * Keep all actionable controls comfortably tappable.  Icon controls have a
   * separate fixed square rule so they do not become full-width buttons.
   * The header is deliberately absent from these selectors.
   */
  .rivas-site
    :where(
      button,
      [role="button"],
      [role="tab"],
      summary
    ):not(.rivas-global-header button):not(.rivas-global-header [role="button"]):not(.rivas-global-header [role="tab"]):not(.rivas-global-header summary) {
    min-block-size: 44px;
  }

  .rivas-site
    :where(.rivas-mobile-icon-control):not(.rivas-global-header a):not(.rivas-global-header button) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    inline-size: 44px;
    min-block-size: 44px;
    block-size: 44px;
    padding: 0;
  }

  /*
   * Links retain their natural width, but standalone links receive a useful
   * vertical hit area.  Paragraph links are inline prose and intentionally
   * stay inline; this avoids making legal copy and article sentences look
   * like oversized buttons.
   */
  .rivas-site
    :where(a[href], [role="link"]):not(.rivas-global-header a):not(.rivas-global-header [role="link"]):not(p a):not(p [role="link"]):not(.rivas-inline-link):not([data-rivas-inline-link]) {
    min-block-size: 44px;
  }

  .rivas-site
    :where(a[href], [role="link"]):not(.rivas-global-header a):not(.rivas-global-header [role="link"]):not(p a):not(p [role="link"]):not(label a):not(label [role="link"]):not(.rivas-inline-link):not([data-rivas-inline-link]):not([class~="block"]):not([class~="flex"]):not([class~="inline-flex"]):not([class~="grid"]) {
    display: inline-flex;
    align-items: center;
  }

  .rivas-site
    :where(.rivas-text-link):not(.rivas-global-header a):not(p .rivas-text-link):not(.rivas-inline-link) {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  .rivas-site
    :where(.rivas-text-link[aria-label]):not(.rivas-global-header a) {
    justify-content: center;
    min-inline-size: 44px;
    inline-size: 44px;
    padding-inline: 0;
  }

  .rivas-site
    :where(p a, p [role="link"], p .rivas-text-link, .rivas-inline-link, [data-rivas-inline-link]) {
    min-block-size: 0;
    padding-block: 0;
  }

  /*
   * Forms follow DOM order on small screens.  Do not use order to improve
   * appearance: the source order is the reading and submission order.
   * Explicitly collapse responsive two-column utilities, including the
   * newsletter's sm:flex-row input/action pair.
   */
  .rivas-site
    :where(form):not(.rivas-global-header form)
    :where(
      [class~="sm:grid-cols-2"],
      [class~="md:grid-cols-2"],
      [class~="lg:grid-cols-2"],
      [class~="xl:grid-cols-2"]
    ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .rivas-site
    :where(form):not(.rivas-global-header form)
    :where(
      [class~="sm:flex-row"],
      [class~="md:flex-row"],
      [class~="lg:flex-row"],
      [class~="xl:flex-row"]
    ) {
    flex-direction: column !important;
    align-items: stretch;
  }

  .rivas-site :where(form):not(.rivas-global-header form) > * {
    order: 0 !important;
  }

  .rivas-site
    :where(form):not(.rivas-global-header form)
    :where(
      input:not([type="checkbox"]):not([type="radio"]),
      textarea,
      select
    ) {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 44px;
    font-size: 16px;
  }

  .rivas-site
    :where(form):not(.rivas-global-header form)
    :where(textarea) {
    min-block-size: 7rem;
  }

  /*
   * Responsive order utilities describe desktop art direction in the source
   * components.  Reset them for mobile so the DOM remains the reading order.
   * The explicit list avoids touching any unrelated CSS property containing
   * the word "order".
   */
  .rivas-site
    :where(
      [class~="order-1"],
      [class~="order-2"],
      [class~="order-3"],
      [class~="sm:order-1"],
      [class~="sm:order-2"],
      [class~="sm:order-3"],
      [class~="md:order-1"],
      [class~="md:order-2"],
      [class~="md:order-3"],
      [class~="lg:order-1"],
      [class~="lg:order-2"],
      [class~="lg:order-3"]
    ):not(.rivas-global-header [class*="order-"]) {
    order: 0 !important;
  }

  /*
   * Mobile copy is left aligned by default, including headings and body copy
   * inside formerly centered intro blocks. Numeric readouts and explicitly
   * marked badges are intentional exceptions; small font size alone is not.
   */
  .rivas-site
    :where(
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      li,
      blockquote,
      dt,
      dd
    ):not(.rivas-global-header h1):not(.rivas-global-header h2):not(.rivas-global-header h3):not(.rivas-global-header h4):not(.rivas-global-header h5):not(.rivas-global-header h6):not(.rivas-global-header p):not(.rivas-global-header li) {
    text-align: left !important;
  }

  .rivas-site
    :where([class~="text-center"]):not(.rivas-global-header [class~="text-center"]) {
    text-align: left !important;
  }

  .rivas-site
    :where(
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      li,
      span,
      output
    ):where(
      [data-mobile-align="center"],
      [class~="tabular-nums"]
    ) {
    text-align: center !important;
  }

  .rivas-site
    :where([class~="text-center"]):has(output, [class~="tabular-nums"]):not(.rivas-global-header [class~="text-center"]) {
    text-align: center !important;
  }
}

/* Leave enough label space inside narrow cards without hiding any text. */
@media (max-width: 380px) {
  .rivas-site .rivas-mobile-cta .cta__chip {
    display: none;
  }
}