/* Eagle Vision IT — interior page blocks.

   Styles for evit/page-hero, evit/card-grid, evit/split-content,
   evit/feature-section and evit/contact-section. These replace the inline
   style="" attributes from the prototype HTML so the blocks stay editable.
   Loaded on the front end and in the editor (add_editor_style). */

/* ── Page hero ───────────────────────────────────────── */
.page-hero {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.page-hero__breadcrumb {
  margin-bottom: var(--space-4);
}

.page-hero__breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
}

.page-hero__breadcrumb li {
  margin: 0;
}

.page-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.page-hero__breadcrumb a:hover,
.page-hero__breadcrumb a:focus-visible {
  color: rgba(255, 255, 255, 0.85);
}

.page-hero__breadcrumb li[aria-current="page"] {
  color: rgba(255, 255, 255, 0.8);
}

.page-hero__sep {
  margin-inline: var(--space-1);
}

.page-hero h1 {
  color: var(--color-white);
  max-width: 700px;
  margin-top: var(--space-3);
}

.page-hero .page-hero__lede {
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  max-width: 58ch;
}

.page-hero__actions {
  margin-top: var(--space-8);
}

/* ── Card grid ───────────────────────────────────────── */
.evit-card-grid__grid {
  list-style: none;
  padding: 0;
  margin: 0;
}

.evit-card-grid__grid--wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--space-6);
}

.evit-card-grid__grid--project.evit-card-grid__grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.evit-card {
  position: relative;
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.evit-card h2,
.evit-card h3 {
  max-width: none;
}

/* Accent cards: left border, icon beside the copy. */
.evit-card--accent {
  border-left: 4px solid var(--evit-accent, var(--color-secondary));
}

.evit-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.evit-card__icon {
  margin: 0;
  flex-shrink: 0;
}

.evit-card--accent .evit-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.evit-card--accent .evit-card__text {
  font-size: var(--text-sm);
}

.evit-card__link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-secondary-text);
}

a.evit-card__link:hover {
  color: var(--color-accent);
}

.evit-card__links {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.evit-card__links li {
  margin: 0;
}

.evit-card__links a {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-secondary-text);
}

.evit-card__links a:hover {
  color: var(--color-accent);
}

/* Product cards: top accent border + outline button. */
.evit-card--product {
  border-top: 3px solid var(--evit-accent, var(--color-accent));
}

.evit-card__button {
  margin-top: var(--space-5);
}

/* Centered (team roles). */
.evit-card--centered {
  text-align: center;
  padding: var(--space-6);
}

.evit-card__emoji {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.evit-card--centered .evit-card__title {
  font-size: var(--text-base);
}

.evit-card--centered .evit-card__text {
  font-size: var(--text-sm);
}

/* Inline (platforms / client list). */
.evit-card--inline {
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.evit-card__emoji--sm {
  font-size: 2rem;
  margin: 0;
  line-height: 1;
}

.evit-card--inline .evit-card__text {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-1);
}

/* Project cards. */
.evit-card--project {
  padding: 0;
  overflow: hidden;
  display: block;
}

.evit-project__media {
  padding: var(--space-8);
  background: linear-gradient(135deg, #0f2744 0%, #1a3a6b 100%);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.evit-project__icon {
  font-size: 3rem;
  line-height: 1;
}

.evit-project__body {
  padding: var(--space-5);
}

.evit-project__body .badge {
  margin-bottom: var(--space-3);
}

.evit-card--project .evit-card__title {
  font-size: var(--text-lg);
}

.evit-card--project .evit-card__text {
  font-size: var(--text-sm);
}

.evit-project__link {
  margin-top: var(--space-3);
  padding-left: 0;
}

.evit-card-grid__footer {
  text-align: center;
  margin-top: var(--space-8);
}

.evit-card-grid__note {
  text-align: center;
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ── Split content ───────────────────────────────────── */
.evit-split__heading {
  margin-top: var(--space-3);
}

.evit-split__para {
  margin-top: var(--space-4);
}

.evit-split__checklist {
  margin-top: var(--space-6);
}

.evit-split__price {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  display: inline-block;
}

.section--surface .evit-split__price {
  background: var(--color-white);
}

.evit-split__price-label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.evit-split__price-value {
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);
  line-height: 1;
}

.evit-split__price-value span {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
}

.evit-split__price-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-1);
}

.evit-split__actions {
  margin-top: var(--space-8);
}

.evit-split__price + .evit-split__actions,
.evit-split__checklist + .evit-split__actions {
  margin-top: var(--space-6);
}

/* Stats */
.evit-split__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.evit-split__stat {
  padding: var(--space-6);
  text-align: center;
}

.evit-split__stat-number {
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  color: var(--color-accent);
}

.evit-split__stat--b .evit-split__stat-number {
  color: var(--color-secondary-text);
}

.evit-split__stat-label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-2);
}

/* Mini cards */
.evit-split__mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.evit-split__mini-card {
  padding: var(--space-5);
  text-align: center;
}

.evit-split__mini-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
}

.evit-split__mini-card strong {
  font-size: var(--text-sm);
}

.evit-split__mini-card p {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* Dark callout panel */
.evit-split__panel {
  background: var(--color-primary);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  color: var(--color-white);
}

.evit-split__panel h3 {
  color: var(--color-white);
  margin-bottom: var(--space-6);
  max-width: none;
}

.evit-split__panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.evit-split__panel-item {
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-accent);
}

.evit-split__panel-item--b {
  border-left-color: var(--color-secondary);
}

.evit-split__panel-item strong {
  color: var(--color-white);
  font-size: var(--text-sm);
}

.evit-split__panel-item p {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* ── Contact section (form + details) ────────────────── */
.evit-contact__split {
  gap: clamp(var(--space-12), 6vw, var(--space-20));
  align-items: start;
}

.evit-contact__heading {
  margin-bottom: var(--space-2);
}

.evit-contact__heading--details {
  margin-bottom: var(--space-8);
}

.evit-contact__intro {
  margin-bottom: var(--space-8);
}

.evit-contact__success {
  padding: var(--space-4);
  background: rgba(16, 163, 74, 0.1);
  border: 1px solid rgba(16, 163, 74, 0.3);
  border-radius: var(--radius-lg);
  color: #16a34a;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-5);
}

.evit-contact__success[hidden] {
  display: none;
}

.evit-contact__req {
  color: var(--color-accent);
}

.evit-contact__hint {
  text-decoration: none;
}

.evit-contact__textarea {
  min-height: 140px;
}

.evit-contact__notice {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

.evit-contact__submit {
  width: 100%;
}

.evit-contact__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.evit-contact__card {
  padding: var(--space-6);
}

.evit-contact__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.evit-contact__card-head h3 {
  font-size: var(--text-lg);
  margin: 0;
}

.evit-contact__icon {
  margin: 0;
  width: 40px;
  height: 40px;
}

.evit-contact__card-title {
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.evit-contact__address {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.evit-contact__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  font-size: var(--text-sm);
}

.evit-contact__link:hover {
  color: var(--color-accent);
}

.evit-contact__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.evit-contact__hours {
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.evit-contact__expect {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
}

.evit-contact__expect h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.evit-contact__expect ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.evit-contact__expect li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

.evit-contact__expect li span {
  color: var(--color-accent);
  font-weight: 800;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .evit-split__stats,
  .evit-split__mini {
    grid-template-columns: 1fr 1fr;
  }

  .evit-split__panel {
    padding: var(--space-6);
  }

  .evit-card__row {
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  .evit-split__stats,
  .evit-split__mini {
    grid-template-columns: 1fr;
  }
}