/**
 * Extracted from template-parts/incl/case-study-with-caraousal.php inline <style> block.
 * Scoped under .px-csh-carousel (distinct from case-study-without-caraousal.php
 * and cs-hero.php, which reuse the same csh- class prefix for different sections).
 */

.px-csh-carousel.csh-section {
    --csh-ink: var(--color-primary-black);
    --csh-paper: var(--color-neutral-paper);
    --csh-line: var(--color-neutral-line);
    --csh-line-strong: var(--color-neutral-line-strong);
    --csh-brass: var(--color-primary-orange);
    --csh-sage: var(--color-neutral-muted);
    background:var(--csh-ink);
    color:var(--csh-paper);
    font-family: var(--font-body);
    padding:80px 0;
  }
  .px-csh-carousel .csh-stage { max-width:1440px; margin:0 auto; padding:0 40px; }

  /* ---------- EYEBROW (now its own full-width row above csh-intro) ---------- */
  .px-csh-carousel .csh-eyebrow { display:flex; align-items:center; gap:14px; margin:0 0 32px; }
  .px-csh-carousel .csh-eyebrow span:first-child { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--csh-sage); white-space:nowrap; }
  /* Fixed: was var(--sage), which isn't defined inside this scope */
  .px-csh-carousel .csh-eyebrow .csh-eyebrow-count { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--csh-sage); white-space:nowrap; }
  .px-csh-carousel .csh-rule { height:1px; flex:1; background:var(--csh-line); }

  .px-csh-carousel .csh-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:44px; flex-wrap:wrap; }
  .px-csh-carousel .csh-intro-left { display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
  .px-csh-carousel .csh-heading { font-family: var(--font-heading); font-weight:500; font-size:clamp(28px, 3.4vw, 44px); line-height:1.1; margin:0; max-width:16ch; }
  .px-csh-carousel .csh-subtext { font-size:14.5px; line-height:1.6; color:var(--csh-sage); max-width:38ch; margin:0; }

  .px-csh-carousel .csh-btn {
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--csh-ink);
    font-weight:600;
    background:var(--csh-paper); border:1px solid var(--csh-paper); border-radius:2px; padding:12px 20px;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .px-csh-carousel .csh-btn:hover,
  .px-csh-carousel .csh-btn:focus-visible,
  .px-csh-carousel .csh-btn:active {
    background:var(--csh-brass);
    border-color:var(--csh-brass);
    color:var(--csh-paper);
  }

  /* ---------- SECTION LABELS ----------
     Layout: [LABEL] ——— rule ——— [count, e.g. "03 Engagements"] */
  .px-csh-carousel .csh-section-label {
    display:flex; align-items:center; gap:14px;
   /* margin:0 0 24px;*/
    margin:24px 0px;
    font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--csh-sage);
  }
  .px-csh-carousel .csh-section-label span { white-space:nowrap; }
  .px-csh-carousel .csh-section-label + .csh-section-label { margin-top:64px; }
  .px-csh-carousel .csh-label-rule { height:1px; flex:1; background:var(--csh-line); }

  /* ---------- FEATURED CAROUSEL ---------- */
  .px-csh-carousel .csh-topbar {
    display:flex; align-items:center; justify-content:space-between;
    border:1px solid var(--csh-line-strong); border-radius:2px; padding:18px 28px; margin-bottom:28px;
  }
  .px-csh-carousel .csh-company { font-family: var(--font-heading); font-weight:500; font-size:19px; }
  .px-csh-carousel .csh-industry-label { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--csh-sage); }

  .px-csh-carousel .csh-hero-image {
    position:relative; width:100%; aspect-ratio:16/8.2;
    border:1px solid var(--csh-line); border-radius:2px; overflow:hidden; background:var(--color-black); margin-bottom:20px;
  }
  .px-csh-carousel .csh-hero-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .5s ease; }
  .px-csh-carousel .csh-hero-image img.active { opacity:1; }

  .px-csh-carousel .csh-arrow {
    position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; z-index:2;
    border:1px solid color-mix(in srgb, var(--color-neutral-paper) 55%, transparent); background:color-mix(in srgb, var(--color-primary-black) 35%, transparent); color:var(--csh-paper);
    display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(3px);
    transition:background .2s ease, border-color .2s ease;
  }
  .px-csh-carousel .csh-arrow:hover { background:color-mix(in srgb, var(--color-primary-black) 65%, transparent); border-color:var(--csh-paper); }
  .px-csh-carousel .csh-arrow svg { width:16px; height:16px; }
  .px-csh-carousel .csh-arrow.prev { left:16px; }
  .px-csh-carousel .csh-arrow.next { right:16px; }

  .px-csh-carousel .csh-dots { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:2; }
  .px-csh-carousel .csh-dot { width:22px; height:2px; background:color-mix(in srgb, var(--color-neutral-paper) 35%, transparent); cursor:pointer; transition:background .2s ease; }
  .px-csh-carousel .csh-dot.active { background:var(--csh-paper); }

  .px-csh-carousel .csh-counter { position:absolute; top:16px; right:18px; font-size:11px; letter-spacing:0.1em; color:color-mix(in srgb, var(--color-neutral-paper) 75%, transparent); font-variant-numeric:tabular-nums; z-index:2; }

  .px-csh-carousel .csh-results { display:flex; border:1px solid var(--csh-line); border-radius:2px; margin-bottom:0; }
  .px-csh-carousel .csh-primary { width:40%; padding:30px 34px; border-right:1px solid var(--csh-line); display:flex; flex-direction:column; align-items:flex-start; }
  .px-csh-carousel .csh-primary h3 { font-family: var(--font-heading); font-weight:500; font-size:20px; margin:0 0 10px; line-height:1.25; }
  .px-csh-carousel .csh-primary h3 em { font-style:normal; color:var(--csh-brass); }
  .px-csh-carousel .csh-primary p { margin:0 0 20px; font-size:13.5px; line-height:1.55; color:var(--csh-sage); max-width:46ch; }

  .px-csh-carousel .csh-cta {
    display:inline-block; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--csh-paper); background:transparent;
    border:1px solid var(--csh-line-strong); border-radius:2px; padding:10px 20px; cursor:pointer;
    font-weight:600;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
  }
  .px-csh-carousel .csh-cta:hover,
  .px-csh-carousel .csh-cta:focus-visible,
  .px-csh-carousel .csh-cta:active {
    background:var(--csh-brass);
    border-color:var(--csh-brass);
    color:var(--csh-paper);
  }

  .px-csh-carousel .csh-stat-boxes { flex:1; display:flex; }
  .px-csh-carousel .csh-stat-box { flex:1; padding:30px 22px; border-right:1px solid var(--csh-line); display:flex; flex-direction:column; justify-content:center; }
  .px-csh-carousel .csh-stat-box:last-child { border-right:none; }
  .px-csh-carousel .csh-stat-box .csh-value2 { font-family: var(--font-heading); font-weight:600; font-size:clamp(26px, 2.4vw, 34px); line-height:1; color:var(--csh-brass); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .px-csh-carousel .csh-stat-box .csh-label2 { margin-top:10px; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--csh-sage); line-height:1.3; }

  /* ---------- GRID ---------- */
  .px-csh-carousel .csh-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:24px; }

  .px-csh-carousel .csh-card {
    position:relative; border:1px solid var(--csh-line); border-radius:3px; overflow:hidden;
    display:flex; flex-direction:column; background:color-mix(in srgb, var(--color-neutral-paper) 1.5%, transparent);
    transition:border-color .2s ease, transform .2s ease;
  }
  .px-csh-carousel .csh-card:hover { border-color:var(--color-primary-orange); transform:translateY(-2px); }

  /* csh-card-link removed — CTA is now the real link, card is no longer a click target */

  .px-csh-carousel .csh-card-image { width:100%; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--csh-line); }
  .px-csh-carousel .csh-card-image img { width:100%; height:100%; object-fit:cover; display:block; }

  .px-csh-carousel .csh-card-body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
  .px-csh-carousel .csh-card-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; }
  .px-csh-carousel .csh-card-company { font-family: var(--font-heading); font-weight:500; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .px-csh-carousel .csh-card-industry { font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--csh-sage); border:1px solid var(--csh-line); border-radius:20px; padding:3px 9px; white-space:nowrap; flex-shrink:0; }

  .px-csh-carousel .csh-card-heading { font-family: var(--font-heading); font-weight:500; font-size:16.5px; line-height:1.3; margin:0 0 8px; }
  .px-csh-carousel .csh-card-text { font-size:12.5px; line-height:1.55; color:var(--csh-sage); margin:0 0 18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

  .px-csh-carousel .csh-card-stats { display:flex; border-top:1px solid var(--csh-line); padding-top:14px; margin-top:auto; margin-bottom:16px; }
  .px-csh-carousel .csh-card-stat { flex:1; padding-right:14px; border-right:1px solid var(--csh-line); }
  .px-csh-carousel .csh-card-stat:last-child { border-right:none; padding-right:0; padding-left:14px; }
  .px-csh-carousel .csh-card-value { font-family: var(--font-heading); font-weight:600; font-size:21px; color:var(--csh-brass); line-height:1; font-variant-numeric:tabular-nums; }
  .px-csh-carousel .csh-card-label { margin-top:6px; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--csh-sage); line-height:1.3; }

  .px-csh-carousel .csh-card-cta {
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--csh-paper); align-self:flex-start;
    padding: 10px 20px;
     font-weight:600;
    border: 1px solid var(--csh-line-strong);
    border-radius: 2px;
    position: relative;
    z-index: 2; /* sits above nothing now, but keeps it clickable/focusable above card bg */
    transition:background .2s ease, border-color .2s ease, color .2s ease;
  }
  .px-csh-carousel .csh-card-cta svg { width:13px; height:13px; transition:transform .2s ease; }

  /* CTA hover/focus/active now reacts to ITSELF only, not the parent card */
  .px-csh-carousel .csh-card-cta:hover svg,
  .px-csh-carousel .csh-card-cta:focus-visible svg {
    transform:translateX(3px);
  }

  .px-csh-carousel .csh-card-cta:hover,
  .px-csh-carousel .csh-card-cta:focus-visible,
  .px-csh-carousel .csh-card-cta:active {
    background:var(--csh-brass);
    border-color:var(--csh-brass);
    color:var(--csh-paper);
  }

  @media (max-width: 1100px){ .px-csh-carousel .csh-grid { grid-template-columns:repeat(2, 1fr); } .px-csh-carousel .csh-card:nth-child(3) { display:none; } }
  @media (max-width: 860px){
    .px-csh-carousel .csh-stage { padding:0 16px; }
    .px-csh-carousel .csh-intro { flex-direction:column; align-items:flex-start; }
    .px-csh-carousel .csh-results { flex-wrap:wrap; }
    .px-csh-carousel .csh-primary { width:100%; border-right:none; border-bottom:1px solid var(--csh-line); padding:24px; }
    .px-csh-carousel .csh-stat-boxes { width:100%; flex-wrap:wrap; }
    .px-csh-carousel .csh-stat-box { width:50%; flex:none; border-bottom:1px solid var(--csh-line); padding:22px 18px; }
    .px-csh-carousel .csh-grid { grid-template-columns:1fr; }
    .px-csh-carousel .csh-card:nth-child(2),
.px-csh-carousel .csh-card:nth-child(3) { display:none; }
  }