/* ─────────────────────────────────────────
   search-skeleton.css
   Search page grid skeletons
───────────────────────────────────────── */

/* ── Shimmer ─────────────────────────── */
@keyframes searchShimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.search-skeleton-block {
  background: linear-gradient(
    90deg,
    var(--border) 25%,
    var(--surface2) 50%,
    var(--border) 75%
  );

  background-size: 600px 100%;

  animation: searchShimmer 1.35s ease-in-out infinite;

  border-radius: 6px;
}

/* Skeleton grid wrapper */
#skeleton-list,
#jobs-list {
  display: contents;
}

/* ── Card ────────────────────────────── */
.search-job-skeleton {
  background: var(--surface);

  border: 1.5px solid var(--border);

  border-radius: var(--r-xl);

  padding: 1.1rem;

  position: relative;

  overflow: hidden;

  min-height: 230px;

  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* Left accent */
.search-job-skeleton::before {
  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  background: var(--border);
}

/* ── Top ─────────────────────────────── */
.search-skel-top {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: .8rem;
}

.search-skel-logo {
  width: 44px;
  height: 44px;

  border-radius: var(--r-md);

  flex-shrink: 0;
}

.search-skel-info {
  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 7px;

  padding-top: 2px;
}

.search-skel-company {
  height: 10px;
  width: 42%;
}

.search-skel-title {
  height: 14px;
  width: 78%;
}

.search-skel-meta {
  height: 10px;
  width: 58%;
}

.search-skel-save {
  width: 36px;
  height: 36px;

  border-radius: var(--r-md);

  flex-shrink: 0;
}

/* ── Tags ────────────────────────────── */
.search-skel-tags {
  display: flex;

  gap: .35rem;

  flex-wrap: wrap;

  margin-bottom: .9rem;
}

.search-skel-tag {
  height: 24px;

  border-radius: var(--r-sm);
}

/* ── Footer ──────────────────────────── */
.search-skel-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: .5rem;

  margin-top: auto;

  padding-top: .85rem;

  border-top: 1px solid var(--border);
}

.search-skel-salary {
  width: 95px;
  height: 16px;
}

.search-skel-actions {
  display: flex;

  gap: .4rem;
}

.search-skel-btn {
  height: 30px;

  border-radius: var(--r-md);
}

/* ── Fade system ─────────────────────── */
#skeleton-list {
  transition: opacity .35s ease;
}

#skeleton-list.hide {
  opacity: 0;
  pointer-events: none;
}

#jobs-list {
  opacity: 0;

  transition: opacity .35s ease;
}

#jobs-list.show {
  opacity: 1;
}

/* ── Dark mode ───────────────────────── */
[data-theme="dark"] .search-job-skeleton {
  background: var(--surface);
}

/* ── Tablet ──────────────────────────── */
@media (max-width: 768px) {

  .search-job-skeleton {
    min-height: auto;
  }

}

/* ── Mobile ──────────────────────────── */
@media (max-width: 480px) {

  .search-job-skeleton {
    padding: 1rem;
  }

}