:root {
  --overlay-from: rgba(0, 0, 0, 0.55);
  --overlay-to:   rgba(0, 0, 0, 0.25);
  --pill-bg:      rgba(20, 20, 20, 0.70);
  --text:         #ffffff;

  --quote-size: clamp(1rem, 1.6vw + .6rem, 1.35rem);
  --name-size: clamp(1rem, 1.2vw + .6rem, 1.15rem);
  --line-height: 1.35;
  --pill-radius: 8px;
}


.testimonial {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  /* Padding acts as safe insets for text */
  padding: clamp(12px, 2.5vw, 28px);
  min-height: 360px; 
}


.testimonial > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 0;
}


.testimonial::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--overlay-from) 0%,
    var(--overlay-to) 40%,
    var(--overlay-from) 100%
  );
  z-index: 1;    
  pointer-events: none;
}


.testimonial p {
  position: relative;
  z-index: 2;          
  max-width: var(--max-w);
  margin: 1em;     
  color: var(--text);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: var(--line-height);
  text-transform: uppercase;
  display: inline;              
  background: var(--pill-bg);
  padding: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-size: var(--quote-size);
  display: block;
}

.testimonial p:last-of-type {
  font-size: var(--name-size);
  letter-spacing: .03em;
  margin-bottom: 4em;
}

@media (min-width: 480px) {
  .testimonial { min-height: 420px; }
}
@media (min-width: 768px) {
  .testimonial { min-height: 480px; }
}

@media (prefers-contrast: more) {
  :root {
    --pill-bg: rgba(0, 0, 0, 0.85);
    --overlay-from: rgba(0, 0, 0, 0.70);
    --overlay-to: rgba(0, 0, 0, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.banner-text p {
    background: #DA1936;
    padding: 1em 3em 1em 1em;
    margin: 2px 0;
    color: white;
    border: 3px solid white;
}

.banner-text {
    width: fit-content;
    margin-left: 10%;
}

.widget-width {
    padding-left: 5px;
}