/* the styling of the elements header and main are done in a seperate css file header_main.css */
/* override the grid styling for main */
main {
  align-items: start;
}
#containerText {
  /* display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: min-content; */
  display: flex;
  flex-direction: column;
  position: relative;
  width: 70em;
  max-width: 95vw;
  font-size: 0.9em;
  padding: 2em 3em 4em 3em;
  margin-bottom: var(--footer-height);
  overflow-y: auto;
  gap: 0.5em;
  background-color: white;
  box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.4);
  overflow: auto;
}

main h2 {
  font-size: clamp(1.25rem, 2.8vw, 2rem);
  line-height: 1.25;
  letter-spacing: 0.2em;
}

main p,
main ul > li {
  margin: 0 0 1rem 0;
  font-size: clamp(0.8rem, 1.6vw, 1.1rem);
  color: #0b1b2e;
}
main p {
  line-height: 1.8em;
}

.theme-card {
  border: solid 1px gray;
  border-radius: 0.4em;
  padding: 1rem 1em;

  background: rgb(242, 245, 244);
  position: relative;
  overflow: visible;
}
/* --- Process / decision-loop cards --- */
/* --- Circle container --- */
.process-loop {
  --size: clamp(280px, 50dvw, 800px); /* overall diameter */
  --radius: calc(
    var(--size) / 2 - 52px
  ); /* distance from center to each card */
  --ring: 0.3em; /* thickness of the loop line */

  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 7rem auto 4rem auto;
}

/* Dashed circular “flow” ring */
.process-loop::before {
  content: "";
  position: absolute;
  inset: calc(52px - var(--ring)) calc(52px - var(--ring));
  border: var(--ring) dashed rgba(31, 53, 71, 0.35);
  border-radius: 50%;
}

/* --- Step cards placed around center using rotate+translate --- */
.process-loop .step {
  --i: 0; /* index; set per item below */
  --angle: calc(var(--i) * 72deg - 90deg); /* 360/5 = 72deg per step */

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius))
    rotate(calc(-1 * var(--angle))); /* keep text upright */

  /* Card look */

  width: 40%;
  padding: 12px 14px;
  background: black;
  color: white;
  border: 1px solid #cddbe4;
  border-radius: 0.2em;
  box-shadow: 0 0.5em 18px rgba(12, 34, 56, 0.08);
  text-align: left;
  font-weight: normal;
  line-height: 1.5;
}

/* Tidy emoji size (you can swap to inline SVG if you prefer) */
.process-loop .step {
  font-size: clamp(0.75rem, 1.3vw, 1rem);
}
.process-loop .step::first-letter {
  font-size: clamp(0.9rem, 1.8vw, 1.3rem);
}
.process-loop .step:has(> .icon) {
  padding-top: 1em;
}
.process-loop .step .icon {
  display: block;
  font-size: 1.4em;
  margin-bottom: 0.5em;
}

/* Index (angle) assignment for five items */
.process-loop .step:nth-child(1) {
  --i: 0;
  z-index: 50;
}
.process-loop .step:nth-child(2) {
  --i: 1;
  z-index: 40;
}
.process-loop .step:nth-child(3) {
  --i: 2;
  z-index: 30;
}
.process-loop .step:nth-child(4) {
  --i: 3;
  z-index: 20;
}
.process-loop .step:nth-child(5) {
  --i: 4;
  z-index: 10;
}
.process-loop .step:hover {
  z-index: 100;
}

/* ----------------------------------------------------------- */
.examples h3 {
  margin: 0;
  padding: 0;
  justify-self: center;
  text-decoration: underline double;
  text-underline-offset: 0.5em;
}
.examples {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  /* justify-items: center; */
}
.application {
  position: static;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2em;
}
.theme-card .example-image {
  display: block;
  width: clamp(100px, 10dvw, 300px);
  height: auto;
  object-fit: contain; /* safe if you ever give both w & h via container */
  transition: transform 1s ease, width 1s ease, box-shadow 1s ease;
  cursor: zoom-in;
}
.example-box {
  justify-items: center;
}
.theme-card .example-image.is-expanded {
  position: absolute; /* now it positions against .theme-card */
  left: 0;
  width: 100%; /* fill the card’s width */
  height: auto; /* keep aspect ratio */
  max-width: none; /* override any previous max */
  z-index: 10;
  box-shadow: 0 1em 3em rgba(0, 0, 0, 0.25);
  background: white; /* optional, avoids transparency edges */
  cursor: zoom-out;
  transition: width 150ms, height 150ms, top 150ms, left 150ms;
}
/* Optional: smooth fade-in effect when enlarging */
.theme-card .example-image {
  opacity: 1;
  transition: opacity 1s ease;
}
.theme-card .example-image:hover {
  opacity: 1;
}
.theme-card ul > li {
  font-family: inherit;
}

/* ---------------------------------------------------------- */
h2,
h3 {
  padding-bottom: 0.5em;
}
h4 {
  padding-bottom: 0.5em;
}

ol {
  margin-left: 2em;
}
ol > li {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: bold;
}
ul {
  margin-left: 3em;
  list-style-type: "-  ";
}
ul > li,
p {
  padding-top: 0.5em;
  font-weight: normal;
}

@media (max-width: 1100px) {
  .process-loop {
    --size: clamp(28em, 65dvw, 60em); /* overall diameter */
    --radius: calc(
      var(--size) / 2 - 52px
    ); /* distance from center to each card */
    --ring: 0.3em; /* thickness of the loop line */

    position: relative;
    width: var(--size);
    height: var(--size);
    margin: 7rem auto 4rem auto;
  }
}
@media (max-width: 500px) {
  .process-loop {
    --size: clamp(28em, 80dvw, 880em); /* overall diameter */
    --radius: calc(
      var(--size) / 2 - 52px
    ); /* distance from center to each card */
    --ring: 0.3em; /* thickness of the loop line */

    position: relative;
    width: var(--size);
    height: var(--size);
    margin: 7rem auto 4rem auto;
  }
}