/*
  CUBE — Home page extras
  Custom glass sort dropdown (Latest/Earliest) + unified search results
  (projects, people, skills). Additive only, loaded after home.css.
*/

/* ================================================
   SORT DROPDOWN — fully custom, so full glass/blur
   works here (unlike native <select> option popups)
   ================================================ */
.feed-sort-dropdown {
  position: relative;
}

.feed-sort-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f2e9e9;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease;
}

.feed-sort-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.feed-sort-btn i {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.feed-sort-dropdown.open .feed-sort-btn i {
  transform: rotate(180deg);
}

.feed-sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: rgba(20, 12, 12, 0.75);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 30;
}

.feed-sort-dropdown.open .feed-sort-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.feed-sort-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  color: rgba(242, 233, 233, 0.75);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.feed-sort-option i {
  font-size: 12px;
  width: 14px;
}

.feed-sort-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.feed-sort-option.active {
  background: rgba(227, 17, 54, 0.18);
  color: #ff8fa0;
}

/* ================================================
   SEARCH CLEAR LINK
   ================================================ */
.search-clear-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(242, 233, 233, 0.6);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.search-clear-link:hover {
  color: #e31136;
}

/* ================================================
   SEARCH RESULTS
   ================================================ */
.search-group {
  margin-bottom: 22px;
}

.search-group-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(242, 233, 233, 0.5);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-result-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
  transition: background 0.2s ease;
}

.search-result-row:hover {
  background: rgba(227, 17, 54, 0.1);
}

.search-result-row img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.search-result-row div h5 {
  font-size: 14px;
  font-weight: 700;
  color: #f2e9e9;
}

.search-result-row div p {
  font-size: 12px;
  color: rgba(242, 233, 233, 0.55);
  margin-top: 2px;
}

.search-skill-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-skill-chip {
  background: rgba(227, 17, 54, 0.12);
  color: #ff8fa0;
  padding: 7px 15px;
  border-radius: 30px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.search-skill-chip:hover {
  background: rgba(227, 17, 54, 0.22);
}

.no-search-results {
  text-align: center;
  padding: 40px 20px;
  color: rgba(242, 233, 233, 0.5);
  font-size: 13.5px;
}

/* ==========================================
   COLLABORATION FEED CARD — additive, reuses
   existing .post-card / .post-header / .post-body /
   .post-actions / .project-preview shells
========================================== */

.collab-feed-icon-wrap{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary-soft),rgba(0,0,0,.15));
}

.collab-feed-icon-wrap i{
    font-size:34px;
    color:var(--primary);
    opacity:.6;
}

.collab-feed-interested-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:none;
    background:var(--primary);
    color:#fff;
    padding:10px 18px;
    border-radius:12px;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    transition:.2s;
}

.collab-feed-interested-btn:hover{
    background:var(--primary-dark);
}

.collab-feed-interested-btn.already-interested{
    background:var(--primary-soft);
    color:var(--primary);
    cursor:not-allowed;
}

.collab-feed-owner-note{
    font-size:13px;
    font-weight:600;
    color:var(--ink-soft);
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.post-body p{
  font-size:15.5px;
  font-weight:700;
  color:#f2e9e9;
  line-height:1.5;
}