/*
 * pages/negocios.css: the page for owners (GET /negocios/, api/src/views/pages/negocios.js).
 * Composes: .c-section/.c-container, .c-bento (two wide tiles: the two paths), .c-button, .c-link--standalone,
 * .c-public-fields, .c-trazos--corner. Page-only rules (prefix ng-): the hero block and the path tiles.
 * Tokens only, no hex, dvh not vh, mobile first. Nothing is hidden by default; the only motion is the
 * lede's entrance (.m-rise), which motion.css disables under prefers-reduced-motion.
 */

.ng-hero {
  padding-block: var(--md-space-7) calc(var(--md-space-9) + var(--md-space-7));
}

.ng-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-space-5);
}

/* Two lines or fewer at every width. */
.ng-hero__title {
  max-inline-size: 14ch;
}

.ng-hero__lede {
  max-inline-size: var(--md-measure);
  font-size: var(--md-font-size-lg);
  color: var(--md-color-ink-soft);
}

/* Phone: the stroke sits under the copy (the padding above reserves its room), so text never lies over it. */
.ng-hero .c-trazos--corner {
  background-position: right var(--md-gutter) bottom;
  background-size: min(50%, 12rem) auto;
}

@media (min-width: 64em) {
  .ng-hero {
    padding-block: var(--md-space-9);
  }

  .ng-hero .c-trazos--corner {
    background-position: right top;
    background-size: min(32%, 22rem) auto;
  }
}

.ng-paths-section {
  padding-block-start: 0;
}

.ng-path {
  min-block-size: 14rem;
  justify-content: space-between;
}

.ng-path__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-block-start: var(--md-space-4);
}

.ng-public__policy {
  margin-block-start: var(--md-space-6);
}

/* The disabled "Actualizar mi ficha" sits on the alternate tone: give it the white fill so it still reads as a button. */
.ng-path .c-button:disabled {
  --_bg: var(--md-color-surface);
}