/* -------------------- */
/* Promo Banner */
.promo-banner {
  position: relative;
  width: 100%;
  min-height: 350px;          /* desktop height */
  height: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* Background image */
  background: url("../images/vnail-cover.jpg") center center no-repeat;
  background-size: cover;
}

.promo-banner .content {
  position: relative;
  z-index: 2;
  font-size: clamp(1.8rem, 5vw, 3.5rem); /* responsive font for desktop */
  font-weight: bold;
  line-height: 1.3;
  max-width: 90%;
  margin: 0 auto;
  color: white;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

/* Ensure all text inside .content (p, span, etc.) inherits font size */
.promo-banner .content p,
.promo-banner .content span {
  font-size: inherit;
  line-height: inherit;
  margin: 0; /* remove default paragraph spacing */
}

/* Highlight span inside content */
.promo-banner .content span {
  color: #800020; /* Burgundy */
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
}

/* -------------------- */
/* Tablets & smaller screens */
@media (max-width: 768px) {
  .promo-banner {
    min-height: 280px;
  }
  .promo-banner .content {
    font-size: clamp(1.5rem, 6vw, 3rem);
    line-height: 1.25;
  }
  .promo-banner .content span {
    padding: 3px 6px;
  }
}

/* -------------------- */
/* Phones */
@media (max-width: 480px) {
  .promo-banner {
    min-height: 220px;
    height: 350px;
  }
  .promo-banner .content {
    font-size: clamp(1.2rem, 7vw, 2.2rem);
    line-height: 1.2;
    padding-top: clamp(10px, 5vh, 30px); /* dynamic top padding */
  }
  .promo-banner .content span {
    padding: 2px 4px;
  }
}