/* Традиции — хъб на силоза. Глобалните променливи, .wrap и .btn идват от tokens.css. */

/* HERO */
.tr .phero { padding: 54px 0 10px; position: relative; overflow: hidden; }
.tr .phero::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 680px; height: 520px; z-index: 0;
  background: radial-gradient(ellipse 50% 60% at 70% 18%, rgba(242,166,90,.22), transparent 62%), radial-gradient(ellipse 52% 54% at 92% 30%, rgba(224,123,95,.20), transparent 60%);
  pointer-events: none; animation: tr-floaty 18s ease-in-out infinite alternate;
}
@keyframes tr-floaty { to { transform: translateX(-2%) translateY(1.5%) scale(1.04); } }
.tr .phero > * { position: relative; z-index: 1; }
.tr .eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; }
:global([data-theme="dark"]) .tr .eyebrow { color: var(--accent); }
.tr .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; display: inline-block; }
.tr .phero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.0; font-size: clamp(2.5rem, 6.4vw, 4.4rem); max-width: 16ch; text-wrap: balance; }
.tr .phero .lead { color: var(--muted); font-size: clamp(1.04rem, 2.2vw, 1.26rem); font-weight: 500; max-width: 62rem; margin-top: 22px; text-wrap: pretty; }
.tr .phero .lead b { color: var(--text); font-weight: 700; }

/* NEXT-UP BANNER */
.tr .nextup { display: flex; align-items: center; gap: 18px; background: linear-gradient(150deg, color-mix(in srgb, var(--amber) 16%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 32%, var(--border)); border-radius: var(--r-lg); padding: 22px 26px; box-shadow: var(--shadow); margin-top: 30px; flex-wrap: wrap; transition: var(--t); }
.tr .nextup:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tr .nextup .nu-em { font-size: 2.4rem; line-height: 1; flex: 0 0 auto; }
.tr .nextup .nu-txt { flex: 1; min-width: 200px; }
.tr .nextup .nu-k { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
:global([data-theme="dark"]) .tr .nextup .nu-k { color: var(--amber); }
.tr .nextup .nu-t { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; margin-top: 4px; }
.tr .nextup .nu-s { font-size: .9rem; font-weight: 600; color: var(--muted); margin-top: 3px; }
.tr .nextup .nu-go { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: #fff; background: var(--accent); padding: 12px 22px; border-radius: var(--r-full); box-shadow: 0 6px 18px rgba(194,90,62,.32); transition: var(--t); }
.tr .nextup:hover .nu-go { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(194,90,62,.44); }

/* SEASON SECTION */
.tr .sec { padding: 34px 0; }
.tr .season-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tr .season-head .badge { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 1.5rem; flex: 0 0 auto; background: color-mix(in srgb, var(--sc, var(--accent)) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--sc, var(--accent)) 30%, transparent); }
.tr .season-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.2vw, 1.9rem); letter-spacing: -.02em; line-height: 1; }
.tr .season-head .smonths { font-size: .84rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 5px; }
.tr .season-head .line { flex: 1; height: 1px; background: var(--border); }

/* CARD GRID */
.tr .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) { .tr .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tr .cards { grid-template-columns: 1fr; } }
.tr .card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow); transition: var(--t); overflow: hidden; border-top: 4px solid var(--c, var(--accent)); }
.tr .card.live:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--c, var(--accent)) 42%, var(--border)); }
.tr .card.soon { opacity: .82; }
.tr .card .ctop { display: flex; align-items: flex-start; gap: 14px; }
.tr .card .cem { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }
.tr .card .cdate { margin-left: auto; text-align: right; flex: 0 0 auto; }
.tr .card .cdate b { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1; color: var(--c, var(--accent-deep)); display: block; }
.tr .card .cdate span { font-size: .66rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; display: block; }
.tr .card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.01em; line-height: 1.18; margin: 15px 0 0; text-wrap: balance; }
.tr .card p { font-size: .9rem; font-weight: 500; color: var(--muted); margin-top: 8px; text-wrap: pretty; line-height: 1.5; flex: 1; }
.tr .card .clink { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: .86rem; font-weight: 700; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 8px; transition: var(--t); }
:global([data-theme="dark"]) .tr .card .clink { color: var(--accent); }
.tr .card.live:hover .clink { gap: 12px; }
.tr .card .soontag { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); display: inline-flex; align-items: center; gap: 7px; }
.tr .card .soontag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }

/* CTA ROW (.btn / .btn-primary идват от tokens.css) */
.tr .ctarow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 30px; box-shadow: var(--shadow); }
.tr .ctarow .ctxt { font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.01em; }
.tr .ctarow .csub { font-size: .9rem; font-weight: 500; color: var(--muted); margin-top: 4px; }