/* ============================================================
   Case Study — shared styles
   Reusable layer for project case-study pages (first used by project-tivo.html).
   Loaded after main.css + custom.css. Classes are prefixed .cs-.
   A page sets its own accent with --cs-gradient / --cs-accent on .cs-page.
   ============================================================ */

.cs-page {
  --cs-radius: 16px;                               /* matches "Unified Image Border Radius" in custom.css */
  --cs-ease: cubic-bezier(.23, .65, .74, 1.09);    /* shared motion easing */
  --cs-gradient: linear-gradient(90deg, #ffffff 0%, #8e93a1 100%);
  --cs-accent: #ffffff;
  --cs-line: rgba(128, 128, 128, 0.18);
}

/* ------ Section labels (h2 styled like the portfolio split subtitles) ------ */
.cs-label {
  display: block;
  overflow: hidden;
  margin: 0;
  color: var(--t-medium);
  font: normal 600 1.4rem/1.6 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: -0.05rem;
}
.cs-label span { display: inline-flex; }

/* ------ Hero: dark in both themes (same rule as the home hero, keeps the white header legible) ------ */
.cs-hero {
  padding-top: 11rem;
  padding-bottom: 2rem;
}
@media only screen and (min-width: 1200px) {
  .cs-hero { padding-top: 13rem; }
}
:root[color-scheme="light"] .cs-hero {
  --base: var(--base--dark);
  --base-tint: var(--base-tint--dark);
  --t-bright: var(--t-bright--dark);
  --t-medium: var(--t-medium--dark);
  --t-muted: var(--t-muted--dark);
  --t-muted-extra: var(--t-muted-extra--dark);
  background-color: var(--base--dark);
  color: var(--t-bright--dark);
}
.cs-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
@media only screen and (min-width: 1200px) {
  .cs-hero__actions { align-items: flex-end; }
}

/* View Live Site button: white with black text at night; black with white text by day */
.cs-hero__actions .btn-default-accent {
  background-color: #fff;
  border-color: #fff;
  color: #000;
}
.cs-hero__actions .btn-default-accent i svg { fill: #000; }
:root[color-scheme="light"] .cs-hero__actions .btn-default-accent {
  background-color: #000;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
:root[color-scheme="light"] .cs-hero__actions .btn-default-accent i svg { fill: #fff; }

/* ------ Project metadata ------ */
.cs-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 3.6rem 0 0;
  border-top: 1px solid var(--cs-line);
}
@media only screen and (min-width: 768px)  { .cs-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media only screen and (min-width: 1200px) { .cs-meta { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 5rem; } }
.cs-meta__item {
  padding: 1.6rem 1.6rem 1.6rem 0;
  border-bottom: 1px solid var(--cs-line);
}
.cs-meta dt {
  margin-bottom: 0.6rem;
  color: var(--t-medium);
  font: normal 600 1.2rem/1.4 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: -0.03rem;
}
.cs-meta dd {
  margin: 0;
  color: var(--t-bright);
  font: normal 500 1.5rem/1.4 var(--_font-default);
}

/* ------ Media (images + video) ------ */
.cs-media { position: relative; margin: 0; }
.cs-media__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--cs-radius);
  background: #0a0a0a;
  isolation: isolate;
}
.cs-media__frame--video { aspect-ratio: 16 / 9; }
.cs-media__frame img,
.cs-media__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-caption {
  max-width: 64rem;
  margin-top: 1.6rem;
  color: var(--t-medium);
  font: normal 400 1.5rem/1.6 var(--_font-default);
}
.cs-caption__label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--t-bright);
  font: normal 600 1.2rem/1.4 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: -0.03rem;
}

/* two-column media composition */
.cs-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media only screen and (min-width: 1200px) {
  .cs-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; align-items: start; }
  .cs-duo--wide-left  { grid-template-columns: 7fr 5fr; }
  .cs-duo--wide-right { grid-template-columns: 5fr 7fr; }
}

/* spacing between stacked blocks inside a section */
.mxd-block + .mxd-block > .cs-media,
.mxd-block + .mxd-block > .cs-duo,
.mxd-block + .mxd-block > .cs-grid-block {
  margin-top: 4rem;
}
@media only screen and (min-width: 1200px) {
  .mxd-block + .mxd-block > .cs-media,
  .mxd-block + .mxd-block > .cs-duo,
  .mxd-block + .mxd-block > .cs-grid-block { margin-top: 6rem; }
}

/* ------ Grid alignment: blocks placed directly in .mxd-block get the grid-item gutter ------ */
.mxd-block > .cs-media,
.mxd-block > .cs-duo,
.mxd-block > .cs-grid-block,
.mxd-block > .mxd-block-split__subtitle {
  padding-left: 3rem;
  padding-right: 3rem;
}

/* ------ Gradient divider (drawn on scroll by js/case-study.js) ------ */
.cs-divider { width: 100%; padding: 0 3rem; }
@media only screen and (min-width: 768px)  { .cs-divider { padding: 0 6rem; } }
@media only screen and (min-width: 1600px) { .cs-divider { padding: 0 10rem; } }
.cs-divider span {
  display: block;
  height: 1px;
  background: var(--cs-gradient);
  opacity: 0.7;
  transform-origin: left center;
}

/* ------ Lists ------ */
.cs-list { margin: 0; padding: 0; list-style: none; }
.cs-list li {
  position: relative;
  padding: 1.4rem 0 1.4rem 2.4rem;
  border-bottom: 1px solid var(--cs-line);
  color: var(--t-bright);
  font: normal 500 1.7rem/1.4 var(--_font-default);
}
.cs-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0.8rem; height: 0.8rem;
  margin-top: -0.4rem;
  border-radius: 50%;
  background: currentColor;
}

/* ------ Placeholders (remove once real content is added) ------ */
.cs-placeholder {
  color: #ff6700 !important;
  font-family: var(--_font-accent) !important;
}

/* ------ Keyboard focus ------ */
.cs-page a:focus-visible,
.cs-page button:focus-visible {
  outline: 2px solid var(--cs-accent);
  outline-offset: 3px;
}

/* ------ Reduced motion ------ */
@media (prefers-reduced-motion: reduce) {
  .cs-page *,
  .cs-page *::before,
  .cs-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}