.imiki-article-content {
  --imiki-navy: #17324d;
  --imiki-blue: #147d92;
  --imiki-orange: #f26b38;
  --imiki-light: #f4f8fa;
  --imiki-line: #cbd9df;
  color: #243746;
  font-family: Arial, Helvetica, sans-serif;
}

.imiki-article-content > .wp-block-post-title,
.imiki-article-content > .wp-block-post-date,
.imiki-article-content > .wp-block-post-featured-image,
.imiki-article-content > .wp-block-post-content,
.imiki-article-content > .wp-block-post-terms,
.imiki-article-content > .wp-block-group {
  width: min(100%, 1050px);
  margin-right: auto;
  margin-left: auto;
}

.imiki-article-content > .wp-block-post-title {
  position: relative;
  margin-bottom: 0;
  padding: clamp(28px, 6vw, 58px);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--imiki-navy), #126f83);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.imiki-article-content > .wp-block-post-title::before {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 6px 12px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 999px;
  content: "Materiał edukacyjny";
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.imiki-article-content > .wp-block-post-date {
  margin-top: 12px;
  color: #607583;
  font-size: .85rem;
  font-weight: 700;
}

.imiki-article-content > .wp-block-post-featured-image {
  margin-top: 24px;
}

.imiki-article-content > .wp-block-post-featured-image img {
  width: 100%;
  max-height: 590px;
  object-fit: cover;
}

.imiki-lesson-layout {
  width: 100%;
  max-width: 1050px;
  margin: 28px auto 0;
  font-size: 17px;
  line-height: 1.7;
}

/* Align structural lesson containers with the 1050px featured image. */
.imiki-numbered-lesson .imiki-lesson-layout > .container,
.imiki-numbered-lesson .imiki-lesson-layout > .cloud-lesson,
.imiki-numbered-lesson .imiki-lesson-layout > .tinkercad-organizer,
.imiki-numbered-lesson .imiki-lesson-layout > div[style*="max-width"],
.imiki-numbered-lesson .imiki-lesson-layout > article[style*="max-width"] {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.imiki-numbered-lesson .imiki-topic-expansion {
  width: 100%;
  margin: 32px 0;
}

.imiki-numbered-lesson .imiki-lesson-layout a {
  overflow-wrap: anywhere;
}

.imiki-lesson-layout,
.imiki-lesson-layout * {
  box-sizing: border-box;
}

.imiki-lesson-layout h2,
.imiki-lesson-layout h3,
.imiki-lesson-layout h4 {
  color: var(--imiki-navy);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.25;
}

.imiki-lesson-layout h2 {
  margin-top: 42px;
  padding-bottom: 9px;
  border-bottom: 3px solid var(--imiki-orange);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.imiki-lesson-layout h3 {
  margin-top: 30px;
  font-size: 1.25rem;
}

.imiki-lesson-layout a {
  color: #086e7e;
  font-weight: 700;
  text-underline-offset: 3px;
}

.imiki-lesson-layout a:focus-visible,
.imiki-lesson-layout summary:focus-visible {
  outline: 3px solid var(--imiki-orange);
  outline-offset: 3px;
}

.imiki-lesson-layout blockquote {
  margin: 24px 0;
  padding: 18px 22px;
  border-left: 6px solid var(--imiki-blue);
  border-radius: 0 12px 12px 0;
  background: var(--imiki-light);
}

.imiki-lesson-layout table {
  width: 100%;
  border: 1px solid var(--imiki-line);
  border-collapse: collapse;
  background: #fff;
}

.imiki-lesson-layout th,
.imiki-lesson-layout td {
  padding: 13px 16px;
  border: 1px solid var(--imiki-line);
  text-align: left;
}

.imiki-lesson-layout th {
  background: var(--imiki-navy);
  color: #fff;
}

.imiki-lesson-layout pre {
  overflow-x: auto;
  padding: 18px;
  border-radius: 12px;
  background: #172b3a;
  color: #fff;
}

.imiki-lesson-layout iframe,
.imiki-lesson-layout video {
  max-width: 100%;
}

.imiki-review {
  margin-top: 44px;
  padding: clamp(22px, 4vw, 32px);
  border-left: 6px solid var(--imiki-orange);
  border-radius: 16px;
  background: var(--imiki-light);
}

.imiki-review .imiki-review__label {
  margin: 0;
  color: var(--imiki-orange);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.imiki-review h2 {
  margin-top: 6px;
}

.imiki-review details,
.imiki-lesson-layout .tinkercad-organizer details {
  margin: 12px 0;
  border: 1px solid var(--imiki-line);
  border-radius: 12px;
  background: #fff;
}

.imiki-review summary {
  padding: 15px 18px;
  color: var(--imiki-navy);
  cursor: pointer;
  font-weight: 800;
}

.imiki-review details p {
  margin: 0;
  padding: 0 18px 18px;
}

@media (max-width: 650px) {
  .imiki-article-content > .wp-block-post-title {
    border-radius: 16px;
  }

  .imiki-lesson-layout {
    font-size: 16px;
  }

  .imiki-lesson-layout table {
    display: block;
    overflow-x: auto;
  }
}