/* ==========================================================================
   CHRGHR Contributors — branded author cards with Charge Orange border glow
   Palette: Charge Orange #D75229 · Orange-700 #B33A18 · Ink Black #231F20
   ========================================================================== */

.chrghr-wrap,
.chrghr-grid{
    --charge-orange:#D75229;
    --charge-orange-700:#B33A18;
    --ink-black:#231F20;
    --ink-500:#8a8687;
    --ink-100:#eceaea;
    --paper:#ffffff;
}

.chrghr-grid{
    display:grid;
    grid-template-columns:repeat(var(--chrghr-cols,4),minmax(0,1fr));
    gap:var(--chrghr-gap,28px);
    font-family:var(--chrghr-font, Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
}

/* Wrapper + search + no-results */
.chrghr-wrap{
    font-family:var(--chrghr-font, Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
}
.chrghr-search{
    display:flex;
    justify-content:center;
    margin:0 0 28px;
}
.chrghr-search-input{
    width:100%;
    max-width:420px;
    padding:13px 20px;
    font-size:15px;
    color:var(--ink-black);
    background:#fff;
    border:1.5px solid var(--ink-100);
    border-radius:999px;
    outline:none;
    transition:border-color .25s ease, box-shadow .25s ease;
    font-family:inherit;
}
.chrghr-search-input:focus{
    border-color:var(--charge-orange);
    box-shadow:0 0 0 4px rgba(215,82,41,.14);
}
.chrghr-noresults{
    text-align:center;
    color:var(--ink-black);
    opacity:.7;
    font-family:inherit;
    margin:26px 0;
}

/* Register the angle so the glow can rotate. Falls back gracefully if unsupported. */
@property --chrghr-angle{
    syntax:"<angle>";
    initial-value:0deg;
    inherits:false;
}

/* Equal-height cards: grid items stretch, inner card fills, button pins bottom */
.chrghr-grid{align-items:stretch;}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.chrghr-card{
    position:relative;
    display:flex;                    /* let inner stretch to full card height */
    border-radius:calc(var(--chrghr-radius,18px) + 2px);
    background:var(--paper);
    isolation:isolate;
    transition:transform .3s ease, box-shadow .3s ease;
}

/* Featured (pinned) authors */
.chrghr-featured-badge{
    position:absolute;
    top:14px;
    right:14px;
    z-index:2;
    padding:5px 12px;
    border-radius:999px;
    background:var(--charge-orange);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    box-shadow:0 4px 12px rgba(215,82,41,.35);
    pointer-events:none;
}
.chrghr-card--featured .chrghr-card-inner{
    border-color:rgba(215,82,41,.45);
    box-shadow:0 10px 28px rgba(215,82,41,.14);
}
.chrghr-card--featured .chrghr-avatar{
    background:var(--charge-orange);
}

/* Progressive scroll auto-load states */
.chrghr-card.chrghr-hidden{display:none !important;}
.chrghr-card.chrghr-reveal{animation:chrghr-fade-in .5s ease both;}
@keyframes chrghr-fade-in{
    from{opacity:0;transform:translateY(14px);}
    to{opacity:1;transform:none;}
}
.chrghr-sentinel{width:100%;height:1px;}

/* ==========================================================================
   LAZY-LOAD IMAGE ANIMATION (skeleton pulse + fade-in)
   Only active when JS runs (.chrghr-js); no-JS keeps images fully visible.
   ========================================================================== */
.chrghr-img{transition:opacity .45s ease;}
.chrghr-js .chrghr-img{opacity:0;}
.chrghr-js .chrghr-img.chrghr-loaded{opacity:1;}
.chrghr-js .chrghr-avatar:not(.chrghr-imgloaded){
    background:#ececec;
    animation:chrghr-pulse 1.2s ease-in-out infinite;
}
@keyframes chrghr-pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* ==========================================================================
   LOADING CONTROLS — spinner / load-more button / pagination
   ========================================================================== */
.chrghr-controls{
    display:flex;
    flex-direction:column;
    align-items:center;
    font-family:var(--chrghr-font, Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
}

/* Spinner (infinite-scroll loading indicator) */
.chrghr-spinner{
    width:34px;
    height:34px;
    margin:26px auto 4px;
    border-radius:50%;
    border:3px solid var(--ink-100);
    border-top-color:var(--charge-orange);
    animation:chrghr-spin-loader .8s linear infinite;
}
@keyframes chrghr-spin-loader{to{transform:rotate(360deg);}}

/* Load-more button */
.chrghr-loadmore{
    position:relative;
    margin:30px auto 0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 34px;
    border-radius:999px;
    border:1.5px solid var(--charge-orange);
    background:var(--charge-orange);
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    letter-spacing:.02em;
    cursor:pointer;
    transition:background .2s ease, box-shadow .2s ease;
}
.chrghr-loadmore:hover{
    background:var(--charge-orange-700);
    box-shadow:0 8px 20px rgba(215,82,41,.3);
}
.chrghr-loadmore.chrghr-loading{color:transparent;pointer-events:none;}
.chrghr-loadmore.chrghr-loading::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.5);
    border-top-color:#fff;
    animation:chrghr-spin-loader .8s linear infinite;
}

/* Pagination */
.chrghr-pagination{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin:32px auto 0;
}
.chrghr-page{
    min-width:40px;
    height:40px;
    padding:0 12px;
    border-radius:10px;
    border:1.5px solid var(--ink-100);
    background:#fff;
    color:var(--ink-black);
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.chrghr-page:hover:not(:disabled){border-color:var(--charge-orange);color:var(--charge-orange-700);}
.chrghr-page.is-active{background:var(--charge-orange);border-color:var(--charge-orange);color:#fff;}
.chrghr-page:disabled{opacity:.4;cursor:default;}

/* The animated glow border lives in this pseudo-layer behind the inner card */
.chrghr-glow{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:2px;                     /* border thickness */
    background:conic-gradient(
        from var(--chrghr-angle),
        transparent 0%,
        var(--charge-orange) 15%,
        var(--charge-orange-700) 30%,
        transparent 45%,
        transparent 100%
    );
    /* Mask so only the 2px border ring shows, not the fill */
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
    z-index:0;
}

/* Inner surface sits on top of the glow ring */
.chrghr-card-inner{
    position:relative;
    z-index:1;
    flex:1;                          /* stretch to match tallest card in the row */
    display:flex;
    flex-direction:column;
    align-items:center;
    margin:2px;                      /* reveal the glow ring underneath */
    border-radius:var(--chrghr-radius,18px);
    background:var(--paper);
    border:var(--chrghr-border-w,1px) solid var(--chrghr-border-color,var(--ink-100));
    box-shadow:0 8px 24px rgba(35,31,32,.07);
    padding:var(--chrghr-pad,34px 26px 30px);
    text-align:center;
    transition:border-color .3s ease, box-shadow .3s ease;
}

/* Body wraps everything after the photo (name, role, count, bio, social, button) */
.chrghr-body{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    flex:1;
    gap:var(--chrghr-el-gap,0);
}

/* --------------------------------------------------------------------------
   Hover / focus — lift, deepen shadow, ignite the rotating glow
   -------------------------------------------------------------------------- */
.chrghr-card:hover,
.chrghr-card:focus-within{
    transform:translateY(calc(-1 * var(--chrghr-lift,6px)));
}
.chrghr-card:hover .chrghr-card-inner,
.chrghr-card:focus-within .chrghr-card-inner{
    border-color:transparent;
    box-shadow:0 18px 40px rgba(215,82,41,.22);
    background:var(--chrghr-card-hover-bg, var(--paper));
}

/* Photo zoom on hover (opt-in via the "zoom" option) */
.chrghr-zoom .chrghr-avatar{overflow:hidden;}
.chrghr-zoom .chrghr-img{transition:transform .5s ease;}
.chrghr-zoom .chrghr-card:hover .chrghr-img,
.chrghr-zoom .chrghr-card:focus-within .chrghr-img{transform:scale(1.08);}
.chrghr-card:hover .chrghr-glow,
.chrghr-card:focus-within .chrghr-glow{
    opacity:1;
    animation:chrghr-spin var(--chrghr-spin-dur,3s) linear infinite;
}

@keyframes chrghr-spin{
    to{--chrghr-angle:360deg;}
}

/* --------------------------------------------------------------------------
   Avatar
   -------------------------------------------------------------------------- */
.chrghr-avatar{
    display:inline-block;
    line-height:0;
    border-radius:50%;
    padding:var(--chrghr-ring-w,4px);
    background:var(--chrghr-ring-color,var(--ink-100));
    transition:background .3s ease, box-shadow .3s ease;
}
.chrghr-avatar .chrghr-img,
.chrghr-avatar img{
    width:var(--chrghr-img-w,132px);
    height:var(--chrghr-img-h,132px);
    border-radius:50%;
    object-fit:cover;
    display:block;
    background:#fff;
}
.chrghr-card:hover .chrghr-avatar,
.chrghr-card:focus-within .chrghr-avatar{
    background:var(--chrghr-ring-hover,var(--charge-orange));
    box-shadow:0 0 0 4px rgba(215,82,41,.15);
}

/* --------------------------------------------------------------------------
   Name
   -------------------------------------------------------------------------- */
.chrghr-name{
    margin:20px 0 10px;
    width:100%;
    font-size:var(--chrghr-name-size,20px);
    line-height:1.3;
    font-weight:700;
    text-align:var(--chrghr-name-align, inherit);
    text-transform:var(--chrghr-name-transform, none);
    letter-spacing:var(--chrghr-name-spacing, normal);
}
.chrghr-name a{
    color:var(--ink-black);
    text-decoration:none;
    transition:color .25s ease;
}
.chrghr-card:hover .chrghr-name a,
.chrghr-card:focus-within .chrghr-name a{
    color:var(--charge-orange-700);
}

/* --------------------------------------------------------------------------
   Role / job title
   -------------------------------------------------------------------------- */
.chrghr-role{
    margin:0 0 10px;
    width:100%;
    font-size:var(--chrghr-role-size,13.5px);
    font-weight:600;
    letter-spacing:var(--chrghr-role-spacing, .03em);
    text-transform:var(--chrghr-role-transform, uppercase);
    text-align:var(--chrghr-role-align, inherit);
    color:var(--chrghr-role-color,var(--charge-orange-700));
}

/* --------------------------------------------------------------------------
   Article-count badge
   -------------------------------------------------------------------------- */
.chrghr-count{
    display:inline-block;
    margin:0 0 12px;
    padding:4px 12px;
    border-radius:999px;
    background:var(--ink-100);
    color:var(--ink-black);
    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;
    transition:background .3s ease, color .3s ease;
}
.chrghr-card:hover .chrghr-count,
.chrghr-card:focus-within .chrghr-count{
    background:rgba(215,82,41,.12);
    color:var(--charge-orange-700);
}

/* --------------------------------------------------------------------------
   Short bio
   -------------------------------------------------------------------------- */
.chrghr-bio{
    margin:0 0 16px;
    font-size:14px;
    line-height:1.55;
    color:var(--ink-500);
    max-width:34ch;
    text-align:var(--chrghr-bio-align, inherit);
    align-self:var(--chrghr-bio-self, auto);
}

/* --------------------------------------------------------------------------
   Social links
   -------------------------------------------------------------------------- */
.chrghr-social{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:0 0 18px;
}
.chrghr-social-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--ink-100);
    color:var(--ink-black);
    transition:background .2s ease, color .2s ease, transform .2s ease;
}
.chrghr-social-link svg{
    width:17px;
    height:17px;
}
.chrghr-social-link:hover,
.chrghr-social-link:focus-visible{
    background:var(--charge-orange);
    color:#fff;
    transform:translateY(-2px);
}

/* --------------------------------------------------------------------------
   View Profile button
   -------------------------------------------------------------------------- */
.chrghr-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;                 /* pin to bottom for equal-height cards */
    align-self:var(--chrghr-btn-align, auto);
    padding:10px 22px;
    border-radius:var(--chrghr-btn-radius,999px);
    border:1.5px solid var(--charge-orange);
    color:var(--charge-orange);
    background:transparent;
    font-size:14px;
    font-weight:600;
    letter-spacing:.02em;
    text-decoration:none;
    cursor:pointer;
    transition:background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.chrghr-btn-arrow{
    transition:transform .25s ease;
}
.chrghr-btn:hover,
.chrghr-btn:focus-visible,
.chrghr-card:hover .chrghr-btn{
    background:var(--charge-orange);
    border-color:var(--charge-orange);
    color:#fff;
    box-shadow:0 6px 16px rgba(215,82,41,.3);
}
.chrghr-btn:hover .chrghr-btn-arrow,
.chrghr-card:hover .chrghr-btn-arrow{
    transform:translateX(3px);
}
.chrghr-btn:active{
    background:var(--charge-orange-700);
    border-color:var(--charge-orange-700);
}

/* Filled button style (settings: Button style = Filled) */
.chrghr-btn-filled .chrghr-btn{
    background:var(--charge-orange);
    border-color:var(--charge-orange);
    color:#fff;
}
.chrghr-btn-filled .chrghr-btn:hover,
.chrghr-btn-filled .chrghr-btn:focus-visible,
.chrghr-btn-filled .chrghr-card:hover .chrghr-btn{
    background:var(--charge-orange-700);
    border-color:var(--charge-orange-700);
    color:#fff;
}

/* Keyboard focus visibility */
.chrghr-card a:focus-visible{
    outline:2px solid var(--charge-orange-700);
    outline-offset:3px;
    border-radius:6px;
}

/* ==========================================================================
   LAYOUT VARIANTS
   ========================================================================== */

/* --- Portrait: rectangular photo (18px radius) on top, details below ------ */
.chrghr--portrait .chrghr-card-inner{
    padding:16px 16px 28px;
}
.chrghr--portrait .chrghr-avatar{
    width:100%;
    padding:0;
    background:none;
    border-radius:0;
    box-shadow:none;
    display:block;
}
.chrghr--portrait .chrghr-avatar .chrghr-img,
.chrghr--portrait .chrghr-avatar img{
    width:100%;
    aspect-ratio:var(--chrghr-ratio, 4/3);
    height:auto;
    border-radius:18px;
}
.chrghr--portrait .chrghr-card:hover .chrghr-avatar,
.chrghr--portrait .chrghr-card:focus-within .chrghr-avatar{
    background:none;
    box-shadow:none;
}
.chrghr--portrait .chrghr-body{
    margin-top:18px;
}

/* --- Overlay: name & title over the full photo ---------------------------- */
.chrghr--overlay .chrghr-card-inner{
    padding:0;
    overflow:hidden;
    border:none;
    min-height:360px;               /* fallback if aspect-ratio unsupported */
}
.chrghr--overlay .chrghr-avatar{
    position:absolute;
    inset:0;
    width:100%;
    padding:0;
    background:none;
    border-radius:0;
    box-shadow:none;
    display:block;
    z-index:0;
}
.chrghr--overlay .chrghr-avatar .chrghr-img,
.chrghr--overlay .chrghr-avatar img{
    width:100%;
    height:100%;
    aspect-ratio:var(--chrghr-ratio, 3/4);
    border-radius:0;
}
.chrghr--overlay .chrghr-card:hover .chrghr-avatar,
.chrghr--overlay .chrghr-card:focus-within .chrghr-avatar{
    background:none;
    box-shadow:none;
}
.chrghr--overlay .chrghr-avatar .chrghr-img{
    transition:transform .5s ease;
}
.chrghr--overlay .chrghr-card:hover .chrghr-img{
    transform:scale(1.05);
}
.chrghr--overlay .chrghr-body{
    position:relative;
    z-index:2;
    margin-top:auto;
    align-items:flex-start;
    text-align:left;
    flex:0 0 auto;
    padding:52px 22px 22px;
    background:linear-gradient(to top, rgba(35,31,32,.94) 8%, rgba(35,31,32,.55) 55%, rgba(35,31,32,0) 100%);
}
.chrghr--overlay .chrghr-name a{ color:#fff; }
.chrghr--overlay .chrghr-card:hover .chrghr-name a{ color:#fff; }
.chrghr--overlay .chrghr-role{ color:#ffd9cb; }
.chrghr--overlay .chrghr-bio{ color:rgba(255,255,255,.85); max-width:none; }
.chrghr--overlay .chrghr-count{ background:rgba(255,255,255,.22); color:#fff; }
.chrghr--overlay .chrghr-social{ justify-content:flex-start; }
.chrghr--overlay .chrghr-social-link{ background:rgba(255,255,255,.2); color:#fff; }
.chrghr--overlay .chrghr-social-link:hover{ background:var(--charge-orange); color:#fff; }
.chrghr--overlay .chrghr-btn{
    border-color:rgba(255,255,255,.75);
    color:#fff;
}
.chrghr--overlay .chrghr-btn:hover,
.chrghr--overlay .chrghr-card:hover .chrghr-btn{
    background:#fff;
    border-color:#fff;
    color:var(--charge-orange-700);
}

/* --- Horizontal: photo left, text right ----------------------------------- */
.chrghr--horizontal .chrghr-card-inner{
    flex-direction:row;
    align-items:center;
    text-align:left;
    gap:20px;
    padding:22px;
}
.chrghr--horizontal .chrghr-avatar{
    flex:0 0 auto;
    padding:0;
    background:none;
    border-radius:16px;
}
.chrghr--horizontal .chrghr-avatar .chrghr-img,
.chrghr--horizontal .chrghr-avatar img{
    width:104px;
    height:104px;
    border-radius:16px;
}
.chrghr--horizontal .chrghr-card:hover .chrghr-avatar,
.chrghr--horizontal .chrghr-card:focus-within .chrghr-avatar{
    background:none;
    box-shadow:0 0 0 3px rgba(215,82,41,.18);
}
.chrghr--horizontal .chrghr-body{
    align-items:flex-start;
    text-align:left;
}
.chrghr--horizontal .chrghr-bio{ max-width:none; }
.chrghr--horizontal .chrghr-social{ justify-content:flex-start; }
.chrghr--horizontal .chrghr-name{ margin-top:0; }
.chrghr--horizontal .chrghr-btn{ margin-top:14px; }

/* --- Minimal: photo & name only, no card chrome --------------------------- */
.chrghr--minimal .chrghr-card-inner{
    background:none;
    border:none;
    box-shadow:none;
    padding:16px;
}
.chrghr--minimal .chrghr-glow{ display:none; }
.chrghr--minimal .chrghr-card:hover,
.chrghr--minimal .chrghr-card:focus-within{ transform:translateY(-4px); }
.chrghr--minimal .chrghr-card:hover .chrghr-card-inner,
.chrghr--minimal .chrghr-card:focus-within .chrghr-card-inner{
    border:none;
    box-shadow:none;
}
.chrghr--minimal .chrghr-btn{
    margin-top:12px;
    border:none;
    background:none;
    padding:6px 4px;
    color:var(--charge-orange-700);
    box-shadow:none;
}
.chrghr--minimal .chrghr-btn:hover,
.chrghr--minimal .chrghr-card:hover .chrghr-btn{
    background:none;
    color:var(--charge-orange);
    box-shadow:none;
}

/* ==========================================================================
   CONTENT ALIGNMENT (left / center / right) — overrides layout defaults
   ========================================================================== */
/* Prefixed with .chrghr-grid for extra specificity so Elementor Pro / themes
   cannot override the chosen alignment. */
.chrghr-grid.chrghr-align-left  .chrghr-card-inner{text-align:left;}
.chrghr-grid.chrghr-align-center .chrghr-card-inner{text-align:center;}
.chrghr-grid.chrghr-align-right  .chrghr-card-inner{text-align:right;}

.chrghr-grid.chrghr-align-left  .chrghr-body{align-items:flex-start;text-align:left;}
.chrghr-grid.chrghr-align-center .chrghr-body{align-items:center;text-align:center;}
.chrghr-grid.chrghr-align-right  .chrghr-body{align-items:flex-end;text-align:right;}

.chrghr-grid.chrghr-align-left  .chrghr-social{justify-content:flex-start;}
.chrghr-grid.chrghr-align-center .chrghr-social{justify-content:center;}
.chrghr-grid.chrghr-align-right  .chrghr-social{justify-content:flex-end;}

/* Move the photo too, but only for column layouts (not horizontal/overlay) */
.chrghr-grid.chrghr-align-left:not(.chrghr--horizontal):not(.chrghr--overlay)  .chrghr-card-inner{align-items:flex-start;}
.chrghr-grid.chrghr-align-center:not(.chrghr--horizontal):not(.chrghr--overlay) .chrghr-card-inner{align-items:center;}
.chrghr-grid.chrghr-align-right:not(.chrghr--horizontal):not(.chrghr--overlay)  .chrghr-card-inner{align-items:flex-end;}

/* Name/role text also follow the chosen alignment (beats theme heading rules) */
.chrghr-grid.chrghr-align-left  .chrghr-name,
.chrghr-grid.chrghr-align-left  .chrghr-role,
.chrghr-grid.chrghr-align-left  .chrghr-bio{text-align:left;}
.chrghr-grid.chrghr-align-center .chrghr-name,
.chrghr-grid.chrghr-align-center .chrghr-role,
.chrghr-grid.chrghr-align-center .chrghr-bio{text-align:center;}
.chrghr-grid.chrghr-align-right  .chrghr-name,
.chrghr-grid.chrghr-align-right  .chrghr-role,
.chrghr-grid.chrghr-align-right  .chrghr-bio{text-align:right;}

/* --------------------------------------------------------------------------
   Responsive (tablet/mobile column counts customizable via --chrghr-cols-t / -m)
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
    .chrghr-grid{grid-template-columns:repeat(var(--chrghr-cols-t,2),minmax(0,1fr));gap:var(--chrghr-gap,22px);}
}
@media(max-width:600px){
    /* Horizontal cards stack their photo on small screens */
    .chrghr--horizontal .chrghr-card-inner{flex-direction:column;text-align:center;}
    .chrghr--horizontal .chrghr-body{align-items:center;text-align:center;}
    .chrghr--horizontal .chrghr-social{justify-content:center;}
}
@media(max-width:767px){
    .chrghr-grid{grid-template-columns:repeat(var(--chrghr-cols-m,1),minmax(0,1fr));}
}

/* Respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
    .chrghr-card,
    .chrghr-card-inner,
    .chrghr-avatar,
    .chrghr-btn,
    .chrghr-btn-arrow,
    .chrghr-name a{transition:none;}
    .chrghr-card:hover .chrghr-glow,
    .chrghr-card:focus-within .chrghr-glow{animation:none;}
    .chrghr-js .chrghr-avatar:not(.chrghr-imgloaded){animation:none;}
    .chrghr-js .chrghr-img{opacity:1;}
}