/* =========================================================================
   WHITE PAPERS
   Listing (page-white-papers.php), detail (single-white_paper.php), the
   shared card (template-parts/white-paper-card.php) and the download modal
   (white-paper-download.php).

   Tokens come from global.css - --primary #FF6900, --heading #18181B,
   --text #333, --light #F8F8F8. Nothing here restyles a shared component;
   the contact band on the listing is service.css's .a3-contact-cta untouched.

   Band rhythm matches the rest of the site: 120px vertical, 80px on phones.
   ========================================================================= */

/* ---------------------------------------------------------------- shared */

.a3-wp-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.a3-wp-eyebrow::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: var(--primary);
}

.a3-wp-eyebrow--onDark {
  color: #fff;
  justify-content: center;
}

.a3-wp-single .section-divider,
.a3-wp-listing .section-divider {
  display: block;
  width: 96px;
  height: 4px;
  margin: 24px 0;
  background: var(--primary);
}

/* The download button, in both its dark and light skins. */
.a3-wp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.a3-wp-btn:hover,
.a3-wp-btn:focus-visible {
  background: var(--primary-hover);
  color: #fff;
  transform: translateY(-2px);
}

.a3-wp-btn--light {
  background: #fff;
  color: var(--heading);
}

.a3-wp-btn--light:hover,
.a3-wp-btn--light:focus-visible {
  background: #fff;
  color: var(--primary);
}

/* ============================================================ 1. DETAIL HERO
   The banner is a photograph, so the scrim is drawn here rather than baked
   into the image - the client's banners arrive unretouched and several are
   light enough that white text on them would fail contrast. */

.a3-wp-hero {
  position: relative;
  padding: 140px 0 120px;
  background: #101013 var(--a3-wp-hero-bg, none) center / cover no-repeat;
  color: #fff;
  isolation: isolate;
}

.a3-wp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 10, 12, 0.94) 0%, rgba(10, 10, 12, 0.78) 48%, rgba(10, 10, 12, 0.45) 100%);
}

.a3-wp-hero__inner {
  max-width: 780px;
}

.a3-wp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.a3-wp-hero__badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 100px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.a3-wp-hero__pages {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 500;
}

.a3-wp-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.16;
}

.a3-wp-hero__subtitle {
  max-width: 640px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.6;
}

.a3-wp-hero__actions {
  margin-top: 38px;
}

/* ============================================================== 2. OVERVIEW */

.a3-wp-overview {
  padding: 120px 0 0;
  background: #fff;
}

.a3-wp-overview__heading {
  margin: 0;
  color: var(--heading);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.25;
}

.a3-wp-overview__text {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.78;
}

/* ================================================================= 3. INTRO */

.a3-wp-intro {
  padding: 90px 0;
  background: #fff;
}

.a3-wp-intro__media img,
.a3-wp-discover__media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

.a3-wp-intro__text p {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.78;
}

.a3-wp-intro__text p:last-child {
  margin-bottom: 0;
}

/* ============================================================== 4. DISCOVER
   The counter is drawn from CSS rather than stored per row, so deleting a
   row renumbers the rest instead of leaving a gap. */

.a3-wp-discover {
  padding: 120px 0;
  background: var(--light);
}

.a3-wp-discover__heading {
  margin: 0;
  color: var(--heading);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.28;
}

.a3-wp-discover__list {
  counter-reset: a3wp;
  list-style: none;
  margin: 0;
  padding: 0;
}

.a3-wp-discover__item {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}

.a3-wp-discover__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.a3-wp-discover__num {
  counter-increment: a3wp;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.a3-wp-discover__num::before {
  content: counter(a3wp);
}

.a3-wp-discover__text {
  color: var(--heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.62;
  padding-top: 8px;
}

/* =============================================================== 5. RESULTS */

.a3-wp-stats {
  padding: 120px 0;
  background: #fff;
}

.a3-wp-stats__heading {
  margin: 0;
  color: var(--heading);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.28;
}

.a3-wp-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.a3-wp-stats__card {
  padding: 30px 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--light);
  transition: border-color var(--transition), transform var(--transition);
}

.a3-wp-stats__card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
}

.a3-wp-stats__number {
  display: block;
  color: var(--primary);
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1;
}

.a3-wp-stats__label {
  display: block;
  margin-top: 12px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

/* ================================================================ 6. CTA BAND */

.a3-wp-cta {
  padding: 0 0 120px;
  background: #fff;
}

.a3-wp-cta__box {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 46px 50px;
  border-radius: 20px;
  background: linear-gradient(96deg, #1a1a1f 0%, #2a1a10 100%);
  color: #fff;
}

.a3-wp-cta__cover {
  flex: 0 0 96px;
  width: 96px;
}

.a3-wp-cta__cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.a3-wp-cta__body {
  flex: 1 1 auto;
}

.a3-wp-cta__heading {
  margin: 0;
  color: #fff;
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.3;
}

.a3-wp-cta__meta {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}

.a3-wp-cta__action {
  flex: 0 0 auto;
}

/* ================================================================ THE CARD
   This is the Blogs page's "Whitepapers & Resources" card, measured off
   .a3-blg-paper in blogs.css and reproduced here to the same numbers: square
   corners, a 228x304 cover on its own tinted panel, a plain blue kind label
   (not a pill), and a footer rule with a bare download glyph.

   Copied rather than shared because blogs.css is enqueued only on the Blogs
   and Newsroom templates, and this card also appears on the listing and on
   single white papers. If the two ever need to diverge, they can - but today
   they are deliberately identical, which is why the numbers below carry the
   same comments as their originals.
   ======================================================================== */

.a3-wp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* The node's card is a fixed 496, which is what holds the gap between the
   title and the footer rule constant whether the title runs to one line or
   two. min-height, not height, so a very long title still grows. */
.a3-wp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 496px;
  padding: 25px;
  background: #fcfcfd;
  border: 1px solid #e7eaf0;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Hover picks up the brand orange rather than going black - the near-black
   edge read as the card washing out rather than lighting up. */
.a3-wp-card:hover,
.a3-wp-card:focus-within {
  border-color: var(--primary, #ff6900);
  box-shadow: 0 8px 30px rgba(255, 105, 0, 0.14);
}

.a3-wp-card:hover .a3-wp-card__title a {
  color: var(--primary, #ff6900);
}

.a3-wp-card__title a,
.a3-wp-card__dl svg path {
  transition:
    color 0.18s ease,
    stroke 0.18s ease;
}

/* The cover: 228 x 304 on a tinted panel with its own hairline. */
.a3-wp-card__cover {
  display: block;
  height: 304px;
  overflow: hidden;
  background: #f4f5f9;
  border: 1px solid #e7eaf0;
}

.a3-wp-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blue, bold, 12/16, uppercase - the kind of asset, not a category. Plain
   text, no pill. */
.a3-wp-card__kind {
  display: block;
  margin-top: 24px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #3b82f6;
}

.a3-wp-card__title {
  display: block;
  flex: 0 0 auto;
  margin: 8px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 22.5px;
}

.a3-wp-card__title a {
  color: #030303;
  text-decoration: none;
}

/* Footer rule with the page count left and the download glyph right. Pushed to
   the card's bottom so cards with one-line titles still line up. */
.a3-wp-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid #e7eaf0;
}

.a3-wp-card__pages,
.a3-wp-card__read {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #676f7b;
}

/* Shown in place of the page count while none is on file. */
.a3-wp-card__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color var(--transition);
}

.a3-wp-card:hover .a3-wp-card__read {
  color: var(--primary);
}

/* A bare glyph, no box. It is a <button> rather than a <span> because it opens
   the download gate, and global.css styles every <button> as a site CTA -
   min-height 56, padding 10/36, a border and a background. All of that is
   unwound here; left alone it rendered a 56px-tall box that inflated the
   footer to 67px and left a band of dead space above it. */
.a3-wp-card__dl {
  display: flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: #030303;
  cursor: pointer;
}

.a3-wp-card:hover .a3-wp-card__dl,
.a3-wp-card__dl:hover,
.a3-wp-card__dl:focus-visible {
  color: var(--primary);
}

/* ============================================================ LISTING PAGE */

/* The same banner treatment every other listing hero uses (a3-gd-hero on
   Guides and Blog Categories, and the Awards/Careers/CSR/Journey heroes):
   540px tall, the photograph on ::before, and a left-to-right #1A1A1A ramp
   from 90% to 40% on ::after. Copied rather than shared because those live in
   guides.css, which this file must not reach into. */
.a3-wp-lhero {
  position: relative;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #1a1a1a;
  color: #fff;
  text-align: center;
}

.a3-wp-lhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--a3-wp-hero-bg);
  background-size: cover;
  background-position: center;
}

.a3-wp-lhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(26, 26, 26, 0.9),
    rgba(26, 26, 26, 0.4)
  );
}

.a3-wp-lhero__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 913px);
  margin: 0 auto;
}

.a3-wp-lhero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.16;
}

.a3-wp-lhero__text {
  margin: 20px auto 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.7;
}

.a3-wp-index {
  padding: 90px 0 120px;
  background: #fff;
}

.a3-wp-index__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 38px;
}

.a3-wp-index__count {
  margin: 0;
  color: #6B7280;
  font-size: 14px;
}

.a3-wp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.a3-wp-filter {
  padding: 9px 18px;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: #fff;
  color: var(--text);
  font-family: var(--font-family);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
}

.a3-wp-filter:hover,
.a3-wp-filter.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.a3-wp-index__empty {
  margin: 40px 0 0;
  color: #6B7280;
  text-align: center;
}

/* =============================================================== 7. RELATED */

.a3-wp-related {
  padding: 0 0 120px;
  background: #fff;
}

.a3-wp-related .a3-wp-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}

.a3-wp-related__heading {
  margin: 0;
  color: var(--heading);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
}

/* ========================================================== DOWNLOAD MODAL */

body.a3-wpdl-open {
  overflow: hidden;
}

.a3-wpdl {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
}

.a3-wpdl[hidden] {
  display: none;
}

.a3-wpdl__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(3px);
}

.a3-wpdl__dialog {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.a3-wpdl__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--heading);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.a3-wpdl__close:hover,
.a3-wpdl__close:focus-visible {
  background: var(--primary);
  color: #fff;
}

.a3-wpdl__aside {
  position: relative;
  background: #101013;
  overflow: hidden;
}

.a3-wpdl__aside > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.a3-wpdl__aside--plain {
  background: linear-gradient(160deg, #1a1a1f 0%, #2a1a10 100%);
}

/* The cover of the paper being requested, filling the panel edge to edge so
   one modal can identify whichever card opened it.

   Full bleed, not a contained thumbnail. Two earlier attempts floated the
   cover in the middle of the panel - first on a flat dark ground, then over a
   blurred blow-up of itself - and both read as a picture stranded in a tall
   empty column, because these covers are near-black and the panel is 620px
   tall. Cropping is the right trade here: the panel is decoration that says
   which paper you asked for, and the whole cover is already on the card behind
   the modal. This is also what the live site does with its own modal art. */
.a3-wpdl__aside-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.a3-wpdl__aside-cover[hidden] {
  display: none;
}

.a3-wpdl__aside-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.a3-wpdl__body {
  padding: 46px 42px;
}

.a3-wpdl__eyebrow {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.a3-wpdl__eyebrow[hidden] {
  display: none;
}

.a3-wpdl__heading {
  margin: 0;
  color: var(--heading);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
}

.a3-wpdl__paper {
  margin: 10px 0 0;
  color: var(--heading);
  font-size: 15px;
  font-weight: 600;
}

.a3-wpdl__paper[hidden] {
  display: none;
}

.a3-wpdl__text {
  margin: 12px 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}

.a3-wpdl__form {
  margin-top: 22px;
}

.a3-wpdl__missing {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: #6B7280;
  font-size: 14px;
}

/* CF7 inside the modal - the form is authored once and reused, so it is
   styled here rather than in the form's own markup. */
.a3-wpdl__form .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 14px;
}

.a3-wpdl__form input[type="text"],
.a3-wpdl__form input[type="email"],
.a3-wpdl__form input[type="tel"],
.a3-wpdl__form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--heading);
  font-family: var(--font-family);
  font-size: 15px;
}

.a3-wpdl__form input:focus,
.a3-wpdl__form textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

.a3-wpdl__form .wpcf7-submit {
  width: 100%;
  padding: 15px 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.a3-wpdl__form .wpcf7-submit:hover {
  background: var(--primary-hover);
}

.a3-wpdl__done[hidden] {
  display: none;
}

.a3-wpdl__tick {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(255, 105, 0, 0.12);
  color: var(--primary);
}

.a3-wpdl__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 15px 28px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition);
}

.a3-wpdl__cta[hidden] {
  display: none;
}

.a3-wpdl__cta:hover,
.a3-wpdl__cta:focus-visible {
  background: var(--primary-hover);
  color: #fff;
}

/* ============================================================== RESPONSIVE */

@media (max-width: 1199px) {
  .a3-wp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .a3-wp-hero {
    padding: 110px 0 90px;
  }

  .a3-wp-overview,
  .a3-wp-discover,
  .a3-wp-stats {
    padding: 80px 0;
  }

  .a3-wp-overview {
    padding-bottom: 0;
  }

  .a3-wp-intro {
    padding: 70px 0;
  }

  .a3-wp-cta,
  .a3-wp-related {
    padding-bottom: 80px;
  }

  .a3-wp-cta__box {
    flex-wrap: wrap;
    gap: 24px;
    padding: 36px 32px;
  }

  .a3-wp-index {
    padding: 70px 0 80px;
  }

  .a3-wp-related .a3-wp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The modal's art panel costs a third of a tablet's width and carries no
     information, so it is dropped rather than shrunk. */
  .a3-wpdl__dialog {
    grid-template-columns: 1fr;
  }

  .a3-wpdl__aside {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Two up, the same as .a3-blg-papers__grid does. At 390 the content box is
     350, so a card is ~167 - the desktop 25px padding and 304 cover are far
     too big for that, and the fixed 496 min-height would leave a tall empty
     gap under a short title. All three scale down together. */
  .a3-wp-grid,
  .a3-wp-related .a3-wp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .a3-wp-card {
    min-height: 0;
    padding: 16px;
  }

  .a3-wp-card__cover {
    height: 180px;
  }

  .a3-wp-card__kind {
    margin-top: 14px;
    font-size: 11px;
  }

  /* The card drops its min-height here, so the footer's `margin-top: auto` has
     no slack left to absorb and the rule lands hard against the title. The gap
     has to be an explicit margin at these widths. */
  .a3-wp-card__title {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 19px;
  }

  .a3-wp-card__foot {
    padding-top: 14px;
  }

  .a3-wp-stats__grid {
    grid-template-columns: 1fr;
  }

  .a3-wp-hero {
    padding: 90px 0 70px;
  }

  .a3-wp-lhero {
    height: auto;
    min-height: 420px;
    padding: 72px 0;
  }

  .a3-wp-cta__box {
    padding: 30px 24px;
  }

  .a3-wp-cta__cover {
    flex-basis: 72px;
    width: 72px;
  }

  .a3-wp-cta__action,
  .a3-wp-cta__action .a3-wp-btn {
    width: 100%;
    justify-content: center;
  }

  .a3-wpdl {
    padding: 0;
  }

  .a3-wpdl__dialog {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .a3-wpdl__body {
    padding: 56px 22px 36px;
  }
}

/* Phones keep two per row rather than dropping to one - a single full-width
   portrait cover ran ~500px tall and pushed the twelfth card a long way down.
   The 767 rules above already fit a 320px screen, so only the gap and the
   cover height come down further. */
@media (max-width: 479px) {
  .a3-wp-grid,
  .a3-wp-related .a3-wp-grid {
    gap: 14px;
  }

  .a3-wp-card {
    padding: 14px;
  }

  .a3-wp-card__cover {
    height: 150px;
  }

  .a3-wp-card__kind {
    margin-top: 16px;
  }

  .a3-wp-card__title {
    margin-top: 6px;
    font-size: 14px;
    line-height: 18px;
  }

  .a3-wp-card__foot {
    padding-top: 14px;
  }

  /* The chevron costs more room than it earns beside an 11px label. */
  .a3-wp-card__read svg {
    display: none;
  }
}