/* TrustUs — the in-article call to action, and the panel it opens ---------------
   The block the client drops into a page from the editor, and the panel that
   borrows the footer's form when it is pressed.
   Pairs with inc/section-cta-modal.php and assets/cta-modal.js. */

/* --- The block in the article ---------------------------------------------- */
/* Flex rather than a two-column grid: the block the client inserts has an
   icon in front of the copy, and the older hand-written one does not, so the
   row has to hold two shapes or three. */
.tu-cta,
.tu-cta > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
}
/* A group block wraps its children in an inner container on some WordPress
   versions and not on others, so the row is laid out at both levels: whichever
   one actually holds the icon, the copy and the button does the work, and the
   other has a single child and no gap to show for it. */
.tu-cta {
  margin-block: clamp(28px, 4vw, 40px);
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--r-surface, 12px);
  background: var(--red, #a7001e);
  color: #fff;
}
.tu-cta__title {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 800;
  line-height: 1.4;
}
.tu-cta__body {
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 15px;
  line-height: 1.7;
}
/* The icon and the copy and the button, whichever of them are present. The
   last selector catches the plain <div> the older shape puts the copy in. */
.tu-cta__icon { flex: 0 0 auto; margin: 0; }
.tu-cta__icon img { display: block; width: clamp(52px, 6vw, 76px); height: auto; }
.tu-cta__copy,
.tu-cta > div:not([class*="tu-cta__"]):not(.wp-block-buttons):not(.wp-block-group__inner-container) { flex: 1 1 240px; }
/* width:auto because WordPress lays a buttons block out as a full-width flex
   row of its own; left at that it took the same width as the copy and dropped
   to a second line instead of sitting at the end of the first. */
.tu-cta__act { flex: 0 0 auto; width: auto; margin: 0; }
/* WordPress puts a button block's class on the wrapper, not on the link. */
a.tu-cta__btn,
.tu-cta__btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--r-control, 3px);
  background: #fff;
  color: var(--red, #a7001e);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
a.tu-cta__btn:hover,
.tu-cta__btn .wp-block-button__link:hover { background: var(--ink, #14121a); color: #fff; }

@media (max-width: 620px) {
  .tu-cta__act,
  .tu-cta__act .wp-block-button,
  a.tu-cta__btn,
  .tu-cta__btn .wp-block-button__link { width: 100%; }
}

/* --- The panel ------------------------------------------------------------- */
.tu-cta-modal,
.tu-cta-modal *,
.tu-cta-modal *::before,
.tu-cta-modal *::after { box-sizing: border-box; }

.tu-cta-modal {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: min(92vh, 940px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-surface);
  background: #fff;
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(20, 18, 26, .28);
}
.tu-cta-modal[open] { display: block; }
.tu-cta-modal::backdrop { background: rgba(20, 18, 26, .55); }
.tu-cta-modal a { text-decoration: none; }
.tu-cta-modal :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.tu-cta-modal__in {
  max-height: inherit;
  overflow-y: auto;
  padding: clamp(18px, 3vw, 26px);
}
.tu-cta-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(14px, 2vw, 20px);
}
.tu-cta-modal__title {
  margin: 0;
  color: var(--red);
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 800;
}
.tu-cta-modal__x {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: var(--wash);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.tu-cta-modal__x:hover { background: var(--red); color: #fff; }

/* The form arrives styled for the dark card it usually sits in; here it is on
   white, so the plate it paints itself needs no second one under it. */
.tu-cta-modal__slot .tu-ft__cta-form > form { border-radius: 0; }
.tu-cta-modal__slot .tu-ft__cta-form #form { padding: 0; background: transparent; }

.tu-cta-modal__out { margin: 0; text-align: center; }
.tu-cta-modal__out a { color: var(--red); font-weight: 700; border-bottom: 1px solid var(--red-edge); }

@media (max-width: 620px) {
  .tu-cta-modal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
}