/* ====== Phonebook CSS ====== */

/* ---------- Search bar wrapper ---------- */
#searchBarWrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  margin: 0 0 12px 0;  /* a bit more space below the search field */
}

/* Search input (flat by default) */
#searchBar {
  width: 280px;
  max-width: 280px;
  height: 28px;
  border: 1px solid #bbb;
  border-radius: 0;
  padding: 2px 10px;
  background: #fff;
  outline: none;
  box-shadow: none;                  /* <— flat by default */
  font: inherit;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

/* Strong “raised” look only while focused */
#searchBar:focus {
  border-color: #111;
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    0 6px 16px rgba(0,0,0,.12);
}

/* Hide the browser's default X across engines */
#searchBar::-webkit-search-decoration,
#searchBar::-webkit-search-cancel-button,
#searchBar::-webkit-search-results-button,
#searchBar::-webkit-search-results-decoration { -webkit-appearance:none; display:none; }
#searchBar::-ms-clear,
#searchBar::-ms-reveal { display:none; width:0; height:0; }

/* Text-based clear link */
#clearSearch {
  display: none;            /* shown by JS when there is input */
  cursor: pointer;
  user-select: none;
  color: #666;
  font-size: 0.95rem;
  line-height: 1;
}
#clearSearch:hover { color: #111; text-decoration: underline; }

/* ---------- Grid container & columns (rigid) ---------- */
#pb_container{
  width: 100%;
  display: grid;
  grid-auto-flow: column;          /* JS decides how many columns; gaps stay fixed */
  gap: 6px 18px;                   /* tighter & rigid spacing */
  padding: 6px 15px 24px 15px;     /* JS uses this for exact-fit math */
  box-sizing: border-box;
  overflow-x: clip;                /* no accidental horizontal scroll */
}

/* Column block with a single UL inside */
.pb_column > ul { list-style: none; padding: 0; margin: 0; }

/* Rows */
#pb_container li.album-item{
  margin: 0;
  padding: 2px 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Link & hover */
#pb_container a.sitelink{
  text-decoration: none;
  color: inherit;
}
#pb_container a.sitelink:hover { color:#666; } /* whole row greys on hover */

/* Chips */
.template-phonebook .info-year  { font-weight: 400; opacity:.86; color:#000; margin-right:.25rem; }
.template-phonebook .info-title { font-weight: 600; color:#111; margin-right:.25rem; }
.template-phonebook .info-client{ font-weight: 400; color:#666; }

/* Shared hover thumbnail (hidden on mobile via media query) */
#hoverThumbnail{
  position: fixed;
  display: none;
  pointer-events: none;
  width: 408px;     /* 20% larger than 340px */
  height: 271px;    /* keep ~3:2 */
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.12);
  border-radius: 0;
  background: #fff;
}

/* Don’t show hover preview on small screens */
@media (max-width: 719px){
  #hoverThumbnail{ display:none !important; }
}