/**
 * @rk-review-log-10/24/2026-12:40-S46
 *     Purpose:   the 2026-skin TOURNAMENT CALENDAR (Frontend Home::calendar -> v1/tournament_calendar_26.php).
 *     10/24 (later) - the Captain: "The cards I had given a screenshot of - The LTAT Calendar - It was for indication only.
 *                I dont want you to replicate the card exactly. Please create something in its continuation". So: the
 *                HITCOURT TICKET - a grade-coloured tear-off stub (Week Of day / month / year, perforated edge) + a body on
 *                the 2026 Day/Night tokens (grade + status pills, title, dates, event chips, venue + flag, circuit + QR).
 *                Same data as before; the LTAT photo-card port (first version, 3ee9268) is replaced. Also: a smaller page
 *                heading, a year dropdown, and the lock overlay above the placeholder cards.
 */

/* ---- page heading + filter bar ---- */
.hc26 .hcal-hero h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
/* @rk-S46 10/24 (Captain: the country dropdown "on the other side of the year drop down" - one line): this page's hero is as
   wide as the content (the 2026 hero is capped at 880px, too narrow for year + 13 months + country); the lede stays narrow. */
.hc26 .hcal-hero .hc-hero-in { max-width: 1100px; }
.hc26 .hcal-hero .hc-lede { max-width: 760px; margin-left: auto; margin-right: auto; }
.hc26 .hcal-hero .hc-lede { font-size: 1rem; }
.hc26 .hcal-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; background: var(--hc-bg2); border: 1px solid var(--hc-line);
    border-radius: 14px; box-shadow: var(--hc-card-sh); padding: .45rem; margin-top: 1.1rem; }
.hc26 .hcal-months { display: flex; gap: .1rem; flex-wrap: nowrap; flex: 1 1 auto; justify-content: center; min-width: 0; }
.hc26 .hcal-months a { padding: .42rem .68rem; border-radius: 9px; font-size: .88rem; font-weight: 600; color: var(--hc-mut); text-decoration: none; cursor: pointer; }
.hc26 .hcal-months a:hover { background: var(--hc-glow); color: var(--hc-accent); }
.hc26 .hcal-months a.on { background: var(--hc-accent); color: #fff; }
.hc26 .hcal-months a.empty { opacity: .32; pointer-events: none; }
.hc26 .hcal-select { border: 1px solid var(--hc-edge); border-radius: 9px; padding: .42rem .65rem; font-size: .88rem; color: var(--hc-ink);
    background: var(--hc-bg2); font-family: inherit; }
.hc26 .hcal-select.yr { min-width: 6.2rem; font-weight: 700; }
.hc26 .hcal-select.ct { min-width: 12rem; }
.hc26 .hcal-count { font-size: .85rem; color: var(--hc-mut); margin: .2rem 0 0; }
.hc26 .hcal-month-h { font-weight: 700; font-size: 1.2rem; color: var(--hc-ink); border-bottom: 3px solid var(--hc-accent);
    display: inline-block; padding-bottom: .2rem; margin: 1.8rem 0 1rem; }
.hc26 .hcal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hc26 .hcal-col { min-width: 0; }
@media (max-width: 1100px) { .hc26 .hcal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .hc26 .hcal-bar { flex-wrap: wrap; } .hc26 .hcal-months { flex-wrap: wrap; order: 3; flex-basis: 100%; } }
@media (max-width: 680px) {
    .hc26 .hcal-grid { grid-template-columns: minmax(0, 1fr); }
    .hc26 .hcal-select.ct, .hc26 .hcal-select.yr { flex: 1 1 40%; min-width: 0; }
}

/* ---- the HitCourt ticket, v2 (Captain 10/24: "Cards can never resize themselves" + "design the cards in a way that they
   look attractive. The color scheme that you saw in ltat calendar were deliberate so that the calendar looks colorful and
   lively"): FIXED height whatever the content; every row one line (title max two) - events overflow into a "+N" chip
   (hover = title, click = a panel OVER the card); deep navy card + grade-coloured glow + court lines (the LTAT liveliness)
   with a vivid grade-coloured tear-off stub. ---- */
.hc26 .hct { --gc: #5837EB; position: relative; display: flex; height: 236px; isolation: isolate; overflow: hidden; color: #fff;
    border-radius: 16px; background: linear-gradient(140deg, #18366a 0%, #0c1b38 100%);
    box-shadow: 0 10px 26px rgba(8, 23, 48, .22); transition: transform .18s, box-shadow .18s; }
.hc26 .hct::before { content: ''; position: absolute; z-index: 0; top: -45%; right: -25%; width: 75%; height: 130%;
    background: radial-gradient(circle, var(--gc), transparent 62%); opacity: .45; mix-blend-mode: screen; pointer-events: none; }
.hc26 .hct::after { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .07; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 44px, #fff 44px 46px), repeating-linear-gradient(0deg, transparent 0 34px, #fff 34px 35px); }
.hc26 .hct > * { position: relative; z-index: 1; }
.hc26 .hct:hover { transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--gc), 0 0 26px color-mix(in srgb, var(--gc) 45%, transparent), 0 18px 40px rgba(8, 23, 48, .32); }
/* the stub */
.hc26 .hct-stub { flex: 0 0 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
    padding: .8rem .3rem; border-right: 2px dashed rgba(255, 255, 255, .5);
    background: linear-gradient(165deg, color-mix(in srgb, var(--gc) 92%, #fff), var(--gc) 45%, color-mix(in srgb, var(--gc) 55%, #0c1b38)); }
.hc26 .hct-stub::before, .hc26 .hct-stub::after { content: ''; position: absolute; right: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--hc-bg); }
.hc26 .hct-stub::before { top: -8px; } .hc26 .hct-stub::after { bottom: -8px; }
.hc26 .hct-stub .k { font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.hc26 .hct-stub .d { font-size: 2.15rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.hc26 .hct-stub .m { font-size: .86rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.hc26 .hct-stub .y { font-size: .7rem; font-weight: 600; opacity: .85; }
/* the body: fixed rows */
.hc26 .hct-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .34rem; padding: .8rem .95rem .7rem 1.1rem; }
.hc26 .hct-top { display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; min-width: 0; height: 22px; }
.hc26 .hct-grade { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 6px; color: #08152b; background: var(--gc); }
.hc26 .hct-status { flex: 0 0 auto; white-space: nowrap; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: .22rem .5rem; border-radius: 6px; color: #fff; background: rgba(255, 255, 255, .16); }
.hc26 .hct-status.st-enter { background: rgba(28, 140, 66, .9); } .hc26 .hct-status.st-live { background: rgba(214, 140, 10, .92); }
.hc26 .hct-status.st-toopen { background: rgba(37, 99, 200, .9); } .hc26 .hct-status.st-cancelled { background: rgba(190, 40, 52, .9); }
.hc26 .hct-status.st-postponed { background: rgba(180, 95, 12, .9); } .hc26 .hct-status.st-closed, .hc26 .hct-status.st-done { background: rgba(255, 255, 255, .16); color: #c9d4ea; }
.hc26 .hct h4 { font-size: .98rem; font-weight: 700; line-height: 1.25; margin: .05rem 0 0; height: 2.5em; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hc26 .hct h4 a { color: #fff; text-decoration: none; }
.hc26 .hct h4 a:hover { color: color-mix(in srgb, var(--gc) 70%, #fff); }
.hc26 .hct-line { font-size: .82rem; color: #c6d3ea; display: flex; align-items: center; gap: .4rem; min-width: 0; height: 1.25rem; }
.hc26 .hct-line.dt { color: #fff; font-weight: 700; }
.hc26 .hct-line .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc26 .hct-line img.fl { width: 18px; height: auto; border-radius: 2px; flex: 0 0 auto; }
.hc26 .hct-chips { display: flex; flex-wrap: nowrap; gap: .25rem; overflow: hidden; height: 1.3rem; min-width: 0; }
.hc26 .hct-chips span { flex: 0 0 auto; font-size: .66rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; padding: .1rem .38rem; line-height: 1.05rem; }
.hc26 .hct-chips span.more { background: var(--gc); color: #08152b; border-color: transparent; cursor: pointer; }
.hc26 .hct-chips span.hidden { display: none; }
.hc26 .hct-pop { position: absolute; z-index: 5; left: 92px; right: 8px; bottom: 54px; padding: .6rem .7rem; border-radius: 10px;
    background: #fff; color: #0b1f3a; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); display: none; }
.hc26 .hct-pop.on { display: block; }
.hc26 .hct-pop b { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7690; margin-bottom: .35rem; }
.hc26 .hct-pop span { display: inline-block; font-size: .7rem; font-weight: 700; background: #eef1f7; border-radius: 6px; padding: .12rem .4rem; margin: 0 .2rem .25rem 0; }
.hc26 .hct-foot { margin-top: auto; padding-top: .4rem; border-top: 1px dashed rgba(255, 255, 255, .18); display: flex; align-items: center;
    justify-content: space-between; gap: .6rem; height: 54px; }
.hc26 .hct-circuit { display: flex; align-items: center; gap: .45rem; min-width: 0; font-size: .76rem; font-weight: 600; color: #c6d3ea; }
.hc26 .hct-circuit img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; background: #fff; }
.hc26 .hct-circuit .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc26 .hct-qr { flex: 0 0 auto; width: 46px; height: 46px; background: #fff; border-radius: 8px; padding: 3px; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.hc26 .hct-qr canvas { display: block; width: 100% !important; height: 100% !important; }
/* locked placeholders: ticket skeletons, no data */
.hc26 .hct.sk { opacity: .55; }
.hc26 .hct.sk .hct-stub { background: linear-gradient(165deg, #6d7ea3, #3a4a6e); }
.hc26 .hct.sk .bar { height: .7rem; border-radius: 6px; background: rgba(255, 255, 255, .14); }
.hc26 .hcal-empty { text-align: center; color: var(--hc-mut); padding: 3rem 0; }