/* ZiFPIM Resources — public evidence library */
.resources-public-page {
  --resources-ink: #262525;
  --resources-grey: #515251;
  --resources-blue: #3558A7;
  --resources-gold: #E2A814;
  --resources-paper: #f5f0e8;
  --resources-line: rgba(38, 37, 37, .16);
  --resources-page: min(92vw, 1440px);
  background: #fff;
}

.resources-page {
  overflow: clip;
}

.resources-hero,
.resources-feature,
.resources-library {
  width: var(--resources-page);
  margin-inline: auto;
}

.resources-hero {
  padding: clamp(152px, 15vw, 220px) 0 clamp(72px, 8vw, 122px);
  border-bottom: 1px solid var(--resources-line);
}

.resources-hero__label,
.resources-section-head,
.resources-kicker,
.resources-meta-line,
.resources-row__meta,
.resources-filter button {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.resources-hero__label {
  display: flex;
  gap: 12px;
  color: var(--resources-blue);
}

.resources-hero__label span {
  color: var(--resources-gold);
}

.resources-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .55fr);
  gap: clamp(54px, 8vw, 140px);
  align-items: end;
  margin-top: clamp(38px, 5vw, 72px);
}

.resources-hero h1 {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(4rem, 8.1vw, 9rem);
  line-height: .88;
  letter-spacing: -.07em;
  text-wrap: balance;
}

.resources-hero__aside {
  padding-bottom: .45rem;
}

.resources-hero__aside > p {
  max-width: 31rem;
  margin: 0;
  color: var(--resources-grey);
  font-size: clamp(1.08rem, 1.45vw, 1.35rem);
  line-height: 1.62;
}

.resources-hero__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--resources-line);
  color: var(--resources-grey);
  font-size: .74rem;
  font-weight: 700;
}

.resources-hero__topics span:not(:last-child)::after {
  content: "·";
  margin-left: 18px;
  color: var(--resources-gold);
}

.resources-feature {
  padding: clamp(74px, 8vw, 124px) 0 clamp(98px, 10vw, 160px);
}

.resources-section-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--resources-ink);
  color: var(--resources-ink);
}

.resources-section-head span:last-child {
  color: var(--resources-grey);
}

.resources-feature__article {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.25fr);
  gap: clamp(58px, 9vw, 154px);
  align-items: start;
  padding-top: clamp(52px, 6vw, 90px);
}

.resources-cover-stage {
  position: relative;
  width: min(100%, var(--featured-cover-width, 420px));
  height: var(--featured-cover-height, auto);
  margin-inline: auto;
}

.resources-cover-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.resources-cover-link[aria-disabled="true"] {
  pointer-events: none;
}

.resources-cover-link:focus-visible {
  outline: 2px solid var(--resources-gold);
  outline-offset: 7px;
}

.resources-cover-stage__shadow {
  position: absolute;
  z-index: -1;
  left: 10%;
  right: 8%;
  bottom: -30px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(22,22,22,.25) 0%, rgba(22,22,22,0) 74%);
  filter: blur(10px);
  opacity: .34;
  transition: transform .45s ease, opacity .45s ease;
}

/* Match the approved Featured Resource cover on the homepage. */
.resources-cover {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 34px;
  overflow: hidden;
  background: var(--resources-blue);
  color: #fff;
  border-top: 10px solid var(--resources-gold);
  box-shadow: 0 24px 52px rgba(38,37,37,.14);
  transform:
    perspective(1400px)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(-.45deg)
    skewY(0deg);
  transform-origin: 18% 52%;
  transition:
    transform .62s cubic-bezier(.22,.78,.24,1),
    box-shadow .62s ease;
}

/* The homepage cover does not use the Resources-page diagonal overlay. */
.resources-cover::before {
  display: none;
  content: none;
}

.resources-cover-stage:hover .resources-cover,
.resources-cover-stage:focus-within .resources-cover {
  transform:
    perspective(1100px)
    rotateX(2.8deg)
    rotateY(-13deg)
    rotateZ(-1.3deg)
    skewY(-.7deg)
    translate3d(8px,-10px,0)
    scale(1.025);
  box-shadow:
    30px 38px 72px rgba(38,37,37,.20),
    -7px 7px 18px rgba(38,37,37,.06);
}

.resources-cover-stage:hover .resources-cover-stage__shadow,
.resources-cover-stage:focus-within .resources-cover-stage__shadow {
  transform: translate3d(14px,8px,0) scale(.88,.80);
  opacity: .22;
}

.resources-cover__image {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

.resources-cover__brand,
.resources-cover__type,
.resources-cover strong,
.resources-cover small {
  position: relative;
  z-index: 2;
}

.resources-cover__brand {
  margin-bottom: auto;
  font-weight: 800;
  letter-spacing: -.02em;
}

.resources-cover__type {
  color: var(--resources-gold);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.resources-cover strong {
  max-width: 10ch;
  margin-top: 20px;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.05em;
}

.resources-cover small {
  max-width: 26ch;
  margin-top: 12px;
  color: #c8c8c8;
  font-size: .78rem;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .resources-cover,
  .resources-cover-stage__shadow {
    transition: none;
  }
}

.resources-feature__copy {
  max-width: 780px;
}

.resources-meta-line {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--resources-line);
  color: var(--resources-blue);
}

.resources-meta-line time {
  color: var(--resources-grey);
}

.resources-feature__copy h2 {
  max-width: 12ch;
  margin: clamp(28px, 3vw, 42px) 0 10px;
  font-size: clamp(3.05rem, 5.7vw, 6.65rem);
  line-height: .91;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.resources-feature__copy h3 {
  max-width: 36ch;
  margin: 0 0 30px;
  color: var(--resources-grey);
  font-size: clamp(1.2rem, 1.7vw, 1.7rem);
  font-weight: 500;
  line-height: 1.4;
}

.resources-feature__copy > p {
  max-width: 63ch;
  margin: 0;
  color: var(--resources-grey);
  font-size: clamp(1rem, 1.18vw, 1.15rem);
  line-height: 1.78;
}

.resources-feature__detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 24px;
  color: var(--resources-grey);
  font-size: .82rem;
  line-height: 1.5;
}

.resources-feature__detail[hidden] {
  display: none;
}

.resources-feature__detail span + span::before {
  content: "·";
  margin-right: 24px;
  color: var(--resources-gold);
}

.resources-action {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  min-height: 54px;
  margin-top: clamp(34px, 4vw, 54px);
  padding: 0 0 10px;
  border-bottom: 2px solid var(--resources-ink);
  color: var(--resources-ink);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-decoration: none;
  text-transform: uppercase;
}

.resources-action b {
  color: var(--resources-gold);
  font-size: 1.1rem;
  transition: transform .3s cubic-bezier(.2,.75,.2,1);
}

.resources-action:hover b,
.resources-action:focus-visible b {
  transform: translate(4px, -4px);
}

.resources-action--disabled {
  opacity: .5;
  pointer-events: none;
}

.resources-library {
  padding: clamp(82px, 9vw, 142px) 0 clamp(100px, 11vw, 180px);
  border-top: 1px solid var(--resources-line);
}

.resources-library__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .55fr);
  gap: clamp(48px, 8vw, 130px);
  align-items: end;
}

.resources-kicker {
  display: block;
  margin-bottom: 24px;
  color: var(--resources-blue);
}

.resources-library__intro h2 {
  margin: 0;
  font-size: clamp(3.55rem, 6.7vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.065em;
}

.resources-library__intro > p {
  max-width: 31rem;
  margin: 0 0 .45rem;
  color: var(--resources-grey);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.68;
}

.resources-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  margin-top: clamp(42px, 5vw, 72px);
  padding: 19px 0;
  border-top: 1px solid var(--resources-line);
  border-bottom: 1px solid var(--resources-line);
}

.resources-filter[hidden] {
  display: none;
}

.resources-filter button {
  position: relative;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--resources-grey);
  cursor: pointer;
}

.resources-filter button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 1px;
  height: 2px;
  background: var(--resources-gold);
  transition: right .3s cubic-bezier(.2,.75,.2,1);
}

.resources-filter button:hover,
.resources-filter button:focus-visible,
.resources-filter button.is-active {
  color: var(--resources-ink);
}

.resources-filter button.is-active::after,
.resources-filter button:hover::after,
.resources-filter button:focus-visible::after {
  right: 0;
}

.resources-index {
  margin-top: clamp(30px, 4vw, 52px);
  border-top: 1px solid var(--resources-ink);
}

.resources-row {
  display: grid;
  grid-template-columns: 64px minmax(150px, .45fr) minmax(0, 1.4fr) minmax(115px, auto);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: clamp(25px, 3vw, 42px) 0;
  border-bottom: 1px solid var(--resources-line);
  color: inherit;
  text-decoration: none;
  transition: background .28s ease, padding .28s ease;
}

.resources-row[href] {
  cursor: pointer;
}

.resources-row[href]:hover,
.resources-row[href]:focus-visible {
  margin-inline: -18px;
  padding-inline: 18px;
  background: var(--resources-paper);
  outline: none;
}

.resources-row__number {
  padding-top: 3px;
  color: var(--resources-gold);
  font-size: .72rem;
  font-weight: 800;
}

.resources-row__meta {
  display: grid;
  gap: 9px;
  color: var(--resources-blue);
}

.resources-row__meta time {
  color: var(--resources-grey);
  font-size: .63rem;
}

.resources-row__main h3 {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(1.65rem, 2.7vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
  transition: transform .3s cubic-bezier(.2,.75,.2,1);
}

.resources-row[href]:hover .resources-row__main h3,
.resources-row[href]:focus-visible .resources-row__main h3 {
  transform: translateX(6px);
}

.resources-row__main p {
  max-width: 48ch;
  margin: 11px 0 0;
  color: var(--resources-grey);
  font-size: .93rem;
  line-height: 1.55;
}

.resources-row__status,
.resources-row__action {
  justify-self: end;
  padding-top: 2px;
  color: var(--resources-grey);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.resources-row__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--resources-ink);
}

.resources-row__action b {
  color: var(--resources-gold);
  font-size: 1rem;
}

.resources-empty {
  padding: clamp(64px, 7vw, 100px) 0;
  border-bottom: 1px solid var(--resources-line);
}

.resources-empty strong {
  display: block;
  max-width: 18ch;
  font-size: clamp(2rem, 4vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.resources-empty p {
  max-width: 40rem;
  margin: 18px 0 0;
  color: var(--resources-grey);
}

@media (max-width: 1100px) {
  .resources-hero__grid,
  .resources-library__intro {
    grid-template-columns: 1fr .62fr;
    gap: 52px;
  }

  .resources-hero h1 {
    font-size: clamp(4rem, 8.8vw, 7.6rem);
  }

  .resources-feature__article {
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.1fr);
    gap: 62px;
  }

  .resources-row {
    grid-template-columns: 48px 150px minmax(0, 1fr) auto;
    gap: 26px;
  }
}

@media (max-width: 820px) {
  .resources-hero {
    padding-top: 130px;
  }

  .resources-hero__grid,
  .resources-feature__article,
  .resources-library__intro {
    grid-template-columns: 1fr;
  }

  .resources-hero__grid {
    gap: 38px;
  }

  .resources-hero h1 {
    max-width: 11ch;
    font-size: clamp(3.6rem, 12vw, 6.9rem);
  }

  .resources-hero__aside {
    max-width: 35rem;
  }

  .resources-feature__article {
    gap: 64px;
  }

  .resources-cover-stage {
    width: min(76vw, 410px);
    height: auto;
    margin-left: 0;
  }

  .resources-cover-link {
    height: auto;
  }

  .resources-cover {
    height: auto;
    aspect-ratio: .72;
  }

  .resources-feature__copy h2 {
    max-width: 14ch;
  }

  .resources-library__intro {
    gap: 28px;
  }

  .resources-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .resources-row__meta {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: 15px;
  }

  .resources-row__main {
    grid-column: 2 / -1;
  }

  .resources-row__number {
    grid-row: 1 / span 2;
  }

  .resources-row__status,
  .resources-row__action {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 560px) {
  .resources-public-page {
    --resources-page: calc(100vw - 34px);
  }

  .resources-hero {
    padding-top: 116px;
    padding-bottom: 68px;
  }

  .resources-hero__label {
    font-size: .62rem;
  }

  .resources-hero h1 {
    max-width: none;
    font-size: clamp(3.1rem, 15.2vw, 5rem);
    line-height: .9;
  }

  .resources-hero__topics {
    display: grid;
    gap: 7px;
  }

  .resources-hero__topics span::after {
    display: none;
  }

  .resources-section-head {
    align-items: flex-end;
    font-size: .61rem;
  }

  .resources-cover-stage {
    width: min(88vw, 350px);
  }

  .resources-feature__copy h2 {
    max-width: none;
    font-size: clamp(2.75rem, 13vw, 4.45rem);
  }

  .resources-meta-line {
    font-size: .61rem;
  }

  .resources-feature__detail {
    display: grid;
    gap: 5px;
  }

  .resources-feature__detail span + span::before {
    display: none;
  }

  .resources-library__intro h2 {
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .resources-filter {
    gap: 5px 18px;
  }

  .resources-filter button {
    font-size: .62rem;
  }

  .resources-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
    padding: 27px 0;
  }

  .resources-row__number {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .resources-row__meta,
  .resources-row__main,
  .resources-row__status,
  .resources-row__action {
    grid-column: 2;
  }

  .resources-row__meta {
    grid-row: 1;
    flex-wrap: wrap;
  }

  .resources-row__main {
    grid-row: 2;
  }

  .resources-row__status,
  .resources-row__action {
    grid-row: 3;
    justify-self: start;
    margin-top: 8px;
  }

  .resources-row__main h3 {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
  }

  .resources-row[href]:hover,
  .resources-row[href]:focus-visible {
    margin-inline: -8px;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resources-cover,
  .resources-cover-stage__shadow,
  .resources-action b,
  .resources-row,
  .resources-row__main h3,
  .resources-filter button::after {
    transition: none !important;
  }
}


/* ZiFPIM icon watermarks — selected sections */
.resources-hero,
.resources-feature,
.resources-library {
  position: relative;
  isolation: isolate;
}

.resources-hero::after,
.resources-feature::before,
.resources-library::after {
  content: "";
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.resources-hero::after {
  top: clamp(72px, 10vw, 118px);
  right: clamp(0px, 2vw, 18px);
  width: clamp(170px, 18vw, 260px);
  background-image: url('/assets/logo/ZiFPIM_Icon.svg');
  opacity: .05;
}

.resources-feature::before {
  left: clamp(-18px, -2vw, -6px);
  top: clamp(132px, 16vw, 210px);
  width: clamp(136px, 14vw, 210px);
  background-image: url('/assets/logo/ZiFPIM_Icon.svg');
  opacity: .032;
}

.resources-library::after {
  right: clamp(-10px, 1vw, 16px);
  bottom: clamp(10px, 2vw, 28px);
  width: clamp(150px, 16vw, 225px);
  background-image: url('/assets/logo/ZiFPIM_Icon.svg');
  opacity: .028;
}

.resources-hero > *,
.resources-feature > *,
.resources-library > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .resources-hero::after {
    top: 104px;
    right: 10px;
    width: clamp(110px, 28vw, 145px);
    opacity: .048;
  }

  .resources-feature::before {
    left: auto;
    right: -10px;
    top: 44px;
    width: clamp(104px, 26vw, 138px);
    opacity: .026;
  }

  .resources-library::after {
    right: 6px;
    bottom: 8px;
    width: clamp(96px, 26vw, 128px);
    opacity: .024;
  }
}