/* Engagements */

.engagement-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(560px, 1.1fr);
  gap: clamp(var(--space-8), 7vw, var(--space-9));

  align-items: start;
}

/* Intro */

.engagement-intro .section-title {
  max-width: 14ch;
}

.engagement-intro .section-lead {
  max-width: 30ch;
}

.engagement-intro .engagement-helper {
  max-width: 30ch;
  margin: var(--space-5) 0 0;

  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-regular);
}

.engagement-intro .engagement-helper-line {
  display: block;
  margin-top: var(--space-1);
}

.engagement-intro .engagement-helper strong {
  font-weight: var(--weight-medium);
}

.engagement-intro .engagement-helper-tail {
  opacity: 0.62;
}

.engagement-intro .engagement-helper-line a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  opacity: 0.62;
  transition: opacity var(--transition-base);
}

.engagement-intro .engagement-helper-line a:focus-visible {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .engagement-intro .engagement-helper-line a:hover {
    opacity: 1;
  }
}

/* List */

.engagement-list {
  display: flex;
  flex-direction: column;
  gap: 0;

  margin-top: var(--space-2);
}

/* Items */

.engagement-item {
  display: block;

  --engagement-item-padding: clamp(var(--space-5), 2.4vw, var(--space-6));
  --engagement-hover-shift: var(--motion-shift-row);

  box-sizing: border-box;
  max-width: calc(100% - var(--engagement-hover-shift));

  padding: var(--engagement-item-padding);

  border-radius: var(--radius-card);

  color: inherit;
  text-decoration: none;

  background: var(--surface-card-dark);
  border: var(--card-border);
  box-shadow: var(--card-shadow);

  transition:
    transform var(--transition-base),
    background-color var(--transition-base),
    opacity var(--transition-base);
}

.engagement-item + .engagement-item {
  margin-top: var(--space-3);
}

.section-shell[data-theme="light"] .engagement-item,
.section-shell[data-theme="surface"] .engagement-item,
.section-shell[data-theme="surface-darker"] .engagement-item,
.section-shell[data-theme="mineral-soft"] .engagement-item,
.section-shell[data-theme="surface-elevated"] .engagement-item {
  background: var(--surface-card-light);
}

.engagement-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow ."
    "title ."
    "description action";
  column-gap: var(--space-5);
  row-gap: 0;

  align-items: end;
}

/* Text hierarchy */

.engagement-eyebrow {
  grid-area: eyebrow;

  display: flex;
  align-items: center;
  gap: var(--space-2);

  margin: 0 0 var(--space-7);

  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);

  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.engagement-eyebrow-label {
  opacity: 0.7;
}

.engagement-eyebrow-icon,
.engagement-detail-eyebrow__icon {
  --engagement-icon-optical-base: 1.25rem;
  --engagement-icon-optical-ratio: 1;
  --engagement-icon-optical-max: 1.25;

  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  /* Shared slot = largest mark, so the three centres stack on one axis.
     Creation is the visual baseline; evolution/experience scale the SVG. */
  width: calc(var(--engagement-icon-optical-base) * var(--engagement-icon-optical-max));
  height: calc(var(--engagement-icon-optical-base) * var(--engagement-icon-optical-max));

  color: var(--signal);
}

.engagement-eyebrow-icon--evolution,
.engagement-detail-eyebrow__icon--evolution {
  --engagement-icon-optical-ratio: var(--engagement-icon-optical-max);
}

.engagement-eyebrow-icon--experience,
.engagement-detail-eyebrow__icon--experience {
  --engagement-icon-optical-ratio: 1.08;
}

.engagement-eyebrow-icon svg,
.engagement-detail-eyebrow__icon svg {
  display: block;

  width: calc(var(--engagement-icon-optical-base) * var(--engagement-icon-optical-ratio));
  height: calc(var(--engagement-icon-optical-base) * var(--engagement-icon-optical-ratio));
}

.engagement-head {
  display: contents;
}

.engagement-title {
  grid-area: title;

  margin: 0;

  font-size: calc(clamp(var(--text-xl), 2vw, 2.5rem) * 0.9);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);

  text-wrap: balance;
}

.engagement-description {
  grid-area: description;

  max-width: 40ch;
  margin-top: var(--space-3);

  font-size: clamp(var(--text-base), 1.25vw, var(--text-lg));
  line-height: var(--leading-base);

  opacity: var(--opacity-interactive-subtle);

  text-wrap: pretty;
}

/* Action — layout only; appearance in button.css */

.engagement-content .btn--pill.btn--sm,
.engagement-action {
  grid-area: action;
  align-self: end;
  justify-self: end;
}

/* Focus */

.engagement-item:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: var(--motion-shift-subtle);
}

/* Hover */

@media (hover: hover) and (pointer: fine) {
  .engagement-item:hover {
    transform: translateX(var(--motion-shift-row));

    background: var(--surface-card-dark-hover);
  }

  .section-shell[data-theme="light"] .engagement-item:hover,
  .section-shell[data-theme="surface"] .engagement-item:hover,
  .section-shell[data-theme="surface-darker"] .engagement-item:hover,
  .section-shell[data-theme="mineral-soft"] .engagement-item:hover,
  .section-shell[data-theme="surface-elevated"] .engagement-item:hover {
    background: var(--surface-card-light-hover);
  }
}

/* Tablet */

@media (max-width: 1100px) and (min-width: 761px) {

  .engagement-layout {
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(var(--space-6), 5vw, var(--space-8));
  }

}

@media (max-width: 980px) {

  .engagement-layout {
    grid-template-columns: 1fr;
    gap: calc(var(--space-8) * 0.7);
  }

  .engagement-list {
    margin-top: 0;
  }

  .engagement-intro .section-title,
  .engagement-intro .section-lead,
  .engagement-intro .engagement-helper {
    max-width: none;
  }

  .engagement-item {
    background: var(--surface-card-dark-hover);
  }

  .section-shell[data-theme="light"] .engagement-item,
  .section-shell[data-theme="surface"] .engagement-item,
  .section-shell[data-theme="surface-darker"] .engagement-item,
  .section-shell[data-theme="mineral-soft"] .engagement-item,
  .section-shell[data-theme="surface-elevated"] .engagement-item {
    background: var(--surface-card-light-hover);
  }

  .engagement-eyebrow {
    margin-bottom: calc(var(--space-7) * 0.7);
  }

  .engagement-description {
    max-width: 50ch;
  }

}

@media (max-width: 820px) {

  .engagement-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: stretch;
  }

  .engagement-item {
    width: calc(100% - var(--engagement-hover-shift));
    max-width: none;
  }

  .engagement-item:first-child {
    grid-column: 1 / -1;
  }

  .engagement-item + .engagement-item {
    margin-top: 0;
  }

  .engagement-item {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 100%;
  }

  .engagement-item .engagement-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
  }

  .engagement-item .engagement-eyebrow {
    order: 1;
  }

  .engagement-item .engagement-title {
    order: 2;
    width: 100%;
  }

  .engagement-item .engagement-description {
    order: 3;
    width: 100%;
    margin-top: var(--space-3);
    margin-bottom: calc(var(--space-4) * 1.5);
  }

  .engagement-item .engagement-content .btn--pill.btn--sm,
  .engagement-item .engagement-action {
    order: 4;
    align-self: flex-end;
    flex-shrink: 0;
    width: fit-content;
    max-width: 100%;
    margin-top: auto;
  }

}

@media (max-width: 760px) {

  .engagement-layout {
    gap: var(--space-6);
  }

  .engagement-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .engagement-item {
    --engagement-item-padding: var(--space-5);

    display: block;
    width: calc(100% - var(--engagement-hover-shift));
    max-width: none;

    padding:
      var(--space-4)
      var(--space-5)
      var(--space-5);
  }

  .engagement-item:first-child {
    grid-column: auto;
  }

  .engagement-item + .engagement-item {
    margin-top: 0;
  }

  .engagement-item:first-child,
  .engagement-item + .engagement-item {
    padding-top: var(--space-4);
  }

  .engagement-item .engagement-content,
  .engagement-item:not(:first-child) .engagement-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "description"
      "action";
    row-gap: var(--space-2);
    align-items: start;
    flex: unset;
    min-height: 0;
  }

  .engagement-item:not(:first-child) .engagement-eyebrow,
  .engagement-item:not(:first-child) .engagement-title,
  .engagement-item:not(:first-child) .engagement-description {
    order: unset;
    width: auto;
  }

  .engagement-item:not(:first-child) .engagement-description {
    margin-top: 0;
    margin-bottom: 0;
  }

  .engagement-eyebrow {
    margin-bottom: 1.2rem;
  }

  .engagement-title {
    font-size: 1.90575rem;
    line-height: var(--leading-heading);
  }

  .engagement-description {
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;

    font-size: var(--text-base);
    line-height: var(--leading-base);

    opacity: 0.82;
  }

  .engagement-content .btn--pill.btn--sm,
  .engagement-action,
  .engagement-item:not(:first-child) .engagement-content .btn--pill.btn--sm,
  .engagement-item:not(:first-child) .engagement-action {
    justify-self: end;
    align-self: end;

    order: unset;
    flex-shrink: unset;
    width: auto;
    max-width: none;
    margin-top: var(--space-4);

    opacity: 0.9;
  }

  .engagement-item:not(:first-child) {
    display: block;
    align-self: auto;
    min-height: 0;
  }

}