/* Phoenix Case Study Slider — front-end styles
   Colours use CSS variables so Elementor style controls can override them. */

.pcs-stack{
  --card-h: 460px;
  --top-gap: 90px;
  --pcs-accent: #f4761a;
  --pcs-accent-bright: #fb923c;
  --pcs-card-bg: #12100e;
  position:relative;
  max-width:1180px;
  margin:0 auto;
  font-family:'Montserrat','Poppins','Segoe UI',Arial,sans-serif;
}

.pcs-card{
  position:sticky;
  top: var(--top-gap);
  margin-bottom:60px;
  will-change:transform;
}

.pcs-inner{
  height:var(--card-h);
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg, var(--pcs-card-bg) 0%, #0b0908 100%);
  border:1px solid color-mix(in srgb, var(--pcs-accent) 22%, transparent);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  transform-origin:center top;
  transform: scale(calc(0.92 + 0.08 * var(--p, 1)));
  filter: brightness(calc(0.55 + 0.45 * var(--p, 1)));
  transition:transform .1s linear, filter .1s linear;
}
/* fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, #000 10%, #fff)){
  .pcs-inner{ border-color:rgba(244,118,26,.22); }
}

/* LEFT info */
.pcs-info{
  padding: clamp(28px, 3.4vw, 46px);
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:18px;
  position:relative;
}
.pcs-info::after{
  content:""; position:absolute; left:0; right:40%; bottom:0; height:55%;
  background:radial-gradient(ellipse at 10% 100%,
    color-mix(in srgb, var(--pcs-accent) 16%, transparent), transparent 70%);
  pointer-events:none;
}
.pcs-client{ margin:0; font-size: clamp(22px, 2.6vw, 30px); font-weight:400; color:#f4f1ee; position:relative; z-index:1; }
.pcs-services{
  font-size: clamp(11px, 1.1vw, 13px); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pcs-accent-bright); position:relative; z-index:1;
}
.pcs-logo{ position:relative; z-index:1; }
.pcs-logo img{ max-height:65px; max-width:135px; object-fit:contain; display:block; }
.pcs-copy{ margin:0; font-size: clamp(14px, 1.5vw, 16px); line-height:1.65; color:#c4beb8; max-width:42ch; position:relative; z-index:1; }

/* button (your ember pill) */
.pcs-btn{
  position:relative; overflow:hidden; z-index:1;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 30px; margin-top:4px;
  border:1px solid var(--pcs-accent); border-radius:999px;
  font-size: clamp(12px, 1.3vw, 14px); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:#fff; background:transparent;
  box-shadow:0 0 16px color-mix(in srgb, var(--pcs-accent) 22%, transparent);
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pcs-btn::after{
  content:""; position:absolute; top:-4px; bottom:-4px; left:0; width:46%;
  transform:skewX(-18deg) translateX(-260%);
  background:linear-gradient(90deg, rgba(255,224,180,0), rgba(255,224,180,.32), rgba(255,224,180,0));
  animation:pcs-sweep 5.5s cubic-bezier(.45,.05,.4,.95) 2s infinite; pointer-events:none;
}
@keyframes pcs-sweep{ 0%{transform:skewX(-18deg) translateX(-260%);} 22%,100%{transform:skewX(-18deg) translateX(520%);} }
.pcs-btn:hover, .pcs-btn:focus-visible{
  background:var(--pcs-accent);
  border-color:var(--pcs-accent-bright);
  box-shadow:0 0 30px color-mix(in srgb, var(--pcs-accent) 55%, transparent);
}
.pcs-btn svg{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.pcs-btn:hover svg, .pcs-btn:focus-visible svg{ transform:translateX(4px); }
.pcs-btn:focus-visible{ outline:2px solid #ffd9a0; outline-offset:3px; }

/* RIGHT media */
.pcs-media{ position:relative; overflow:hidden; background:#100d0b; }
.pcs-media img,
.pcs-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pcs-embed{ position:absolute; inset:0; }
.pcs-embed > *{ max-width:100%; }
.pcs-media-ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 12px, transparent 12px 24px);
}
.pcs-media-ph span{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#6f6a65;
  border:1px dashed color-mix(in srgb, var(--pcs-accent) 30%, transparent); padding:8px 16px; border-radius:8px;
}

/* mobile: stack boxes, disable sticky effect */
@media (max-width: 820px){
  .pcs-stack{ --card-h:auto; }
  .pcs-card{ position:relative; top:auto; margin-bottom:26px; }
  .pcs-inner{ grid-template-columns:1fr; height:auto; transform:none !important; filter:none !important; }
  .pcs-media{ min-height:240px; }
  .pcs-info{ padding:28px; }
}

@media (prefers-reduced-motion: reduce){
  .pcs-inner{ transform:none !important; filter:none !important; }
  .pcs-btn::after{ animation:none !important; }
}