/* =========================================
   EPC Callout Bar (Slim / Utility style)
   ========================================= */

.epc-callout--bar {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 1.25rem;

  padding: 1rem 1.5rem;
  margin: 1.75rem 0;

  background: #f4f8fb;
  border: 1px solid #e3ebf3;
  border-radius: 16px;

  align-items: center;

  /* CRITICAL: ensures accent stripe aligns perfectly */
  overflow: hidden;
}

/* Left EPC colour accent — perfectly aligned */
.epc-callout--bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 6px;

  /* tuck under the border to avoid visual gap */
  transform: translateX(-1px);

  background: linear-gradient(
    to bottom,
    #0b7a4b,
    #4caf50,
    #f4c430,
    #f28c28,
    #e63946
  );

  /* parent handles rounding */
  border-radius: 0;
}

/* EPC icon badge (slightly smaller) */
.epc-callout__icon {
  width: 88px;
  height: 88px;

  background: #ffffff;
  border-radius: 14px;
  padding: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: 0 6px 18px rgba(11, 18, 32, 0.08);

  /* prevents grid stretching */
  align-self: center;
}

/* Keep image proportional inside square */
.epc-callout__icon img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  display: block;
}

/* -----------------------------------------
   Content (single-line desktop)
   Expected HTML:
   <div class="epc-callout__content">
     <strong>Find My EPC</strong>
     <span class="epc-callout__text">— ...</span>
   </div>
   ----------------------------------------- */

.epc-callout__content {
  display: flex;
  align-items: center;
  gap: 0.4rem;

  white-space: nowrap;
  overflow: hidden;
}

.epc-callout__content strong {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0b1220;
  flex: 0 0 auto;
}

.epc-callout__text {
  font-size: 0.95rem;
  color: #4b5d6b;

  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA */
.epc-callout--bar .btn-primary {
  white-space: nowrap;
  padding: 0.55rem 1rem;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.epc-callout--bar .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(11, 18, 32, 0.15);
}

/* -----------------------------------------
   Responsive: stack + allow wrapping
   ----------------------------------------- */

@media (max-width: 768px) {
  .epc-callout--bar {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
  }

  .epc-callout__icon {
    margin: 0 auto;
  }

  .epc-callout__content {
    white-space: normal;
    flex-direction: column;
    gap: 0.25rem;
  }

  .epc-callout__text {
    overflow: visible;
    text-overflow: clip;
  }
}