/*
 * Page head with a search box, laid out as three columns: the title, the
 * search field, and any action buttons. The columns are declared here rather
 * than sized by their contents, so each part sits in the same place on every
 * page — the search box does not shift when a page has no buttons. They stack
 * into one column on narrow screens.
 *
 * One stylesheet for every listing page that uses it — Training Resources,
 * Training Materials, Training Opportunities and Search Trainers — so the four
 * cannot drift apart. It began in training-resources.css and moved here
 * unchanged.
 *
 * The colours are the Training Resources tokens. Each var() carries its value
 * as a fallback, so pages that do not load training-resources.css (where the
 * tokens are declared) get the same colours without declaring them again.
 */

.tr-pagehead {
  background: #fff;
  border: 1px solid var(--tr-line, #e2e8f0);
  border-radius: var(--tr-radius, 16px);
  box-shadow: var(--tr-shadow, 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06));
  padding: 22px 24px;
  display: grid;
  /* Title | search | actions. The outer two columns share what is left over
     equally, which is what keeps the search box in one place across pages:
     a page with no buttons still leaves the third column standing. */
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.tr-head-title {
  min-width: 0;
}

.tr-head-search {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tr-pagehead h1 {
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tr-blue, #126792);
  line-height: 1.2;
}

.tr-pagehead .tr-sub {
  font-size: 0.8rem;
  color: var(--tr-ink-soft, #64748b);
  font-weight: 500;
  margin-top: 2px;
}

/* Search */
.tr-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f8fafc;
  border: 1px solid var(--tr-line, #e2e8f0);
  border-radius: 12px;
  padding: 9px 14px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tr-search:focus-within {
  border-color: var(--tr-blue, #126792);
  box-shadow: 0 0 0 3px var(--tr-blue-soft, #e8f4fb);
}

.tr-search svg {
  flex-shrink: 0;
  color: var(--tr-ink-soft, #64748b);
}

.tr-search input {
  border: 0;
  background: none;
  outline: 0;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--tr-ink, #0f172a);
}

.tr-search input::placeholder {
  color: #94a3b8;
}

/* Actions beside the search, and the outlined button they use */
.tr-pagehead .tr-head-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tr-btn-ghost {
  border: 1px solid var(--tr-line, #e2e8f0);
  background: #fff;
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tr-ink, #0f172a);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: 0.15s;
}

.tr-btn-ghost:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

/* Medium screens & Tablets (max-width: 768px) */
@media (max-width: 768px) {
  .tr-pagehead {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 18px;
    gap: 14px;
  }

  .tr-pagehead .tr-head-actions {
    justify-self: stretch;
    width: 100%;
    display: flex;
    gap: 10px;
  }

  .tr-pagehead .tr-head-actions button,
  .tr-pagehead .tr-head-actions a {
    flex: 1;
    justify-content: center;
    font-size: 13px;
    padding: 10px 14px;
  }
}

/* Mobile Devices (max-width: 640px) */
@media (max-width: 640px) {
  .tr-pagehead {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 14px 16px;
    gap: 12px;
  }

  .tr-pagehead h1 {
    font-size: 1.2rem;
  }

  .tr-pagehead .tr-sub {
    font-size: 0.75rem;
  }

  .tr-pagehead .tr-head-actions {
    justify-self: stretch;
    display: flex;
    gap: 8px;
  }

  .tr-pagehead .tr-head-actions button,
  .tr-pagehead .tr-head-actions a {
    flex: 1;
    justify-content: center;
    font-size: 12px;
    padding: 8px 10px;
  }
}