/* ==========================================================================
   e-Pragma "call" CTA component
   Scoped to .ep-cta-call so it never leaks into the documentation pages.

   The markup lives in the per-locale partials under docs/{el,en}/_cta/, a
   page uses it by including the partial:

       {% include '/el/_cta/call_meeting.md' %}

   It links to the TidyCal booking page for a 15-minute online call.
   ========================================================================== */

.ep-cta-call {
  --epcta-bg: #ffffff;
  --epcta-fg: #12141f;
  --epcta-muted: #5a6178;
  --epcta-line: #e4e7f0;
  --epcta-brand: #4051b5;
  --epcta-brand-2: #6c7bff;
  --epcta-accent: #ff7a1a;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid var(--epcta-line);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--epcta-brand) 7%, var(--epcta-bg)) 0%,
      color-mix(in srgb, var(--epcta-accent) 6%, var(--epcta-bg)) 100%);
}

[data-md-color-scheme="slate"] .ep-cta-call {
  --epcta-bg: #14161f;
  --epcta-fg: #eef0f6;
  --epcta-muted: #a4abc0;
  --epcta-line: #2b2f3d;
  --epcta-brand-2: #6c7bff;
}

/* The icon and the title share a line; the text and the button sit under
   them, so the block reads the same in a narrow column and in a wide one. */
.ep-cta-call__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ep-cta-call__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--epcta-brand) 14%, transparent);
}

.ep-cta-call__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--epcta-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-md-color-scheme="slate"] .ep-cta-call__icon svg {
  stroke: var(--epcta-brand-2);
}

.md-typeset .ep-cta-call__title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--epcta-fg);
  margin: 0 0 3px;
}

.ep-cta-call__text {
  font-size: .87rem;
  line-height: 1.55;
  color: var(--epcta-muted);
  margin: 0;
}

.md-typeset .ep-cta-call__action {
  flex: none;
  align-self: stretch;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
  background: var(--epcta-accent);
  box-shadow: 0 8px 22px rgba(255, 122, 26, .28);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.md-typeset .ep-cta-call__action::after {
  content: "\2192";
  font-size: 1em;
  line-height: 1;
  transition: transform .18s ease;
}

.md-typeset .ep-cta-call__action:hover {
  background: #ff8c3c;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 122, 26, .36);
}

.md-typeset .ep-cta-call__action:hover::after {
  transform: translateX(3px);
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 600px) {
  .ep-cta-call {
    padding: 18px;
    gap: 14px;
  }

}