/* PPP Featured Box — full-bleed overlay card */

.ppp-fb {
  --ppp-fb-scrim-a: rgba(9, 26, 40, .18);
  --ppp-fb-scrim-b: rgba(9, 26, 40, .88);
  --ppp-fb-scrim-a-h: rgba(0, 78, 134, .35);
  --ppp-fb-scrim-b-h: rgba(0, 60, 105, .94);
  --ppp-fb-lift: -8px;
  --ppp-fb-zoom: 1.07;
  --ppp-fb-rule-c: #0068B2;
  --ppp-fb-rule-c-h: #fff;
  --ppp-fb-rule-w: 34px;
  --ppp-fb-rule-w-h: 72px;
  --ppp-fb-rule-h: 3px;
  --ppp-fb-rule-x: left;
  --ppp-fb-desc-gap: 18px;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #221E1F;
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
}

.ppp-fb:hover,
.ppp-fb--hover { transform: translateY(var(--ppp-fb-lift)); }

.ppp-fb__media { position: absolute; inset: 0; overflow: hidden; line-height: 0; }
.ppp-fb__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ppp-fb:hover .ppp-fb__media img,
.ppp-fb--hover .ppp-fb__media img { transform: scale(var(--ppp-fb-zoom)); }

.ppp-fb__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              var(--ppp-fb-scrim-a) 0%,
              var(--ppp-fb-scrim-a) 20%,
              var(--ppp-fb-scrim-b) 100%);
  transition: background .4s ease;
}
.ppp-fb:hover .ppp-fb__scrim,
.ppp-fb--hover .ppp-fb__scrim {
  background: linear-gradient(180deg,
              var(--ppp-fb-scrim-a-h) 0%,
              var(--ppp-fb-scrim-a-h) 20%,
              var(--ppp-fb-scrim-b-h) 100%);
}

.ppp-fb__body { position: relative; z-index: 2; padding: 24px 22px 26px; }

.ppp-fb__title {
  position: relative;
  margin: 0 0 12px;
  padding-bottom: 12px;
  color: #fff;
}
.ppp-fb__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--ppp-fb-rule-left, 0);
  width: var(--ppp-fb-rule-w);
  height: var(--ppp-fb-rule-h);
  background: var(--ppp-fb-rule-c);
  transition: width .35s ease, background .35s ease;
}
.ppp-fb:hover .ppp-fb__title::after,
.ppp-fb--hover .ppp-fb__title::after {
  width: var(--ppp-fb-rule-w-h);
  background: var(--ppp-fb-rule-c-h);
}

/* rule follows the text alignment */
.ppp-fb[style*="--ppp-fb-rule-x: center"] .ppp-fb__title::after,
.ppp-fb[style*="--ppp-fb-rule-x:center"] .ppp-fb__title::after {
  left: 50%;
  transform: translateX(-50%);
}
.ppp-fb[style*="--ppp-fb-rule-x: right"] .ppp-fb__title::after,
.ppp-fb[style*="--ppp-fb-rule-x:right"] .ppp-fb__title::after {
  left: auto;
  right: 0;
}

/* reveal — grid-rows animates to auto height, unlike max-height guesswork */
.ppp-fb__reveal {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .4s ease, opacity .3s ease;
}
.ppp-fb__revealinner { overflow: hidden; min-height: 0; }

.ppp-fb--reveal .ppp-fb__reveal { grid-template-rows: 0fr; opacity: 0; }
.ppp-fb--reveal:hover .ppp-fb__reveal,
.ppp-fb--reveal.ppp-fb--hover .ppp-fb__reveal { grid-template-rows: 1fr; opacity: 1; }

.ppp-fb__desc { margin: 0 0 var(--ppp-fb-desc-gap); color: #CBD6E0; }

.ppp-fb__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 3px;
  color: #fff;
  background-color: transparent;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.ppp-fb__arrow { transition: transform .3s ease; }
.ppp-fb:hover .ppp-fb__arrow,
.ppp-fb--hover .ppp-fb__arrow { transform: translateX(4px); }

/* keyboard users get the same reveal as mouse users */
.ppp-fb:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ppp-fb--reveal:focus-visible .ppp-fb__reveal { grid-template-rows: 1fr; opacity: 1; }
.ppp-fb:focus-visible .ppp-fb__media img { transform: scale(var(--ppp-fb-zoom)); }

/* touch devices have no hover — never hide content there */
@media (hover: none) {
  .ppp-fb--reveal .ppp-fb__reveal { grid-template-rows: 1fr; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ppp-fb,
  .ppp-fb__media img,
  .ppp-fb__scrim,
  .ppp-fb__reveal,
  .ppp-fb__title::after,
  .ppp-fb__arrow { transition: none; }
  .ppp-fb:hover { transform: none; }
}