/* Sakete Solution Read 组件样式 */

.sakete-solution-read {
  padding: var(--spacing-7xl) 0;
  width: 100%;
}

.sakete-solution-read-wrapper {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--spacing-7xl);
}

/* 图片区域 - 浮动在左边 */
.sakete-solution-read-content-img {
  float: left;
  /* width: 50%; */
  width: 46.875rem;
  max-width: 750px;
  /* max-width: 500px; */
  padding-right: var(--spacing-9xl);
  padding-bottom: var(--spacing-4xl);
  border-radius: 0.625rem; /* 10px */
  overflow: hidden;
  box-sizing: content-box;
}

.sakete-solution-read-content-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 文本内容区域 - 环绕图片 */
.sakete-solution-read-content {
  overflow: hidden; /* 清除浮动 */
}

.sakete-solution-read-title {
  color: var(--text-color-lg);
  font-family: var(--font-family);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-lg);
  padding: 0 0 var(--spacing-4xl) 0;
  max-width: 100%;
  word-break: break-word;
  text-align: left;
  margin-left: calc(46.875rem + var(--spacing-9xl));
  border-bottom: 1px solid #ddd;
  position: relative;
}

.sakete-solution-read-title::after {
  content: '';
  position: absolute;
  width: max(5rem, 48px);
  height: 5px;
  left: 0px;
  bottom: 0px;
  transform: translateY(50%);
  background-color: var(--color-primary);
}

.sakete-solution-read-description {
  padding-top: var(--spacing-4xl);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  color: #4b5563;
  max-width: 100%;
  text-align: left;
}

.sakete-solution-read-description * {
  line-height: 140%;
}

.sakete-solution-read-description p,
.sakete-solution-read-description div {
  margin: 0 0 var(--spacing-xl) 0;
}

.sakete-solution-read-description p:last-child,
.sakete-solution-read-description div:last-child {
  margin-bottom: 0;
}

.sakete-solution-read-description p:not(:last-child),
.sakete-solution-read-description div:not(:last-child) {
  margin-bottom: var(--spacing-xl);
}

/* 响应式设计 */
@media screen and (max-width: 1024px) {
  .sakete-solution-read-content-img {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  .sakete-solution-read-title {
    margin-left: 0px;
  }
}

@media screen and (max-width: 768px) {
  .sakete-solution-read {
    padding: var(--spacing-5xl) 0;
  }

  .sakete-solution-read-content-img {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: var(--spacing-3xl);
  }
}

@media screen and (max-width: 576px) {
}

/* ========================================
   Sakete Solution Read Pictext 模块样式
   ======================================== */

.sakete-solution-read-pictext {
  width: 100%;
  padding: var(--spacing-7xl) 0;
  padding-top: 7.5rem;
  overflow: hidden;
}

.sakete-solution-read-pictext-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
}

/* 左侧文字内容区域 */
.sakete-solution-read-pictext-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  position: relative;
  background-color: #f8fafc;
  padding: 4.375rem var(--container-spacing);
  transform: translateY(-12%);
}

/* 主标题样式 - 根据 Figma: 30px, 600 weight, #282624,  1.5em */
.sakete-solution-read-pictext-main-title {
  color: var(--text-color-lg);
  font-family: var(--font-family);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-lg);
  margin: 0;
}

/* 子项列表 */
.sakete-solution-read-pictext-items {
  display: flex;
  flex-direction: column;
  gap: 2.125rem;
}

/* 单个子项 */
.sakete-solution-read-pictext-item {
  display: flex;
  align-items: flex-start;
  position: relative;
}

/* 子项内容 - 网格布局 */
.sakete-solution-read-pictext-item-content {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--spacing-xl);
  /* row-gap: var(--spacing-md); */
  align-items: center;
}

.sakete-solution-read-pictext-item-dot {
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-primary, #036eb7);
  border-radius: 50%;
  grid-column: 1;
  grid-row: 1;
}

.sakete-solution-read-pictext-item-title {
  color: var(--text-color-lg);
  font-family: var(--font-family);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-lg);
  margin: 0;
  grid-column: 2;
  grid-row: 1;
}

.sakete-solution-read-pictext-item-description {
  color: #4b5563;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-base);
  margin: 0;
  grid-column: 2;
  grid-row: 2;
}

/* 右侧图片区域 */
.sakete-solution-read-pictext-image {
  width: 115%;
  height: 100%;
  transform: translateX(-10%);
}

.sakete-solution-read-pictext-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 0.9375rem 0px 0px 0.9375rem; /* 根据 Figma: 左边圆角 */
}

.sakete-solution-read-pictext-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 响应式设计 */
@media screen and (max-width: 1024px) {
  .sakete-solution-read-pictext-wrapper {
    grid-template-columns: 1fr;
  }

  .sakete-solution-read-pictext-content {
    order: 2;
    transform: none;
  }

  .sakete-solution-read-pictext-image {
    order: 1;
    width: 100%;
    transform: none;
  }

  .sakete-solution-read-pictext-image-wrapper {
    border-radius: 0;
  }
}

@media screen and (max-width: 768px) {
  .sakete-solution-read-pictext {
    padding: var(--spacing-5xl) 0;
  }

  .sakete-solution-read-pictext-items {
    gap: var(--spacing-3xl);
  }

  .sakete-solution-read-pictext-item {
    gap: var(--spacing-lg);
  }
}

@media screen and (max-width: 576px) {
  .sakete-solution-read-pictext {
    padding: var(--spacing-4xl) 0;
  }
}