/* ============================================================
   MINI CASE STUDY — shared brand-themed styles
   Used by: dis-mobile.html, saife-store.html, some.html
   Shared case study structure lives in css/casestudy.css

   Each page sets its accent by adding a theme-* class to <body>:
     .theme-dis  → #00B0E0 (DIS Mobile, sky blue)
     .theme-ss   → #10B981 (Saife Store, emerald green)
     .theme-some → #3B82F6 (SOME, blue)
============================================================ */

.theme-dis {
  --mcs-accent:   #00B0E0;
  --mcs-accent-2: #38C4E8;
  --mcs-a10: rgba(0,176,224,0.1);
  --mcs-a12: rgba(0,176,224,0.12);
  --mcs-glow: rgba(0,176,224,0.18);
  --mcs-a20: rgba(0,176,224,0.2);
  --mcs-a25: rgba(0,176,224,0.25);
  --mcs-a40: rgba(0,176,224,0.4);
  --mcs-a45: rgba(0,176,224,0.45);
}
.theme-ss {
  --mcs-accent:   #10B981;
  --mcs-accent-2: #0D9488;
  --mcs-a10: rgba(16,185,129,0.1);
  --mcs-a12: rgba(16,185,129,0.12);
  --mcs-glow: rgba(16,185,129,0.18);
  --mcs-a20: rgba(16,185,129,0.2);
  --mcs-a25: rgba(16,185,129,0.25);
  --mcs-a40: rgba(16,185,129,0.4);
  --mcs-a45: rgba(16,185,129,0.45);
}
.theme-some {
  --mcs-accent:   #3B82F6;
  --mcs-accent-2: #6366F1;
  --mcs-a10: rgba(59,130,246,0.1);
  --mcs-a12: rgba(59,130,246,0.12);
  --mcs-glow: rgba(59,130,246,0.18);
  --mcs-a20: rgba(59,130,246,0.2);
  --mcs-a25: rgba(59,130,246,0.25);
  --mcs-a40: rgba(59,130,246,0.4);
  --mcs-a45: rgba(59,130,246,0.45);
}
/* ---- Outbound visit button ---------------------------------- */
.mcs-visit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  background: var(--mcs-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.mcs-visit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--mcs-glow);
}

/* ---- Hero blobs --------------------------------------------- */
.cs-hero__blob--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--mcs-accent), transparent);
  top: -200px; left: -150px;
}
.cs-hero__blob--2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--mcs-accent-2), transparent);
  bottom: -100px; right: -100px;
}

/* ---- Section tag ---------------------------------------------- */
.mcs-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mcs-accent);
  background: var(--mcs-a10);
  border: 1px solid var(--mcs-a25);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

/* ---- Hero title ------------------------------------------- */
.mcs-title {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 12px;
}
.mcs-title span { color: var(--mcs-accent); }

.mcs-tagline {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 500;
  color: var(--mcs-accent);
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}

/* ---- Meta label accent ------------------------------------ */
.cs-meta__label { color: var(--mcs-accent); }

/* ---- Hero visual -------------------------------------------- */
.mcs-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.mcs-visual__img {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  border: 1px solid var(--mcs-a20);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 40px var(--mcs-glow);
}

/* ---- Showcase accent -------------------------------------- */
.pg-tag { border-color: var(--mcs-a20); }
.pg-tag:hover { border-color: var(--mcs-a45); color: var(--text); }

/* ---- Feature list accent ---------------------------------- */
.pg-tag-list--features .pg-tag svg { background: var(--mcs-a12); color: var(--mcs-accent); }
.pg-tag-list--features .pg-tag:hover { border-color: var(--mcs-a40); }

/* ---- Team -------------------------------------------------- */
.mcs-team {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1000px;
}
.mcs-team__member {
  position: relative;
  flex: 0 1 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.mcs-team__member:hover { border-color: var(--mcs-a40); transform: translateY(-3px); }
.mcs-team__member--me { border-color: var(--mcs-a40); box-shadow: 0 0 32px var(--mcs-glow); }
.mcs-team__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--mcs-a12);
  border: 1px solid var(--mcs-a25);
  color: var(--mcs-accent);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mcs-team__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcs-team__avatar--illustration img { width: 78%; height: 78%; object-fit: contain; }
.mcs-team__member--me .mcs-team__avatar { border: 2px solid var(--mcs-accent); }
.mcs-team__name { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.mcs-team__role { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }

@media (max-width: 480px) {
  .mcs-team { gap: 12px; }
  .mcs-team__member { flex-basis: calc(50% - 6px); padding: 24px 12px 20px; }
  .mcs-team__avatar { width: 72px; height: 72px; font-size: 20px; }
}