/* npc/cta variants. The outro look itself comes from .npc-widget in core.css and the skin. */

.npc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.npc-cta__phone {
  flex-basis: 100%;
  margin: 4px 0 0;
}

.npc-cta__note {
  margin: 16px 0 0;
  font-size: .95rem;
}

.npc-cta .npc-widget__subtitle + .npc-widget__subtitle { margin-top: 12px; }

/* band (brand colour) and soft (alternate background): the colour paints the whole row, content in the container */
.npc-cta:is(.is-cta-band, .is-cta-soft) {
  padding: clamp(56px, 7vw, 96px) 0;
}

.npc-cta:is(.is-cta-band, .is-cta-soft) .npc-cta__inner {
  text-align: center;
}

.npc-cta.is-cta-band {
  background: var(--npc-primary);
  color: var(--npc-btn-color);
}

.npc-cta.is-cta-soft {
  background: var(--npc-bg-alt);
}

/* An embed (booking form, widget) fills the container per Width: core.css caps .npc-widget__content at 680px
   and the centred variants put the body in col-lg-10, both meant for text. */
.npc-cta:is(.is-cta-outro, .is-cta-band, .is-cta-soft) .npc-cta__body:has(> .npc-widget__content) {
  flex: 0 0 100%;
  max-width: 100%;
}

.npc-cta .npc-widget__content {
  max-width: none;
}

.npc-cta.is-cta-band :is(.npc-cta__note, .npc-cta__note a) {
  color: inherit;
}

.npc-cta.is-cta-band :is(.npc-widget__title, .npc-widget__subtitle, .npc-cta__phone, .npc-cta__phone a) {
  color: inherit;
}

.npc-cta.is-cta-band .btn-primary {
  background: var(--npc-btn-color);
  border-color: var(--npc-btn-color);
  color: var(--npc-primary);
}

.npc-cta.is-cta-band .btn-outline-primary {
  border-color: currentColor;
  color: inherit;
}

/* split: photo beside the text on a soft card */
.npc-cta:is(.is-cta-split, .is-cta-guarantee) {
  padding: clamp(24px, 4vw, 48px) 0;
}

.npc-cta:is(.is-cta-split, .is-cta-guarantee) .npc-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--npc-bg-alt);
  border-radius: var(--npc-band-radius);
  overflow: hidden;
}

.npc-cta:is(.is-cta-split, .is-cta-guarantee).has-image .npc-cta__inner { grid-template-columns: 2fr 3fr; }
.npc-cta:is(.is-cta-split, .is-cta-guarantee).has-image.is-media-right .npc-cta__inner { grid-template-columns: 3fr 2fr; }
.npc-cta:is(.is-cta-split, .is-cta-guarantee).is-media-right .npc-cta__media { order: 2; }

.npc-cta:is(.is-cta-split, .is-cta-guarantee) .npc-cta__media {
  margin: 0;
  min-height: 280px;
}

.npc-cta:is(.is-cta-split, .is-cta-guarantee) .npc-cta__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* The core sample seal (blocks/cta/seal.svg) shows whole, not cropped like a photo. */
.npc-cta.is-cta-guarantee .npc-cta__media img[src$="/blocks/cta/seal.svg"] {
  object-fit: contain;
  padding: clamp(24px, 4vw, 48px);
  max-height: 360px;
  margin: auto;
}

.npc-cta:is(.is-cta-split, .is-cta-guarantee) .npc-cta__body {
  align-self: center;
  padding: clamp(28px, 4vw, 56px);
}

.npc-cta:is(.is-cta-split, .is-cta-guarantee) .npc-widget__subtitle { margin-left: 0; }
.npc-cta:is(.is-cta-split, .is-cta-guarantee) .npc-cta__actions { justify-content: flex-start; }

/* strip: compact bar, text left and buttons right */
.npc-cta.is-cta-strip {
  padding: 24px 0;
}

.npc-cta.is-cta-strip .npc-cta__body {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 32px;
  align-items: center;
  background: var(--npc-bg-alt);
  border-left: 4px solid var(--npc-primary);
  border-radius: var(--npc-card-radius);
  padding: 24px 32px;
}

.npc-cta.is-cta-strip .npc-widget__title {
  grid-column: 1;
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.npc-cta.is-cta-strip .npc-widget__subtitle {
  grid-column: 1;
  max-width: none;
  margin: 4px 0 0;
}

.npc-cta.is-cta-strip .npc-widget__content {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0 !important; /* .mt-4 is a Bootstrap utility with !important */
}

.npc-cta.is-cta-strip .npc-cta__actions { justify-content: flex-end; }

/* Editor only: Bootstrap's .btn base is not loaded in the editor canvas */
.editor-styles-wrapper .npc-cta .btn {
  display: inline-block;
  padding: var(--npc-btn-pad);
  border: 1px solid;
  border-radius: var(--npc-btn-radius);
  text-decoration: none;
}

@media (max-width: 767px) {
  .npc-cta:is(.is-cta-split, .is-cta-guarantee).has-image .npc-cta__inner,
  .npc-cta:is(.is-cta-split, .is-cta-guarantee).has-image.is-media-right .npc-cta__inner { grid-template-columns: 1fr; }
  .npc-cta:is(.is-cta-split, .is-cta-guarantee).is-media-right .npc-cta__media { order: 0; }
  .npc-cta.is-cta-strip .npc-cta__body { grid-template-columns: 1fr; row-gap: 16px; }
  .npc-cta.is-cta-strip .npc-widget__content { grid-column: 1; grid-row: auto; }
  .npc-cta.is-cta-strip .npc-cta__actions { justify-content: flex-start; }
}

/* Guarantee: the split layout with a seal or badge image, shown whole and smaller than a photo. */
.npc-cta.is-cta-guarantee.has-image .npc-cta__inner { grid-template-columns: 1fr 3fr; align-items: center; }
.npc-cta.is-cta-guarantee.has-image.is-media-right .npc-cta__inner { grid-template-columns: 3fr 1fr; }
.npc-cta.is-cta-guarantee .npc-cta__media { aspect-ratio: auto; background: none; }
.npc-cta.is-cta-guarantee .npc-cta__media img { width: 100%; max-width: 220px; height: auto; margin: 0 auto; object-fit: contain; border-radius: 0; }

/* Offer: a coupon card, the offer line in the brand colour. */
.npc-cta.is-cta-offer .npc-cta__inner {
  margin: 0 auto;
  max-width: 920px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px);
  border: 2px dashed var(--npc-primary);
  border-radius: var(--npc-band-radius);
  background: var(--npc-bg-alt);
}
.npc-cta.is-cta-offer .npc-cta__body { max-width: none; flex: 1 1 auto; }
.npc-cta__badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--npc-btn-bg);
  color: var(--npc-btn-color);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.npc-cta__offer {
  margin: 4px 0 8px;
  color: var(--npc-primary);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
}
.npc-cta__expiry { margin: 12px 0 0; color: var(--npc-text-muted); font-size: .9rem; }
@media (max-width: 767.98px) {
  .npc-cta.is-cta-guarantee.has-image .npc-cta__inner,
  .npc-cta.is-cta-guarantee.has-image.is-media-right .npc-cta__inner { grid-template-columns: 1fr; }
  .npc-cta.is-cta-guarantee .npc-cta__media img { max-width: 160px; }
}

/* A zone's phone link reads "or call …", as the old phone line did. */
.npc-cta .npc-cta__phone-link[href^="tel:"]::before { content: "or call "; }

/* Zones: the body zone's buttons and widget sit where .npc-cta__actions / .npc-widget__content put them. */
.npc-cta .npc-zone--body .wp-block-buttons:not(.is-content-justification-left, .is-content-justification-right, .is-content-justification-space-between) { justify-content: center; }
.npc-cta:is(.is-cta-split, .is-cta-guarantee) .npc-zone--body .wp-block-buttons:not(.is-content-justification-center, .is-content-justification-right) { justify-content: flex-start; }
.npc-cta.is-cta-strip .npc-zone--body { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; column-gap: 32px; align-items: center; }
.npc-cta.is-cta-strip .npc-zone--body > * { grid-column: 1; }
.npc-cta.is-cta-strip .npc-zone--body > :is(.wp-block-buttons, .npc-lead-widget) { grid-column: 2; grid-row: 1 / span 2; margin: 0; justify-content: flex-end; }
@media (max-width: 767.98px) {
  .npc-cta.is-cta-strip .npc-zone--body { grid-template-columns: 1fr; row-gap: 16px; }
  .npc-cta.is-cta-strip .npc-zone--body > :is(.wp-block-buttons, .npc-lead-widget) { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}