/** Charlie Portfolio Grid – component styles only. Does not change header/footer/MetaSlider. */
.chp-root {
    --chp-columns:3;--chp-gap:24px;--chp-row-gap:30px;--chp-blue:#054e7d;
    color:#333;font:400 15px/1.55 'Open Sans',Arial,sans-serif;
    width:100%;max-width:100%;min-width:0;
}
.chp-root,.chp-root *{box-sizing:border-box}
.chp-items{min-width:0;width:100%;}
.chp-layout-grid .chp-items{
    display:grid;grid-template-columns:repeat(var(--chp-columns),minmax(0,1fr));
    column-gap:var(--chp-gap);row-gap:var(--chp-row-gap);
}
.chp-card{min-width:0;overflow:hidden;border:1px solid #e8e8e8;border-radius:3px;background:#fff;
    display:flex;flex-direction:column;position:relative;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.chp-hover-lift .chp-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.chp-hover-border .chp-card:hover{border-color:var(--chp-blue)}
.chp-card:focus-within{outline:2px solid var(--chp-blue);outline-offset:2px}
.chp-equal .chp-card{height:100%}
.chp-media{display:block;aspect-ratio:16/10;overflow:hidden;background:#f2f3f5;position:relative;flex-shrink:0;text-decoration:none}
.chp-media img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease}
.chp-image-zoom .chp-card:hover .chp-media img{transform:scale(1.06)}
.chp-image-dim .chp-card:hover .chp-media img{filter:brightness(.78)}
.chp-ratio-auto .chp-media img{height:auto}
.chp-placeholder{display:flex;align-items:center;justify-content:center;background:#f0f2f4;color:#aab0b5;font-size:55px}
.chp-body{padding:18px 18px 20px;display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}
.chp-categories{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.chp-category{display:inline-flex;align-items:center;padding:3px 9px;border-radius:3px;background:#e9f2f8;color:var(--chp-blue);font-size:11px;line-height:1.45;font-weight:600;letter-spacing:.02em}
.chp-title{font-family:'Roboto Slab',Georgia,serif;font-size:19px;line-height:1.4;font-weight:400;letter-spacing:0;margin:0 0 11px!important;text-transform:none;color:#333}
.chp-title a{text-decoration:none!important;color:inherit;transition:color .2s ease}
.chp-title a:hover{color:var(--chp-blue)}
.chp-excerpt{font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:1.65;color:#777;margin:0 0 19px!important;overflow-wrap:anywhere}
.chp-meta{color:#888;display:block;font-size:12px;margin:0 0 10px}
.chp-button{margin-top:auto!important;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:8px 16px;
    font:600 12px/1.25 'Open Sans',Arial,sans-serif;color:#fff;background:var(--chp-blue);border:1px solid var(--chp-blue);border-radius:3px;
    text-decoration:none!important;transition:background-color .2s ease,border-color .2s ease;}
.chp-button:hover,.chp-button:focus-visible{background:#043b61;border-color:#043b61;color:#fff}
.chp-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;align-items:center}
.chp-filter{display:inline-flex;min-height:34px;align-items:center;padding:6px 13px;border:1px solid #d6dce1;border-radius:3px;
    background:#fff;color:#444!important;font-size:13px;text-decoration:none!important;transition:background .2s,color .2s}
.chp-filter:hover{border-color:var(--chp-blue);color:var(--chp-blue)!important}
.chp-filter.is-active{color:#fff;background:var(--chp-blue);border-color:var(--chp-blue)}
.chp-filter.is-active:hover{color:#fff!important}
.chp-pages{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:30px}
.chp-pages a,.chp-pages span{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;
    border-radius:3px;text-align:center;padding:5px;text-decoration:none!important;color:#333}
.chp-pages a:hover,.chp-pages a.is-active{background:var(--chp-blue);color:#fff!important;border-color:var(--chp-blue)}
.chp-empty{padding:30px;border:1px dashed #ddd;text-align:center;color:#777}
/* List */
.chp-layout-list .chp-items{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--chp-row-gap)}
.chp-layout-list .chp-card{display:grid;grid-template-columns:minmax(150px,34%) minmax(0,1fr)}
.chp-layout-list .chp-media{width:100%;height:100%;aspect-ratio:auto}
.chp-layout-list .chp-media img{width:100%;height:100%;object-fit:cover}
.chp-layout-list .chp-body{width:100%}
/* Masonry – pure CSS columns. */
.chp-layout-masonry .chp-items{display:block;column-count:var(--chp-columns);column-gap:var(--chp-gap)}
.chp-layout-masonry .chp-card{width:100%;break-inside:avoid;display:inline-flex;margin:0 0 var(--chp-row-gap)}
.chp-layout-masonry .chp-media{height:auto}
/* Carousel – CSS scroll-snap; JS only improves arrows/dots/autoplay. */
.chp-layout-carousel .chp-items{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--chp-columns) - 1) * var(--chp-gap))/var(--chp-columns));gap:var(--chp-gap);
    overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;padding:5px 2px 16px;}
.chp-layout-carousel .chp-card{scroll-snap-align:start}
.chp-carousel-nav{display:flex;justify-content:flex-end;gap:8px;margin-bottom:14px}
.chp-arrow{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d9d9d9;border-radius:3px;background:#fff;color:#333;cursor:pointer}
.chp-arrow span{font-size:26px;line-height:0}
.chp-arrow:hover,.chp-arrow:focus-visible{background:var(--chp-blue);color:#fff;border-color:var(--chp-blue)}
.chp-arrow:disabled{opacity:.4;cursor:default}
.chp-dots{display:flex;gap:8px;justify-content:center;align-items:center;margin:15px 0}
.chp-dot{height:9px;width:9px;padding:0;border:0;border-radius:50%;background:#c9cfd4;cursor:pointer}
.chp-dot.is-active{background:var(--chp-blue)}
.chp-root a:focus-visible,.chp-root button:focus-visible{outline:2px solid var(--chp-blue);outline-offset:2px}
@media(max-width:1024px){.chp-root{--chp-columns:2}}
@media(max-width:767px){.chp-root{--chp-columns:1}.chp-layout-list .chp-card{display:flex;flex-direction:column}.chp-layout-list .chp-media{height:auto;aspect-ratio:16 / 10}.chp-layout-list .chp-media img{height:100%}.chp-title{font-size:18px}}
@media(prefers-reduced-motion:reduce){.chp-card,.chp-media img,.chp-root a{transition:none!important}.chp-layout-carousel .chp-items{scroll-behavior:auto}}