/* ============================================
   SOCIAL MANAGEMENT — page styles
   ============================================ */

/* ============ PROCESS TIMELINE — HORIZONTAL ============ */
.process {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding-top: 8px;
}

/* Line connects first circle center to last circle center.
   With 6 equal columns and 5 gaps of 16px between them:
   total content width = 100%
   one column width = (100% - 5*16px) / 6
   first circle center = column_width / 2
   last circle center = 100% - column_width / 2
   line span = 100% - column_width
*/
.process__line {
  position: absolute;
  top: 24px;
  left: calc(((100% - 80px) / 6) / 2);
  right: calc(((100% - 80px) / 6) / 2);
  height: 1px;
  background-image: linear-gradient(to right, rgba(25, 40, 65, 0.3) 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  z-index: 0;
}

.process__travel {
  position: absolute;
  top: 24px;
  left: calc(((100% - 80px) / 6) / 2);
  right: calc(((100% - 80px) / 6) / 2);
  height: 1px;
  overflow: visible;
  z-index: 1;
}

@keyframes process-travel {
  0%   { left: 0%; opacity: 1; }
  88%  { left: 100%; opacity: 1; }
  94%  { left: 100%; opacity: 0; }
  95%  { left: 0%; opacity: 0; }
  100% { left: 0%; opacity: 0; }
}

.process__dot {
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-orange);
  box-shadow:
    0 0 0 4px rgba(244, 162, 97, 0.25),
    0 0 24px 4px rgba(244, 162, 97, 0.7),
    0 0 8px var(--c-orange);
  animation: process-travel 8s linear infinite;
}

.process__tail {
  position: absolute;
  top: 50%;
  transform: translate(-100%, -50%);
  height: 2px;
  width: 70px;
  background: linear-gradient(to left, rgba(244, 162, 97, 0.7), rgba(244, 162, 97, 0));
  border-radius: 2px;
  margin-left: -7px;
  animation: process-travel 8s linear infinite;
}

.process__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.process__circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-cream);
  border: 1.5px solid var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  flex-shrink: 0;
  margin-bottom: 16px;
}

.process__circle--target {
  background: var(--c-orange);
  border-color: var(--c-orange);
  font-size: 18px;
  font-style: normal;
  box-shadow: 0 0 0 4px rgba(244, 162, 97, 0.15);
}

.process__text { padding: 0 4px; }

.process__title {
  font-size: 16px;
  color: var(--c-navy);
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.process__title--target {
  font-size: 20px;
  color: var(--c-orange);
  font-weight: 700;
  font-style: italic;
}

.process__he {
  font-size: 12px;
  color: var(--c-navy);
  opacity: 0.55;
  margin-top: 4px;
}


/* ============ TOOLKIT MARQUEES ============ */
.toolkit {
  padding: 48px 0;
}

.toolkit__header {
  padding: 0 48px 40px;
}

.toolkit__header .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.toolkit__marquee {
  overflow: hidden;
  margin-bottom: 18px;
}

.toolkit__marquee:last-child {
  margin-bottom: 0;
}

.toolkit__marquee--mask {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.toolkit__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  align-items: center;
}

@keyframes toolkit-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes toolkit-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.toolkit__track--left { animation: toolkit-left 60s linear infinite; }
.toolkit__track--right { animation: toolkit-right 70s linear infinite; }
.toolkit__track--slow { animation-duration: 80s; }

.toolkit__item {
  font-size: 42px;
  line-height: 1;
  color: var(--c-navy);
  font-weight: 400;
  letter-spacing: -1.5px;
  padding: 0 28px;
  flex-shrink: 0;
}

.toolkit__dot {
  color: var(--c-orange);
  font-size: 42px;
  line-height: 1;
  flex-shrink: 0;
}


/* ============ SELECTED CASES ============ */
.cases {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 0 20px;
  align-items: start;
  position: relative;
}

.cases__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 20px;
  z-index: 0;
}

.cases__card {
  background: var(--c-cream-dark);
  border-radius: 4px;
}

.cases__cell {
  position: relative;
  z-index: 1;
  padding-left: 28px;
  padding-right: 28px;
}

.cases__cell--eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--c-navy);
  opacity: 0.5;
  font-weight: 500;
  padding-top: 32px;
}

.cases__cell--name {
  font-size: 28px;
  line-height: 1.1;
  color: var(--c-navy);
  font-weight: 500;
  letter-spacing: -0.8px;
  padding-top: 16px;
}

.cases__cell--tag {
  font-size: 12px;
  color: var(--c-navy);
  opacity: 0.55;
  padding-top: 8px;
}

.cases__cell--result {
  font-size: 20px;
  line-height: 1.25;
  color: var(--c-navy);
  font-weight: 400;
  letter-spacing: -0.3px;
  padding-top: 64px;
  padding-bottom: 32px;
}


/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  /* PROCESS TIMELINE — vertical on mobile with animated traveling dot */
  .process {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 8px;
    position: relative;
  }
  
  /* Hide horizontal line/travel; create vertical replacements via ::before/::after on process */
  .process__line { display: none; }
  .process__travel { display: none; }
  
  /* Vertical line on the left, from first circle center to last circle center */
  .process::before {
    content: "";
    position: absolute;
    top: 32px;
    height: calc(100% - 64px);
    left: 23px;
    width: 1px;
    background: rgba(25, 40, 65, 0.15);
    z-index: 0;
  }
  
  /* Traveling orange dot animation — sits BEHIND the circles */
  .process::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 32px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--c-orange);
    box-shadow:
      0 0 0 4px rgba(244, 162, 97, 0.25),
      0 0 24px 4px rgba(244, 162, 97, 0.7),
      0 0 8px var(--c-orange);
    animation: process-vertical 8s linear infinite;
    z-index: 0;
    pointer-events: none;
  }
  
  @keyframes process-vertical {
    0%   { top: 32px; opacity: 1; }
    88%  { top: calc(100% - 32px - 13px); opacity: 1; }
    94%  { top: calc(100% - 32px - 13px); opacity: 0; }
    95%  { top: 32px; opacity: 0; }
    100% { top: 32px; opacity: 0; }
  }
  
  .process__step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
    position: relative;
    z-index: 3;
  }
  
  .process__circle { 
    margin-bottom: 0; 
    flex-shrink: 0;
    position: relative;
    z-index: 4;
    background: var(--c-cream);
  }
  .process__text { padding: 0; text-align: left; flex: 1; }
  .process__title { font-size: 18px; }
  .process__title--target { font-size: 22px; }
  .process__he { font-size: 13px; margin-top: 2px; }
  
  /* TOOLKIT MARQUEES */
  .toolkit__item, .toolkit__dot { font-size: 26px; padding: 0 16px; }
  .toolkit__header { padding: 0 20px 28px; }
  
  /* CASES — Each case is ONE solid block. 
     Trick: give the .cases container the cream-dark background,
     and the gap rows act like 'separators' showing the page bg color underneath.
     But since grid container bg is single color, we need to use the cells themselves
     with NO gap between them within a case. */
  .cases {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "e1"
      "n1"
      "t1"
      "r1"
      "gap1"
      "e2"
      "n2"
      "t2"
      "r2"
      "gap2"
      "e3"
      "n3"
      "t3"
      "r3";
    grid-template-rows:
      auto auto auto auto
      24px
      auto auto auto auto
      24px
      auto auto auto auto;
    gap: 0;
    row-gap: 0 !important;
    position: static;
    background: transparent;
    align-items: stretch;
  }
  .cases__bg { display: none !important; }
  
  /* All case cells get the same background. 
     They sit in adjacent rows with no gap, so they form a solid block. */
  .cases__cell {
    background: var(--c-cream-dark);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0;
    padding-bottom: 0;
    position: static;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Assign cells to areas */
  .cases__cell--eyebrow:nth-child(2) { grid-area: e1; }
  .cases__cell--eyebrow:nth-child(3) { grid-area: e2; }
  .cases__cell--eyebrow:nth-child(4) { grid-area: e3; }
  .cases__cell--name:nth-child(5)    { grid-area: n1; }
  .cases__cell--name:nth-child(6)    { grid-area: n2; }
  .cases__cell--name:nth-child(7)    { grid-area: n3; }
  .cases__cell--tag:nth-child(8)     { grid-area: t1; }
  .cases__cell--tag:nth-child(9)     { grid-area: t2; }
  .cases__cell--tag:nth-child(10)    { grid-area: t3; }
  .cases__cell--result:nth-child(11) { grid-area: r1; }
  .cases__cell--result:nth-child(12) { grid-area: r2; }
  .cases__cell--result:nth-child(13) { grid-area: r3; }
  
  /* Padding for each cell type (visual spacing within case) */
  .cases__cell--eyebrow { 
    padding-top: 24px; 
    padding-bottom: 12px; 
    border-radius: 4px 4px 0 0;
    opacity: 1;
    color: rgba(25, 40, 65, 0.5);
  }
  .cases__cell--name { 
    padding-top: 0; 
    padding-bottom: 8px; 
    font-size: 26px; 
    border-radius: 0;
    opacity: 1;
  }
  .cases__cell--tag { 
    padding-top: 0; 
    padding-bottom: 16px; 
    border-radius: 0;
    opacity: 1;
    color: rgba(25, 40, 65, 0.55);
  }
  .cases__cell--result { 
    padding-top: 0; 
    padding-bottom: 24px; 
    font-size: 18px; 
    margin-bottom: 0; 
    border-radius: 0 0 4px 4px;
    opacity: 1;
  }
  
  /* HEADINGS */
  .h1-big { font-size: 44px; letter-spacing: -1.8px; }
  .h2-medium { font-size: 32px; letter-spacing: -1.2px; }
  .body-large { font-size: 24px; letter-spacing: -0.8px; }
  .section { padding: 32px 20px; }
}