/*
 * Shared responsive geometry for the catalog-style contact CTA.
 * Loaded after page CSS so every migrated Figma template gets the same fix.
 */

.catalog-page .help-card,
.catalog-page .help-card *,
.catalog-page .help-card *::before,
.catalog-page .help-card *::after,
.figma-villages-page .help-card,
.figma-villages-page .help-card *,
.figma-villages-page .help-card *::before,
.figma-villages-page .help-card *::after {
  box-sizing: border-box;
}

.catalog-page .help-card > div:first-child,
.catalog-page .help-form,
.catalog-page .help-form label,
.catalog-page .help-form input,
.figma-villages-page .help-card > div:first-child,
.figma-villages-page .help-form,
.figma-villages-page .help-form label,
.figma-villages-page .help-form input {
  min-width: 0;
}

.catalog-page .help-form input[type="text"],
.catalog-page .help-form input[type="tel"],
.figma-villages-page .help-form input[type="text"],
.figma-villages-page .help-form input[type="tel"] {
  max-width: 100%;
}

@media (min-width: 1181px) {
  .catalog-page .help-card,
  .figma-villages-page .help-card {
    position: relative;
    height: 530px;
    min-height: 530px;
    display: block;
    padding: 0;
  }

  .catalog-page .help-card > div:first-child,
  .figma-villages-page .help-card > div:first-child {
    position: absolute;
    left: 5.18%;
    top: 86px;
    width: 45.5%;
    margin: 0;
  }

  .catalog-page .help-card h2,
  .figma-villages-page .help-card h2 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(55px, 4.6875vw, 90px);
    text-wrap: balance;
  }

  .catalog-page .help-card p,
  .figma-villages-page .help-card p {
    width: 100%;
    max-width: 100%;
    font-size: clamp(18px, 1.302vw, 25px);
  }

  .catalog-page .help-form,
  .figma-villages-page .help-form {
    position: absolute;
    left: 52.59%;
    top: 120px;
    width: 31.27%;
    max-width: 544px;
  }

  /* CRM-53: keep the villages CTA title in its own column at every desktop width. */
  .geo-villages-catalog .help-card > div:first-child {
    width: 40%;
  }

  .geo-villages-catalog .help-card h2 {
    max-width: 520px;
    text-wrap: pretty;
  }
}