@use "sass:map";
@use "../../global/acms-common" as acms;
@use "../../global/common" as global;

/* ------------------------------
 カスタムユニット
------------------------------ */

/* メッセージユニット
------------------------------ */
.#{acms.$entry-class} {
  .message {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--entry-el-margin-md);
    overflow: hidden;
    background: var(--color-gray10);
    border-radius: var(--border-radius-lg);
  }

  .message-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1rem;
  }

  .message-image {
    height: 15rem;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
    }
  }

  .message-lead {
    position: relative;
    margin: 0;
    font-size: map.get(global.$font-scales, heading-ss);
    font-weight: bold;
    line-height: var(--line-height-lg);
  }

  .message-content {
    margin: 0;
  }

  .message-source {
    margin: 0;

    &::before {
      display: inline-block;
      width: 1.5rem;
      height: 1px;
      margin: 0 1rem 0 0;
      vertical-align: middle;
      content: "";
      background: var(--color-gray30);
    }
  }
}

@include acms.media-breakpoint-up(md) {
  .#{acms.$entry-class} {
    .message {
      flex-direction: row;
    }

    .message-wrap {
      position: relative;
      box-sizing: border-box;
      width: 50%;
      padding: 6rem 3rem;
    }

    .message-image {
      order: 1;
      width: 50%;
      height: initial;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

    .message-lead {
      height: auto;
      font-size: map.get(global.$font-scales, heading-s);
      line-height: var(--line-height-md);
    }

    .message-content {
      margin: 0;
    }
  }
}
