/* ===========================================================================
   [candidate-app-cta] — "Download the app" candidate CTA section
   ---------------------------------------------------------------------------
   Reusable full-width blue CTA card that drives candidates to download the
   TradeConnex app, with an inline "Learn more" link (at the end of the
   paragraph) to the Register for Work page.

   Self-contained + enqueued globally at priority 999 (see inc/enqueue.php) so
   it wins the cascade over the broad `.tc-lp *{margin:0;padding:0}` reset used
   on the register / find-talent landing templates, and also renders correctly
   on the Elementor-built homepage which has no such reset.
   =========================================================================== */

.tc-candidate-app-cta {
  padding: 48px 0;
  font-family: 'Oakes Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}

.tc-candidate-app-cta * {
  box-sizing: border-box;
}

.tc-candidate-app-cta__card {
  width: 100%;
  margin: 0;
  background: #0065E4;
  border-radius: 8px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Text column ----------------------------------------------------------- */
.tc-candidate-app-cta__content {
  min-width: 0;
}

.tc-candidate-app-cta__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.tc-candidate-app-cta__heading {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.tc-candidate-app-cta__text {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  max-width: 52ch;
}

/* Inline "Learn more" link at the end of the paragraph ------------------- */
.tc-candidate-app-cta__learn {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.tc-candidate-app-cta__learn:hover {
  opacity: 0.8;
}

.tc-candidate-app-cta__learn-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tc-candidate-app-cta__learn-icon {
  display: inline-block;
  vertical-align: -1px;
  margin-left: 3px;
}

/* App store badges ------------------------------------------------------ */
.tc-candidate-app-cta__badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 44px 0 0;
}

.tc-candidate-app-cta__badge-link {
  display: inline-block;
  transition: opacity 0.2s, transform 0.2s;
}

.tc-candidate-app-cta__badge-link:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.tc-candidate-app-cta__badge-link img {
  display: block;
  height: 53px;
  width: auto;
}

/* Media column ---------------------------------------------------------- */
.tc-candidate-app-cta__media {
  margin: 0;
  min-width: 0;
}

.tc-candidate-app-cta__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* When no image is supplied, let the text span the full width ------------ */
.tc-candidate-app-cta__card--no-media {
  grid-template-columns: 1fr;
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .tc-candidate-app-cta__card {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px;
  }
  .tc-candidate-app-cta__media {
    order: -1;
  }
  .tc-candidate-app-cta__heading {
    font-size: 32px;
  }
}

@media (max-width: 600px) {
  .tc-candidate-app-cta {
    padding: 24px 0;
  }
  .tc-candidate-app-cta__card {
    padding: 32px 24px;
    border-radius: 8px;
  }
  .tc-candidate-app-cta__heading {
    font-size: 28px;
  }
  .tc-candidate-app-cta__text {
    font-size: 16px;
  }
  .tc-candidate-app-cta__badge-link img {
    height: 46px;
  }
}