/* Template: wheel-info — glassy two-column information section (see
   js/templates/wheel-info.js). Left: editorial glass card. Right: looping
   iOS-style number wheel (five visible rows, 3D curl, settle-to-center).
   The 52px row height must stay in sync with ITEM_HEIGHT in the JS. */

.wheel-info {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding: clamp(96px, 16vh, 160px) 0;
}

.wheel-info__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* --- Left: glass card ---------------------------------------------------- */

.wheel-info__card {
  padding: clamp(32px, 4.5vw, 56px);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-surface) 48%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  border-radius: var(--radius-md);
  /* Felt rather than obvious: one very soft shadow. */
  box-shadow: 0 32px 80px -40px color-mix(in srgb, var(--color-bg) 92%, transparent);
}

.wheel-info__heading {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--color-text-primary);
}

.wheel-info__divider {
  width: 56px;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.85;
  margin: clamp(18px, 3vh, 28px) 0 clamp(14px, 2.5vh, 22px);
}

.wheel-info__subtitle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.wheel-info__text {
  margin-top: clamp(18px, 3vh, 28px);
  font-size: clamp(14px, 1.9vw, 16px);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.wheel-info__text + .wheel-info__text {
  margin-top: clamp(12px, 2vh, 18px);
}

/* --- Right: looping wheel -------------------------------------------------- */

.wheel-info__wheel-frame {
  position: relative;
  width: min(100%, 400px);
  margin-inline: auto;
}

/* Hairlines marking the centered selection band. */
.wheel-info__wheel-frame::before,
.wheel-info__wheel-frame::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  height: 1px;
  background: color-mix(in srgb, var(--color-text-secondary) 25%, transparent);
  pointer-events: none;
}

.wheel-info__wheel-frame::before {
  top: calc(50% - 26px);
}

.wheel-info__wheel-frame::after {
  top: calc(50% + 26px);
}

.wheel-info__wheel {
  height: calc(5 * 52px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Rows fade out towards the top and bottom edges. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 22%,
    black 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 22%,
    black 78%,
    transparent 100%
  );
}

.wheel-info__wheel::-webkit-scrollbar {
  display: none;
}

.wheel-info__wheel-track {
  padding: calc(2 * 52px) 0; /* centering buffer — keep 52px in sync with JS */
  perspective: 700px;
}

.wheel-info__wheel-item {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  will-change: transform, opacity;
}

.wheel-info__wheel-number {
  min-width: 2.4em;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}

.wheel-info__wheel-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

@media (max-width: 767px) {
  .wheel-info__inner {
    grid-template-columns: 1fr;
    gap: clamp(40px, 7vh, 56px);
  }
}