﻿/* Feed4Gamers article header and footer labels. Scoped to news detail only. */
.banner-single-post.f4g-article-header .content-block .post-content > h1.title {
  margin: 0;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.f4g-article-header .post-content .post-cat { margin-bottom: 18px; }
.f4g-article-header .post-content .f4g-article-deck {
  font-size: clamp(18px, 1.65vw, 23px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-body, #59616e);
  max-width: 960px;
  margin: 22px 0 20px;
}
.f4g-article-header .f4g-article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-body, #737b87);
  margin: 18px 0 24px;
}
.f4g-article-header .f4g-article-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(242,140,0,.12);
  color: #cc7100;
  font-weight: 700;
  flex: 0 0 auto;
}
.f4g-article-header .f4g-article-byline-text { display: flex; flex-direction: column; gap: 2px; }
.f4g-article-header .f4g-article-byline-author { color: var(--color-heading, #222); }
.f4g-article-header .f4g-article-byline-author strong { font-weight: 700; }
.f4g-article-header .f4g-article-byline time { font-size: 13px; color: var(--color-body, #7b828b); }
.f4g-article-taxonomy {
  border: 0;
  padding: 0;
  margin: 28px 0 20px;
  display: grid;
  gap: 12px;
}
.f4g-article-taxonomy .f4g-article-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.f4g-article-taxonomy .f4g-article-chip-label {
  min-width: 75px;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-body, #77808b);
  margin-right: 4px;
}
.f4g-article-taxonomy .f4g-article-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s, border-color .18s;
}
.f4g-article-taxonomy .f4g-article-chip--platform {
  background: rgba(242,140,0,.11);
  border: 1px solid rgba(242,140,0,.28);
  color: #c36d00;
}
.f4g-article-taxonomy .f4g-article-chip--topic {
  background: rgba(120,130,145,.09);
  border: 1px solid rgba(120,130,145,.21);
  color: var(--color-heading, #373d48);
}
.f4g-article-taxonomy .f4g-article-chip--platform:hover { background: rgba(242,140,0,.23); color: #a45800; }
.f4g-article-taxonomy .f4g-article-chip--topic:hover { background: rgba(120,130,145,.19); color: var(--color-heading, #252b32); }
body.active-dark-mode .f4g-article-header .f4g-article-deck { color: #c0c5cd; }
body.active-dark-mode .f4g-article-header .f4g-article-byline-author { color: #f1f1f2; }
body.active-dark-mode .f4g-article-header .f4g-article-byline time,
body.active-dark-mode .f4g-article-taxonomy .f4g-article-chip-label { color: #a5acb5; }
body.active-dark-mode .f4g-article-header .f4g-article-avatar { color: #ffbd60; background: rgba(242,140,0,.16); }
body.active-dark-mode .f4g-article-taxonomy .f4g-article-chip--platform { color: #ffbe6b; }
body.active-dark-mode .f4g-article-taxonomy .f4g-article-chip--topic { color: #e0e2e6; background: #303037; border-color: #484850; }
@media (max-width: 767px) {
  .banner-single-post.f4g-article-header .content-block .post-content > h1.title { font-size: clamp(26px, 6.5vw, 32px); line-height: 1.18; }
  .f4g-article-header .post-content .f4g-article-deck { margin: 16px 0; }
  .f4g-article-taxonomy .f4g-article-chip-label { min-width: 100%; }
}

/* Linked Feed trailers: responsive player instead of the article hero image. */
.f4g-trailer-player { width: 100%; aspect-ratio: 16 / 9; background: #101014; border-radius: 12px; overflow: hidden; margin: 0 0 24px; }
.f4g-trailer-player iframe, .f4g-trailer-player video { display: block; width: 100%; height: 100%; border: 0; }
.f4g-trailer-unavailable { display: flex; align-items: center; justify-content: center; min-height: 240px; height: 100%; color: #b5b6c1; font-size: 16px; }
@supports not (aspect-ratio: 16 / 9) { .f4g-trailer-player { height: 460px; } }
@media (max-width: 767px) { .f4g-trailer-player { border-radius: 8px; } }

/* Platforms directly under the headline, compact and without separators. */
.f4g-article-header .f4g-article-header-taxonomy {margin:14px 0 12px;gap:0;}
.f4g-article-header .f4g-article-header-taxonomy .f4g-article-chip-row {gap:7px;}
.f4g-article-header .f4g-article-header-taxonomy .f4g-article-chip {min-height:28px;padding:5px 10px;font-size:12px;}
.f4g-article-header .f4g-article-header-taxonomy + .f4g-article-deck {margin-top:12px;}
