/* ==========================================================================
   UNIT 6 · SUPPORT AFTER GO-LIVE
   --------------------------------------------------------------------------
   Visual idea: "the day doesn't end at five".
   • Visual column: a warm photo inside an ARCH frame (unique shape on the
     page), a small circular photo of a support team, and a 24-hour dial
     whose hand is driven by scroll position (live measurement): as the
     visitor scrolls, the hand moves from morning into the evening, the
     after-hours arc lights up and the photo darkens into night
     (--night custom property, 0 → 1).
   • Copy column: title, lead sentence, journey strip
     (Implementation → Go-live → After-hours support) and an offer card.
   Warm, soft surface — cloud blending into a sand-tinted evening glow.
   Static fallback = evening state (21:00, after-hours lit).
   ========================================================================== */

.support {
  --night: 0.7; /* updated live by support.js */
  background: linear-gradient(170deg, var(--c-cloud) 0%, #F8F5F0 55%, #F3EEE6 100%);
}

.support__decor {
  background:
    radial-gradient(ellipse 45% 50% at 20% 70%, rgba(242, 178, 92, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 15%, rgba(0, 169, 182, 0.10), transparent 70%);
}

[dir="rtl"] .support__decor {
  scale: -1 1;
}

.support__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 48rem) {
  .support__grid {
    grid-template-columns: 0.95fr 1.05fr;
  }
}

/* ---------------------------------------------------------------------------
   Visual column
   --------------------------------------------------------------------------- */
.support__visual {
  position: relative;
  inline-size: min(100%, 27rem);
  margin-inline: auto;
  padding-block-end: 5.5rem;     /* room for the dial overlapping the arch base */
}

/* Arch-framed photo */
.support__arch {
  position: relative;
  overflow: hidden;
  aspect-ratio: 0.82;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--r-panel);
  border-end-end-radius: var(--r-panel);
  box-shadow: var(--shadow-lg);
}

.support__arch img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Evening tint — deepens as the dial moves into the night */
.support__arch::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 17, 58, 0.85) 0%, rgba(1, 62, 106, 0.55) 45%, rgba(242, 178, 92, 0.25) 100%);
  opacity: var(--night);
  transition: opacity 0.3s linear;
  pointer-events: none;
}

/* Stars that fade in with the night */
.support__stars {
  position: absolute;
  inset-block-start: 12%;
  inset-inline: 18%;
  z-index: 1;
  block-size: auto;
  opacity: calc(var(--night) * 1.1 - 0.15);
  color: #FFFFFF;
  pointer-events: none;
}

/* Small circular photo: the support team */
.support__team {
  position: absolute;
  inset-block-start: 14%;
  inset-inline-end: -1rem;
  z-index: 2;
  inline-size: clamp(5rem, 4rem + 4vw, 7rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid var(--c-white);
  box-shadow: var(--shadow-md);
}

@media (max-width: 29.99rem) {
  .support__team {
    inset-inline-end: 0.25rem;
  }
}

.support__team img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   24-hour dial
   --------------------------------------------------------------------------- */
.dial {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 3;
  inline-size: clamp(11rem, 9rem + 8vw, 13.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--c-white);
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(255, 255, 255, 0.55);
}

[dir="rtl"] .dial {
  translate: 50% 0;
}

.dial svg {
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.dial__track {
  fill: none;
  stroke: var(--c-cloud);
  stroke-width: 12;
}

.dial__arc {
  fill: none;
  stroke-width: 12;
  stroke-linecap: butt;
  transition: stroke 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}

.dial__arc--day {
  stroke: rgba(1, 62, 106, 0.28);
}

.dial__arc--night {
  stroke: var(--c-teal);
  opacity: 0.4;
}

.dial.is-after .dial__arc--night {
  opacity: 1;
}

.dial.is-after .dial__arc--day {
  stroke: rgba(1, 62, 106, 0.16);
}

.dial__tick {
  stroke: var(--c-ink-a20);
  stroke-width: 1;
}

.dial__tick--major {
  stroke: var(--c-ink);
  stroke-width: 1.6;
}

.dial__num {
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 600;
  fill: var(--c-slate);           /* mist was 2.95:1 on white */
  text-anchor: middle;
  dominant-baseline: middle;
}

.dial__icon {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.5s var(--ease-out);
}

.dial__icon--sun {
  stroke: #E8A23A;
}

.dial__icon--moon {
  stroke: var(--c-mist);
}

.dial.is-after .dial__icon--moon {
  stroke: var(--c-teal);
}

.dial__hand {
  stroke: var(--c-navy);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.dial__hub {
  fill: var(--c-navy);
}

.dial__hand-tip {
  fill: var(--c-teal);
}

.dial__readout {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 700;
  fill: var(--c-ink);
  text-anchor: middle;
}

/* ---------------------------------------------------------------------------
   Copy column
   --------------------------------------------------------------------------- */
.support__copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}

@media (min-width: 48rem) {
  .support__copy {
    justify-items: start;
    text-align: start;
  }
}

.support__lead {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  max-inline-size: 30rem;
}

.support__copy .t-body {
  max-inline-size: 32rem;
}

/* Journey strip: Implementation → Go-live → After-hours support */
.journey {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  inline-size: 100%;
  max-inline-size: 30rem;
  margin-block: var(--space-xs);
}

.journey__step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  text-align: center;
}

/* Connector line from each step to the next */
.journey__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 1.375rem;
  inset-inline-start: calc(50% + 1.75rem);
  inline-size: calc(100% - 3.5rem);
  block-size: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-ink-a20), var(--c-teal));
}

[dir="rtl"] .journey__step:not(:last-child)::after {
  background: linear-gradient(-90deg, var(--c-ink-a20), var(--c-teal));
}

.journey__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--c-ink-a10);
  background-color: var(--c-white);
  color: var(--c-deep-teal);
  box-shadow: var(--shadow-sm);
}

.journey__icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.journey__step--now .journey__icon {
  border-color: transparent;
  background-color: var(--c-navy);
  color: var(--c-teal);
  box-shadow: 0 0 0 5px rgba(0, 169, 182, 0.14), var(--shadow-md);
}

.journey__label {
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-ink);
}

/* Offer card */
.support__offer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  max-inline-size: 32rem;
  padding: var(--space-lg);
  border-radius: var(--r-card);
  background-color: var(--c-navy);
  color: var(--c-on-dark-body);
  box-shadow: var(--shadow-lg);
  text-align: start;
}

.support__offer-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 12px;
  background-color: var(--c-teal);
  color: var(--c-navy);
}

.support__offer-icon svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.support__offer p {
  color: var(--c-on-dark);
  font-weight: 500;
}