/*
 * Zlix homepage visual system v1
 * ----------------------------------------------------------
 * Homepage-only visual enhancement.
 *
 * Platform Focus cards reuse the same restrained cool-blue
 * icon language as the Platform and Modules pages.
 */

body.page-home .home-focus-card {
  position: relative;
}


/*
 * The heading and icon own their own header row.
 * Paragraph content always starts beneath the entire row,
 * preventing text/icon overlap at every width.
 */
body.page-home .home-focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  width: 100%;
  min-height: 54px;

  margin: 0 0 14px;
}


body.page-home .home-focus-head h3 {
  flex: 1 1 auto;
  min-width: 0;

  margin: 5px 0 0;
  padding: 0;
}


/*
 * Shared Zlix small-icon treatment.
 */
body.page-home .home-focus-icon {
  display: block;
  box-sizing: border-box;

  flex: 0 0 54px;

  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;

  padding: 8px;
  margin: 0;

  color: #1487b3;

  background: #e6f2fa;
  background-color: #e6f2fa;

  border: 1px solid rgba(31, 125, 169, .44);
  border-radius: 16px;

  box-shadow:
    0 7px 18px rgba(15, 52, 79, .08),
    inset 0 1px 0 rgba(255, 255, 255, .94);
}


/*
 * Override the generic .card p top margin because spacing is
 * already controlled by the dedicated header row.
 */
body.page-home .home-focus-card > p {
  width: 100%;
  max-width: none;

  margin: 0 !important;
  padding: 0;
}


/*
 * Mobile uses the same structure with a slightly smaller icon.
 * The paragraph remains below the header row rather than flowing
 * beside or underneath the icon.
 */
@media (max-width: 720px) {

  body.page-home .home-focus-head {
    gap: 14px;

    min-height: 50px;

    margin-bottom: 12px;
  }

  body.page-home .home-focus-head h3 {
    margin-top: 4px;
  }

  body.page-home .home-focus-icon {
    flex-basis: 50px;

    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;

    padding: 7px;

    border-radius: 15px;
  }
}