/* Courtesywide v7.24 - Experience Categories manager */

/* Homepage: no fixed assumption about the number of categories. */
.experience-icon-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(155px,1fr))!important;
    gap:0!important;
    overflow:visible!important;
    border:1px solid var(--border)!important;
    border-radius:18px!important;
    background:#fff!important;
}
.experience-icon-grid a{
    min-width:0;
    min-height:165px;
    border-right:1px solid var(--border)!important;
    border-bottom:1px solid var(--border)!important;
    transition:background .15s ease,transform .15s ease;
}
.experience-icon-grid a:hover{
    background:#f8fbfe;
    transform:translateY(-2px);
}
.experience-icon-grid a:last-child{border-right:0!important}

/* Admin */
.experience-admin-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.experience-admin-summary>div{display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid #e1e7ed;border-radius:12px;background:#fff}
.experience-admin-summary svg{width:19px;height:19px;color:var(--admin-blue)}
.experience-admin-summary strong,.experience-admin-summary small{display:block}
.experience-admin-summary strong{font-size:18px;color:#20364c}
.experience-admin-summary small{font-size:10px;color:#778594}

.experience-admin-name{display:flex;align-items:flex-start;gap:10px;min-width:250px}
.experience-admin-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#edf5fb;color:var(--admin-blue);flex:0 0 38px}
.experience-admin-icon svg{width:19px;height:19px}
.experience-admin-name strong,.experience-admin-name small,.experience-admin-name em{display:block}
.experience-admin-name small{margin-top:2px;color:#8794a0;font-size:9px}
.experience-admin-name em{max-width:420px;margin-top:4px;color:#657585;font-size:10px;font-style:normal;line-height:1.35}

.experience-category-form-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:18px;align-items:start}
.experience-category-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.experience-category-form-grid label{display:flex;flex-direction:column;gap:6px;color:#40546a;font-size:11px;font-weight:750}
.experience-category-form-grid label.span-2{grid-column:1/-1}
.experience-category-form-grid input,.experience-category-form-grid textarea{width:100%;border:1px solid #d2dce5;border-radius:9px;background:#fff;padding:10px 11px;color:#23364a;font:inherit}
.experience-category-form-grid small{font-size:9px;color:#83909d;font-weight:500}
.experience-category-preview-card{position:sticky;top:94px}
.experience-setting-toggle{display:flex;align-items:flex-start;gap:9px;padding:11px 0;border-bottom:1px solid #edf0f3;cursor:pointer}
.experience-setting-toggle input{width:17px;height:17px;margin-top:2px}
.experience-setting-toggle strong,.experience-setting-toggle small{display:block}
.experience-setting-toggle strong{font-size:11px;color:#263c51}
.experience-setting-toggle small{margin-top:2px;font-size:9.5px;color:#7b8995;line-height:1.4}
.experience-live-preview{display:grid;justify-items:center;gap:7px;margin-top:16px;padding:18px 12px;border:1px solid #e1e8ee;border-radius:12px;background:#fbfdff;text-align:center}
.experience-preview-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#eaf2ff;color:var(--admin-blue)}
.experience-preview-icon svg{width:26px;height:26px}
.experience-live-preview strong{font-size:12px;color:#20364c}
.experience-live-preview small{max-width:230px;color:#758492;font-size:9.5px;line-height:1.45}

@media(max-width:980px){
    .experience-category-form-layout{grid-template-columns:1fr}
    .experience-category-preview-card{position:static}
}
@media(max-width:700px){
    .experience-admin-summary,.experience-category-form-grid{grid-template-columns:1fr}
    .experience-category-form-grid label.span-2{grid-column:auto}
    .experience-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:420px){
    .experience-icon-grid{grid-template-columns:1fr!important}
}