/* ============================================================
   news.html - page-specific stylesheet
   PC-first / breakpoints: 1200px, 960px, 568px
============================================================ */

.news_page { padding: 96px 0 160px; background: var(--c_white); }

/* ------------------------------------------------------------
   Category filters
------------------------------------------------------------ */
.news_filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 64px;
}
.news_filter_btn {
  border: 1px solid var(--c_border);
  background: var(--c_white);
  color: var(--c_text_strong);
  font-size: 14px;
  letter-spacing: 0.1em;
  padding: 9px 21px;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.news_filter_btn:hover { border-color: var(--c_accent); }
.news_filter_btn.is_active {
  background: var(--c_accent);
  border-color: var(--c_accent);
  color: var(--c_white);
}

@media (max-width: 568px) {
  .news_page { padding: 56px 0 80px; }
  .news_filters { gap: 8px; margin-bottom: 40px; }
  .news_filter_btn { font-size: 11px; padding: 8px 16px; }
}

/* ------------------------------------------------------------
   Featured article
------------------------------------------------------------ */
.newsfeed_featured {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 80px;
  padding-bottom: 80px;
}
.newsfeed_featured_media { width: 552px; flex-shrink: 0; overflow: hidden; }
.newsfeed_featured_media img { width: 100%; height: 345px; object-fit: cover; }
.newsfeed_featured_body { flex: 1; min-width: 0; }
.newsfeed_meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.newsfeed_date { font-size: 13px; letter-spacing: 0.15em; color: var(--c_label); }
.newsfeed_tag { border: 1px solid var(--c_border); font-size: 13px; letter-spacing: 0.1em; color: var(--c_text); padding: 3px 9px; }
.newsfeed_featured_title { font-size: 30px; font-weight: 500; color: var(--c_black); letter-spacing: 0.02em; margin: 0 0 16px; }
.newsfeed_featured_text { margin: 0; }

@media (max-width: 1200px) {
  .newsfeed_featured_media { width: 440px; }
  .newsfeed_featured_media img { height: 300px; }
}
@media (max-width: 960px) {
  .newsfeed_featured { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 56px; padding-bottom: 56px; }
  .newsfeed_featured_media { width: 100%; }
  .newsfeed_featured_media img { height: 60vw; max-height: 380px; }
}
@media (max-width: 568px) {
  .newsfeed_featured_title { font-size: 22px; }
}

/* ------------------------------------------------------------
   Article grid
------------------------------------------------------------ */
.newsfeed_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.newsfeed_card_media { width: 100%; aspect-ratio: 357 / 238; overflow: hidden; margin-bottom: 20px; }
.newsfeed_card_media img { width: 100%; height: 100%; object-fit: cover; }
.newsfeed_card_title { font-size: 18px; font-weight: 500; color: var(--c_black); letter-spacing: 0.02em; margin: 8px 0; }
.newsfeed_card_text { font-size: 14px; margin: 0; }

@media (max-width: 960px) {
  .newsfeed_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 568px) {
  .newsfeed_grid { grid-template-columns: 1fr; gap: 40px; }
  .newsfeed_card_title { font-size: 17px; }
}

/* ============================================================
   news_detail.html
============================================================ */

/* ------------------------------------------------------------
   Back link / hero image
------------------------------------------------------------ */
.detail_top { padding: 144px 0 40px; background: var(--c_white); }
.detail_back_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--c_text_strong);
}
.detail_back_link:hover { color: var(--c_accent); }

.detail_hero { padding: 0 0 56px; background: var(--c_white); }
.detail_hero_media { width: 100%; aspect-ratio: 1152 / 648; overflow: hidden; }
.detail_hero_media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 960px) {
  .detail_top { padding: 120px 0 32px; }
  .detail_hero_media { aspect-ratio: 4 / 3; }
}
@media (max-width: 568px) {
  .detail_top { padding: 96px 0 24px; }
}

/* ------------------------------------------------------------
   Article body
------------------------------------------------------------ */
.article { max-width: 768px; margin: 0 auto; padding-bottom: 96px; }
.article_meta { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.article_date { font-size: 11px; letter-spacing: 0.15em; color: var(--c_label); }
.article_tag { border: 1px solid var(--c_border); font-size: 11px; letter-spacing: 0.1em; color: var(--c_text); padding: 5px 13px; }
.article_title {
  font-size: 36px;
  font-weight: 500;
  color: var(--c_black);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 40px;
}
.article_body { display: flex; flex-direction: column; gap: 24px; }
.article_body p { line-height: 2.2; letter-spacing: 0.04em; color: var(--c_text_strong); margin: 0; }

.article_share {
  display: flex;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--c_border_light);
  margin-top: 56px;
  padding-top: 41px;
}
.article_share_label { font-size: 14px; letter-spacing: 0.1em; color: var(--c_label); }
.share_btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c_border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--c_text_strong);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.share_btn:hover { background: var(--c_dark); color: var(--c_white); border-color: var(--c_dark); }

.article_back_list { margin-top: 40px; }

@media (max-width: 960px) {
  .article_title { font-size: 28px; }
  .article_body p { line-height: 2; }
}
@media (max-width: 568px) {
  .article_title { font-size: 24px; margin-bottom: 32px; }
  .article_share { flex-wrap: wrap; gap: 16px; margin-top: 40px; padding-top: 32px; }
}

/* ------------------------------------------------------------
   Other news
------------------------------------------------------------ */
.other_news { padding: 64px 0 96px; background: var(--c_white); }
.other_news_heading {
  font-size: 24px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.04em;
  margin: 0 0 56px;
}
.other_news .newsfeed_card_title { font-size: 16px; margin: 0; }

@media (max-width: 960px) {
  .other_news { padding: 48px 0 80px; }
  .other_news_heading { margin-bottom: 40px; }
}
@media (max-width: 568px) {
  .other_news { padding: 40px 0 64px; }
}