/* WP: az általános részek a bee.css-ben (szekció-háttér, .tba, .btn-ice) */
/* =========================================================
   BEE event-arculat · Mikulás Kupa (Valorant, 2026.12.05.)
   <body class="ev ev-mikulas"> – a BEE hatszög-rendszere marad,
   a sárga helyett Valorant-vörös, jeges kék és téli éjszaka.
   ========================================================= */
body.ev-mikulas {
  --black: #0b121b;
  --graphite: #121c28;
  --graphite-2: #182434;
  --line: #233347;
  --smoke: #8fa3b8;
  --bone: #f2f6fa;
  --bone-dim: #c9d6e2;
  --accent: #ff4655;          /* Valorant-vörös */
  --accent-glow: #ff7380;
  --accent-ink: #ffffff;
  --accent-rgb: 255, 70, 85;
  --ice: #9fd4ff;
  --ice-rgb: 159, 212, 255;
  --gold: #f6c200;            /* a díjazás marad BEE-sárga */
  --mesh: url("../img/hexaminta-jeg.svg");
  background: radial-gradient(120% 70% at 50% -10%, #16263a 0%, #0b121b 55%) fixed, #0b121b;
}
.ev-mikulas .site-header.solid, .ev-mikulas .site-header { --line: #1d2b3c; }
.ev-mikulas .eyebrow { color: var(--ice); }
.ev-mikulas ::selection { background: var(--accent); color: #fff; }

/* ---------- hó (canvas) ---------- */
.mk-snow { position: fixed; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }
.ev-mikulas main { position: relative; z-index: 2; }

/* ---------- hero ---------- */
.mk-hero { position: relative; min-height: min(100svh, 980px); padding: clamp(120px, 14vw, 170px) 0 clamp(60px, 8vw, 100px); display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.mk-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--mesh) 0 0 / 52px auto; opacity: .1; -webkit-mask: radial-gradient(80% 70% at 75% 45%, #000 10%, transparent 75%); mask: radial-gradient(80% 70% at 75% 45%, #000 10%, transparent 75%); }
.mk-hero::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 38%; z-index: -1; background: linear-gradient(180deg, transparent, rgba(11, 18, 27, .9) 70%, #0b121b); }
.mk-hero .grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mk-tag { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ice); padding: 9px 12px; border: 1px solid rgba(var(--ice-rgb), .35); background: rgba(var(--ice-rgb), .06); }
.mk-tag i { width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 10px var(--accent); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); animation: mkBlink 1.6s steps(2) infinite; }
@keyframes mkBlink { 50% { opacity: .25; } }
.mk-title { margin: 22px 0 18px; font-size: clamp(56px, 9.4vw, 148px); line-height: .82; letter-spacing: -.015em; }
.mk-title .r { display: block; color: var(--accent); text-shadow: 0 0 40px rgba(var(--accent-rgb), .35); }
.mk-title .o { display: block; color: transparent; -webkit-text-stroke: 2px var(--ice); }
.mk-sub { font: 600 clamp(18px, 1.8vw, 24px)/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--bone); }
.mk-sub b { color: var(--ice); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 32px; }
.mk-chip { display: grid; gap: 6px; padding: 12px 16px 13px; border: 1px solid var(--line); background: rgba(18, 28, 40, .7); backdrop-filter: blur(6px); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.mk-chip span { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.mk-chip b { font: 700 22px/1 var(--f-display); color: #fff; }
.mk-chip.gold { border-color: rgba(246, 194, 0, .45); }
.mk-chip.gold b { color: var(--gold); }
.mk-chip.red { border-color: rgba(var(--accent-rgb), .5); }
.mk-chip.red b { color: var(--accent); }

/* plakát hatszögkeretben, forgó jeges gyűrűkkel */
.mk-visual { position: relative; aspect-ratio: 1; max-width: 560px; justify-self: center; width: 100%; }
.mk-rings { position: absolute; inset: -14%; width: 128%; height: 128%; overflow: visible; color: var(--ice); pointer-events: none; }
.mk-rings polygon { fill: none; stroke: currentColor; }
.mk-rings .g1 { transform-origin: 50% 50%; animation: orbit 46s linear infinite; opacity: .28; }
.mk-rings .g2 { transform-origin: 50% 50%; animation: orbit 30s linear infinite reverse; opacity: .5; stroke-dasharray: 6 12; }
.mk-rings .g3 { transform-origin: 50% 50%; animation: orbit 20s linear infinite; }
.mk-rings .g3 polygon { stroke: var(--accent); opacity: .8; }
.mk-hexframe { position: absolute; inset: 6%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, var(--ice), var(--accent)); padding: 3px; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)); }
.mk-hexframe img { width: 100%; height: 100%; object-fit: cover; clip-path: inherit; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.mk-visual:hover .mk-hexframe img { transform: scale(1.04); }
.mk-visual::after { content: ""; position: absolute; inset: 18%; z-index: -1; background: radial-gradient(circle, rgba(var(--accent-rgb), .45), transparent 65%); filter: blur(40px); }
.mk-date-badge { position: absolute; left: -2%; bottom: 8%; z-index: 2; display: grid; gap: 4px; padding: 14px 18px; background: var(--accent); color: #fff; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); transform: rotate(-4deg); }
.mk-date-badge small { font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.mk-date-badge b { font: 700 30px/1 var(--f-display); letter-spacing: .02em; }

/* ---------- visszaszámlálás ---------- */
.mk-countbar { position: relative; z-index: 2; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(var(--accent-rgb), .14), rgba(var(--ice-rgb), .06) 60%, transparent); }
.mk-countbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-block: 26px; }
.mk-count { display: flex; gap: clamp(14px, 3vw, 36px); }
.mk-count div { display: grid; gap: 6px; text-align: center; min-width: 64px; }
.mk-count b { font: 700 clamp(40px, 5vw, 64px)/.9 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.mk-count span { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.mk-countbar .lbl { font: 700 clamp(20px, 2vw, 26px)/1.1 var(--f-display); text-transform: uppercase; max-width: 22ch; }
.mk-countbar .lbl small { display: block; margin-top: 8px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .08em; color: var(--smoke); text-transform: uppercase; }

/* ---------- tények (hatszög-ikonos csempék) ---------- */
.mk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mk-fact { position: relative; padding: 26px 22px 24px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--ice-rgb), .07), rgba(18, 28, 40, .5) 70%); display: grid; gap: 10px; align-content: start; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); transition: border-color .3s, transform .3s; }
.mk-fact:hover { border-color: rgba(var(--ice-rgb), .6); transform: translateY(-4px); }
.mk-fact .hx { width: 46px; height: 52px; display: grid; place-items: center; color: var(--ice); position: relative; }
.mk-fact .hx svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-fact .hx path { fill: rgba(var(--ice-rgb), .08); stroke: currentColor; stroke-width: 1.5; }
.mk-fact .hx i { font: 700 15px/1 var(--f-mono); font-style: normal; color: #fff; position: relative; }
.mk-fact .mono { color: var(--ice); }
.mk-fact h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.05; }
.mk-fact p { color: var(--bone-dim); font-size: 15px; line-height: 1.5; }

/* ---------- nevezés lépései: az életút-komponens téli színekben ---------- */
.ev-mikulas .lifepath::after { background: linear-gradient(90deg, #3d6a96, var(--ice) 65%, var(--accent)); box-shadow: 0 0 14px rgba(var(--ice-rgb), .6); }
.ev-mikulas .lp-node path { fill: #0e1824; stroke: var(--ice); }
.ev-mikulas .lp-stop:last-child .lp-node path { fill: var(--accent); stroke: var(--accent); }
.ev-mikulas .lp-stop:last-child .lp-node b { color: #fff; }
.ev-mikulas .lp-card { border-color: #263a52; background: linear-gradient(180deg, rgba(var(--ice-rgb), .1), rgba(11, 18, 27, .6) 70%); }
.ev-mikulas .lp-stop:hover .lp-card { border-color: var(--ice); }
.ev-mikulas .lp-stop:last-child .lp-card { border-color: rgba(var(--accent-rgb), .55); background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(11, 18, 27, .6) 70%); }
.ev-mikulas .lp-card .mono { color: var(--ice); }
.ev-mikulas .lp-stop:last-child .lp-card .mono { color: var(--accent); }
.ev-mikulas .lp-card a { color: var(--ice); }
@media (max-width: 980px) { .ev-mikulas .lifepath::after { background: linear-gradient(180deg, #3d6a96, var(--ice) 65%, var(--accent)); } }

/* ---------- lebonyolítás: double elimination ábra ---------- */
.mk-format { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.mk-format ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.mk-format li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.mk-format li b { font: 700 18px/1.2 var(--f-display); text-transform: uppercase; color: var(--ice); }
.mk-format li span { color: var(--bone-dim); }
.mk-bracket { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); grid-template-rows: auto auto; gap: 14px 18px; padding: 26px; border: 1px solid var(--line); background: rgba(18, 28, 40, .6); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.mk-bracket .lane { grid-column: 1 / 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; position: relative; padding-top: 22px; }
.mk-bracket .lane::before { content: attr(data-label); position: absolute; top: 0; left: 0; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.mk-bracket .lane.lower::before { color: var(--smoke); }
.mk-bracket .m { position: relative; height: 54px; border: 1px solid #2c4561; background: #0f1a27; display: grid; place-items: center; font: 600 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--bone-dim); text-transform: uppercase; }
.mk-bracket .lane.lower .m { border-color: #263547; color: var(--smoke); }
.mk-bracket .m:not(:last-child)::after { content: ""; position: absolute; right: -19px; top: 50%; width: 18px; height: 2px; background: linear-gradient(90deg, var(--ice), transparent); }
.mk-bracket .lane.lower .m:not(:last-child)::after { background: linear-gradient(90deg, #4c5f75, transparent); }
.mk-bracket .final { grid-column: 4; grid-row: 1 / 3; align-self: center; display: grid; gap: 8px; place-items: center; text-align: center; padding: 22px 12px; border: 1px solid var(--accent); background: radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb), .3), rgba(15, 26, 39, .9) 70%); clip-path: polygon(50% 0, 100% 18%, 100% 82%, 50% 100%, 0 82%, 0 18%); min-height: 210px; }
.mk-bracket .final b { font: 700 clamp(16px, 1.5vw, 21px)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.mk-bracket .final span { font: 600 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--accent); }
.mk-bracket .final svg { width: 34px; height: 34px; color: var(--gold); }
.mk-bracket .lane .m.go { border-color: var(--ice); color: #fff; box-shadow: 0 0 18px rgba(var(--ice-rgb), .25); }

/* ---------- díjazás ---------- */
.mk-prize { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.mk-pot { position: relative; padding: clamp(30px, 4vw, 48px); border: 1px solid rgba(246, 194, 0, .45); background: radial-gradient(120% 120% at 0% 0%, rgba(246, 194, 0, .16), rgba(18, 28, 40, .6) 60%); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.mk-pot .mono { color: var(--gold); }
.mk-pot b { display: block; white-space: nowrap; margin: 12px 0 6px; font: 700 clamp(44px, 5.4vw, 86px)/.9 var(--f-display); color: var(--gold); text-shadow: 0 0 40px rgba(246, 194, 0, .3); letter-spacing: -.01em; }
.mk-pot b small { font-size: .38em; letter-spacing: .04em; color: #fff; }
.mk-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.mk-step { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 20px 12px; border: 1px solid var(--line); background: rgba(18, 28, 40, .55); }
.mk-step:nth-child(1) { order: 2; padding-top: 40px; border-color: rgba(246, 194, 0, .5); }
.mk-step:nth-child(2) { order: 1; padding-top: 28px; }
.mk-step:nth-child(3) { order: 3; }
.mk-step .hx { width: 54px; height: 62px; display: grid; place-items: center; position: relative; }
.mk-step .hx svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-step .hx path { fill: rgba(var(--ice-rgb), .08); stroke: var(--ice); stroke-width: 1.5; }
.mk-step:nth-child(1) .hx path { fill: var(--gold); stroke: var(--gold); }
.mk-step .hx b { position: relative; font: 700 20px/1 var(--f-display); color: #fff; }
.mk-step:nth-child(1) .hx b { color: #151200; }
.mk-step strong { font: 700 18px/1.1 var(--f-display); text-transform: uppercase; }

/* ---------- szabályzat ---------- */
.mk-rules { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.mk-rules .sticky { position: sticky; top: 110px; display: grid; gap: 18px; }
.ev-mikulas .faq details { border-color: var(--line); }
.ev-mikulas .faq summary { align-items: center; }
.ev-mikulas .faq summary::after { color: var(--accent); }
.ev-mikulas .faq summary .n { font: 600 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--ice); margin-right: 14px; }
.mk-rule-list { list-style: none; margin: 0; padding: 0 0 24px; display: grid; gap: 12px; }
.mk-rule-list li { position: relative; padding-left: 22px; color: var(--bone-dim); line-height: 1.55; }
.mk-rule-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 10px; background: var(--accent); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.mk-rule-list li b { color: #fff; font-weight: 600; }

/* ---------- záró CTA ---------- */
.ev-mikulas .cta-band { background: linear-gradient(110deg, var(--accent) 0%, #d8303f 55%, #8a1f2b 100%); color: #fff; }
.ev-mikulas .cta-band::before { background-image: url("../img/hexaminta-jeg.svg"); filter: brightness(10); opacity: .1; }
.ev-mikulas .cta-band .h-lg, .ev-mikulas .cta-band .mono { color: #fff; }
.ev-mikulas .cta-band .btn-dark { background: #0b121b; color: #fff; }

/* ---------- Valorant téli képek (hivatalos Riot-grafikák) ---------- */
.mk-hero-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.mk-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: .5; filter: saturate(.85) brightness(.75); animation: mkDrift 40s ease-in-out infinite alternate; }
.mk-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b121b 15%, rgba(11, 18, 27, .78) 48%, rgba(11, 18, 27, .4) 100%), linear-gradient(180deg, rgba(11, 18, 27, .7), transparent 30%); }
@keyframes mkDrift { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.12) translateX(-2%); } }

.mk-rule-list a, .mk-format a { color: var(--ice); text-underline-offset: 3px; }

@media (max-width: 820px) {
  .mk-hero-bg::after { background: linear-gradient(180deg, rgba(11, 18, 27, .55), #0b121b 85%); }
}
@media (prefers-reduced-motion: reduce) { .mk-hero-bg img { animation: none; } }

.ev-mikulas .tba { color: var(--ice); border-color: rgba(var(--ice-rgb), .45); background: rgba(var(--ice-rgb), .08); }
.mk-step .tba { font-size: 13px; padding: 6px 10px 5px; }

/* ---------- reszponzív ---------- */
@media (max-width: 1080px) {
  .mk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-format, .mk-prize, .mk-rules { grid-template-columns: minmax(0, 1fr); }
  .mk-rules .sticky { position: static; }
}
@media (max-width: 820px) {
  .mk-hero .grid { grid-template-columns: minmax(0, 1fr); }
  .mk-visual { max-width: 420px; order: -1; margin-top: 8px; }
  .mk-bracket { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .mk-bracket .lane { grid-column: 1; }
  .mk-bracket .final { grid-column: 1; grid-row: auto; min-height: 0; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  .mk-countbar .wrap { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .mk-facts { grid-template-columns: minmax(0, 1fr); }
  .mk-bracket .lane { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mk-bracket .m { height: 44px; font-size: 10px; letter-spacing: .04em; }
  .mk-bracket .m:not(:last-child)::after { right: -9px; width: 8px; }
  .mk-format li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mk-count div { min-width: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-rings g, .mk-tag i { animation: none; }
  .mk-snow { display: none; }
}
/* 0.4.1: a cím a hasábjához igazodik (a „mindenekelőtt” ne lógjon át a szabálylistára) */
.mk-hero .grid > div:first-child, .mk-rules .sticky, .mk-format > div:first-child { container-type: inline-size; }
.mk-title { font-size: min(clamp(56px, 9.4vw, 148px), 21cqi); }
.mk-rules .h-lg, .mk-format .h-lg { font-size: min(clamp(36px, 5.6vw, 76px), 11.5cqi); }