/* ============================================================
   SANO | CTA Banner — CSS panel
   ============================================================ */

.sano-ctab {
  container-type: inline-size;
  container-name: sano-ctab;

  /* ---- TYPOGRAPHY — replace "inherit" with the theme font ---- */
  --ctab-font: inherit;

  /* ---- FALLBACKS ---- */
  --ctab-bg: #4B2145;
  --ctab-heading: #FFFFFF;
  --ctab-sub: #FFFFFF;
  --ctab-accent: #F4511E;
  --ctab-btn-text: #FFFFFF;
  --ctab-hover-scale: 1.02;

  padding: 0;
  font-family: var(--ctab-font);
}

/* 32px on all four sides at every width. The padding sits inside
   the coloured box, so the max width below is the width of the
   banner itself, not of its text. */
.sano-ctab__inner {
  position: relative;              /* anchor for the stretched link */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ctab-gap, 40px);
  max-width: var(--ctab-max, 1140px);
  margin-inline: auto;
  padding: var(--ctab-pad-y, 32px) var(--ctab-pad-x, 32px);
  border-radius: var(--ctab-radius, 20px);
  background: var(--ctab-bg);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}

/* Takes the leftover space, which pushes the button right */
.sano-ctab__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Heading size is printed by the require_css block in the HTML
   panel, driven by the Styles tab field. Flat, never a clamp:
   the value below is the fallback and must stay in step. */
.sano-ctab__heading {
  margin: 0;
  color: var(--ctab-heading);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.sano-ctab__sub {
  margin: 10px 0 0;
  color: var(--ctab-sub);
  font-size: 16px;
  line-height: 1.5;
  opacity: .82;
  text-wrap: pretty;
}

/* ---- BUTTON ----------------------------------------------
   The button no longer scales on its own: the whole banner does.
   Two nested scales would read as uncoordinated.
----------------------------------------------------------- */
.sano-ctab__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 14px 28px;
  border: 1px solid var(--ctab-accent);
  border-radius: var(--ctab-btn-radius, 999px);
  background: var(--ctab-accent);
  color: var(--ctab-btn-text);
  font-family: var(--ctab-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.sano-ctab__btn:focus-visible {
  outline: 2px solid var(--ctab-btn-text);
  outline-offset: 3px;
}

/* ---- STRETCHED LINK ---------------------------------------
   Makes the whole banner clickable without nesting links, so the
   markup stays valid and screen readers announce one link.
----------------------------------------------------------- */
.sano-ctab__inner.is-clickable .sano-ctab__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--ctab-radius, 20px);
}

.sano-ctab__inner.is-clickable { cursor: pointer; }

.sano-ctab__cta-native {
  flex: 0 0 auto;
  display: inline-flex;
  max-width: 100%;
}

.sano-ctab__cta-native img { max-width: 100%; height: auto; }

/* ---- HOVER ------------------------------------------------
   Gated behind a real pointer. On touch, :hover fires on tap and
   leaves the banner enlarged until you tap elsewhere.
----------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .sano-ctab__inner:hover {
    transform: scale(var(--ctab-hover-scale, 1.02));
  }

  /* Darkens whether you hover the button or anywhere on the banner */
  .sano-ctab__btn:hover,
  .sano-ctab__inner:hover .sano-ctab__btn {
    background: color-mix(in srgb, var(--ctab-accent) 86%, #000);
    border-color: color-mix(in srgb, var(--ctab-accent) 86%, #000);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sano-ctab__inner { transition: none; }
  .sano-ctab__inner:hover { transform: none; }
}

/* ---- Fallback for browsers without container queries ------ */
@supports not (container-type: inline-size) {
  @media (max-width: 780px) {
    .sano-ctab__inner { flex-direction: column; align-items: stretch; gap: 28px; }
    .sano-ctab__btn, .sano-ctab__cta-native { width: 100%; justify-content: center; }
  }
  @media (max-width: 560px) {
    .sano-ctab__text { text-align: center; }
  }
}