/* Pillar CTA card (Figma Frame 698). White card, logo lockup, underlined
   heading, description, solid button, dithered green band pinned to the
   bottom. The band's TOP meets the button's vertical centre:
     band height = bottom padding + button height / 2
   Button is pinned at .button--md (32px, from _buttons.css) so this math
   holds; don't swap sizes without updating --pillar-cta-button-height to
   match. Cards enter through the shared data-reveal entrance (main.js), so
   neighbours revealed together stagger in reading order. Plain CSS:
   module stylesheets aren't run through the theme's PostCSS build, so no
   nesting. */

/* Surface, shadow and hover lift come from .card / .card--interactive
   (_cards.css); this module only sets its own padding, band and layout.
   .pillar-cta.card so these win regardless of stylesheet load order. */
.pillar-cta.card {
  --card-bg: var(--pillar-cta-bg, rgb(var(--brand-color-white)));
  --pillar-cta-dither-color: rgb(var(--brand-color-green-strong));
  --pillar-cta-pad-x: clamp(1.25rem, 1.023rem + 1.136cqi, 2rem);
  --pillar-cta-pad-top: clamp(1.5rem, 1.136rem + 1.818cqi, 2.5rem);
  --pillar-cta-pad-bottom: clamp(1.5rem, 1.273rem + 1.136cqi, 2rem);
  /* Height of .button--md (32px, _buttons.css); the band math needs it. */
  --pillar-cta-button-height: 32px;
  color: rgb(var(--brand-color-deep-blue));
  container-type: inline-size;
  display: block;
  padding: var(--pillar-cta-pad-top) var(--pillar-cta-pad-x) var(--pillar-cta-pad-bottom);
  width: 100%;
}

/* ===== Dither band ===== */
/* A bottom-anchored band instead of the default full cover. z-index -1 puts
   it behind the content (.card isolates, so it stays above the card's own
   background), which lets the heading link's overlay cover the whole card. */
.pillar-cta > .dither {
  bottom: 0;
  color: var(--pillar-cta-dither-color);
  height: calc(var(--pillar-cta-pad-bottom) + var(--pillar-cta-button-height) / 2);
  left: 0;
  right: 0;
  top: auto;
  z-index: -1;
}

/* ===== Content stack ===== */
.pillar-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ===== Logo lockup ===== */
.pillar-cta__lockup {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 0.25rem;
}

/* Optical sizing (--logo-balance token): a square logo gets the full
   height, wider ones get shorter. --pillar-cta-logo-aspect (width / height)
   and --pillar-cta-logo-scale (Logo size field) come from module.html.
   Wide logos are also capped in width and never overflow the card. */
.pillar-cta__logo {
  --pillar-cta-logo-height: calc(clamp(4rem, 3.1rem + 3.4cqi, 6rem) * var(--pillar-cta-logo-scale, 1));
  flex: none;
  height: var(--pillar-cta-logo-height);
  max-width: min(100%, calc(18rem * var(--pillar-cta-logo-scale, 1)));
  object-fit: contain;
  object-position: left center;
  width: auto;
}

@supports (height: calc(1px * pow(2, 1))) {
  .pillar-cta__logo {
    height: calc(var(--pillar-cta-logo-height) * pow(var(--pillar-cta-logo-aspect, 1), var(--logo-balance)));
  }
}

.pillar-cta__lockup-text {
  color: rgb(var(--brand-color-deep-blue));
  display: flex;
  flex-direction: column;
  font-size: 0.8125rem;
  gap: 0.125rem;
  line-height: 1.2;
}

.pillar-cta__lockup-line {
  font-weight: 500;
}

.pillar-cta__lockup-line:first-child {
  font-weight: 600;
}

/* ===== Heading ===== */
/* Heading is a link to the same URL as the button; the underline reads
   as part of the type treatment, not a secondary CTA. */
.pillar-cta__heading {
  color: rgb(var(--brand-color-black));
  font-family: var(--font-header, "Red Hat Display", sans-serif);
  font-size: clamp(1.5rem, 1.273rem + 1.136cqi, 2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

/* Underline from .link-title, firming up when the card is hovered. */
.pillar-cta__heading-link {
  --focus-ring-offset: 3px;
  border-radius: var(--radius-xs);
  font-weight: inherit;
}

/* The whole card is the link: the heading link's ::after covers the card,
   so there's still one link for assistive tech. The button and any links
   in the description sit above it and stay their own targets. */
.pillar-cta__heading-link::after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: var(--z-raised);
}

.pillar-cta__description a,
.pillar-cta__button {
  position: relative;
  z-index: calc(var(--z-raised) + 1);
}

/* ===== Description ===== */
.pillar-cta__description {
  color: rgb(var(--brand-color-deep-blue));
  font-size: 1rem;
  line-height: 1.5;
  max-width: 42ch;
}

.pillar-cta__description p {
  margin: 0;
}

.pillar-cta__description p + p {
  margin-top: 0.75em;
}

/* ===== Button ===== */
.pillar-cta__button-row {
  display: flex;
  padding-top: 0.5rem;
}

/* ===== Fill the row height (pillar-cta--fill) =====
   HubSpot floats its columns, so they can't share a height. On tablet and
   desktop, a row with a filling card becomes a flex row, every wrapper on
   the way down passes the height along, and the button drops to the bottom.
   Works with the module straight in a row or inside a column. */
@media (min-width: 768px) {
  .row-fluid:has(> [class*="span"] .pillar-cta--fill) {
    display: flex;
    flex: 1 1 auto;
  }

  .row-fluid:has(> [class*="span"] .pillar-cta--fill)::before,
  .row-fluid:has(> [class*="span"] .pillar-cta--fill)::after {
    display: none;
  }

  .row-fluid > [class*="span"]:has(.pillar-cta--fill),
  .row-fluid-wrapper:has(.pillar-cta--fill),
  .hs_cos_wrapper:has(> .pillar-cta--fill),
  .pillar-cta--fill.card {
    display: flex;
    flex-direction: column;
  }

  .row-fluid-wrapper:has(.pillar-cta--fill),
  .hs_cos_wrapper:has(> .pillar-cta--fill),
  .pillar-cta--fill.card,
  .pillar-cta--fill .pillar-cta__inner {
    flex: 1 1 auto;
  }

  .row-fluid > [class*="span"]:has(.pillar-cta--fill) {
    float: none;
  }

  .pillar-cta--fill .pillar-cta__button-row {
    margin-top: auto;
  }
}

/* ===== Narrow cards ===== */
@container (max-width: 360px) {
  .pillar-cta__heading {
    font-size: 1.5rem;
  }
}

/* Fallback for browsers without container queries. */
@media (max-width: 479px) {
  .pillar-cta {
    --pillar-cta-pad-x: 1.25rem;
    --pillar-cta-pad-top: 1.5rem;
    --pillar-cta-pad-bottom: 1.5rem;
  }
}