/* =========================================================
   kpis.css — Romeo Thomas (sanitized)
   - JavaScript previously embedded here has been REMOVED
   - KPI styles are now scoped to #rt-kpis to avoid CTA conflicts
   - Uses tokens from app.css
   ========================================================= */

#rt-kpis .kpi-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 16px;
}

@media (max-width: 768px) {
  #rt-kpis .kpi-row { justify-content: center; }
  #rt-kpis .kpi-card { flex: 1 1 45%; }
}

#rt-kpis .kpi-card {
  background: #fff;
  border: 1px solid rgba(14,17,22,.10);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
  padding: 16px 20px;
  text-align: center;
  flex: 1 1 120px;
  min-width: 160px;
}

#rt-kpis .kpi-num {
  display: block;
  font-size: 28px;              /* standardized per spec */
  font-weight: 800;
  line-height: 1.2;
  color: #0E1116;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

#rt-kpis .kpi-label {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(14,17,22,.80);
}

/* Ensure About credentials & KPI text is readable on white surfaces */
.about .elementor-widget-text-editor,
.about .elementor-widget-text-editor * {
  opacity: 1 !important;
  color: #0E1116;
}

/* Keep the KPI column above any decorative canvases */
.about, .about__grid, .about .elementor-section { position: relative; z-index: 2; }

/* ===== Portfolio mobile polish ===== */
@media (max-width: 768px) {
  .section.portfolio .wrap { padding-left: 12px; padding-right: 12px; }

  /* Filters: make chips scrollable, prevent wrap explosion */
  .section.portfolio .filters {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    scrollbar-width: none;
  }
  .section.portfolio .filters::-webkit-scrollbar { display: none; }
  .section.portfolio .filters .filter { flex: 0 0 auto; }

  /* Grid: single column, tighter spacing */
  .section.portfolio .portfolio__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Card media: lock aspect + smaller min-height to avoid tall blanks */
  .section.portfolio .p-card__media {
    min-height: 0;                    /* override desktop min-height */
    aspect-ratio: 16 / 9;             /* keep previews consistent */
    background-size: cover;
    background-position: center;
  }
  .section.portfolio .embed-wrap { padding-top: 56.25%; } /* 16:9 embeds */

  /* Card body: spacing + readable text */
  .section.portfolio .p-card__body { padding-top: .5rem; }
  .section.portfolio .p-card__title { font-size: 1.05rem; margin-bottom: .15rem; }
  .section.portfolio .p-card__intro { font-size: .92rem; line-height: 1.45; margin-bottom: .5rem; }

  /* KPIs: stack to 2 columns for space, then 1 on very small widths */
  .section.portfolio .p-card__kpis {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .25rem .5rem;
    margin-bottom: .5rem;
  }

  /* Tags: wrap neatly */
  .section.portfolio .p-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; }

  /* CTAs: full-width primary first, then soft buttons */
  .section.portfolio .p-card__cta { gap: .5rem; }
  .section.portfolio .p-card__cta .btn { padding: .6rem .9rem; font-size: .9rem; }
  .section.portfolio .p-card__cta .btn.btn-primary { flex: 1 1 100%; text-align: center; }
}

@media (max-width: 420px) {
  .section.portfolio .p-card__kpis { grid-template-columns: 1fr; }
  .section.portfolio .p-card__title { font-size: 1rem; }
  .section.portfolio .p-card__intro { font-size: .9rem; }
}

/* ===== Unified page width ===== */
:root { --page-w: 1100px; --page-pad: 16px; }

.site-header .wrap,
.section.portfolio .wrap,
.site-footer .wrap {
  max-width: var(--page-w);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* ===== Portfolio mobile polish (keep CTAs same size) ===== */
@media (max-width: 768px) {
  /* chips remain scrollable but page width stays consistent */
  .section.portfolio .filters {
    display: flex; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem; margin-bottom: .75rem; scrollbar-width: none;
  }
  .section.portfolio .filters::-webkit-scrollbar { display: none; }

  /* single column grid spacing */
  .section.portfolio .portfolio__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

  /* media size: consistent 16:9, no tall blanks */
  .section.portfolio .p-card__media { min-height: 0; aspect-ratio: 16/9; }
  .section.portfolio .embed-wrap { padding-top: 56.25%; }

  /* text sizes */
  .section.portfolio .p-card__title { font-size: 1.05rem; margin-bottom: .15rem; }
  .section.portfolio .p-card__intro { font-size: .92rem; line-height: 1.45; margin-bottom: .5rem; }

  /* KPIs tighter */
  .section.portfolio .p-card__kpis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .25rem .5rem; }
}

/* ===== CTAs: primary ≡ secondary (no full-width growth) ===== */
.section.portfolio .p-card__cta { display: flex; gap: .5rem; flex-wrap: wrap; }
.section.portfolio .p-card__cta .btn { flex: 0 0 auto; padding: .6rem .9rem; font-size: .9rem; }
.section.portfolio .p-card__cta .btn.btn-primary { flex: 0 0 auto; } /* override any full-width rule */

/* ===== Mobile centering + safe hero logic (append-only) ===== */
@media (max-width: 768px) {
  /* Center all card contents */
  .section.portfolio .p-card__body { text-align: center; }
  .section.portfolio .p-card__kpis { justify-items: center; }
  .section.portfolio .p-card__kpis li { justify-self: center; }
  .section.portfolio .p-card__tags { justify-content: center; }
  .section.portfolio .p-card__cta { justify-content: center; }
  .section.portfolio .p-card__embed > summary {
    display: inline-block; width: 100%; text-align: center;
  }

  /* If a hero iframe is present (has-embed on the wrapper), let the iframe drive height */
  .section.portfolio .p-card__media.has-embed {
    background: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
  .section.portfolio .p-card__media.has-embed .embed-wrap {
    position: relative; width: 100%; padding-top: 56.25%;
  }
  .section.portfolio .p-card__media.has-embed .embed-wrap .embed {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  }

  /* For image-hero cards (no iframe), keep crisp 16:9 */
  .section.portfolio .p-card__media:not(.has-embed) {
    aspect-ratio: 16 / 9;
    min-height: 0;
    background-size: cover;
    background-position: center;
  }
}