/* =============================================================
   ROLAI CASE STUDY — PAGE-SPECIFIC STYLES
   Builds on top of tokens + base + components + fanatics.css
   (fanatics.css provides all shared case-study patterns).
   Scope: rolai.html only.
   data-theme="rolai" resolves to the same blue palette as
   data-theme="fanatics": --accent-dark #375A89, etc.
   ============================================================= */


/* -------------------------------------------------------------
   PROCESS STEPS GRID  (4-col desktop → 2-col tablet/mobile)
   01 Client Signal / 02 Rapid Design & Dev / etc.
   ------------------------------------------------------------- */
.cs-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--color-line-stroke);
  margin-top: 32px;
}

.cs-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-right: 1px solid var(--color-line-stroke);
}

.cs-step:last-child {
  border-right: none;
}

.cs-step__number {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-zinc-400);
}

.cs-step__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--color-zinc-900);
}

.cs-step__body {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: var(--lh-body-base);
  color: var(--color-zinc-600);
}

@media (max-width: 1220px) {
  .cs-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-step:nth-child(even) {
    border-right: none;
  }

  .cs-step:nth-child(1),
  .cs-step:nth-child(2) {
    border-bottom: 1px solid var(--color-line-stroke);
  }
}

@media (max-width: 799px) {
  .cs-steps-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* -------------------------------------------------------------
   FEATURE CARDS GRID  (2×2)
   Chat / Prompt Library / Knowledge / Agents
   ------------------------------------------------------------- */
.cs-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-line-stroke);
  margin-top: 40px;
}

.cs-feature-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-right: 1px solid var(--color-line-stroke);
  border-bottom: 1px solid var(--color-line-stroke);
}

/* Right column — no right border */
.cs-feature-card:nth-child(even) {
  border-right: none;
}

/* Bottom row — no bottom border */
.cs-feature-card:nth-last-child(-n+2):nth-child(odd),
.cs-feature-card:last-child {
  border-bottom: none;
}

.cs-feature-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--color-zinc-900);
}

.cs-feature-card__body {
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  line-height: var(--lh-body-base);
  color: var(--color-zinc-600);
}

@media (max-width: 799px) {
  .cs-features-grid {
    grid-template-columns: 1fr;
  }

  .cs-feature-card {
    border-right: none;
    border-bottom: 1px solid var(--color-line-stroke);
  }

  .cs-feature-card:last-child {
    border-bottom: none;
  }
}


/* -------------------------------------------------------------
   BULLET LIST
   Used for "What We Built in Response" & "Core Value" sections.
   Each item uses a dot marker in accent-dark.
   ------------------------------------------------------------- */
.cs-list-heading {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--color-zinc-900);
  margin-top: 32px;
}

.cs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-line-stroke);
}

.cs-list__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-right: 1px solid var(--color-line-stroke);
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: var(--lh-body-base);
  color: var(--color-zinc-600);
}

.cs-list__item:last-child {
  border-right: none;
}

/* 4-column variant — desktop 4 col, tablet 2 col, mobile 1 col */
.cs-list--4col {
  grid-template-columns: repeat(4, 1fr);
}

.cs-list--4col .cs-list__item:nth-child(4n) {
  border-right: none;
}

.cs-list__item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--color-zinc-900);
}


/* -------------------------------------------------------------
   IMAGE BLOCKS — REAL IMAGES
   Let loaded images define their own height (no fixed aspect-ratio).
   Override fanatics.css height: 100% so images don't stretch.
   ------------------------------------------------------------- */
.cs-image-block img {
  height: auto;
}




/* -------------------------------------------------------------
   RESPONSIVE OVERRIDES
   ------------------------------------------------------------- */

/* Tablet: 4-col → 2-col */
@media (max-width: 1220px) {
  .cs-list--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Restore right border on items that were borderless at 4-col */
  .cs-list--4col .cs-list__item {
    border-right: 1px solid var(--color-line-stroke);
    border-bottom: 1px solid var(--color-line-stroke);
  }

  /* Right column: no right border */
  .cs-list--4col .cs-list__item:nth-child(2n) {
    border-right: none;
  }

  /* Bottom row: no bottom border */
  .cs-list--4col .cs-list__item:nth-last-child(-n+2):nth-child(odd),
  .cs-list--4col .cs-list__item:last-child {
    border-bottom: none;
  }
}

@media (max-width: 799px) {
  .cs-list {
    grid-template-columns: 1fr;
  }

  .cs-list__item {
    font-size: var(--text-body-s);
    border-right: none;
    border-bottom: 1px solid var(--color-line-stroke);
  }

  .cs-list__item:last-child {
    border-bottom: none;
  }

  .cs-list--4col {
    grid-template-columns: 1fr;
  }

  .cs-list--4col .cs-list__item {
    border-right: none;
    border-bottom: 1px solid var(--color-line-stroke);
  }

  .cs-list-heading {
    margin-top: 24px;
  }
}