/*
  Glossary — Term detail block.
  Source: Figma 1083:486 "Glossary Section" (image-left + image-right pair).

  Two-column layout with a 600×460 rounded image column and a 658px text
  column (New Science 60px term heading + Poppins 16px body @ 1.6 line-height,
  --color-body-copy-text). No panel background — image and text sit directly
  on the page background. Dashed teal decorative circles/arcs overflow the
  image on all four corners.

  Variants (via modifier class):
    default:                text left,  image right   (DOM order: content, media)
    --image-left:           image left, text right    (DOM order: media, content)

  Row is flex; DOM order controls left/right — no order/direction hacks.
  Stacks single-column below 900px, image on top.
*/

.glossary-detail-block {
  padding-inline: var(--space-inline);
  padding-block: var(--section-padding-block);
}

.glossary-detail-block__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.glossary-detail-block__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(70px, 6vw, 154px);
  /* Cap row width so text and image stay close on wide (>1600) viewports
     — space-between would otherwise blow the gap up to ~400px+. */
  max-width: 1990px;
  margin-inline: auto;
}

/* --- Text column --- */
.glossary-detail-block__content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 658px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.glossary-detail-block__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(36px, 24px + 1.9vw, 60px);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-navy-blue);
}

.glossary-detail-block__body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);       /* 16px per Figma */
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-body-copy-text);
}

/* --- Media column: image + decorative circles overflow around it --- */
.glossary-detail-block__media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 600px;
}

.glossary-detail-block__image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 600 / 460;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-navy-blue);
}

.glossary-detail-block__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Deco circles — absolute overlays that protrude outside the image bounds.
   All four positions use the SAME dashed-ring-with-satellite-dot SVG.
   The satellite dot orbits via a slow continuous CSS rotation. Sizes and
   offsets calibrated from Figma 1083:486. */
.glossary-detail-block__deco {
  position: absolute;
  pointer-events: none;
  display: block;
  z-index: 0;                     /* always behind the image */
  animation: glossary-detail-block-orbit 24s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

@keyframes glossary-detail-block-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Reverse direction on the bottom-left ring so the two rings don't spin
   in lock-step — creates a bit more life. */
.glossary-detail-block__deco--bl {
  animation-direction: reverse;
  animation-duration: 30s;
}

/* Each corner has TWO rings: a larger (--lg) and a smaller (--sm) nested
   pair. Both blocks share the same 2×TR + 2×BL layout per Figma 1083:486. */

/* ---- Top-right pair — big above image, small stacked below on the right.
   Both sit BEHIND the image (global z-index: 0 default). ---- */
.glossary-detail-block__deco--tr.glossary-detail-block__deco--lg {
  top: -70px;
  right: -70px;
  width: 200px;
  height: 203px;
}
.glossary-detail-block__deco--tr.glossary-detail-block__deco--sm {
  top: 100px;
  right: -40px;
  width: 130px;
  height: 133px;
  animation-duration: 20s;
}

/* ---- Bottom-left pair (sweeping arc composition per Figma design) ---- */
.glossary-detail-block__deco--bl.glossary-detail-block__deco--lg {
  bottom: 20px;
  left: -60px;
  width: 180px;
  height: 180px;
}
.glossary-detail-block__deco--bl.glossary-detail-block__deco--sm {
  bottom: -50px;            /* straddles the image's bottom edge */
  left: -60px;
  width: 130px;
  height: 133px;
  z-index: 3;               /* sit ON TOP of the image */
  animation-duration: 20s;
}

@media (prefers-reduced-motion: reduce) {
  .glossary-detail-block__deco {
    animation: none;
  }
}

/* Wide-screen pass (1600 → 2500) — image grows with the container so
   it stays balanced against the wider text column, without ever
   overflowing the container padding. 600px at 1600, ~900px at 2500.
   Formula: slope = (900-600)/900 = 0.333/px = 33.33vw/100,
            intercept = 600 - 0.333 × 1600 = 66.67. */
@media (min-width: 1600px) {
  .glossary-detail-block__media {
    max-width: clamp(600px, 66.67px + 33.33vw, 900px);
  }
}

/* Between 768px and 1200px — keep side-by-side but compress the image
   column so text has room to breathe. */
@media (max-width: 1200px) {
  .glossary-detail-block__media {
    max-width: 420px;
  }
}

/* At 767px and below — stack: image on top, text below. */
@media (max-width: 767px) {
  .glossary-detail-block__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .glossary-detail-block__media {
    align-self: center;
    order: -1;
    max-width: 600px;
  }

  .glossary-detail-block__deco--tr,
  .glossary-detail-block--image-left .glossary-detail-block__deco--tr {
    top: -20px;
    right: -30px;
    left: auto;
    width: 100px;
    height: auto;
  }
  .glossary-detail-block__deco--bl,
  .glossary-detail-block--image-left .glossary-detail-block__deco--bl {
    left: -20px;
    right: auto;
    bottom: -30px;
    width: 120px;
    height: auto;
  }
}

/* WYSIWYG prose lists — restore what the reset strips. */
.glossary-detail-block__body ul,
.glossary-detail-block__body ol {
  padding-left: 3em;
  margin-block: 0.75em;
}

.glossary-detail-block__body ul {
  list-style: disc;
}

.glossary-detail-block__body ol {
  list-style: decimal;
}

.glossary-detail-block__body li {
  margin-block: 0.25em;
  text-align: left;
}

.glossary-detail-block__body a {
  color: var(--color-text-heading);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.glossary-detail-block__body a:hover,
.glossary-detail-block__body a:focus-visible {
  color: var(--color-green-2);
}

/* No-image variant — center the text column and widen it to fill the row. */
.glossary-detail-block--no-image .glossary-detail-block__row {
  justify-content: center;
}

.glossary-detail-block--no-image .glossary-detail-block__content {
  max-width: 800px;
  text-align: center;
}

.glossary-detail-block--no-image .glossary-detail-block__body {
  font-size: var(--font-size-body-lg);
}