/* ТЗ №74: объединённый demo. Фон варианта 1 + структура accordion варианта 4. */
.combined-article-demo {
  counter-reset: combined-section;
  overflow-x: clip;
  background: #fffaf6;
}

.combined-article-demo .article-publication {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #fffaf5 0%, #f6eadf 52%, #fffdf9 100%);
}

.combined-article-demo .article-publication::before,
.combined-article-demo .article-publication::after {
  position: absolute;
  z-index: 0;
  width: 520px;
  height: 760px;
  opacity: .48;
  content: "";
  pointer-events: none;
  transform: perspective(700px) rotateY(-27deg) rotateZ(9deg);
  transform-origin: center;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(123, 59, 40, .08) 35px 36px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(173, 85, 45, .08) 40px 41px),
    radial-gradient(circle at 18px 19px, rgba(190, 156, 117, .35) 0 5px, transparent 6px);
  background-size: 36px 100%, 100% 41px, 36px 41px;
}

.combined-article-demo .article-publication::before {
  top: 180px;
  right: -250px;
}

.combined-article-demo .article-publication::after {
  bottom: 110px;
  left: -330px;
  opacity: .22;
  transform: perspective(700px) rotateY(29deg) rotateZ(-8deg);
}

.combined-article-demo .article-header {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .96), transparent 24%),
    linear-gradient(115deg, rgba(255, 250, 245, .96), rgba(234, 215, 200, .7));
}

.combined-article-demo .article-body {
  position: relative;
  z-index: 2;
}

.combined-article-demo .article-section.article-section--accordion {
  counter-increment: combined-section;
}

.combined-article-demo .article-accordion-details {
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow:
    0 10px 25px rgba(73, 43, 32, .09),
    inset 0 0 0 1px rgba(123, 59, 40, .13);
  backdrop-filter: blur(5px);
}

.combined-article-demo .article-accordion-details::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(#be9c75, #ad552d);
  content: "";
}

.combined-article-demo .article-accordion-summary {
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  padding: 15px 22px 15px 18px;
}

.combined-article-demo .article-accordion-summary::before {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(173, 85, 45, .25);
  border-radius: 50%;
  color: #7b3b28;
  background: #fbf1e9;
  content: counter(combined-section, decimal-leading-zero);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
}

.combined-article-demo .article-accordion-preview {
  grid-column: 2;
}

.combined-article-demo .article-accordion-icon {
  grid-column: 3;
}

.combined-article-demo .article-accordion-content {
  margin-left: 60px;
  padding-left: 0;
  border-top: 1px solid rgba(123, 59, 40, .11);
}

.combined-article-demo .article-accordion-details[open] {
  border-color: transparent;
  background: linear-gradient(120deg, #fff, #f6e7db);
  box-shadow:
    0 18px 38px rgba(73, 43, 32, .13),
    inset 0 0 0 1px rgba(123, 59, 40, .15);
}

@media (max-width: 760px) {
  .combined-article-demo .article-publication::before {
    top: 250px;
    right: -420px;
    opacity: .24;
  }

  .combined-article-demo .article-publication::after {
    display: none;
  }

  .combined-article-demo .article-accordion-details {
    border-radius: 14px;
  }

  .combined-article-demo .article-accordion-summary {
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    padding: 14px 13px;
    column-gap: 10px;
  }

  .combined-article-demo .article-accordion-summary::before {
    width: 28px;
    height: 28px;
    font-size: .67rem;
  }

  .combined-article-demo .article-accordion-content {
    margin-left: 44px;
    padding-right: 16px;
  }
}

@media (max-width: 390px) {
  .combined-article-demo .article-accordion-summary {
    grid-template-columns: 30px minmax(0, 1fr) 17px;
    padding-inline: 11px;
    column-gap: 8px;
  }

  .combined-article-demo .article-accordion-summary::before {
    width: 26px;
    height: 26px;
  }

  .combined-article-demo .article-accordion-content {
    margin-left: 38px;
    padding-right: 13px;
  }
}