/* ===== ValovIT Staff Directory – Photo-1 card design (REVERTED) ===== */
.val-sd, .val-sd * { box-sizing: border-box; }
.val-sd{
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 16px 60px;
  color: var(--val-sd-text);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Filters: 3 rows ===== */
.val-sd__filters{
  max-width: 920px;
  margin: 0 auto 30px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  text-align:left;
}
.val-sd__row{ width:100%; }
.val-sd__label{
  display:block;
  font-size: 12px;
  color: #7b8b96;
  margin: 0 0 8px;
}
.val-sd__input{
  width:100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  background: #f6f2ef;
  outline:none;
}
.val-sd__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.val-sd__chip{
  border: 1px solid var(--val-sd-chip-border);
  background: var(--val-sd-chip-bg);
  color: var(--val-sd-chip-text);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.val-sd__chip:hover{
  background: var(--val-sd-chip-bg-hover);
  color: var(--val-sd-chip-text-hover);
  border-color: var(--val-sd-chip-border-hover);
}
.val-sd__chip.is-active{
  background: var(--val-sd-chip-bg-active);
  color: var(--val-sd-chip-text-active);
  border-color: var(--val-sd-chip-border-active);
}
.val-sd__row--btn{ display:flex; justify-content:center; }
.val-sd__btn{
  border: 1px solid var(--val-sd-sbtn-border);
  background: var(--val-sd-sbtn-bg);
  color: var(--val-sd-sbtn-text);
  padding: 10px 26px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.val-sd__btn:hover{
  background: var(--val-sd-sbtn-bg-hover);
  color: var(--val-sd-sbtn-text-hover);
  border-color: var(--val-sd-sbtn-border-hover);
}
.val-sd__btn:active{
  background: var(--val-sd-sbtn-bg-active);
  color: var(--val-sd-sbtn-text-active);
  border-color: var(--val-sd-sbtn-border-active);
  transform: translateY(1px);
}

/* ===== Optional city tabs ===== */
.val-sd__citytabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin: 0 auto 22px;
}
.val-sd__citytab{
  border: 1px solid var(--val-sd-chip-border);
  background: var(--val-sd-chip-bg);
  color: var(--val-sd-chip-text);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.val-sd__citytab:hover{
  background: var(--val-sd-chip-bg-hover);
  color: var(--val-sd-chip-text-hover);
  border-color: var(--val-sd-chip-border-hover);
}
.val-sd__citytab.is-active{
  background: var(--val-sd-chip-bg-active);
  color: var(--val-sd-chip-text-active);
  border-color: var(--val-sd-chip-border-active);
}

/* ===== Grid ===== */
.val-sd__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  align-items:start;
}
@media (max-width: 1100px){
  .val-sd__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .val-sd__grid{ grid-template-columns: 1fr; }
}

/* ===== Card (Photo-1 original design) ===== */
.val-sd-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* COMPAT: if your PHP currently wraps photo+panel in .val-sd-card__stack,
   this neutralizes the Photo2 behavior and keeps original layout. */
.val-sd-card__stack{
  width: 100%;
  max-width: none;
  margin: 0;
  position: static;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Photo */
.val-sd-card__photo{
  width: 78%;
  max-width: 520px;
  border: 2px solid var(--val-sd-card-border);
  background: #eee;
  aspect-ratio: var(--val-sd-img-ratio);
  overflow:hidden;
}
.val-sd-card__photo img{
  width:100%;
  height:100%;
  object-fit: cover; /* crop */
  display:block;
}
.val-sd-card__photo--ph{
  width:100%;
  height:100%;
  background: repeating-linear-gradient(45deg,#f3f3f3,#f3f3f3 10px,#eeeeee 10px,#eeeeee 20px);
}

/* Panel overlaps photo (centered like Photo1) */
.val-sd-card__panel{
  width: 92%;
  max-width: 660px;
  margin-top: -72px;
  margin-left: 0;
  margin-right: 0;
  background: var(--val-sd-panel-bg);
  border: 2px solid var(--val-sd-card-border);
  padding: 28px 34px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* Typography (like Photo1) */
.val-sd-card__subtitle{
  color: var(--val-sd-subtitle);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: none;
}
.val-sd-card__name{
  color: var(--val-sd-name);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Description clamp */
.val-sd-card__descwrap{
  position:relative;
  overflow:hidden;
  max-height: var(--val-sd-desc-collapsed);
  min-height: var(--val-sd-desc-collapsed); /* equal card heights */
  transition: max-height .25s ease;
}
.val-sd-card__desc{
  font-size: 15px;
  line-height: 1.9;
  color: var(--val-sd-text);
}
.val-sd-card__desc p{ margin: 0 0 10px; }
.val-sd-card__desc p:last-child{ margin-bottom:0; }

/* Price list helper */
.val-sd-card__desc .val-price-list{
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.val-sd-card__desc .val-price-list li{
  padding: 4px 0;
  display:block;
}
.val-sd-card__desc .val-price-list strong{ font-weight:700; }
.val-sd-card__desc .val-price-list em{ opacity:.7; font-style: italic; }

/* fade bottom when clamped */
.val-sd-card__fade{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 54px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--val-sd-panel-bg));
  pointer-events:none;
  opacity: 0;
  transition: opacity .15s ease;
}
.val-sd-card.is-clamped .val-sd-card__fade{ opacity: 1; }
.val-sd-card.is-expanded .val-sd-card__fade{ opacity: 0; }

/* More button: keeps space even if hidden */
.val-sd-card__more{
  align-self:flex-start;
  border:none;
  background:transparent;
  color: var(--val-sd-more);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  cursor:pointer;
  padding: 0;
  min-height: 22px;
  transition: color .15s ease;
}
.val-sd-card__more:hover{ color: var(--val-sd-more-hover); }
.val-sd-card__more.is-hidden{
  visibility: hidden;
  pointer-events: none;
}

/* CTA button */
.val-sd-card__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width: fit-content;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid var(--val-sd-cta-border);
  background: var(--val-sd-cta-bg);
  color: var(--val-sd-cta-text);
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.val-sd-card__cta:hover{
  background: var(--val-sd-cta-bg-hover);
  color: var(--val-sd-cta-text-hover);
  border-color: var(--val-sd-cta-border-hover);
}
.val-sd-card__cta:active{
  background: var(--val-sd-cta-bg-active);
  color: var(--val-sd-cta-text-active);
  border-color: var(--val-sd-cta-border-active);
  transform: translateY(1px);
}

/* no results */
.val-sd__noresults{
  text-align:center;
  margin-top: 18px;
  color:#7b8b96;
}