/* Buttons, cards, badges, ticker, accordion, tabs, filter bar, forms. */

/* ---- Eyebrow / label ---- */
.ez-eyebrow {
  display: inline-block;
  font-size: var(--ez-fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ez-red-ink);
  margin-bottom: var(--ez-space-3);
}
.ez-section--dark .ez-eyebrow,
.ez-section--red .ez-eyebrow { color: var(--ez-white); opacity: .8; }

/* ---- Buttons ---- */
.ez-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ez-space-2);
  font-weight: 600;
  font-size: var(--ez-fs-body);
  padding: 14px 28px;
  border-radius: var(--ez-notch-card);
  transition: transform var(--ez-dur-fast) var(--ez-ease), box-shadow var(--ez-dur-fast) var(--ez-ease), background var(--ez-dur-fast) var(--ez-ease), color var(--ez-dur-fast) var(--ez-ease);
  white-space: nowrap;
}
.ez-btn:hover { transform: translateY(-1px); }
.ez-btn:active { transform: translateY(0); }

.ez-btn--primary {
  background: var(--ez-black);
  color: var(--ez-white);
}
.ez-btn--primary:hover { background: #000; box-shadow: var(--ez-shadow-md); }

.ez-btn--accent {
  background: var(--ez-red);
  color: var(--ez-white);
}
.ez-btn--accent:hover { background: var(--ez-red-ink); box-shadow: var(--ez-shadow-red); }

.ez-btn--ghost-dark {
  background: transparent;
  color: var(--ez-white);
  border: 1px solid var(--ez-border-on-dark);
}
.ez-btn--ghost-dark:hover { background: rgba(255,255,255,.08); }

.ez-btn--ghost-light {
  background: transparent;
  color: var(--ez-ink);
  border: 1px solid var(--ez-border);
}
.ez-btn--ghost-light:hover { background: var(--ez-gray-100); }

.ez-btn--sm { padding: 10px 20px; font-size: var(--ez-fs-sm); }

.ez-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ez-border);
  transition: text-decoration-color var(--ez-dur-fast) var(--ez-ease), gap var(--ez-dur-fast) var(--ez-ease);
}
.ez-link-arrow:hover { text-decoration-color: currentColor; gap: 9px; }
.ez-link-arrow svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Icon tile: true 50% notch (square element) ---- */
.ez-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ez-notch);
  background: var(--ez-red-tint);
  color: var(--ez-red);
  flex-shrink: 0;
}
.ez-icon-tile svg {
  width: 24px; height: 24px;
  stroke: currentColor;
  stroke-width: var(--ez-stroke);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ez-icon-tile--dark { background: rgba(255,22,22,.12); }
.ez-icon-tile--lg { width: 64px; height: 64px; }
.ez-icon-tile--lg svg { width: 32px; height: 32px; stroke-width: var(--ez-stroke-lg); }

/* ---- Card: capped notch (rectangle) ---- */
.ez-card {
  background: var(--ez-white);
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-notch-card);
  padding: var(--ez-space-6);
  transition: transform var(--ez-dur) var(--ez-ease), box-shadow var(--ez-dur) var(--ez-ease), border-color var(--ez-dur) var(--ez-ease);
}
a.ez-card:hover, .ez-card.is-hoverable:hover {
  transform: translateY(-3px);
  box-shadow: var(--ez-shadow-lg);
  border-color: transparent;
}
.ez-card--dark {
  /* One step lighter than the section's own --ez-black, so the card reads
     as a raised panel instead of disappearing into the section behind it. */
  background: var(--ez-black-raised);
  color: var(--ez-white);
  border-color: var(--ez-border-on-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.ez-card--dark:hover { border-color: rgba(255,255,255,.28); }
/* Headings have their own explicit color (var(--ez-text), near-black) that
   otherwise wins over the card's inherited white text - without this,
   every heading in a dark card renders almost invisible on the dark
   background instead of inheriting white. */
.ez-card--dark h1, .ez-card--dark h2, .ez-card--dark h3,
.ez-card--dark h4, .ez-card--dark h5, .ez-card--dark h6 {
  color: var(--ez-text-on-dark);
}
.ez-card--dark p { color: var(--ez-text-on-dark-mute); }
.ez-card--flush { padding: 0; overflow: hidden; }

.ez-card__number {
  font-family: var(--ez-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ez-red);
  line-height: 1;
  margin-bottom: var(--ez-space-4);
}

.ez-card__media {
  border-radius: var(--ez-notch-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ez-gray-100);
  margin-bottom: var(--ez-space-4);
}
.ez-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Badge: pill for text tags, true notch for metric badges ---- */
.ez-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--ez-fs-sm);
  font-weight: 600;
  border-radius: var(--ez-r-pill);
  background: var(--ez-gray-100);
  color: var(--ez-text);
}
.ez-badge--metric {
  background: var(--ez-red);
  color: var(--ez-white);
  border-radius: var(--ez-notch);
  padding: 10px 16px 10px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.15;
}
.ez-badge--metric strong { font-size: 1.1rem; font-family: var(--ez-font-display); }
.ez-badge--metric span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }

/* ---- Ticker: continuous marquee, not a static row ----
   Track holds two identical groups back to back (group 2 is aria-hidden -
   it's a visual duplicate, not real content) and animates left by exactly
   one group-width, so the loop point is invisible regardless of how many
   words are configured. Speed scales to content length via a CSS variable
   set inline per-instance (see template-parts/section-trust-bar.php) so a
   1-word ticker doesn't whip past and a 12-word one doesn't crawl. */
.ez-ticker {
  overflow: hidden;
  border-block: 1px solid var(--ez-border-on-dark);
  margin-bottom: var(--ez-space-8);
}
.ez-ticker__track {
  display: flex;
  width: max-content;
  animation: ez-ticker-scroll var(--ez-ticker-duration, 24s) linear infinite;
}
.ez-ticker:hover .ez-ticker__track {
  animation-play-state: paused;
}
.ez-ticker__track.is-static {
  animation: none;
}
/* One spacing mechanism only: this flex gap, applied uniformly across
   every child (word, dot, word, dot, ...). Previously each word carried
   its own inline-flex gap AND its dot had a separate margin-left - two
   spacing rules stacked on the same gap, which is what produced an
   uneven gap next to one specific word instead of a uniform rhythm. */
.ez-ticker__group {
  display: flex;
  align-items: center;
  gap: var(--ez-space-8);
  padding-block: var(--ez-space-4);
  flex-shrink: 0;
  white-space: nowrap;
}
.ez-ticker__item {
  font-size: var(--ez-fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ez-text-on-dark-mute);
}
.ez-ticker__dot {
  width: 6px; height: 6px;
  flex-shrink: 0;
  background: var(--ez-red);
  border-radius: var(--ez-notch);
}
@keyframes ez-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Stats row ---- */
.ez-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--ez-space-6);
}
.ez-stat { display: flex; align-items: flex-start; gap: var(--ez-space-3); }
.ez-stat__bullet {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 4px;
}
.ez-stat__value {
  font-family: var(--ez-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ez-white);
  display: block;
}
.ez-stat__label {
  font-size: var(--ez-fs-sm);
  color: var(--ez-text-on-dark-mute);
}

/* ---- Accordion (FAQ) - real buttons, aria-driven ---- */
.ez-accordion__item {
  border-bottom: 1px solid var(--ez-border);
}
.ez-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-space-4);
  padding: var(--ez-space-5) 0;
  text-align: left;
  font-weight: 600;
  font-size: var(--ez-fs-body-lg);
  color: var(--ez-text);
}
.ez-accordion__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  position: relative;
}
.ez-accordion__icon::before, .ez-accordion__icon::after {
  content: '';
  position: absolute;
  background: var(--ez-red);
  transition: transform var(--ez-dur) var(--ez-ease);
}
.ez-accordion__icon::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.ez-accordion__icon::after { left: 50%; top: 0; height: 100%; width: 2px; margin-left: -1px; }
.ez-accordion__trigger[aria-expanded="true"] .ez-accordion__icon::after { transform: rotate(90deg); opacity: 0; }
.ez-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--ez-dur-slow) var(--ez-ease);
}
.ez-accordion__panel-inner {
  padding-bottom: var(--ez-space-5);
  color: var(--ez-text-mute);
}

/* ---- Filter bar (Work page) ---- */
.ez-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ez-space-2);
}
.ez-filter-btn {
  padding: 8px 18px;
  border-radius: var(--ez-r-pill);
  border: 1px solid var(--ez-border);
  font-size: var(--ez-fs-sm);
  font-weight: 600;
  color: var(--ez-text-mute);
  transition: all var(--ez-dur-fast) var(--ez-ease);
}
.ez-filter-btn:hover { border-color: var(--ez-ink); color: var(--ez-text); }
.ez-filter-btn[aria-selected="true"] {
  background: var(--ez-black);
  border-color: var(--ez-black);
  color: var(--ez-white);
}

/* ---- Forms ---- */
.ez-field { display: flex; flex-direction: column; gap: 6px; }
.ez-label { font-size: var(--ez-fs-sm); font-weight: 600; color: var(--ez-text); }
.ez-input, .ez-textarea, .ez-select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-r);
  background: var(--ez-white);
  font-size: var(--ez-fs-body);
  transition: border-color var(--ez-dur-fast) var(--ez-ease), box-shadow var(--ez-dur-fast) var(--ez-ease);
}
.ez-input:focus, .ez-textarea:focus, .ez-select:focus {
  border-color: var(--ez-red);
  box-shadow: 0 0 0 3px var(--ez-red-tint);
  outline: none;
}
.ez-textarea { resize: vertical; min-height: 120px; }
.ez-field--error .ez-input, .ez-field--error .ez-textarea { border-color: var(--ez-red); }
.ez-field__error { font-size: var(--ez-fs-sm); color: var(--ez-red-ink); }
.ez-field__hint { font-size: var(--ez-fs-sm); color: var(--ez-ink-faint); }
.ez-form-status { font-size: var(--ez-fs-sm); padding: var(--ez-space-3) var(--ez-space-4); border-radius: var(--ez-r); margin-top: var(--ez-space-3); }
.ez-form-status--success { background: #F0FFF4; color: #15803D; }
.ez-form-status--error { background: var(--ez-red-tint); color: var(--ez-red-ink); }

/* Honeypot - hidden from sighted users and keyboard tab order, but present in DOM for bots */
.ez-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- Breadcrumbs ---- */
.ez-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ez-space-2);
  font-size: var(--ez-fs-sm);
  color: var(--ez-ink-faint);
}
.ez-breadcrumbs a { color: var(--ez-ink-faint); }
.ez-breadcrumbs a:hover { color: var(--ez-red-ink); }
.ez-breadcrumbs__sep { opacity: .5; }