/*
 * Toolbox landing pages, per ".specs/docs/Pricing in RFQ/Landing Pages.pdf".
 *
 * Propshaft serves app/assets/stylesheets alphabetically, so this file loads
 * after authenticated.css but *before* unauthenticated.css. Overrides are
 * therefore prefixed with `body` to out-specify the `.authenticated` and
 * `.unauthenticated` base rules regardless of that ordering.
 */

.landing-surface {
  /* The washed out press photograph from the spec, delivered as a 5760x3840
     comp and downscaled to 2560px for shipping. */
  --landing-artwork: url("/assets/landing/press-bfa43078.jpg");

  /* Holds the top left corner mid grey behind the wordmark until the photo loads. */
  background-color: #e8e8ea;
  background-image: var(--landing-artwork);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
 * Oversized backdrop wordmark, top left, white on near white as drawn. The
 * artwork arrived on the same 5760x3840 canvas as the photo, where it spans
 * ~44% of the width, so the width below keeps the comp's proportions rather
 * than being re-tuned by eye.
 */
.toolbox-wordmark {
  position: absolute;
  top: clamp(4px, 1.5vw, 24px);
  left: clamp(12px, 3vw, 56px);
  z-index: 0;
  width: clamp(200px, 44vw, 660px);
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* -- Tool hub ------------------------------------------------------------- */

body.landing-hub {
  position: relative;
  min-height: 100vh;

  >nav:not(.tool-hub) {
    display: none;
  }

  >.content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: clamp(16px, 4vw, 40px);
    justify-content: center;

    /*
     * The authenticated layout styles no flash messages, and real ones do reach
     * this page: a CanCan denial from UsersController and the invitation accept
     * notice both redirect to root. Unstyled they render as bare text over the
     * wordmark, so give them an opaque banner above the panel. Mirrors the
     * treatment in unauthenticated.css.
     */
    >.notice,
    >.alert {
      align-self: center;
      width: min(100%, 920px);
      padding: 16px 20px;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(60, 60, 64, 0.18);
    }

    >.notice {
      background-color: var(--color-white);
      color: var(--color-secondary);
    }

    >.alert {
      background-color: var(--color-error);
      color: var(--color-white);

      &::before {
        padding-right: 8px;
        font-family: "Font Awesome 6 Pro", sans-serif;
        font-weight: 900;
        content: "\f06a";
      }
    }
  }
}

.tool-hub__utility {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 40px);
  z-index: 2;
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  align-items: baseline;

  a {
    color: #5c5c60;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    &:hover,
    &:focus-visible {
      color: var(--color-primary);
      text-decoration: underline;
    }
  }
}

body.landing-hub .tool-hub {
  display: grid;
  width: min(100%, 920px);
  /*
   * Horizontal only. A blanket `margin: auto` would absorb the column's free
   * space and push any flash message up under the wordmark; leaving the
   * vertical centring to justify-content keeps flash + panel as one group.
   */
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 64px);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 6vw, 86px);
  border-radius: 14px;
  /* Composites to ~#888 over the backdrop, matching the sampled #868789. */
  background: rgba(122, 123, 126, 0.86);
  box-shadow: 0 18px 44px rgba(60, 60, 64, 0.28);
}

.tool-tile {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
}

/*
 * The delivered icons bake in the red rounded frame and white fill, so the box
 * only sizes them. aspect-ratio matches the artwork's own 749x671 so the frame
 * meets the label without letterboxing.
 */
.tool-tile__artwork {
  display: grid;
  width: min(100%, 160px);
  aspect-ratio: 749 / 671;
  place-items: center;
  /* Purely so the focus ring below hugs the artwork's rounded corners. */
  border-radius: 15%;
  transition: transform 160ms ease, filter 160ms ease;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.tool-tile__label {
  font-size: clamp(1.2rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
}

.tool-tile--rfq {
  /* drop-shadow, not box-shadow: the artwork is a transparent PNG, so a box
     shadow would trace a rectangle around the rounded frame. */
  &:hover .tool-tile__artwork {
    transform: translateY(-3px);
    filter: drop-shadow(0 12px 18px rgba(40, 40, 44, 0.45));
  }

  &:focus-visible {
    outline: none;

    .tool-tile__artwork {
      outline: 3px solid var(--color-white);
      outline-offset: 3px;
    }
  }
}

/* -- Coming soon ---------------------------------------------------------- */

.tool-tile--soon {
  cursor: default;

  .tool-tile__artwork,
  .tool-tile__label {
    opacity: 0.28;
  }
}

/* Crosses the artwork diagonally and is allowed to spill past the tile edges. */
.tool-tile__ribbon {
  position: absolute;
  top: 40%;
  left: 50%;
  color: var(--color-white);
  font-size: clamp(0.95rem, 1.9vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-shadow: 0 2px 5px rgba(30, 30, 32, 0.55);
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-20deg);
  white-space: nowrap;
}

/* -- Sign in ------------------------------------------------------------- */

body.sign-in-landing {
  position: relative;
  min-height: 100vh;

  >.content {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 60px rgba(60, 60, 64, 0.22);

    .logo {
      width: min(100%, 340px);
    }

    .greeting h2 {
      font-size: clamp(1.5rem, 4vw, 2rem);
    }
  }
}

@media (min-width: 768px) {
  body.landing-hub .tool-hub {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-tile__artwork {
    transition: none;
  }

  .tool-tile--rfq:hover .tool-tile__artwork {
    transform: none;
  }
}