/**
 * @file
 * Preference Row — layout only; typography from nested text-wysiwyg.
 */

.layout-container {

  .preference-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }

  .preference-row__lockup {
    position: relative;
    flex: none;
    width: 197.346px;
    height: 194.624px;
  }

  .preference-row__ring {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .preference-row__ring-image {
    position: absolute;
    left: -14.53%;
    top: -22.73%;
    width: 134.24%;
    height: 145.45%;
    max-width: none;
    display: block;
  }

  .preference-row__figure {
    position: absolute;
    left: 40.83px;
    top: 50.33px;
    width: 119.769px;
    height: 74.855px;
    max-width: none;
    display: block;
    object-fit: contain;
  }

  .preference-row__label {
    position: absolute;
    left: 70.77px;
    top: 119.06px;
    width: 57.162px;
    margin: 0;
    color: var(--color-coral, #eb6f56);
    font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
    font-size: 11.319px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    font-feature-settings: "liga" 0;
  }

  .preference-row__body,
  .preference-row__reasons {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .preference-row__body .text-wysiwyg strong,
  .preference-row__body .text-wysiwyg b {
    color: var(--color-dark-coral, #bb5844);
    text-transform: uppercase;
  }

  /* Reasons — BulletCopy 27788:3959/3960 (29824:145967), gap 10px. */
  .preference-row__reasons .text-wysiwyg > p {
    margin: 0;
    font-weight: 700;
    color: var(--color-charcoal, #1d2d3a);
  }

  .preference-row__reasons .text-wysiwyg > p strong,
  .preference-row__reasons .text-wysiwyg > p b {
    color: inherit;
    font-weight: 700;
  }

  .preference-row__reasons .text-wysiwyg ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
  }

  .preference-row__reasons .text-wysiwyg li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 19px;
  }

  .preference-row__reasons .text-wysiwyg li:last-child {
    margin-bottom: 0;
  }

  .preference-row__reasons .text-wysiwyg li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    color: var(--color-coral, #f16b50);
    font-size: 20px;
    line-height: normal;
  }

  .preference-row__reasons .text-wysiwyg li strong,
  .preference-row__reasons .text-wysiwyg li b {
    color: var(--color-dark-coral, #bb5844);
    font-weight: 700;
  }

  @media (min-width: 1024px) {
    .preference-row {
      flex-direction: row;
      align-items: center;
    }

    .preference-row__body {
      flex: none;
      width: 250px;
    }

    .preference-row__reasons {
      flex: 1 1 0;
    }
  }
}