/* 08 — tematy: układ dwukolumnowy i rozwijane pozycje.
   Źródło: makieta style.css l. 697–745, 1231–1233, 1418, 1471–1479. */

.topics-section {
  background: var(--ai-bg-alt);
}
.topics-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 90px;
}
.topics-layout > div > p {
  color: var(--ai-text-mute);
  margin-bottom: 32px;
}
.topic {
  border-top: 1px solid var(--ai-line-strong);
}
.topic:last-child {
  border-bottom: 1px solid var(--ai-line-strong);
}
.topic summary {
  display: grid;
  grid-template-columns: 28px 1fr 25px;
  align-items: center;
  gap: 16px;
  padding: 25px 0;
  cursor: pointer;
  list-style: none;
}
.topic h3 {
  margin: 0;
  font-size: 1.025rem;
  font-weight: 650;
}
.topic p {
  padding-left: 44px;
  font-size: 0.875rem;
  margin-bottom: 24px;
  color: var(--ai-text-mute);
}
summary::-webkit-details-marker {
  display: none;
}
.expand {
  color: var(--ai-rose);
  font-size: 1.5rem;
  font-weight: 400;
}
.topic[open] .expand {
  transform: rotate(90deg);
}
@media (max-width: 1100px) {
  .topics-layout {
    gap: 45px;
  }
}
@media (max-width: 760px) {
  .topics-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .topics-layout h2 {
    max-width: 540px;
  }
  .topic summary {
    padding-block: 23px;
  }
}