/* Hero — the block layout and the choices the section's settings switch
   between. The base .hero rules stay in public/css/korjin/home.css; this sheet
   loads after it, so it wins where the two meet. Tokens only, per tokens.css. */

/* ---- block flow ---------------------------------------------------------
   Blocks arrive as flat siblings in whatever order the merchant set. A
   wrapping flex row gives that order meaning: everything is full width and
   stacks, except buttons, which are auto width and therefore pair up on one
   line and wrap to the next when a third is added. */

.hero__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--sp-4);
  column-gap: var(--sp-4);
  max-width: min(34rem, 52%);
}

.hero__block {
  flex: 0 0 100%;
  /* Gap owns the rhythm now. The authored per-element margins would double it,
     and would leave gaps in the wrong places once blocks are reordered. */
  margin: 0;
}

.hero__block--button {
  flex: 0 0 auto;
  /* A little more air above the action row than between the copy lines. */
  margin-top: var(--sp-2);
}

/* ---- brand mark ---------------------------------------------------------
   Height is the block's setting; width follows the aspect so a custom image of
   any proportion behaves the same as the built-in mark. */

.hero__mark {
  line-height: 0;
}

.hero__icon,
.hero__mark img,
.hero__mark svg {
  height: var(--hero-mark-h, 56px);
  width: auto;
  margin: 0;
}

/* ---- heading size (per block) ------------------------------------------
   .display carries --step-6; these step it down without touching the type
   scale, so nothing else on the page moves. */

.hero__heading--lg {
  font-size: var(--step-5);
}

.hero__heading--md {
  font-size: var(--step-4);
}

/* ---- band height --------------------------------------------------------
   `tall` restates the authored value rather than omitting it, so the class is
   self-describing and a later edit to home.css cannot silently change what
   "tall" means here. */

.hero--h-tall {
  min-height: clamp(30rem, 50vw, 50rem);
}

.hero--h-medium {
  min-height: clamp(24rem, 38vw, 38rem);
}

.hero--h-short {
  min-height: clamp(20rem, 30vw, 30rem);
}

/* ---- scrim --------------------------------------------------------------
   The authored falloff lives in home.css; --hero-scrim only modulates the flat
   wash on top, so 0% returns the original gradient-only treatment. */

.hero__bg::after {
  background-color: color-mix(in srgb, var(--ground) var(--hero-scrim, 0%), transparent);
}

/* ---- star rating -------------------------------------------------------- */

.hero__stars {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.hero__stars-glyphs {
  color: var(--gold-line);
  letter-spacing: 0.12em;
  font-size: var(--step-1);
  line-height: 1;
}

.hero__stars-text {
  color: var(--ink-muted);
}

/* Sample data stays visibly sample. A rating chip can be screenshotted away
   from its context, so the marker travels with the rating rather than sitting
   in a caption elsewhere on the page. */
.hero__stars-sample {
  padding: 0.15em 0.5em;
  border: 1px solid var(--rule-strong);
  color: var(--ink-faint);
  text-transform: uppercase;
  font-size: var(--label-xs);
  letter-spacing: var(--label-track);
}

/* The way down to the stories. A chip, not a button: the hero already has two
   CTAs above it. `a.` lifts it over the platform's `a:not(.button)` colour
   rule; the hover selector likewise beats `a:not(.button):hover`. */
.hero__stars a.hero__stars-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.6em;
  border: 1px solid var(--gold-line);
  color: var(--ink);
  font-size: var(--label-xs);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* Only an in-page link points down. The empty alt keeps screen readers from
   announcing "downwards arrow"; browsers without that syntax use the line above. */
.hero__stars a.hero__stars-link[href^="#"]::after {
  content: "↓";
  content: "↓" / "";
}

.hero__stars a.hero__stars-link:hover,
.hero__stars a.hero__stars-link:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

/* ---- narrow ------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero__copy {
    max-width: none;
  }
}