/* Case Studies hub + detail pages -- page-specific styles (AICOIN-130).
   Brand tokens match the site's REAL, documented palette -- primary blue
   #008DD2, accent/purple #393185, heading #1d1a33, body copy #425065 -- the
   same palette as /pricing/ (src/app/pricing/pricing.css). Page content runs
   in Poppins (loaded via Google Fonts below); the header and footer are the
   real site chrome (copied from the live site, see index.html) and keep
   their own real font, Outfit -- forced back below so it isn't overridden by
   this page's Poppins default.
   (deploy touch: forces a frontend rebuild so vendor/header-footer.css,
   vendor/outfit-font.css and vendor/fonts/*.woff2 are picked up -- AICOIN-130) */

:root {
  --cs-blue: #008dd2;
  --cs-blue-dark: #393185;
  --cs-accent: #393185;
  --cs-text: #1d1a33;
  --cs-muted: #425065;
  --cs-bg-light: #fafafa;
  --cs-border: #e3e3e3;
  --cs-radius: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  color: var(--cs-text);
  background: #fff;
  font-size: 17px;
  line-height: 1.65;
}

/* The real header/footer (pasted from the live site) keep the real site's own
   font -- Outfit -- not this page's Poppins -- and the real site's own base
   16px, not this page's 17px (the body bump above was leaking into the real
   chrome via inheritance, widening nav text enough to squeeze the logo and
   footer links smaller than on every other page -- AICOIN-130 round 6). */
#ae_header, #ae_header *, .main-footer, .main-footer * {
  font-family: "Outfit", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
}

/* The candidate-notice ticker is its own, older component with a smaller
   utilitarian font on every other page of the site (Verdana 11px) -- the
   blanket Outfit/16px reset above was leaking into it too, so it rendered
   bigger/bolder here than everywhere else (chat feedback, AICOIN-140).
   Restore its real font, scoped tighter than the reset above so it wins. */
.main-footer .ticker, .main-footer .ticker * {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--cs-blue);
}

.cs-container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 60px);
}

.cs-btn {
  display: inline-block;
  background: var(--cs-blue);
  color: #fff !important;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  text-align: center;
}

.cs-btn:hover {
  background: var(--cs-blue-dark);
}

.cs-btn-outline {
  background: transparent;
  color: var(--cs-blue) !important;
  border: 1.5px solid var(--cs-blue);
}

.cs-btn-outline:hover {
  background: var(--cs-blue);
  color: #fff !important;
}

/* Light-on-gradient button for the dark CTA band, matching /pricing/'s pp-btn-light. */
.cs-btn-light {
  background: #fff;
  color: var(--cs-blue) !important;
}

.cs-btn-light:hover {
  background: #f0f4ff;
}

/* ---------- hero ---------- */
.cs-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
}

.cs-hero-media {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cs-blue-dark) 0%, var(--cs-blue) 55%, var(--cs-accent) 100%)
    center / cover no-repeat;
}

.cs-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(13, 25, 45, 0.45);
}

.cs-hero-inner {
  position: relative;
  padding-block: clamp(56px, 9vw, 116px);
}

.cs-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 18px;
}

.cs-crumb a {
  color: rgba(255, 255, 255, 0.8);
}

/* Breadcrumb sitting on a light background (detail pages), not the dark hero scrim. */
.cs-crumb-light,
.cs-crumb-light a {
  color: var(--cs-muted);
}

.cs-eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  padding: 5px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.cs-hero h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.15;
  margin: 0 0 18px;
  max-width: 17ch;
}

.cs-hero-sub {
  max-width: 64ch;
  font-size: clamp(16px, 1.8vw, 20px);
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

/* ---------- disclosure line ---------- */
.cs-disclosure {
  max-width: 920px;
  margin: 34px auto 0;
  font-size: 15px;
  color: var(--cs-muted);
  text-align: center;
}

/* ---------- Why Choose Alliance International (same copy + layout as /pricing/,
   pricing.css .pp-section/.pp-proof-grid/.pp-logos -- reused class names on purpose
   so this section is visually identical, not a lookalike). ---------- */
.cs-why-section {
  padding-block: 64px;
}

.cs-why-eyebrow {
  display: block;
  color: var(--cs-blue);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pp-title {
  color: var(--cs-text);
  font-size: clamp(27px, 2.9vw, 38px);
  font-weight: 600;
  margin: 10px 0 16px;
}

.pp-section-intro {
  color: var(--cs-muted);
  font-size: 18px;
  line-height: 1.6;
  max-width: 840px;
  margin-bottom: 8px;
}

.pp-proof-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0 8px;
}

.pp-proof-card {
  padding: 24px 16px;
  background: #fff;
  border: 1px solid rgba(15, 39, 68, 0.08);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 141, 210, 0.18);
}

.pp-proof-value {
  display: block;
  color: var(--cs-blue);
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 7px;
}

.pp-proof-label {
  color: var(--cs-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.pp-logos {
  margin-top: 36px;
}

.pp-logos .imagelist ul {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pp-logos .imagelist li {
  flex: 0 0 auto;
  width: 152px;
  padding: 12px 18px;
  border: 1px solid var(--cs-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-logos .imagelist img {
  display: block;
  max-height: 44px;
  width: auto;
}

@media (max-width: 991px) {
  .pp-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .pp-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- tabs ---------- */
.cs-tabbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 38px 0 42px;
  border-bottom: 1px solid var(--cs-border);
  padding-bottom: 6px;
}

.cs-tab {
  appearance: none;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--cs-muted);
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
}

.cs-tab:hover {
  color: var(--cs-blue);
}

.cs-tab[aria-selected="true"] {
  color: #fff;
  background: var(--cs-blue);
}

.cs-tab:focus-visible {
  outline: 2px solid var(--cs-blue-dark);
  outline-offset: 2px;
}

/* ---------- card grid ---------- */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.cs-empty-panel {
  text-align: center;
  color: var(--cs-muted);
  padding: 48px 0;
}

.cs-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cs-card:hover {
  box-shadow: 0 10px 24px -8px rgba(4, 123, 182, 0.28);
  transform: translateY(-2px);
}

.cs-card-media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--cs-bg-light) 0%, #e9f3fb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cs-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-card-media svg {
  width: 44px;
  height: 44px;
  color: var(--cs-blue);
  opacity: 0.55;
}

.cs-card-body {
  padding: 20px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.cs-card-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cs-blue);
}

.cs-card-industry {
  font-size: 12.5px;
  color: var(--cs-muted);
}

.cs-card h3 {
  font-size: 19.5px;
  line-height: 1.3;
  margin: 0;
}

.cs-card h3 a {
  color: inherit;
  text-decoration: none;
}

.cs-card h3 a:hover,
.cs-card h3 a:focus-visible {
  text-decoration: underline;
}

.cs-card p {
  font-size: 15.5px;
  color: var(--cs-text);
  margin: 0;
  flex: 1;
}

.cs-card-link {
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cs-card-link svg {
  width: 14px;
  height: 14px;
}

/* ---------- detail page ---------- */
.cs-detail-hero {
  padding-block: clamp(42px, 6.5vw, 76px);
  background: var(--cs-bg-light);
  border-bottom: 1px solid var(--cs-border);
}

.cs-detail-media {
  aspect-ratio: 16 / 7;
  max-width: 760px;
  margin-top: 20px;
  border-radius: var(--cs-radius);
  background: linear-gradient(135deg, var(--cs-blue-dark) 0%, var(--cs-blue) 55%, var(--cs-accent) 100%);
  overflow: hidden;
}

.cs-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* License attribution for the handful of case-study photos that are CC BY /
   CC BY-SA (not CC0) -- required by the licence, kept small and out of the
   way under the hero image. AICOIN-134. */
.cs-photo-credit {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--cs-muted);
}

.cs-photo-credit a {
  color: inherit;
  text-decoration: underline;
}

.cs-detail-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--cs-muted);
  margin-bottom: 10px;
}

.cs-detail-meta strong {
  color: var(--cs-blue);
}

.cs-detail-hero h1 {
  font-size: clamp(27px, 3.7vw, 38px);
  line-height: 1.22;
  margin: 0 0 16px;
  max-width: 32ch;
}

.cs-note {
  font-size: 15px;
  color: var(--cs-muted);
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 14px 18px;
  max-width: 62ch;
}

.cs-section {
  padding-block: 36px;
}

.cs-section h2 {
  font-size: 23px;
  margin: 0 0 12px;
}

.cs-section p {
  max-width: 68ch;
  margin: 0;
}

.cs-related {
  background: var(--cs-bg-light);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 24px;
  margin-bottom: 40px;
}

/* ---------- CTA band (same gradient as /pricing/'s final CTA, pp-cta-section) ---------- */
.cs-cta-band {
  background: linear-gradient(135deg, #393185 0%, #008dd2 100%);
  color: #fff;
  padding-block: 52px;
  text-align: center;
}

.cs-cta-band h2 {
  margin: 0 0 12px;
  font-size: clamp(23px, 2.9vw, 32px);
}

.cs-cta-band p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.88);
}

.cs-btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Header and footer are the real site chrome now (pasted markup, see index.html) --
   styled by the real header.css/footer.css/bootstrap.min.css linked in <head>, not
   by page-specific rules here. */

/* ---------- mobile (375px phone row in the plan's Playwright table) ---------- */
@media (max-width: 760px) {
  .cs-grid {
    grid-template-columns: 1fr;
  }

  .cs-tabbar {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .cs-tab {
    flex: 0 0 auto;
  }
}