/*
 * Homepage layout styles.
 *
 * Moved equivalently from index.html during HOMEUX-Step 3. This file keeps
 * the outer page shell and hero container layout before component rules.
 */

.wrap {
  width: min(var(--max), calc(100% - 30px));
  margin: 0 auto;
  padding: 22px 0 60px;
}

.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 36px;
  padding: clamp(30px, 6vw, 58px);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, .96), rgba(246, 237, 222, .92)),
    radial-gradient(circle at 85% 20%, rgba(189, 139, 56, .22), transparent 18rem);
  box-shadow: var(--shadow);
}

.hero::after {
  content: "";
  position: absolute;
  right: -84px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(36, 79, 91, .08);
  border: 1px solid rgba(36, 79, 91, .12);
  pointer-events: none;
}

/* HOMEUX-Step 6: map the hero shell to the highest card level. */
.hero {
  background: var(--home-card-bg-hero);
  box-shadow: var(--home-card-shadow-hero), var(--home-card-inset-highlight);
}