/* ========================================================================== 
   PPG Case Studies — front-end styles
   Tokens: navy #004675 · sand #f6d3ad · blue #004aab · red #b02417 · ink #101820
   Sand is ACCENT/BACKGROUND ONLY, never text on white.
   ========================================================================== */
.ppg-cs-root{
--ppg-navy:#004675; --ppg-navy-700:#003a5f; --ppg-navy-900:#012c49;
--ppg-navy-mid:#4f86b0; --ppg-navy-lt:#a7c6de;
--ppg-sand:#f6d3ad; --ppg-sand-tint:#fbeedd; --ppg-sand-pale:#fdf7ef;
--ppg-ink:#101820; --ppg-ink-soft:#33414d; --ppg-muted:#647686;
--ppg-red:#b02417; --ppg-blue2:#004aab;
--ppg-line:#d7e0e9; --ppg-pale:#eef4f9; --ppg-pale-2:#e4eef6;
--ppg-surface:#ffffff;
--ppg-control-height:54px;
--ppg-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
font-family:var(--ppg-sans);
color:var(--ppg-ink);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
.ppg-cs-root *,.ppg-cs-root *::before,.ppg-cs-root *::after{box-sizing:border-box;}
.ppg-cs-root :focus-visible{outline:2px solid var(--ppg-blue2); outline-offset:2px; border-radius:3px;}
.ppg-cs-sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ---------- SEARCH CARD ---------- */
.ppg-cs-search-card{
max-width:1320px; margin:0 auto; position:relative; z-index:5;
background:#fff; border:1px solid var(--ppg-line); border-radius:12px;
box-shadow:0 24px 54px rgba(1,44,73,.2); padding:26px 30px 22px;
}
/* Overlap the hero when the shortcode sits directly beneath a full-bleed banner */
.ppg-cs-root.is-overlapping .ppg-cs-search-card{margin-top:-64px;}
.ppg-cs-root .ppg-cs-search-row{display:flex; align-items:stretch; gap:12px; flex-wrap:wrap;}
.ppg-cs-root .ppg-cs-search-box{
flex:1 1 360px; display:flex; align-items:center; gap:10px;
background:var(--ppg-pale); border:1.5px solid var(--ppg-line); border-radius:8px;
height:var(--ppg-control-height); min-height:var(--ppg-control-height);
padding:0 16px; margin:0 !important; margin-block:0 !important; transition:border-color .15s, box-shadow .15s;
}
.ppg-cs-root .ppg-cs-search-box:focus-within{
border-color:var(--ppg-blue2); box-shadow:0 0 0 3px rgba(0,74,171,.12); background:#fff;
}
.ppg-cs-root .ppg-cs-search-box svg{flex-shrink:0; color:var(--ppg-muted); fill:none; stroke:currentColor;}
.ppg-cs-root .ppg-cs-search-box svg circle,
.ppg-cs-root .ppg-cs-search-box svg line{fill:none; stroke:currentColor;}
.ppg-cs-root .ppg-cs-search-input,
.ppg-cs-root .ppg-cs-search-input:hover,
.ppg-cs-root .ppg-cs-search-input:focus,
.ppg-cs-root .ppg-cs-search-input:focus-visible,
.ppg-cs-root .ppg-cs-search-input:active{
appearance:none; -webkit-appearance:none; flex:1 1 auto; width:auto; min-width:0;
border:0 !important; background:transparent; outline:0 !important; box-shadow:none !important;
font-family:var(--ppg-sans); font-size:14.5px; color:var(--ppg-ink);
padding:0; margin:0; height:100%; min-height:0; line-height:normal; border-radius:0;
}
.ppg-cs-root .ppg-cs-search-input::placeholder{color:var(--ppg-muted); opacity:1;}
.ppg-cs-root .ppg-cs-filter-group{
position:relative; display:flex; align-items:center; flex:0 0 auto;
height:var(--ppg-control-height); min-height:var(--ppg-control-height); margin:0;
}
.ppg-cs-root .ppg-cs-filter-group select{
appearance:none; -webkit-appearance:none; -moz-appearance:none;
font-family:var(--ppg-sans); background:#fff; background-image:none;
border:1.5px solid var(--ppg-line); border-radius:8px;
padding:0 34px 0 15px; font-size:13.5px; font-weight:600;
color:var(--ppg-ink-soft); cursor:pointer; transition:border-color .15s;
min-width:168px; height:var(--ppg-control-height); min-height:var(--ppg-control-height); line-height:normal; margin:0;
}
.ppg-cs-filter-group select:hover{border-color:var(--ppg-navy-lt);}
.ppg-cs-filter-group select:focus-visible{border-color:var(--ppg-blue2);}
.ppg-cs-fchev{position:absolute; right:13px; font-size:9px; color:var(--ppg-muted); pointer-events:none;}
.ppg-cs-meta-row{
display:flex; align-items:center; justify-content:space-between;
margin-top:16px; padding-top:15px; border-top:1px solid var(--ppg-line);
}
.ppg-cs-count{font-size:13px; color:var(--ppg-muted);}
.ppg-cs-count strong{color:var(--ppg-ink); font-weight:700;}
.ppg-cs-root button.ppg-cs-clear{
display:inline-flex !important; align-items:center; justify-content:center;
width:auto !important; min-width:0 !important; height:auto !important; min-height:0 !important;
padding:8px 14px !important; margin:0; font-size:13px !important; line-height:1.2 !important;
cursor:pointer; text-transform:none;
}
/* ---------- MAIN / GRID ---------- */
.ppg-cs-main{max-width:1320px; margin:0 auto; padding:52px 0 96px;}
.ppg-cs-sort-row{display:flex; align-items:center; justify-content:flex-end; margin-bottom:22px;}
.ppg-cs-sort-row .ppg-cs-filter-group select{min-width:184px;}
.ppg-cs-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;}
.ppg-cs-grid.ppg-cs-cols-1{grid-template-columns:1fr;}
.ppg-cs-grid.ppg-cs-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.ppg-cs-grid.ppg-cs-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ppg-cs-grid.ppg-cs-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.ppg-cs-card{
background:#fff; border:1px solid var(--ppg-line); border-radius:10px; overflow:hidden;
display:flex; flex-direction:column; text-decoration:none; color:inherit;
transition:transform .18s, box-shadow .18s, border-color .18s;
opacity:0; transform:translateY(10px); animation:ppgRiseIn .5s ease forwards;
}
.ppg-cs-card:hover{transform:translateY(-3px); box-shadow:0 18px 38px rgba(0,70,117,.15);}
.ppg-cs-media{width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--ppg-pale);}
.ppg-cs-image{display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease;}
.ppg-cs-card:hover .ppg-cs-image{transform:scale(1.025);}
.ppg-cs-media-placeholder{background:linear-gradient(135deg,var(--ppg-pale),var(--ppg-pale-2));}
.ppg-cs-card:nth-child(1){animation-delay:.02s;} .ppg-cs-card:nth-child(2){animation-delay:.06s;}
.ppg-cs-card:nth-child(3){animation-delay:.1s;} .ppg-cs-card:nth-child(4){animation-delay:.14s;}
.ppg-cs-card:nth-child(5){animation-delay:.18s;} .ppg-cs-card:nth-child(6){animation-delay:.22s;}
.ppg-cs-card:nth-child(7){animation-delay:.26s;} .ppg-cs-card:nth-child(8){animation-delay:.3s;}
.ppg-cs-card:nth-child(9){animation-delay:.34s;} .ppg-cs-card:nth-child(10){animation-delay:.38s;}
.ppg-cs-card:nth-child(11){animation-delay:.42s;} .ppg-cs-card:nth-child(12){animation-delay:.46s;}
@keyframes ppgRiseIn{to{opacity:1; transform:translateY(0);}}
.ppg-cs-accent{height:5px; width:100%;}
.ppg-cs-accent-navy{background:var(--ppg-navy);}
.ppg-cs-accent-blue{background:var(--ppg-blue2);}
.ppg-cs-accent-red{background:var(--ppg-red);}
.ppg-cs-accent-mid{background:var(--ppg-navy-mid);}
.ppg-cs-accent-sand{background:var(--ppg-sand);}
.ppg-cs-body{padding:22px 24px 20px; display:flex; flex-direction:column; gap:11px; flex:1;}
.ppg-cs-topic{
align-self:flex-start; background:var(--ppg-sand); color:var(--ppg-navy-900);
font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
padding:5px 10px; border-radius:3px;
}
.ppg-cs-title{
font-size:17.5px; font-weight:700; color:var(--ppg-navy); line-height:1.32;
letter-spacing:-.01em; margin:0;
}
.ppg-cs-insight{font-size:13.3px; color:var(--ppg-ink-soft); line-height:1.55; margin:0;}
.ppg-cs-insight strong{color:var(--ppg-navy);}
.ppg-cs-card-meta{
display:flex; align-items:center; justify-content:space-between; margin-top:auto;
padding-top:13px; border-top:1px solid var(--ppg-pale-2);
font-size:11.5px; color:var(--ppg-muted);
}
.ppg-cs-read{
font-size:12.5px; font-weight:700; color:var(--ppg-blue2);
display:inline-flex; align-items:center; gap:5px; transition:gap .15s,color .15s;
}
.ppg-cs-card:hover .ppg-cs-read{color:var(--ppg-navy-700); gap:8px;}
/* ---------- EMPTY STATE ---------- */
.ppg-cs-empty{display:none; text-align:center; padding:80px 20px 40px;}
.ppg-cs-empty.is-visible{display:block;}
.ppg-cs-empty h3{color:var(--ppg-navy); font-size:19px; font-weight:700; margin:0 0 8px 0;}
.ppg-cs-empty p{font-size:13.5px; color:var(--ppg-muted); max-width:44ch; margin:0 auto;}
.ppg-cs-empty .ppg-cs-clear{margin-top:14px; font-size:13.5px;}
/* ---------- LOAD MORE ---------- */
.ppg-cs-load-row{display:flex; justify-content:center; margin-top:38px;}
.ppg-cs-load-row.is-hidden{display:none;}
.ppg-cs-root button.ppg-cs-load,
.ppg-cs-root button.ppg-cs-load:hover,
.ppg-cs-root button.ppg-cs-load:focus,
.ppg-cs-root button.ppg-cs-load:focus-visible,
.ppg-cs-root button.ppg-cs-load:active{
appearance:none; -webkit-appearance:none; position:relative;
background:var(--ppg-navy) !important; border:1.5px solid var(--ppg-navy) !important;
color:#fff !important; -webkit-text-fill-color:#fff; box-shadow:none !important; text-shadow:none;
font-family:var(--ppg-sans); font-weight:700; font-size:13.5px !important; line-height:1.4;
padding:12px 26px; margin:0; min-height:0; height:auto; border-radius:7px; cursor:pointer;
text-transform:none; text-indent:0 !important; opacity:1; transition:border-color .15s, background .15s;
}
.ppg-cs-root button.ppg-cs-load:hover,
.ppg-cs-root button.ppg-cs-load:focus,
.ppg-cs-root button.ppg-cs-load:focus-visible,
.ppg-cs-root button.ppg-cs-load:active{
background:var(--ppg-navy-700) !important; border-color:var(--ppg-navy-700) !important;
}
.ppg-cs-root button.ppg-cs-load::before,
.ppg-cs-root button.ppg-cs-load::after{content:none !important;}
.ppg-cs-root button.ppg-cs-load[disabled]{opacity:.6; cursor:default;}
/* ---------- STATES ---------- */
.ppg-cs-card.is-hidden{display:none;}
.ppg-cs-grid.is-hidden{display:none;}
.ppg-cs-grid.is-loading{opacity:.55; transition:opacity .15s;}
/* ---------- RESPONSIVE (desktop-first, per the approved design) ---------- */
@media (max-width:1000px){
.ppg-cs-grid:not(.ppg-cs-cols-1){grid-template-columns:repeat(2,minmax(0,1fr));}
.ppg-cs-root .ppg-cs-search-row{flex-direction:column;}
.ppg-cs-root .ppg-cs-search-box{flex:0 0 var(--ppg-control-height); width:100%;}
.ppg-cs-root .ppg-cs-filter-group{width:100%;}
.ppg-cs-root .ppg-cs-filter-group select{width:100%;}
.ppg-cs-search-card{padding:20px 18px 18px;}
.ppg-cs-main{padding:36px 0 64px;}
.ppg-cs-root.is-overlapping .ppg-cs-search-card{margin-top:0;}
}
@media (max-width:600px){
.ppg-cs-grid:not(.ppg-cs-cols-1){grid-template-columns:1fr;}
.ppg-cs-meta-row{flex-direction:column; align-items:flex-start; gap:8px;}
.ppg-cs-body{padding:18px 18px 16px;}
.ppg-cs-title{font-size:16.5px;}
}
@media (prefers-reduced-motion:reduce){
.ppg-cs-root *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
.ppg-cs-card{opacity:1; transform:none;}
}