.category-selection {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #2c2c2c;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  /* hide scrollbar but keep scroll on small screens */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.category-selection::-webkit-scrollbar { display: none; }

@media (max-width: 800px) {
  .category-selection {
    flex-wrap: wrap;
    height: auto;
    overflow-x: visible;
    overflow-y: visible;
    justify-content: flex-start;
    padding-bottom: 6px;
    background-color: #ffffff;
  }
}

.category-buttons {
  display: flex;
  flex-shrink: 0;
  height: 36px;
}

@media (max-width: 800px) {
  .category-buttons {
    width: 100%;
    height: 36px;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-shrink: 0;
    background-color: #2c2c2c;
    overscroll-behavior-x: none;
  }
  .category-buttons::-webkit-scrollbar { display: none; }
  .category-btn {
    flex-shrink: 0;
  }
}

.category-btn {
  height: 100%;
  min-width: 80px;
  padding: 0 20px;
  border: none;
  border-radius: 0;
  margin: 0;
  font-family: var(--mainFont);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  white-space: nowrap;
  color: #ffffff;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  will-change: filter;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s, filter 0.15s;
}

@media (hover: hover) {
  .category-btn:not(.active):hover {
    filter: saturate(1.6);
  }

  .politics:not(.active):hover {
     background-color: #323232;
  }
}

.category-btn:active {
  filter: brightness(0.82);
  box-shadow: none !important;
  padding-top: 4px;
  color: #ffffff !important;
}

/* ── Category button colours ─────────────────────────────────────────────── */
/* Unselected: category-colour bg · white text · darker bottom accent        */
/* Selected:   same bg/text · no accent · text nudged down                   */

.category-btn.active {
  box-shadow: none;
  padding-top: 4px;
}

/* Politics: dark enough to be a real colour but clearly distinct from the #2c2c2c bar */
.politics {
  background-color: #393939;
  box-shadow: inset 0 -4px 0 #000000;
  color: #ffffff;
}

.health {
  background-color: #f9305f;
  box-shadow: inset 0 -4px 0 #aa0028;
  color: #ffffff;
}

.business {
  background-color: #EEBC1D;
  box-shadow: inset 0 -4px 0 #B28D15;
  color: #ffffff;
}

.technology {
  background-color: #3a80e8;
  box-shadow: inset 0 -4px 0 #0050c0;
  color: #ffffff;
}

.lifestyle {
  background-color: #7849ba;
  box-shadow: inset 0 -4px 0 #541e9f;
  color: #ffffff;
}

.science {
  background-color: #34C759;
  box-shadow: inset 0 -4px 0 #1f8c3c;
  color: #ffffff;
}

/* ── Keyword search box ─────────────────────────────────────────────────── */
.keyword-search-box {
  /* colour tokens — overridden on mobile */
  --sb-bg:          transparent;
  --sb-inner-bg:    rgba(255, 255, 255, 0.12);
  --sb-inner-pad:   0px 3px;
  --sb-tag-pad:     1px 1px 2px 4px;
  --sb-input-pad:   0px;
  --sb-text:        #ffffff;
  --sb-placeholder: rgba(255, 255, 255, 0.55);
  --sb-btn-bg:      rgba(255, 255, 255, 0.18);
  --sb-btn-color:   rgba(255, 255, 255, 0.75);
  --sb-btn-hover:   #ffffff;
  --sb-tag-font:    0.85rem;

  display: flex;
/*   align-items: center; */
  width: 280px;
  flex-shrink: 0;
  height: 26px;
  margin: 0px 12px;
  padding: 0px;
  box-sizing: border-box;
  background-color: var(--sb-bg);
  border-radius: 8px;
}

@media (max-width: 800px) {
  .keyword-search-box {
    --sb-bg:          #ffffff;
    --sb-inner-bg:    #eeeeee;
    --sb-inner-pad:   0px 3px;
    --sb-tag-pad:     5px 4px 5px 6px;
    --sb-input-pad:   7px 2px;
    --sb-text:        #333333;
    --sb-placeholder: rgba(0, 0, 0, 0.35);
    --sb-btn-bg:      rgba(0, 0, 0, 0.1);
    --sb-btn-color:   rgba(0, 0, 0, 0.5);
    --sb-btn-hover:   #333333;
    --sb-tag-font:    0.85rem;

    width: calc(100% - 16px);
    height: auto;
    margin: 10px 8px 0px 8px;
  }
}

.keyword-tags-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: var(--sb-inner-pad);
  border-radius: 6px;
  background-color: var(--sb-inner-bg);
  flex: 1;
  cursor: text;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.keyword-tags-container::-webkit-scrollbar { display: none; }

#keyword-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: var(--sb-tag-pad);
  font-size: var(--sb-tag-font);
  font-family: var(--mainFont);
  color: #333;
  white-space: nowrap;
}

.keyword-tag-remove {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 0 1px !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
  color: #888;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 50% !important;
  width: 14px !important;
  height: 14px !important;
  justify-content: center;
}

.keyword-tag-remove:hover {
  color: #222;
}

#keyword-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--mainFont);
  font-size: 0.85rem;
  min-width: 40px;
  flex: 1;
  padding: var(--sb-input-pad);
  color: var(--sb-text);
  caret-color: var(--sb-text);
}

#keyword-input::placeholder {
  color: var(--sb-placeholder);
}

.search-clear-btn {
  background: var(--sb-btn-bg) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  font-size: 0.6rem !important;
  color: var(--sb-btn-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  line-height: 1 !important;
}

.search-clear-btn:hover {
  color: var(--sb-btn-hover);
}

.cardBottom-date-short { display: none; }

/* ── "No results" message ───────────────────────────────────────────────── */
.no-results {
  text-align: center;
  font-family: var(--mainFont);
  color: #999;
  padding: 48px 20px;
  font-size: 1rem;
}

/* ── Search results grid ────────────────────────────────────────────────── */
.search-results-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.search-results-grid .verticalCard {
  width: 285px;
}

/* ── Generic home-page button base ──────────────────────────────────────── */
button {
  font-family: var(--mainFont);
  font-size: 0.75rem;
  padding: 4px 16px;
  border-radius: 8px;
  margin: 2px;
  font-style: bold;
  background-color: white;
}



/* ── Home-specific column titles ────────────────────────────────────────── */

.column-title {
    color: #b5b5b5;
    padding-left: 38px;
    margin-bottom: 4px;
}

@media (max-width: 800px) {
    .column-title {
        padding-left: 22px;
    }
}

/* ── User section ────────────────────────────────────────────────────────── */

.user-section {
    background-color: #f9f9f9;
    width: 100%;
    padding: 8px 0px 48px;
    margin: 32px 0 8px;
}

.user-section-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding-inline: 1rem;
}

.user-section-row {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 18px;
}

/* ── Category section ────────────────────────────────────────────────────── */

.category-section {
    width: 100%;
    margin: 0;
}

.category-section-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding-inline: 1rem;
}

.category-section-cards {
    padding-top: 14px;
    padding-bottom: 24px;
}

.category-section-title {
    text-transform: capitalize;
}

.category-section + .category-section {
    border-top: 1px solid #e8e8e8;
}

@media (max-width: 800px) {
    .user-section-inner {
        padding-inline: 12px;
    }
    .category-section-inner {
        padding-inline: 0;
    }

    /* ── User section title: compensate for 12px container padding ── */
    .user-section-inner .column-title {
        padding-left: 10px;
    }

    /* ── User cards: horizontally scrollable row of square cards. Row gets
       extra padding (beyond the gap) so box-shadow and the hover lift
       aren't clipped by the scroll container — overflow-x:auto forces
       overflow-y to auto too, so anything outside the padding box gets
       cut off. ── */
    .user-section-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 12px;
        overflow-x: auto;
        padding: 10px 8px 20px;
        margin-inline: -8px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        cursor: grab;
    }
    .user-section-row::-webkit-scrollbar {
        display: none;
    }
    /* Added by home.js while a mouse drag is in progress, so desktop/web
       visitors can click-and-drag the row, not just swipe on touch. */
    .user-section-row.is-dragging {
        cursor: grabbing;
        user-select: none;
    }
    .userCard {
        flex-shrink: 0;
        width: 140px;
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 16px;
    }
    /* Top (background) and bottom (avatar + name) halves split evenly:
       bg-wrap is pinned to exactly half the card's height, and the name
       flex-grows to soak up the rest, whatever the avatar overlap leaves. */
    .userCard-bg-wrap {
        height: 50%;
        flex-shrink: 0;
    }
    .userCard-name {
        flex: 1 1 auto;
    }
}

/* ── Join popup styling moved to joinPopup.css so it can be shared with user.mustache ── */

/* ── Category section columns ────────────────────────────────────────────── */

.category-section-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) 324px;
    gap: 0 16px;
}

@media (max-width: 880px) {
    .category-section-columns {
        grid-template-columns: 1fr;
    }
    .category-col-vertical,
    .vertical-cards-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .vertical-cards-col > .column-title {
        grid-column: 1 / -1;
    }
    .category-col-vertical .verticalCard,
    .vertical-cards-col .verticalCard {
        height: 260px;
        overflow: hidden;
    }
    .category-col-vertical .verticalCard .img-frame,
    .vertical-cards-col .verticalCard .img-frame {
        height: 95px;
    }
    .category-col-vertical .verticalCard .article-title,
    .vertical-cards-col .verticalCard .article-title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        margin: 8px 0 0;
    }
    .category-col-vertical .verticalCard .cardBottom-date,
    .vertical-cards-col .verticalCard .cardBottom-date {
        display: none;
    }
    .category-col-vertical .verticalCard .cardBottom-date-short,
    .vertical-cards-col .verticalCard .cardBottom-date-short {
        display: inline;
    }
}