﻿/* =========================
   SIGNLAB CARD GRID
========================= */

.signlab-card-grid{
  --signlab-cgrid-columns: 3;
  --signlab-cgrid-gap: 24px;
  --signlab-cgrid-card-bg: #FFFFFF;
  --signlab-cgrid-card-border: rgba(148,163,184,.25);
  --signlab-cgrid-card-radius: 22px;
  --signlab-cgrid-card-shadow: 0 12px 28px rgba(15,23,42,.08);
  --signlab-cgrid-card-hover-shadow: 0 20px 48px rgba(15,23,42,.14);
  --signlab-cgrid-media-height: 240px;
  --signlab-cgrid-body-padding-top: 26px;
  --signlab-cgrid-body-padding-side: 24px;
  --signlab-cgrid-body-padding-bottom: 24px;
  --signlab-cgrid-title: #0F172A;
  --signlab-cgrid-title-weight: 900;
  --signlab-cgrid-claim: #334155;
  --signlab-cgrid-claim-line-height: 1.55;
  --signlab-cgrid-text: #475569;
  --signlab-cgrid-text-line-height: 1.7;
  --signlab-cgrid-filter-bg: #F1EEDB;
  --signlab-cgrid-filter-text: #4A5A4C;
  --signlab-cgrid-filter-active-bg: #C7F36B;
  --signlab-cgrid-filter-active-text: #143B2E;
  --signlab-cgrid-filter-size: 15px;
  --signlab-cgrid-search-bg: #F1EEDB;
  --signlab-cgrid-search-text: #7C7A66;
  --signlab-cgrid-search-icon-bg: #0C4C31;
  --signlab-cgrid-search-icon-text: #FFFFFF;
  --signlab-cgrid-search-radius: 999px;
  --signlab-cgrid-badge-bg: #43AC8B;
  --signlab-cgrid-badge-text: #FFFFFF;
  --signlab-cgrid-badge-size: 12px;
  --signlab-cgrid-title-size: 30px;
  --signlab-cgrid-claim-size: 18px;
  --signlab-cgrid-text-size: 16px;
  --signlab-cgrid-button-bg: #FFFFFF;
  --signlab-cgrid-button-text: #43AC8B;
  --signlab-cgrid-button-border: #43AC8B;
  --signlab-cgrid-button-radius: 14px;
  --signlab-cgrid-button-size: 16px;
  --signlab-cgrid-button-hover-bg: #43AC8B;
  --signlab-cgrid-button-hover-text: #FFFFFF;
  --signlab-cgrid-button-hover-border: #43AC8B;
  --signlab-cgrid-pagination-bg: #FFFFFF;
  --signlab-cgrid-pagination-text: #43AC8B;
  --signlab-cgrid-pagination-active-bg: #43AC8B;
  --signlab-cgrid-pagination-active-text: #FFFFFF;
}

.signlab-card-grid__toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin:0 0 28px;
  flex-wrap:wrap;
}

.signlab-card-grid__filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.signlab-card-grid__filter{
  border:0;
  border-radius:999px;
  background:var(--signlab-cgrid-filter-bg);
  color:var(--signlab-cgrid-filter-text);
  padding:14px 22px;
  font-size:var(--signlab-cgrid-filter-size);
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}

.signlab-card-grid__filter:hover,
.signlab-card-grid__filter.is-active{
  background:var(--signlab-cgrid-filter-active-bg);
  color:var(--signlab-cgrid-filter-active-text);
}

body .signlab-card-grid__search,
body .signlab-card-grid form.signlab-card-grid__search{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-left:auto !important;
  min-width:min(100%, 420px) !important;
  max-width:420px !important;
  border-radius:var(--signlab-cgrid-search-radius) !important;
  overflow:hidden !important;
  background:var(--signlab-cgrid-search-bg) !important;
  padding:6px !important;
  gap:8px !important;
  box-sizing:border-box !important;
}

body .signlab-card-grid__search-input,
body .signlab-card-grid input.signlab-card-grid__search-input[type="search"]{
  flex:1 1 auto !important;
  min-width:0 !important;
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
  background:transparent !important;
  color:var(--signlab-cgrid-search-text) !important;
  padding:14px 18px !important;
  font-size:15px !important;
  line-height:1.2 !important;
  margin:0 !important;
}

body .signlab-card-grid__search-input::placeholder,
body .signlab-card-grid input.signlab-card-grid__search-input[type="search"]::placeholder{
  color:var(--signlab-cgrid-search-text) !important;
  opacity:1 !important;
}

body .signlab-card-grid__search-input:focus,
body .signlab-card-grid input.signlab-card-grid__search-input[type="search"]:focus{
  outline:none !important;
  box-shadow:none !important;
}

body .signlab-card-grid__search-button,
body .signlab-card-grid button.signlab-card-grid__search-button,
body .container-wrap .signlab-card-grid button.signlab-card-grid__search-button,
body[data-form-submit="regular"] .container-wrap .signlab-card-grid button.signlab-card-grid__search-button,
body[data-button-style*="slightly_rounded"] .signlab-card-grid button.signlab-card-grid__search-button{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  border:0 !important;
  border-radius:50% !important;
  -webkit-border-radius:50% !important;
  background:var(--signlab-cgrid-search-icon-bg) !important;
  color:var(--signlab-cgrid-search-icon-text) !important;
  cursor:pointer !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 !important;
  flex:0 0 42px !important;
  box-sizing:border-box !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  box-shadow:none !important;
  line-height:1 !important;
  font-size:16px !important;
  font-family:inherit !important;
  font-weight:400 !important;
  text-align:center !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  vertical-align:middle !important;
  overflow:hidden !important;
  align-self:center !important;
}

body .signlab-card-grid__search-icon,
body .signlab-card-grid button.signlab-card-grid__search-button .signlab-card-grid__search-icon{
  font-size:16px !important;
  line-height:1 !important;
  display:block !important;
}

.signlab-card-grid__items{
  display:grid;
  grid-template-columns:repeat(var(--signlab-cgrid-columns), minmax(0, 1fr));
  gap:var(--signlab-cgrid-gap);
}

.signlab-card-grid__card{
  border-radius:var(--signlab-cgrid-card-radius);
  border:1px solid var(--signlab-cgrid-card-border);
  overflow:hidden;
  background:var(--signlab-cgrid-card-bg);
  box-shadow:var(--signlab-cgrid-card-shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.signlab-card-grid__card:hover{
  transform:translateY(-4px);
  border-color:rgba(67,172,139,.35);
  box-shadow:var(--signlab-cgrid-card-hover-shadow);
}

.signlab-card-grid__media{
  position:relative;
  min-height:var(--signlab-cgrid-media-height);
  background:#e9eef2;
  background-size:cover;
  background-position:center;
}

.signlab-card-grid__badges{
  position:absolute;
  top:16px;
  left:16px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-width:calc(100% - 32px);
}

.signlab-card-grid__badge{
  padding:8px 14px;
  border-radius:999px;
  font-size:var(--signlab-cgrid-badge-size);
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--signlab-cgrid-badge-text);
  background:var(--signlab-cgrid-badge-bg);
  box-shadow:0 10px 30px rgba(15,23,42,.10);
  white-space:nowrap;
}

.signlab-card-grid__body{
  padding:var(--signlab-cgrid-body-padding-top) var(--signlab-cgrid-body-padding-side) var(--signlab-cgrid-body-padding-bottom);
}

.signlab-card-grid__title{
  margin:0 0 14px;
  font-size:var(--signlab-cgrid-title-size);
  line-height:1.12;
  font-weight:var(--signlab-cgrid-title-weight);
  color:var(--signlab-cgrid-title);
}

.signlab-card-grid__claim{
  margin:0 0 10px;
  font-size:var(--signlab-cgrid-claim-size);
  line-height:var(--signlab-cgrid-claim-line-height);
  color:var(--signlab-cgrid-claim);
}

.signlab-card-grid__text{
  margin:0 0 22px;
  font-size:var(--signlab-cgrid-text-size);
  line-height:var(--signlab-cgrid-text-line-height);
  color:var(--signlab-cgrid-text);
}

.signlab-card-grid__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:14px 18px;
  border-radius:var(--signlab-cgrid-button-radius);
  border:2px solid var(--signlab-cgrid-button-border);
  background:var(--signlab-cgrid-button-bg);
  color:var(--signlab-cgrid-button-text);
  text-decoration:none;
  font-size:var(--signlab-cgrid-button-size);
  font-weight:900;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}

.signlab-card-grid__btn:hover{
  background:var(--signlab-cgrid-button-hover-bg);
  color:var(--signlab-cgrid-button-hover-text);
  border-color:var(--signlab-cgrid-button-hover-border);
}

.signlab-card-grid__arrow{
  font-size:18px;
  line-height:1;
}

.signlab-card-grid__empty{
  grid-column:1 / -1;
  padding:28px;
  border:1px dashed var(--signlab-cgrid-card-border);
  border-radius:18px;
  text-align:center;
  color:var(--signlab-cgrid-text);
}

.signlab-card-grid__pagination{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.signlab-card-grid__pagination--left{ justify-content:flex-start; }
.signlab-card-grid__pagination--center{ justify-content:center; }
.signlab-card-grid__pagination--right{ justify-content:flex-end; }

.signlab-card-grid__pagination .page-numbers{
  min-width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid var(--signlab-cgrid-button-border);
  background:var(--signlab-cgrid-pagination-bg);
  color:var(--signlab-cgrid-pagination-text);
  font-weight:800;
}

.signlab-card-grid__pagination .page-numbers.current{
  background:var(--signlab-cgrid-pagination-active-bg);
  color:var(--signlab-cgrid-pagination-active-text);
}

.signlab-card-grid.is-loading .signlab-card-grid__items{
  opacity:.45;
  transition:opacity .2s ease;
}

@media (max-width: 1024px){
  .signlab-card-grid__toolbar{
    align-items:stretch;
  }

  .signlab-card-grid__items{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .signlab-card-grid__toolbar{
    gap:16px;
  }

  .signlab-card-grid__search{
    min-width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
  }

  .signlab-card-grid__items{
    grid-template-columns:1fr;
  }

  .signlab-card-grid__media{
    min-height:210px;
  }

  .signlab-card-grid__title{
    font-size:26px;
  }

  .signlab-card-grid__badges{
    top:12px;
    left:12px;
    max-width:calc(100% - 24px);
    gap:5px;
  }
}

@media (max-width: 480px){
  .signlab-card-grid{
    --signlab-cgrid-title-size: 22px;
    --signlab-cgrid-claim-size: 16px;
    --signlab-cgrid-text-size: 15px;
  }

  .signlab-card-grid__filters{
    gap: 8px;
  }

  .signlab-card-grid__filter{
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    text-align: center;
  }

  body .signlab-card-grid__search,
  body .signlab-card-grid form.signlab-card-grid__search{
    padding: 5px !important;
  }

  body .signlab-card-grid__search-input,
  body .signlab-card-grid input.signlab-card-grid__search-input[type="search"]{
    padding: 12px 14px !important;
    font-size: 14px !important;
  }

  .signlab-card-grid__card{
    border-radius: 18px;
  }

  .signlab-card-grid__media{
    min-height: 180px;
  }

  .signlab-card-grid__badges{
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    gap: 4px;
  }

  .signlab-card-grid__badge{
    padding: 7px 12px;
  }

  .signlab-card-grid__body{
    padding: 20px 18px 18px;
  }

  .signlab-card-grid__text{
    margin-bottom: 18px;
  }

  .signlab-card-grid__pagination{
    gap: 8px;
  }

  .signlab-card-grid__pagination .page-numbers{
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
  }
}
