/* ============================================================
   USA PAYMENTS — BLOG CARDS
   Styles the Loop Item template (#3087). Consumes tokens.css.
   Card markup comes from Elementor, so everything here hangs off
   the .bcard__* classes rather than Elementor's generated ids —
   re-exporting or rebuilding the template won't break it.
   ============================================================ */

/* ---------- card shell -------------------------------------- */
.e-loop-item > .e-con,
.e-loop-item > .elementor-element {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;              /* clips the image to the radius */
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.e-loop-item > .e-con:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(16,31,63,.08), 0 18px 40px rgba(16,31,63,.12);
}

/* Elementor puts default gaps between widgets; the card controls its
   own rhythm through per-element margins below. */
.e-loop-item > .e-con { gap: 0; padding: 0; }

/* ---------- image + badge ------------------------------------
   The badge overlays the image. Position context goes on the image
   widget, so the badge stays put regardless of card height. */
.bcard__img { position: relative; margin: 0; }
.bcard__img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}

.bcard__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  margin: 0;
}
.bcard__badge > * {
  display: inline-block;
  background: var(--white);
  color: var(--crimson);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(16,31,63,.14);
  white-space: nowrap;
}

/* ---------- body -------------------------------------------- */
.bcard__meta,
.bcard__title,
.bcard__excerpt,
.bcard__link { padding-inline: 22px; }

.bcard__meta {
  margin: 20px 0 10px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bcard__sep { opacity: .5; }

.bcard__title { margin: 0 0 10px; }
.bcard__title .elementor-heading-title {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--navy);
}
.bcard__title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.bcard__title a:hover { color: var(--crimson); }

.bcard__excerpt {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  flex-grow: 1;                  /* pushes the link to the bottom */
}
/* Three lines, then ellipsis — keeps cards even when excerpts differ
   in length, which they will until every post has a written one. */
.bcard__excerpt p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bcard__link { margin: 0 0 22px; }
.bcard__link .elementor-button {
  background: transparent;
  color: var(--crimson);
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  transition: gap .2s var(--ease);
}
.bcard__link .elementor-button::after {
  content: "→";
  margin-left: 7px;
  display: inline-block;
  transition: transform .2s var(--ease);
}
.bcard__link .elementor-button:hover { transform: none; }
.bcard__link .elementor-button:hover::after { transform: translateX(3px); }

/* ---------- featured card -----------------------------------
   Same card, image on the left. Applied by adding .bcard--featured
   to the Loop Item container, or to a standalone card. */
@media (min-width: 900px) {
  .bcard--featured > .e-con { flex-direction: row; }
  .bcard--featured .bcard__img { flex: 0 0 46%; }
  .bcard--featured .bcard__img img { height: 100%; aspect-ratio: auto; }
  .bcard--featured .bcard__meta { margin-top: 28px; }
  .bcard--featured .bcard__title .elementor-heading-title { font-size: 28px; }
  .bcard--featured .bcard__excerpt { font-size: 15px; }
  .bcard--featured .bcard__excerpt p { -webkit-line-clamp: 4; }
}

/* ---------- title override -----------------------------------
   The template carries tablet 44px / mobile 34px, inherited from the
   H1 token when the widget was copied — larger on tablet than on
   desktop. Corrected here rather than in the template so a re-export
   can't reintroduce it. */
@media (max-width: 1199px) {
  .bcard__title .elementor-heading-title { font-size: 19px !important; }
}
@media (max-width: 767px) {
  .bcard__title .elementor-heading-title { font-size: 18px !important; }
  .bcard__meta, .bcard__title, .bcard__excerpt, .bcard__link {
    padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .e-loop-item > .e-con,
  .bcard__link .elementor-button::after { transition: none; }
}


/* ============================================================
   BLOG INDEX PAGE
   ============================================================ */

/* ---------- hero -------------------------------------------- */
.blog-hero__title .elementor-heading-title { font-weight: 700; }
.blog-hero__sub p { max-width: 620px; }

.usap-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 430px;
  width: 100%;
}
.usap-search__icon {
  position: absolute;
  left: 16px;
  width: 17px; height: 17px;
  color: rgba(255,255,255,.65);
  pointer-events: none;
}
.usap-search__input {
  width: 100%;
  height: 46px;
  padding: 0 18px 0 44px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 14px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.usap-search__input::placeholder { color: rgba(255,255,255,.55); }
.usap-search__input:focus {
  outline: none;
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.16);
}
/* Safari draws its own clear button on type=search */
.usap-search__input::-webkit-search-decoration,
.usap-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- featured ----------------------------------------
   Lifted over the hero's lower edge, as in the design. */
.blog-featured { margin-top: -80px; z-index: 2; position: relative; }
@media (max-width: 899px) { .blog-featured { margin-top: -56px; } }

.bcard--featured .elementor-loop-container { gap: 0 !important; }
.bcard--featured .bcard__badge > *::before {
  content: "Featured";
  color: var(--crimson);
  border: 1px solid var(--crimson);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  margin-right: 8px;
}

/* ---------- latest + filters --------------------------------- */
.blog-latest__head { flex-wrap: wrap; }

.usap-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.usap-chip {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease);
}
.usap-chip:hover { border-color: var(--navy); }
.usap-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
@media (max-width: 767px) {
  .usap-filters { justify-content: flex-start; }
  /* A wrapped six-chip block eats the screen on mobile; scroll it instead. */
  .usap-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .usap-filters::-webkit-scrollbar { display: none; }
}

/* ---------- pagination --------------------------------------- */
.elementor-pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.elementor-pagination .page-numbers {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  text-decoration: none;
}
.elementor-pagination .page-numbers.current {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

/* ---------- newsletter --------------------------------------- */
.newsletter { background: var(--grad-heading); }
.newsletter__title .elementor-heading-title { font-size: 30px; line-height: 1.25; }

.form--newsletter .elementor-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  max-width: 560px;
}
.form--newsletter .elementor-field-group { flex: 1 1 260px; margin: 0; }
.form--newsletter .elementor-field-label { display: none; }
.form--newsletter .elementor-field-textual {
  height: 48px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 0 20px;
}
.form--newsletter .elementor-field-textual::placeholder { color: rgba(255,255,255,.6); }
.form--newsletter .elementor-field-textual:focus {
  border-color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.18);
  box-shadow: none;
}
.form--newsletter .elementor-button {
  height: 48px;
  border-radius: var(--r-pill);
  padding: 0 30px;
  font-weight: 600;
  background: #fff;
  color: var(--navy);
}
@media (max-width: 599px) {
  .form--newsletter .elementor-field-group,
  .form--newsletter .elementor-field-type-submit { flex: 1 1 100%; }
  .form--newsletter .elementor-button { width: 100%; }
  .newsletter__title .elementor-heading-title { font-size: 24px; }
}