/* GenreDetailHeader.kt — cover, a surface gradient over it, the motif weave, then the title. */
.gdetail {
  position: relative; overflow: hidden; padding: 12px;
  background-size: cover; background-position: center;
  min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end;
}
.gdetail::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(color-mix(in srgb, var(--md-surface) 35%, transparent) 0%,
                              color-mix(in srgb, var(--md-surface) 88%, transparent) 55%,
                              var(--md-surface) 100%);
}
.gdetail .weave { position: absolute; inset: 0; color: var(--md-primary); opacity: .05; }
.gdetail .weave i {
  position: absolute; inset: -40px; background-repeat: repeat; background-size: 40px 80px;
  animation: weave 24s linear infinite;
}
.gdetail .mot {
  position: absolute; right: 16px; top: 24px; width: 96px; height: 96px;
  color: var(--md-primary); opacity: .30;
}
.gdetail .mot svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.gdetail .gd-body { position: relative; }
.gdetail .gd-title {
  margin: 96px 0 0; font-family: "Heebo", system-ui, sans-serif;
  font-size: 28px; line-height: 36px; font-weight: 700;
}
.gdetail .gd-sub { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--md-on-surface-variant); }