/* =====================================================================
   Damascus Projects Global — "How It Works" page
   Loaded by templates/site/how-it-works.html after dpg-site.css.

     1. Video demo block (.dp-demo — reusable via ui.video_demo)
     2. Four-step process (.dp-steps)
   ===================================================================== */

:root {
  --dph-ink: #0b2461;
  --dph-body: #46506b;
  --dph-line: #dbe3f4;
}

/* ── 1. VIDEO DEMO ───────────────────────────────────────────────── */

.dp-demo {
  position: relative;
  padding: 4.2rem 0;
  background: linear-gradient(160deg, #061234 0%, #0b1f52 55%, #071638 100%);
  color: #fff;
  overflow: hidden;
}
.dp-demo::before {                      /* soft gold glow behind the player */
  content: "";
  position: absolute;
  right: -10%;
  top: -30%;
  width: 60%;
  height: 130%;
  background: radial-gradient(circle, rgba(245, 197, 66, .16), transparent 62%);
  pointer-events: none;
}

.dp-demo__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 2.6rem;
  align-items: center;
  text-align: left;
}

.dp-demo__intro .dp-eyebrow { color: var(--dp-gold, #F5C542); }
.dp-demo__intro .dp-h2 {
  color: #fff !important;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: .4rem 0 .8rem;
}
.dp-demo__intro .dp-lead {
  color: rgba(255, 255, 255, .88) !important;
  font-size: .95rem;
  line-height: 1.65;
  margin: 0;
}

.dp-demo__points { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; display: grid; gap: .8rem; }
.dp-demo__points li { display: flex; align-items: flex-start; gap: .75rem; font-size: .88rem; color: rgba(255, 255, 255, .92); line-height: 1.5; }
.dp-demo__points i {
  flex: 0 0 34px; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(245, 197, 66, .16);
  color: var(--dp-gold, #F5C542);
  font-size: .9rem;
}

/* the player */
.dp-demo__player {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #04102e;
  box-shadow: 0 30px 70px rgba(2, 8, 30, .55);
  border: 1px solid rgba(255, 255, 255, .14);
}
.dp-demo__poster,
.dp-demo__player video,
.dp-demo__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.dp-demo__player::after {              /* keeps the play button readable */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 10, 35, .30) 0%, rgba(3, 10, 35, .10) 45%, rgba(3, 10, 35, .55) 100%);
  transition: opacity .25s ease;
  pointer-events: none;
}
.dp-demo__player.is-playing::after,
.dp-demo__player.is-playing .dp-demo__badge,
.dp-demo__player.is-playing .dp-demo__caption { opacity: 0; pointer-events: none; }

.dp-demo__badge {
  position: absolute;
  z-index: 2;              /* stays on top of the preview video */
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--dp-red, #e11d2e);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  transition: opacity .25s ease;
}
.dp-demo__badge .dp-live-dot { background: #fff; }

.dp-demo__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: linear-gradient(100deg, var(--dp-gold-600, #b3a413), var(--dp-gold, #F5C542));
  color: var(--dp-navy-900, #050235);
  font-size: 1.5rem;
  padding-left: 6px;                    /* optically centres the triangle */
  box-shadow: 0 12px 34px rgba(245, 197, 66, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dp-demo__play::before {                /* pulsing ring */
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(245, 197, 66, .55);
  animation: dp-demo-pulse 2.4s ease-out infinite;
}
.dp-demo__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.dp-demo__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.dp-demo__player.is-playing .dp-demo__play { display: none; }

/* muted preview: the picture plays, the scrim lifts, a sound button appears */
.dp-demo__player.is-preview::after { opacity: .35; }
.dp-demo__player.is-preview .dp-demo__caption { opacity: 0; }
.dp-demo__sound {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  cursor: pointer;
  background: rgba(4, 12, 40, .72);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  backdrop-filter: blur(6px);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dp-demo__sound:hover { background: var(--dp-gold, #F5C542); color: var(--dp-navy-900, #050235); border-color: var(--dp-gold, #F5C542); }
.dp-demo__sound:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dp-demo__sound i { font-size: .85rem; }

@keyframes dp-demo-pulse {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.dp-demo__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .85rem 1.1rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, transparent, rgba(3, 10, 35, .75));
  transition: opacity .25s ease;
}

/* shown instead of the play button when the file is not on the server yet */
.dp-demo__note {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(80%, 420px);
  text-align: center;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: rgba(4, 12, 40, .78);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: .85rem;
  line-height: 1.5;
  backdrop-filter: blur(6px);
}

/* ── 2. FOUR STEPS ───────────────────────────────────────────────── */

.dp-steps-section { padding-top: 3.6rem; }
.dp-steps__head { max-width: 720px; margin: 0 0 2.4rem; text-align: left; }
.dp-steps__head .dp-h2 { margin: .35rem 0 .6rem; }
.dp-steps__head .dp-lead { margin: 0; }
.dp-steps__head::before {
  content: "";
  display: block;
  width: 56px; height: 4px; border-radius: 999px; margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--dp-gold-600, #b3a413), var(--dp-gold, #F5C542));
}

.dp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  counter-reset: dp-step;
}

.dp-step {
  position: relative;
  padding: 1.6rem 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid var(--dph-line);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(11, 36, 97, .07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-align: left;
}
.dp-step:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(11, 36, 97, .12); border-color: #c9d6f2; }

/* the connecting line between the cards */
.dp-step::after {
  content: "";
  position: absolute;
  top: 2.6rem;
  right: -1.25rem;
  width: 1.25rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, #cdd9f2 0 6px, transparent 6px 11px);
}
.dp-step:last-child::after { display: none; }

.dp-step__num {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(11, 36, 97, .10);
}
.dp-step__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 1rem;
  background: linear-gradient(140deg, #0b2461, #14357f);
  color: var(--dp-gold, #F5C542);
  font-size: 1.2rem;
}
.dp-step h3 { margin: 0 0 .45rem; font-size: 1rem; font-weight: 800; color: var(--dph-ink); }
.dp-step p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--dph-body); }

/* the intro block on the tools section reads better left-aligned too */
.dp-section--soft .dp-why__intro { text-align: left; }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .dp-demo__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .dp-demo__points { margin: 1.2rem 0 1.4rem; }
  .dp-steps { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .dp-step::after { display: none; }
}

@media (max-width: 640px) {
  .dp-demo { padding: 3rem 0; }
  .dp-demo__intro .dp-lead { font-size: .88rem; }
  .dp-demo__player { border-radius: 16px; }
  .dp-demo__play { width: 66px; height: 66px; font-size: 1.2rem; }
  .dp-demo__caption { display: none; }   /* keeps the phone view uncluttered */
  .dp-steps { grid-template-columns: 1fr; }
  .dp-steps__head { margin-bottom: 1.6rem; }
  .dp-step { padding: 1.3rem 1.1rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-demo__play::before { animation: none; }
  .dp-step, .dp-demo__play { transition: none; }
}