/**
 * SINGLE PRESS RELEASE - node 95:16849
 * =========================================================================
 * `.a3-pr-*`. A release is its own layout, not the article template: centred
 * hero, dateline, pull-quote, ABOUT boilerplate, and a media-contact sidebar
 * in place of a contents rail.
 *
 * Loaded with blog-category.css, which supplies the .a3-bc-cta card, and
 * service.css, which supplies the FAQ band.
 * ========================================================================= */

.a3-pr {
  background: #ffffff;
}

/* ---- hero: centred over a dark photo ---- */
.a3-pr-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 72px 24px;
  overflow: hidden;
  background-color: #1a1a1a;
  background-image: var(--a3-pr-hero);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

.a3-pr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 26, 0.62);
}

.a3-pr-hero__inner {
  position: relative;
  width: min(100%, 860px);
}

.a3-pr-hero__heading {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: -0.8px;
  color: #ffffff;
}

.a3-pr-hero__date {
  margin: 24px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.78);
}

/* ---- body: article + sidebar, the same rhythm as the listings ---- */
.a3-pr-inner {
  width: min(100% - 48px, var(--a3-container-max));
  margin-inline: auto;
  padding: 0 24px;
}

.a3-pr-body {
  padding: 72px 0 80px;
}

.a3-pr-body .a3-pr-inner {
  display: grid;
  grid-template-columns: minmax(0, 757fr) minmax(0, 331fr);
  column-gap: 96px;
  align-items: start;
}

/* ---- the release itself -----------------------------------------------
 * Everything in this column comes out of the editor, so these are element
 * selectors on standard WordPress output rather than classes on markup this
 * template controls.
 * --------------------------------------------------------------------- */
.a3-pr-article {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #3f3f46;
}

.a3-pr-article p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 26px;
  color: #3f3f46;
}

/* The dateline paragraph opens the release and is set bold in full. It is the
 * first thing in the editor, so it needs no markup of its own - but an author
 * who bolds it by hand gets the same result rather than a double-bold. */
.a3-pr-article > p:first-child,
.a3-pr-article > p:first-child strong {
  font-weight: 700;
  color: #030303;
}

.a3-pr-article h2 {
  margin: 40px 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  color: #030303;
}

.a3-pr-article h3 {
  margin: 32px 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: #030303;
}

/* The closing boilerplate: an <hr> and a small heading. Both are things an
 * author inserts from the editor toolbar, so the pattern needs no field. */
.a3-pr-article hr {
  height: 0;
  margin: 56px 0 28px;
  border: 0;
  border-top: 2px solid #030303;
  opacity: 1;
}

.a3-pr-article h4 {
  margin: 0 0 12px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #030303;
}

.a3-pr-article hr ~ p {
  font-size: 13px;
  line-height: 22px;
  color: #676f7b;
}

/* ---- pull-quote: a plain editor blockquote ---- */
.a3-pr-article blockquote {
  margin: 32px 0;
  padding: 28px 32px;
  background: #f4f5f9;
  border-left: 4px solid #030303;
}

.a3-pr-article blockquote p {
  margin: 0;
  font-size: 19px;
  font-style: italic;
  font-weight: 500;
  line-height: 31px;
  color: #030303;
}

.a3-pr-article blockquote cite {
  display: block;
  margin-top: 18px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  color: #3f3f46;
}

.a3-pr-article ul,
.a3-pr-article ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.a3-pr-article li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 26px;
}

.a3-pr-article img {
  max-width: 100%;
  height: auto;
}

.a3-pr-article a {
  color: #030303;
  text-decoration: underline;
}

.a3-pr-article a:hover {
  color: var(--primary, #ff6900);
}

/* ---- sidebar ----------------------------------------------------------
 * Nodes 95:16910 (media contact), 95:16936 (resources), 95:16952 (share).
 * The three blocks do NOT share a label style: the card's header is 14px /
 * 0.7px tracking with a blue glyph, the other two are 12px / 0.6px. Read off
 * the nodes, not assumed.
 * --------------------------------------------------------------------- */
.a3-pr-side {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.a3-pr-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 33px;
  background: #fcfcfd;
  border: 1px solid #e7eaf0;
}

.a3-pr-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 17px;
  border-bottom: 1px solid #e7eaf0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #030303;
}

.a3-pr-card__head svg {
  flex: 0 0 16px;
}

.a3-pr-card__who {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.a3-pr-card__name {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #030303;
}

.a3-pr-card__role {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #676f7b;
}

.a3-pr-card__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.a3-pr-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #030303;
  text-decoration: none;
}

/* The glyph sits in a 32px tile, not loose against the text. */
.a3-pr-card__chip {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f4f5f9;
  color: #030303;
}

.a3-pr-card__row:hover {
  color: var(--primary, #ff6900);
}

.a3-pr-card__row:hover .a3-pr-card__chip {
  color: var(--primary, #ff6900);
}

/* ---- RESOURCES / SHARE RELEASE ---- */
.a3-pr-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.a3-pr-block__label {
  margin: 0;
  padding-bottom: 17px;
  border-bottom: 1px solid #e7eaf0;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #030303;
}

.a3-pr-block__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.a3-pr-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 17px;
  border: 1px solid #e7eaf0;
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #030303;
  text-align: center;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    color 0.18s ease;
}

.a3-pr-dl:hover {
  border-color: var(--primary, #ff6900);
  color: var(--primary, #ff6900);
}

.a3-pr-share {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Native <button>s, so global.css has to be answered: it squares the corners,
 * centres content and floors the height at 56. */
.a3-pr-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 13px 1px;
  background: transparent;
  border: 1px solid #e7eaf0;
  border-radius: 0;
  color: #030303;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    color 0.18s ease;
}

.a3-pr-share__btn:hover,
.a3-pr-share__btn:focus-visible {
  border-color: var(--primary, #ff6900);
  color: var(--primary, #ff6900);
}

/* The network list, opened by the first button. Same 46px rows and per-brand
 * hover colour as the article rail, so the two read as one component. */
.a3-pr-block--share {
  position: relative;
}

.a3-pr-share__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e7eaf0;
}

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

.a3-pr-share__net {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 17px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #676f7b;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.a3-pr-share__menu li + li .a3-pr-share__net {
  border-top: 1px solid #e7eaf0;
}

.a3-pr-share__net:hover,
.a3-pr-share__net:focus-visible {
  background: #f4f5f9;
  color: #030303;
}

/* Brand colour only on the row being pointed at. */
.a3-pr-share__net--facebook:hover {
  color: #1877f2;
}
.a3-pr-share__net--x:hover {
  color: #000000;
}
.a3-pr-share__net--linkedin:hover {
  color: #0a66c2;
}
.a3-pr-share__net--whatsapp:hover {
  color: #25d366;
}
.a3-pr-share__net--telegram:hover {
  color: #229ed9;
}
.a3-pr-share__net--reddit:hover {
  color: #ff4500;
}

.a3-pr-share__btn[aria-expanded="true"] {
  border-color: #030303;
  color: #030303;
}

/* Confirmation after a copy - the glyph steps aside for the word. */
.a3-pr-share__btn.is-copied {
  border-color: #030303;
}

.a3-pr-share__btn.is-copied svg {
  display: none;
}

.a3-pr-share__btn.is-copied::after {
  content: "Copied";
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: #030303;
}

/* ---- More Release Notes - node 95:17015 -------------------------------
 * Near neighbour of .a3-blg-paper on the blogs page, but not the same card:
 * that one closes with a page count and a download glyph, this one with a
 * ruled date and Read Now. Only the cover treatment is shared.
 * --------------------------------------------------------------------- */
.a3-pr-more {
  padding: 97px 0 96px;
  background: #ffffff;
  border-top: 1px solid #e7eaf0;
}

.a3-pr-more__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
}

.a3-pr-more__heading {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.2px;
  color: #030303;
}

.a3-pr-more__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
}

.a3-pr-note {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.a3-pr-note__media {
  position: relative;
  display: block;
  height: 280px;
  margin-bottom: 24px;
  overflow: hidden;
  background: #f4f5f9;
}

.a3-pr-note__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.a3-pr-note:hover .a3-pr-note__media img {
  transform: scale(1.04);
}

.a3-pr-note__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  background: #030303;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.a3-pr-note__kind {
  display: block;
  margin-bottom: 12px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #676f7b;
}

/* Two lines, always - the node fixes the height at 62.39 so every card's rule
 * and date line up whatever the title length. */
.a3-pr-note__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 62.4px;
  margin-bottom: 24px;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 31.2px;
  color: #030303;
}

.a3-pr-note__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid #e7eaf0;
}

.a3-pr-note__date {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #676f7b;
}

.a3-pr-note__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #030303;
}

.a3-pr-note:hover .a3-pr-note__cta {
  color: var(--primary, #ff6900);
}

@media (max-width: 991.98px) {
  .a3-pr-body .a3-pr-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .a3-pr-hero__heading {
    font-size: 32px;
    line-height: 42px;
  }

  .a3-pr-more {
    padding: 64px 0;
  }

  .a3-pr-more__inner {
    gap: 32px;
  }

  .a3-pr-more__heading {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.6px;
  }

  .a3-pr-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .a3-pr-note__media {
    height: 220px;
  }

  .a3-pr-note__title {
    font-size: 20px;
    line-height: 27px;
    min-height: 54px;
  }
}

@media (max-width: 767.98px) {
  .a3-pr-inner {
    width: 100%;
    padding-inline: 20px;
  }

  .a3-pr-hero {
    min-height: 320px;
    padding: 56px 20px;
  }

  .a3-pr-hero__heading {
    font-size: 26px;
    line-height: 34px;
  }

  .a3-pr-more__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .a3-pr-note__media {
    height: 200px;
  }
}

/* The grid becomes a Slick carousel below 768 (press-release.js). Slick needs
 * a track, not a grid, so the display is handed back while it is active. */
@media (max-width: 767.98px) {
  .a3-pr-more__grid.slick-initialized {
    display: block;
  }

  .a3-pr-more__grid .slick-slide {
    height: auto;
  }

  /* One card per view, so the cover keeps the node's height rather than the
   * squashed one the two-up breakpoint gives it. */
  .a3-pr-more__grid .slick-slide .a3-pr-note__media {
    height: 240px;
  }

  /* Dots: grey circles, the active one an orange pill. Slick draws its bullet
   * through a ::before glyph, which cannot stretch - so that is switched off
   * and the button itself becomes the dot. */
  .a3-pr-more__grid .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
  }

  .a3-pr-more__grid .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
  }

  .a3-pr-more__grid .slick-dots li button {
    width: 8px;
    height: 8px;
    min-height: 0; /* global.css floors every button at 56 */
    padding: 0;
    border: 0;
    /* !important because global.css sets border-radius: 0 !important on every
     * button, and a slick dot is a button - without it the pill and the
     * circles both render as squares. */
    border-radius: 999px !important;
    background: #d4d4d8;
    text-indent: -9999px; /* the label stays for screen readers */
    overflow: hidden;
    transition:
      width 0.25s ease,
      background-color 0.25s ease;
  }

  .a3-pr-more__grid .slick-dots li button::before {
    display: none;
  }

  .a3-pr-more__grid .slick-dots li.slick-active button {
    width: 26px;
    background: var(--primary, #ff6900);
  }

  @media (prefers-reduced-motion: reduce) {
    .a3-pr-more__grid .slick-dots li button {
      transition: none;
    }
  }
}

/* -------------------------------------------------------------------------
   Logo standing in for a missing photograph.

   Releases carried over from the blog do not all have a featured image - the
   2022 Women's Day post never had one. a3_pr_image() falls back to the logo
   from Header Settings, the same fallback page-blog-category.php uses, and
   flags it so it can be styled as artwork rather than a photo: a logo wants
   containing and centring, and cropping it to fill a 280px band would slice
   the mark in half.

   The listing rows need nothing here - they reuse
   .a3-bc-post__thumb--placeholder, and blog-category.css is already enqueued
   on the Newsroom template. The release HERO deliberately takes no fallback:
   it paints its image under a 62% dark scrim so the white title reads, and a
   logo behind that is a dim ghost - the clean dark band it renders with no
   image is better.
   ------------------------------------------------------------------------- */

.a3-pr-note__thumb--placeholder {
  object-fit: contain !important;
  padding: 40px;
  background: #f4f5f9;
}

/* The hover zoom is right for a photograph and wrong for a mark. */
.a3-pr-note:hover .a3-pr-note__thumb--placeholder {
  transform: none;
}