/* =============================================
   MINTAREX — ANNOUNCEMENTS (MATCH LEGAL LAYOUT)
   ============================================= */

/* ---- Layout ---- */
.feed-layout{
  display:grid;
  grid-template-columns:250px 1fr;   /* same as .legal-layout */
  gap:60px;
  align-items:flex-start;
  padding:5vh 0 10vh;
}

/* ---- Sticky Filter Sidebar (desktop) ---- */
.feed-filters-container{
  position:sticky;
  top:100px;                         /* same offset as Legal */
  height:calc(100vh - 120px);
  overflow-y:auto;
}

.feed-filters h4{
  font-size:1.1rem;
  color:var(--ink);
  margin:0 0 20px;
}

/* Vertical list on desktop — mirrors .legal-nav */
.feed-filters{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ========== LEGAL-STYLE BUTTONS (rectangular, not pills) ========== */
.filter-btn{
  appearance:none;
  width:100%;
  text-align:left;
  display:inline-flex;
  align-items:center;
  gap:.5ch;

  /* SIZE matches .legal-nav-link density */
  padding:12px 16px;
  font-weight:600;
  font-size:14px;
  line-height:1.1;

  color:#718096;                     /* subtle, like Legal idle state */
  background:none;
  border:1px solid transparent;
  border-radius:8px;                 /* same radius as Legal */
  cursor:pointer;

  transition:background .2s ease, color .2s ease,
             border-color .2s ease, box-shadow .2s ease;
}
.filter-btn:hover{
  color:var(--ink);
  background:var(--glass-bg);
}
.filter-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(162,235,204,.35);
}
.filter-btn.is-active{
  color:var(--accent-base);
  background:rgba(162,235,204,.12);  /* soft highlight like Legal */
  border-color:var(--accent-base);
}

/* ---- Feed cards ---- */
.announcement-feed{
  display:flex;
  flex-direction:column;
  gap:30px;
}
.announcement-item{
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:12px;
  padding:25px;
  transition:opacity .3s ease, transform .3s ease;
}
.item-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  font-size:12.5px;
  font-weight:600;
}
.item-category{
  padding:4px 10px;
  border-radius:99px;
  font-family:'Space Mono', monospace;
}
.item-header time{color:var(--muted);}

/* Category colors */
.cat-listing{background:rgba(100,217,176,.2); color:#208D7A;}
.cat-update{background:rgba(99,179,237,.2);  color:#2a69ac;}
.cat-maintenance{background:rgba(246,173,85,.2); color:#c05621;}
.cat-community{background:rgba(183,148,244,.2); color:#6b46c1;}

.announcement-item h3{
  margin:0 0 10px;
  font-size:1.25rem;
  color:var(--ink);
}
.item-content p{
  margin:0;
  line-height:1.65;
}

/* =============================================
   RESPONSIVE — same behavior as Legal
   ============================================= */

/* ≥1200px — same wider sidebar feel */
@media (min-width:1200px){
  .feed-layout{ grid-template-columns:280px 1fr; gap:60px; }
}

/* ≤991px — stack, turn sidebar into horizontal scroller
   and use underline cue just like Legal’s mobile nav */
@media (max-width:991px){
  .feed-layout{
    grid-template-columns:1fr;
    gap:22px;
  }
  .feed-filters-container{
    position:relative;
    top:auto;
    height:auto;
    overflow-y:visible;
    margin-bottom:6px;
    overflow-x:hidden;              /* prevents page overflow */
  }
  .feed-filters{
    flex-direction:row;
    align-items:center;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:10px;
    padding:0 10px 10px;
    margin:0 -10px;                 /* edge-to-edge swipe */
  }
  .feed-filters::-webkit-scrollbar{ display:none; }

  .filter-btn{
    flex:0 0 auto;
    white-space:nowrap;
    border-radius:8px;              /* rectangular, not pill */
    padding:12px 16px;
    border-bottom:3px solid transparent;   /* Legal’s active cue */
    background:none;                        /* match Legal mobile look */
  }
  .filter-btn.is-active{
    border-bottom-color:var(--accent-base);
    background:rgba(162,235,204,.12);
    color:var(--accent-base);
    border-color:var(--accent-base);
  }
}

/* ≤767px — mobile spacing & type */
@media (max-width:767px){
  .feed-layout{ padding:4vh 0 8vh; gap:22px; }
  .announcement-item{ padding:18px; border-radius:12px; }
  .item-header{ flex-direction:column; align-items:flex-start; gap:6px; }
  .announcement-item h3{ font-size:1.14rem; }
  .item-content p{ font-size:14px; line-height:1.6; }
}

/* ≤575px — smallest phones */
@media (max-width:575px){
  .feed-filters{ gap:8px; }
  .filter-btn{ font-size:13px; padding:10px 14px; }
  .announcement-item{ padding:16px; }
  .announcement-item h3{ font-size:1.08rem; }
  .item-content p{ font-size:13.5px; }
}

/* Short landscape (e.g., iPhone landscape) */
@media (max-height:600px) and (orientation:landscape){
  .feed-layout{ gap:18px; padding:3vh 0 6vh; }
  .feed-filters{ overflow-x:auto; }
  .filter-btn{ flex:0 0 auto; }
  .announcement-item{ padding:15px; border-radius:10px; }
}

/* Ultra-wide monitors */
@media (min-width:1600px){
  .feed-layout{ max-width:1400px; margin:0 auto; gap:72px; }
  .announcement-item{ padding:26px; border-radius:14px; }
}

/* Motion preference */
@media (prefers-reduced-motion:reduce){
  .announcement-item{ transition:none; }
  .filter-btn{ transition:none; box-shadow:none; }
}