/*
 * Featured Case Studies — styles ported from html/applab.css
 * (.feat-case-grid / .fcs-* one-at-a-time slider).
 *
 * patterns/featured-case-studies.php uses a core/query + core/post-template
 * Query Loop inside .fcs-track (a flex transform slider track).
 * core/query wraps its content in <div class="wp-block-query">, and
 * core/post-template further wraps each item in
 * <ul class="wp-block-post-template"><li>...<a class="fcs-slide">...
 * Those two extra wrapper levels break .fcs-track{ display:flex } — it only
 * ever sees ONE flex child (the query div), so the actual .fcs-slide cards
 * stack incorrectly inside it. Give them `display: contents` so they're
 * removed from the box tree entirely, making .fcs-slide the effective
 * direct flex children of .fcs-track again (same pattern already used to
 * fix .pt2-grid elsewhere in this theme).
 */
.fcs-track > .wp-block-query,
.fcs-track > .wp-block-query > .wp-block-post-template,
.fcs-track > .wp-block-query > .wp-block-post-template > li {
	display: contents;
}

/* ---- Featured case grid / card ---- */
.feat-case-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 3.5vw, 52px);
  align-items: stretch;
  margin-top: clamp(28px, 4vw, 48px);
  background: var(--off);
  border-radius: 32px;
  overflow: hidden;
}
.feat-case-track .feat-case-grid{
  margin-top: 0;
  flex: 0 0 auto;
  width: min(1200px, 92vw);
  scroll-snap-align: start;
}
/* Show the full case-study composite (no crop) on the brand gradient */
.feat-case-visual img{
  object-fit: contain !important;
  padding: clamp(12px, 1.4vw, 20px);
  box-sizing: border-box;
}
/* Keep carousel cards compact so the visual stays landscape (minimal letterbox) */
.feat-case-track .feat-case-body{ padding: clamp(30px, 3vw, 46px); justify-content: center; }
.feat-case-track .feat-case-body h3{ font-size: clamp(25px, 2.5vw, 32px); margin-bottom: 12px; }
.feat-case-track .feat-case-body .desc{ margin-bottom: 20px; }
.feat-case-track .feat-case-body .quick-stats{ padding: 18px 0; margin-bottom: 20px; }
.feat-case-track .feat-case-tags{ margin-bottom: 16px; }
.feat-case-visual{
  background: linear-gradient(135deg, #1a3a6e 0%, #2a7de1 100%);
  min-height: 420px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.feat-case-visual::before{
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(2,6,31,.30) 0%, rgba(2,6,31,.10) 50%, rgba(2,6,31,.40) 100%);
  z-index: 1;
}
.feat-case-visual .mark{
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(80px, 14vw, 200px);
  letter-spacing: -.05em;
  color: rgba(255,255,255,.95);
  line-height: .8;
}
.feat-case-visual .badge{
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 3;
  background: rgba(2,6,31,.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25);
  padding: 8px 14px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}

.feat-case-body{
  padding: clamp(36px, 4vw, 60px);
  display: flex;
  flex-direction: column;
}
.feat-case-tags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.feat-case-tags .tag{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
  background: var(--bg, rgba(42,125,225,.08));
  color: var(--fg, var(--blue));
}
.feat-case-tags .tag[data-t="ai"]      { --bg: rgba(42,125,225,.10); --fg: var(--blue); }
.feat-case-tags .tag[data-t="data"]    { --bg: rgba(0,160,223,.10);  --fg: var(--cyan); }
.feat-case-tags .tag[data-t="sports"]  { --bg: rgba(225,37,27,.08); --fg: var(--red); }
.feat-case-tags .tag[data-t="gov"]     { --bg: rgba(13,152,122,.10); --fg: var(--teal); }

.feat-case-body h3{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.feat-case-body .desc{
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--grey-1);
  margin-bottom: 26px;
}
.feat-case-body .quick-stats{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 22px 0;
  margin-bottom: 26px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feat-case-body .quick-stats b{
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -.025em;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 6px;
}
.feat-case-body .quick-stats span{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.feat-case-body .read-cta{
  margin-top: auto;
}
@media (max-width: 880px){
  .feat-case-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   FEATURED CASE-STUDY SLIDER (one at a time, arrows + dots + swipe)
   ========================================================================== */
.fcs-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(26px,3.5vw,44px); }
.fcs-nav{ display:flex; gap:10px; flex-shrink:0; }
.fcs-arrow{ width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:all .25s var(--ease); }
.fcs-arrow:hover{ background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-2px); }
.fcs-arrow svg{ width:20px; height:20px; }
.fcs-viewport{ overflow:hidden; border-radius:32px; }
.fcs-track{ display:flex; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.fcs-slide{ flex:0 0 100%; margin-top:0 !important; }
/* fill the visual panel edge-to-edge (override the global contain rule) */
.fcs-slide .feat-case-visual img{ object-fit:cover !important; padding:0 !important; }
.fcs-dots{ display:flex; gap:9px; justify-content:center; margin-top:24px; }
.fcs-dots button{ width:8px; height:8px; padding:0; border:none; border-radius:50%; background:var(--line); cursor:pointer; transition:all .3s var(--ease); }
.fcs-dots button:hover{ background:var(--grey-2); }
.fcs-dots button.is-active{ background:var(--blue); width:26px; border-radius:100px; }
@media (max-width:600px){ .fcs-head{ flex-direction:column; align-items:flex-start; gap:18px; } }
@media (prefers-reduced-motion: reduce){ .fcs-track{ transition:none; } }