.tfp-page { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }

.tfp-hero { text-align: center; padding: 40px 20px 32px; }
.tfp-title { font-size: 32px; font-weight: 800; color: #fff; margin: 0 0 8px; font-family: 'Oxanium', sans-serif; }
.tfp-title span { color: #C89B3C; }
.tfp-sub { font-size: 15px; color: #7a8aaa; margin: 0; }

.tfp-feed { padding: 0 0 40px; }

.tfp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tfp-card {
  display: block;
  background: #0f1923;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.2s, border-color 0.2s;
}
.tfp-card:hover { transform: translateY(-3px); border-color: rgba(200,155,60,0.3); }

.tfp-card-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.tfp-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.tfp-card:hover .tfp-card-img { transform: scale(1.04); }
.tfp-card-img--placeholder { width: 100%; height: 100%; background: #1a2540; }

.tfp-card-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  padding: 8px 14px;
}
.tfp-card-badge-label { display: block; font-size: 11px; color: #C89B3C; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.tfp-card-badge-num { display: block; font-size: 28px; font-weight: 800; color: #fff; font-family: 'Oxanium', sans-serif; line-height: 1; }

.tfp-card-body { padding: 14px 16px 16px; }
.tfp-card-time { font-size: 11px; color: #7a8aaa; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.tfp-card-title { font-size: 15px; font-weight: 700; color: #fff; margin: 6px 0 6px; line-height: 1.4; }
.tfp-card-excerpt { font-size: 13px; color: #7a8aaa; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tfp-empty { text-align: center; padding: 60px 20px; color: #7a8aaa; }

@media(max-width: 900px) { .tfp-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 600px) { .tfp-grid { grid-template-columns: 1fr; } }