/* Targeted visual corrections for #651. Loaded after styles.css. */

@media (min-width: 1081px) {
  .public-hero-art img {
    width: 125%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateX(-22%);
    filter: saturate(1.12) brightness(1.18) contrast(1.05);
  }

  .public-hero-art::after {
    background:
      linear-gradient(90deg,
        rgb(1 5 13 / 97%) 0%,
        rgb(1 5 13 / 88%) 29%,
        rgb(1 5 13 / 55%) 43%,
        rgb(1 5 13 / 12%) 58%,
        rgb(1 5 13 / 4%) 66%,
        rgb(1 5 13 / 20%) 77%,
        rgb(1 5 13 / 58%) 100%),
      linear-gradient(0deg, rgb(1 5 13 / 68%), transparent 28%, rgb(1 5 13 / 18%));
  }

  .public-assistant-panel {
    transform: translateX(12px);
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .public-hero-art img {
    width: 118%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateX(-15%);
    filter: saturate(1.1) brightness(1.14) contrast(1.04);
  }

  .public-hero-art::after {
    background:
      linear-gradient(90deg,
        rgb(1 5 13 / 96%) 0%,
        rgb(1 5 13 / 82%) 34%,
        rgb(1 5 13 / 32%) 55%,
        rgb(1 5 13 / 10%) 67%,
        rgb(1 5 13 / 44%) 100%),
      linear-gradient(0deg, rgb(1 5 13 / 72%), transparent 30%, rgb(1 5 13 / 22%));
  }
}

.public-assistant-panel {
  border-color: rgb(95 207 210 / 42%);
  background: linear-gradient(155deg, rgb(4 17 31 / 86%), rgb(2 10 21 / 90%));
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow:
    0 32px 76px rgb(0 0 0 / 42%),
    0 0 48px rgb(20 184 190 / 8%),
    inset 0 1px 0 rgb(190 249 246 / 8%);
}

.public-recommendation-body {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
}

.public-showcase-game-art {
  display: block;
  width: 72px;
  height: 88px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 14px 28px rgb(0 0 0 / 32%);
}

.public-showcase-controls button {
  position: relative;
  overflow: hidden;
  padding-bottom: 10px;
}

.public-showcase-controls span.public-showcase-progress {
  position: absolute;
  right: 8px;
  bottom: 4px;
  left: 8px;
  display: block;
  width: auto;
  height: 2px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(121 158 178 / 17%);
  color: transparent;
  pointer-events: none;
}

.public-showcase-controls span.public-showcase-progress::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--public-teal), var(--public-teal-bright));
  content: "";
  transform: scaleX(var(--showcase-progress, 0));
  transform-origin: left center;
}

.public-showcase-controls button[aria-pressed="true"] span.public-showcase-progress {
  background: rgb(87 214 211 / 17%);
}

.public-showcase-scenario.is-showcase-transitioning {
  animation: homepage-showcase-change 220ms ease both;
}

@keyframes homepage-showcase-change {
  from { opacity: .45; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
  .public-hero-art img {
    filter: saturate(1.08) brightness(1.12) contrast(1.03);
  }

  .public-recommendation-body {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .public-showcase-game-art {
    width: 60px;
    height: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-showcase-scenario.is-showcase-transitioning {
    animation: none;
  }
}

/* The hero example is reading content, not a miniature dashboard. Keep its
   typography independent of the signed-in app and let longer examples wrap. */
.public-home-shell .public-assistant-panel {
  width: min(100%, 32.5rem);
}

.public-home-shell .public-assistant-panel header {
  gap: 12px;
  flex-wrap: wrap;
}

.public-home-shell .public-assistant-panel header p,
.public-home-shell .public-question-card p {
  font-size: 1.125rem;
  line-height: 1.5;
}

.public-home-shell .public-assistant-panel header > .public-example-label {
  /* Override the existing small-label !important rule in styles.css. */
  font-size: .75rem !important;
  color: var(--public-muted) !important;
}

.public-home-shell .public-showcase-content {
  min-height: 0;
}

.public-home-shell .public-question-card {
  grid-template-columns: minmax(0, 1fr);
}

.public-home-shell .public-recommendation-card > p {
  flex-wrap: wrap;
  font-size: .8125rem;
  line-height: 1.5;
}

.public-home-shell .public-recommendation-card > p span {
  font-size: .75rem;
}

.public-home-shell .public-recommendation-body > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.public-home-shell .public-recommendation-body h2 {
  display: block;
  margin: 0 0 8px;
  font-size: 1.625rem;
  line-height: 1.2;
}

.public-home-shell .public-recommendation-body em {
  display: inline-block;
  max-width: 100%;
  font-size: .75rem;
  line-height: 1.4;
}

.public-home-shell .public-recommendation-body p,
.public-home-shell .public-reason-card li {
  font-size: 1rem;
  line-height: 1.6;
}

.public-home-shell .public-reason-card h2 {
  font-size: 1.0625rem;
  line-height: 1.4;
}

.public-home-shell .public-showcase-controls button {
  min-height: 60px;
  padding-inline: 8px;
  color: var(--public-muted);
  font-size: .875rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.public-home-shell .public-showcase-controls button > span:first-child {
  font-size: .75rem;
}

@media (max-width: 560px) {
  .public-home-shell .public-assistant-panel header {
    padding: 16px;
  }

  .public-home-shell .public-question-card,
  .public-home-shell .public-recommendation-card {
    margin-inline: 12px;
    padding: 12px;
  }

  .public-home-shell .public-recommendation-body {
    column-gap: 12px;
  }

  .public-home-shell .public-reason-card {
    padding: 16px;
  }

  .public-home-shell .public-showcase-controls {
    padding-inline: 12px;
  }
}