/* ==========================================================================
   UNIT 7 · WHAT THE READINESS ASSESSMENT COVERS
   --------------------------------------------------------------------------
   "Assessment blueprint":
   • A wide workshop photo with the section title on a white card that
     overlaps its lower edge (an editorial header — unique on the page).
   • A checklist board: eight scope tiles that tick themselves off in
     sequence while a meter fills, leading into the ninth item —
     "Recommended next step" — presented as the outcome card with the
     primary CTA.
   Grid: 4 columns desktop, 2 columns tablet, touch slider on mobile
   (autoplay · infinite loop · dots · drag — components/slider.js).
   Tick sequence is pure CSS (transition-delay per --i) triggered by
   .is-checked, so slider clones animate identically.
   Static fallback: markup ships with .is-checked (all ticked).
   ========================================================================== */

.assess {
  background-color: var(--c-white);
}

.assess__decor {
  background:
    radial-gradient(ellipse 35% 40% at 0% 60%, rgba(0, 169, 182, 0.10), transparent 70%),
    radial-gradient(ellipse 35% 35% at 100% 95%, rgba(1, 62, 106, 0.07), transparent 70%);
}

/* Soft organic teal shapes (no grids) */
.assess__blob {
  position: absolute;
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  background: linear-gradient(135deg, rgba(0, 169, 182, 0.10), rgba(0, 169, 182, 0));
}

.assess__blob--a {
  inset-block-start: 38%;
  inset-inline-end: -8rem;
  inline-size: 26rem;
  block-size: 22rem;
}

.assess__blob--b {
  inset-block-end: -6rem;
  inset-inline-start: 10%;
  inline-size: 20rem;
  block-size: 16rem;
  rotate: 25deg;
}

/* ---------------------------------------------------------------------------
   Editorial header: wide photo + overlapping title card
   --------------------------------------------------------------------------- */
.assess__header {
  position: relative;
  margin-block-end: clamp(3rem, 6vw, 4.5rem);
}

.assess__photo {
  overflow: hidden;
  border-radius: var(--r-panel);
  aspect-ratio: 5 / 3;
  box-shadow: var(--shadow-md);
}

@media (min-width: 48rem) {
  .assess__photo {
    aspect-ratio: 5 / 2;
  }
}

.assess__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.assess__title-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  inline-size: min(100% - 2rem, 34rem);
  margin-block-start: -2.5rem;
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-radius: var(--r-card);
  background-color: var(--c-white);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

@media (min-width: 48rem) {
  .assess__title-card {
    justify-content: flex-start;
    margin-block-start: -3.5rem;
    margin-inline: clamp(1.5rem, 4vw, 3rem) auto;
    text-align: start;
  }
}

.assess__title-icon {
  display: none;
  place-items: center;
  flex-shrink: 0;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 14px;
  background-color: var(--c-navy);
  color: var(--c-teal);
}

@media (min-width: 30rem) {
  .assess__title-icon {
    display: grid;
  }
}

.assess__title-icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Completion meter
   --------------------------------------------------------------------------- */
.assess__meter {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

.assess__meter-track {
  flex: 1;
  block-size: 6px;
  border-radius: var(--r-pill);
  background-color: var(--c-cloud);
  overflow: hidden;
}

.assess__meter-fill {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-deep-teal), var(--c-teal));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease-in-out) 0.2s;
}

[dir="rtl"] .assess__meter-fill {
  transform-origin: right center;
  background: linear-gradient(-90deg, var(--c-deep-teal), var(--c-teal));
}

.assess.is-checked .assess__meter-fill {
  transform: scaleX(1);
}

.assess__meter-flag {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background-color: var(--c-cloud);
  color: var(--c-mist);
  transition: background-color 0.4s var(--ease-out) 1.4s, color 0.4s var(--ease-out) 1.4s;
}

.assess__meter-flag svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.assess.is-checked .assess__meter-flag {
  background-color: var(--c-teal);
  color: var(--c-navy);
}

/* ---------------------------------------------------------------------------
   Scope tiles
   --------------------------------------------------------------------------- */
.assess__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (min-width: 64rem) {
  .assess__tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-md);
  min-block-size: 9.5rem;
  padding: var(--space-lg);
  border-radius: var(--r-card);
  border: 1px solid var(--c-ink-a10);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}

.tile:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 169, 182, 0.4);
  box-shadow: var(--shadow-md);
}

.tile__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 12px;
  background-color: var(--c-teal-a12);
  color: var(--c-deep-teal);
}

.tile__icon svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.tile h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Check mark — ticks in sequence (delay from --i) */
.tile__check {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--c-ink-a20);
  color: transparent;
  transition:
    background-color 0.35s var(--ease-out) calc(var(--i, 0) * 140ms),
    border-color 0.35s var(--ease-out) calc(var(--i, 0) * 140ms),
    color 0.35s var(--ease-out) calc(var(--i, 0) * 140ms),
    scale 0.35s var(--ease-out) calc(var(--i, 0) * 140ms);
}

.tile__check svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.assess.is-checked .tile__check {
  border-color: var(--c-teal);
  background-color: var(--c-teal);
  color: var(--c-navy);
  scale: 1.08;
}

/* Mobile slider sizing */
.assess [data-slider] {
  --slide-size: 72%;
  --slider-gap: 0.875rem;
}

.assess [data-slider].is-slider .tile {
  min-block-size: 11rem;
}

/* ---------------------------------------------------------------------------
   Outcome card: Recommended next step
   --------------------------------------------------------------------------- */
.assess__outcome {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  justify-items: center;
  margin-block-start: var(--space-xl);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: var(--r-panel);
  background:
    radial-gradient(ellipse 50% 120% at 100% 50%, rgba(0, 169, 182, 0.22), transparent 70%),
    var(--c-navy);
  color: var(--c-on-dark-body);
  box-shadow: var(--shadow-lg);
  text-align: center;
  overflow: hidden;
}

[dir="rtl"] .assess__outcome {
  background:
    radial-gradient(ellipse 50% 120% at 0% 50%, rgba(0, 169, 182, 0.22), transparent 70%),
    var(--c-navy);
}

@media (min-width: 48rem) {
  .assess__outcome {
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    text-align: start;
  }
}

.assess__outcome-icon {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 16px;
  background-color: var(--c-teal);
  color: var(--c-navy);
  box-shadow: 0 0 0 6px rgba(0, 169, 182, 0.18);
}

.assess__outcome-icon svg {
  inline-size: 1.625rem;
  block-size: 1.625rem;
}

[dir="rtl"] .assess__outcome-icon svg {
  scale: -1 1;
}

.assess__outcome h3 {
  font-size: var(--fs-h3);
  color: var(--c-on-dark);
}