/* ==================================================
   HOMEPAGE PROGRAM CARD TEXT OVERLAYS

   This file keeps the editable card wording out of the
   artwork. The card JPG files can therefore contain only
   the emblem/background photography and no baked-in text.
   ================================================== */

.program-card-copy,
.program-card-cta {
  position: absolute;
  z-index: 2;
}

/*
  The copy begins to the right of the emblem, matching the
  placement in the approved concept artwork.
*/
.program-card-copy {
  top: 11.5%;
  right: 4.5%;
  left: 35.5%;

  display: flex;
  flex-direction: column;
  gap: 10px;

  color: #f6f0df;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
}

.program-card-title,
.program-card-description {
  display: block;
}

.program-card-title {
  margin: 0;
  font-family: "Arial Narrow", "Liberation Sans Narrow", "PT Sans Narrow", "DejaVu Sans Condensed", Arial, sans-serif;
  font-size: clamp(16px, 1.62vw, 25px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
}

.program-card-description {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(12px, 1.12vw, 17px);
  font-weight: 400;
  line-height: 1.45;
}

/*
  The CTA is real HTML text rather than part of the image.
  It intentionally remains a <span> because the entire card
  is already the clickable <a> element.
*/
.program-card-cta {
  bottom: 4.6%;
  left: 5.1%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 45px;
  padding: 8px 14px 8px 17px;
  color: #f6f0df;
  background: rgba(31, 57, 27, 0.92);
  border: 1px solid #bda45f;
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
  font-family: "Arial Narrow", "Liberation Sans Narrow", "PT Sans Narrow", "DejaVu Sans Condensed", Arial, sans-serif;
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.program-card-cta svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Match the blue CTA treatment of the Cub Scout card. */
.program-card-pack .program-card-cta {
  background: rgba(18, 58, 103, 0.94);
}

/* Repository remains forest green like the approved concept. */
.program-card-repository .program-card-cta {
  background: rgba(18, 72, 38, 0.94);
}

/* Keep the text readable as the three-column layout narrows. */
@media (max-width: 1110px) and (min-width: 761px) {
  .program-card-copy {
    left: 34%;
  }

  .program-card-title {
    font-size: clamp(15px, 1.75vw, 20px);
  }

  .program-card-description {
    font-size: clamp(11px, 1.25vw, 14px);
  }

  .program-card-cta {
    min-height: 39px;
    padding: 7px 11px 7px 13px;
    font-size: clamp(11px, 1.25vw, 14px);
  }
}

/* Cards stack on mobile, so their type can return to a larger size. */
@media (max-width: 760px) {
  .program-card-copy {
    top: 11.5%;
    right: 5%;
    left: 35%;
  }

  .program-card-title {
    font-size: clamp(18px, 5.3vw, 26px);
  }

  .program-card-description {
    font-size: clamp(14px, 3.7vw, 18px);
  }

  .program-card-cta {
    min-height: 43px;
    padding: 8px 14px 8px 16px;
    font-size: clamp(13px, 3.6vw, 17px);
  }
}

@media (max-width: 390px) {
  .program-card-copy {
    left: 33%;
  }

  .program-card-title {
    white-space: normal;
  }
}