/* Purpose: "Two ways" section — showroom card and the live virtual-call mockup card. */

.ways-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }

.way { background: var(--color-surface); display: flex; flex-direction: column; border: 1px solid var(--color-border); transition: border-color var(--duration-medium) var(--ease); }
.way:hover { border-color: var(--color-accent); }

.way-media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--color-primary-dark); }
.way-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.way-media:has(> img)::after { content: ""; position: absolute; inset: 0; background: var(--gradient-media-fade); }

.way-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.way h3 { color: var(--color-primary); }
.way p { margin: var(--space-4) 0 var(--space-8); color: var(--color-text-muted); font-size: var(--text-body-sm); }
.way .btn { margin-top: auto; align-self: stretch; width: 100%; }

.place { position: absolute; z-index: 1; left: var(--space-4); bottom: var(--space-4); font-size: var(--text-caption); color: var(--color-ivory); display: flex; align-items: center; gap: var(--space-2); }
.place svg { width: 14px; height: 14px; }

/* Virtual call mockup */
.call { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 32px); background: var(--color-primary-dark); }
.call-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.call::before { content: ""; position: absolute; inset: 0; background: var(--gradient-call); }
.call-note { position: relative; display: none; max-width: 150px; color: var(--color-ivory-soft); font-size: var(--text-caption); line-height: var(--leading-base); border-left: 1px solid var(--color-accent-line); padding-left: 14px; }
.call-note b { display: block; font-family: var(--font-heading); font-weight: var(--weight-regular); font-size: var(--text-md); color: var(--color-ivory); margin-bottom: var(--space-1); }
.call-screen { position: relative; height: 86%; aspect-ratio: 10 / 16; flex: none; overflow: hidden; border: 1px solid var(--color-accent-line); outline: 6px solid var(--color-primary-ink); }
.call-screen img { width: 100%; height: 100%; object-fit: cover; }

.live { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; font-size: var(--text-2xs); color: var(--color-white); background: var(--color-vault-strong); padding: 3px 8px; }
.live i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-live); animation: ways-pulse 1.8s infinite; }
@keyframes ways-pulse { 50% { opacity: .25; } }

.call-bar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-2); }
.call-bar span { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--color-ivory-ghost); border: 1px solid var(--color-ivory-strong);  display: flex; align-items: center; justify-content: center; }
.eva-call-bar span svg { stroke-width: 0; width: 14px; height: 14px; }
.eva-call-bar span svg path {
    fill: #fff;
    stroke: #fff;
}
.call-bar span:last-child { background: var(--color-hangup); border-color: var(--color-hangup); }

/* md */
@media (min-width: 641px) {
  .way-body { padding: var(--space-8); }
  .way .btn { align-self: flex-start; width: auto; }
  .call-note { display: block; }
}

/* lg */
@media (min-width: 901px) {
  .ways-grid { grid-template-columns: 1fr 1fr; }
}