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

/* -------------------------------------------------------------
   DISCOVERY GRID  (3-col desktop → 1-col mobile)
   Discovery Call / Usability Audit / Requirements Clarification
   Each item: h3 title (heading font / text-h3 / 600) + body text.
   Same box pattern as .cs-approach-grid and .cs-features-grid.
   ------------------------------------------------------------- */
.cs-discovery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-line-stroke);
  margin-top: 32px;
}

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

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

.cs-discovery-item__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-discovery-item__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: 799px) {
  .cs-discovery-grid {
    grid-template-columns: 1fr;
  }

  .cs-discovery-item {
    border-right: none;
    padding: 24px;
    border-bottom: 1px solid var(--color-line-stroke);
  }

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

/* -------------------------------------------------------------
   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;
}

/* --short: used as a placeholder-only variant where no real image exists */
.cs-image-block--short {
  aspect-ratio: 820 / 379;
}


/* -------------------------------------------------------------
   RESPONSIVE OVERRIDES
   ------------------------------------------------------------- */
@media (max-width: 799px) {
  .cs-discovery-item__body {
    font-size: var(--text-caption);
  }
}