/* ==========================================================================
   L2 Beleth — Design v3: Domovská stránka (app/Views/v3/home.php)
   Prototyp: design_handoff_l2beleth/design/L2 Beleth v4.dc.html
   Prefix .hm-*; body.pg-home; hero pod navem ($heroUnderNav).
   Hodnoty 1:1 z inline stylů prototypu (style-hover → :hover/:focus-visible).
   Popisky ve small-caps mají v prototypu malá písmena → text-transform: lowercase
   (texty z lang/DB zůstávají beze změny).
   ========================================================================== */

/* ── Stránka: světelný kruh za kurzorem ─────────────────────────────────────
   Prototyp: root background radial-gradient(560px 560px at var(--mx) var(--my),
   rgba(217,181,98,.06), transparent 70%), #070d0e; --mx 50% / --my 20% výchozí.
   Tady: vrstva .hm-spot (z-index -1) uvnitř .b3-shell, který je izolovaný jako
   stacking context → leží nad pozadím shellu (#070d0e) a pod veškerým obsahem
   (nav, sekce, patička) stejně jako v prototypu. JS posouvá jen transform
   (bez repaintu celé stránky). */
.pg-home .b3-shell { isolation: isolate; }
/* Nav leží přes hero: neaktivní CS/EN (#6f8584) na světlé mlze obrázku vpravo nahoře téměř mizí
   → tmavá aura pod textem (barva z prototypu zůstává). */
.pg-home .b3-nav__lang-link:not(.is-active) {
    text-shadow: 0 0 3px rgba(7, 13, 14, .95), 0 0 10px rgba(7, 13, 14, .8);
}

.hm-spot {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.hm-spot__glow {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 1120px;
    height: 1120px;
    margin: -560px 0 0 -560px;
    background: radial-gradient(560px 560px at 50% 50%, rgba(217, 181, 98, .06), transparent 70%);
}
.hm-spot__glow.is-live { left: 0; top: 0; will-change: transform; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hm-hero {
    position: relative;
    min-height: min(100vh, 1080px);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hm-hero__pic { position: absolute; inset: 0; }   /* <picture> mimo flex tok hero */
.hm-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 68% 30%;
    transform: scale(1.06);
    transition: transform .3s ease-out;
}
.hm-hero__shade { position: absolute; inset: 0; pointer-events: none; }
.hm-hero__shade--x {
    background: linear-gradient(90deg, rgba(7, 13, 14, .88) 0%, rgba(7, 13, 14, .55) 35%, rgba(7, 13, 14, 0) 62%);
}
.hm-hero__shade--y {
    background: linear-gradient(180deg, rgba(7, 13, 14, .7) 0%, transparent 18%, transparent 70%, #070d0e 100%);
}
.hm-hero__inner {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: calc(var(--b-nav-h, 82px) + clamp(40px, 6vw, 88px)) var(--b-pad-x) clamp(96px, 10vw, 140px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px clamp(24px, 4vw, 64px);
}
.hm-hero__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
    max-width: 640px;
}
.hm-hero__kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: .3em;
    text-transform: lowercase;
    color: #a6ebdd;
}
.hm-hero__kicker-line { flex: none; width: 40px; height: 1px; background: #3cc9b4; }

/* H1 „L2 / Beleth“ — 3 vrstvy přes sebe: bílý obrys, černá mezera, výplň */
.hm-hero__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 28px);
    font-family: var(--b-display);
    font-size: 42px;               /* jako h1 v prototypu (DS): -0.015em → -0.63px, dědí L2/Beleth */
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.015em;
    color: #d9b562;
}
.hm-word { position: relative; display: inline-grid; justify-self: start; }
.hm-word > span { grid-area: 1 / 1; }
.hm-word--l2 { font-size: clamp(36px, 5vw, 64px); }
.hm-word--name { font-size: clamp(64px, 10vw, 150px); margin-left: -.04em; }
.hm-word__outer, .hm-word__gap { -webkit-user-select: none; user-select: none; }
.hm-word__outer { color: #e7eeec; -webkit-text-stroke: 9px #e7eeec; }
.hm-word__gap { color: #070d0e; -webkit-text-stroke: 6px #070d0e; }
.hm-word--name .hm-word__outer { -webkit-text-stroke-width: 12px; }
.hm-word--name .hm-word__gap { -webkit-text-stroke-width: 8px; }
.hm-word--l2 .hm-word__fill { color: #a6ebdd; text-shadow: 0 0 30px rgba(60, 201, 180, .35); }
.hm-word--name .hm-word__fill { color: #d9b562; text-shadow: 0 0 50px rgba(217, 181, 98, .3); }
/* „Beleth“ — kovový lesk + třpyt jen ve spodní polovině písmen. Výplň zůstává
   matné zlato; přes ni leží kopie textu z data-text (background-clip: text):
   ::before statický lesk, ::after animovaný pruh (hm-glint). Horních ~42 %
   je průhledných → nahoře je vidět původní #d9b562. Kopie se nečte ani nevybírá. */
.hm-word--name .hm-word__fill { position: relative; }
.hm-word--name .hm-word__fill::before {
    content: attr(data-text);
    content: attr(data-text) / "";
    position: absolute; inset: 0;
    color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
    background: linear-gradient(180deg, transparent 0 42%, #fff3d2 46%, #f8e3a4 50%, #edca78 57%,
        #dcb25a 65%, #c0913f 74%, #d8ae5c 79%, #f3dc9c 83%);
    -webkit-background-clip: text; background-clip: text;
    pointer-events: none; -webkit-user-select: none; user-select: none;
}
.hm-word--name .hm-word__fill::after {
    content: attr(data-text);
    content: attr(data-text) / "";
    position: absolute; inset: 0;
    color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
    background: linear-gradient(110deg, transparent 40%, rgba(255, 250, 235, .9) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-mask-image: linear-gradient(180deg, transparent 42%, #000 50%);
    mask-image: linear-gradient(180deg, transparent 42%, #000 50%);
    animation: hm-glint 4.5s cubic-bezier(.45, 0, .25, 1) infinite;
    pointer-events: none; -webkit-user-select: none; user-select: none;
}
@keyframes hm-glint { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }

.hm-hero__sub {
    margin: 0;
    max-width: 24ch;
    font-size: clamp(22px, 2.4vw, 30px);
    font-style: italic;
    line-height: 1.3;
    color: #e7eeec;
}
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.hm-hero__credit { margin: 0; font-size: 14px; font-style: italic; color: #6f8584; }

/* Tlačítka na home: na úzkém displeji smí zalomit text (jinak nowrap z .b-btn) */
.hm-hero__actions .b-btn,
.hm-fresh__actions .b-btn,
.hm-gate__cta { max-width: 100%; white-space: normal; }
.hm-btn--icon { gap: 8px; }
/* Ikony v tlačítkách home mají v prototypu velikost písma tlačítka (sdílené .b-btn i = 1.05em) */
.hm-hero__actions .b-btn i,
.hm-fresh__actions .b-btn i,
.hm-gate__cta i { font-size: 1em; }

/* Emblém vpravo */
.hm-emblem {
    position: relative;
    flex: 0 1 380px;
    min-width: 220px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-emblem__mist {
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(60, 201, 180, .28), rgba(217, 181, 98, .10) 60%, transparent);
    filter: blur(20px);
    animation: b-mist 9s ease-in-out infinite;
}
.hm-emblem__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(217, 181, 98, .45);
    animation: b-spin 160s linear infinite;
}
.hm-emblem__inner {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px solid rgba(60, 201, 180, .4);
}
.hm-emblem__logo {
    position: relative;
    width: 64%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .8));
    transition: transform .25s ease-out;
}

/* Štítek stavu → /status */
.hm-badge {
    position: absolute;
    right: var(--b-pad-x);
    bottom: clamp(28px, 4vw, 56px);
    max-width: calc(100% - 2 * var(--b-pad-x));
    display: flex;
    flex-wrap: wrap;               /* jen nouzově na velmi úzkém displeji; jinak 1 řádek */
    align-items: center;
    justify-content: center;
    gap: 4px 14px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid #14514a;
    background: rgba(7, 13, 14, .75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #e7eeec;
}
.hm-badge > * { white-space: nowrap; }
/* Velmi úzký displej: užší rozestupy, aby se vešel i „server offline / v údržbě“ na 1 řádek (od 381 px = prototyp) */
@media (max-width: 380px) {
    .hm-badge { gap: 4px 10px; padding: 12px 14px; }
}
.hm-badge:hover, .hm-badge:focus-visible { border-color: #3cc9b4; color: #e7eeec; }
.hm-badge__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3cc9b4;
    box-shadow: 0 0 10px #3cc9b4;
}
.hm-badge--maintenance .hm-badge__dot { background: #d9b562; box-shadow: 0 0 10px #d9b562; }
.hm-badge--offline .hm-badge__dot { background: #e0705a; box-shadow: 0 0 10px rgba(224, 112, 90, .8); }
.hm-badge__state { font-size: 15px; font-variant: small-caps; letter-spacing: .16em; text-transform: lowercase; }
.hm-badge__sep { flex: none; width: 1px; height: 16px; background: #1d2d31; }
.hm-badge__gb { font-size: 15px; color: #e3c47f; }

/* ── Ráty ───────────────────────────────────────────────────────────────── */
.hm-rates {
    border-top: 1px solid #14201f;
    border-bottom: 1px solid #14201f;
    background: linear-gradient(180deg, #0a1213, #070d0e);
}
.hm-rates__list {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.hm-rate {
    flex: 1 1 110px;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    white-space: nowrap;
    border-right: 1px solid #14201f;
}
.hm-rate:last-child { border-right: 0; }
.hm-rate--hot { background: radial-gradient(circle at 50% 100%, rgba(60, 201, 180, .18), transparent 70%); }
.hm-rate__label {
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: .22em;
    text-transform: lowercase;
    color: #a4b6b4;
}
.hm-rate__value {
    margin: 0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
}
.hm-rate__value--text { font-size: 20px; line-height: inherit; color: #e3c47f; }
.hm-rate__value--hot {
    font-weight: 900;
    font-size: 34px;
    color: #3cc9b4;
    text-shadow: 0 0 20px rgba(60, 201, 180, .5);
}

/* ── Sekce (Dvě brány, Svět Aden, CMS) ──────────────────────────────────── */
.hm-section {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(72px, 9vw, 128px) var(--b-pad-x) 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── Dvě brány ──────────────────────────────────────────────────────────── */
.hm-gates { gap: clamp(40px, 5vw, 64px); }
.hm-gates__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}
.hm-gates__title {
    margin: 0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(36px, 5vw, 68px);
    line-height: 1;
}
.hm-gates__sub { font-size: 18px; font-style: italic; color: #a4b6b4; }
.hm-gates__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: 32px;
}
.hm-gate {
    position: relative;
    padding: clamp(80px, 9vw, 120px) clamp(28px, 4vw, 56px) clamp(36px, 4vw, 52px);
    border-radius: 999px 999px 20px 20px;
    border: 1px solid rgba(138, 106, 42, .7);
    background: radial-gradient(ellipse at 50% 0, rgba(217, 181, 98, .18), transparent 60%), #0b1315;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.hm-gate--teal {
    border-color: rgba(29, 122, 110, .8);
    background: radial-gradient(ellipse at 50% 0, rgba(60, 201, 180, .18), transparent 60%), #0b1315;
}
.hm-gate__icon {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9b562;
    color: #e3c47f;
    font-size: 24px;
    box-shadow: 0 0 30px rgba(217, 181, 98, .35);
}
.hm-gate--teal .hm-gate__icon { border-color: #3cc9b4; color: #a6ebdd; box-shadow: 0 0 30px rgba(60, 201, 180, .35); }
.hm-gate__kicker {
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: .28em;
    text-transform: lowercase;
    color: #e3c47f;
}
.hm-gate--teal .hm-gate__kicker { color: #a6ebdd; }
.hm-gate__title {
    margin: 0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.1;
    color: #d9b562;
}
.hm-gate--teal .hm-gate__title { color: #3cc9b4; }
.hm-gate__tagline { margin: 0; font-size: 21px; font-style: italic; line-height: 1.4; }
.hm-gate__text { margin: 0; max-width: 46ch; font-size: 17.5px; line-height: 1.65; color: #bfcecd; }
.hm-gate__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 17px;
    line-height: 1.5;
}
.hm-gate__list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #1d2d31;
}
.hm-gate__list li:last-child { border-bottom: 1px solid #1d2d31; }
.hm-gate__list i { margin-top: 4px; color: #d9b562; }
.hm-gate--teal .hm-gate__list i { color: #3cc9b4; }
.hm-gate__cta { margin-top: 10px; padding: 14px 26px; font-size: 15px; }
.hm-gate__cta.b-btn--gold { box-shadow: none; }
.hm-gate__cta.b-btn--gold:hover, .hm-gate__cta.b-btn--gold:focus-visible { box-shadow: 0 0 40px rgba(217, 181, 98, .5); }

/* ── Svět Aden (dlaždice) ───────────────────────────────────────────────── */
.hm-world__title {
    margin: 0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1;
}
.hm-tiles { display: flex; flex-wrap: wrap; gap: 16px; }
.hm-tile {
    flex: 1 1 260px;
    min-width: 0;
    min-height: 220px;
    padding: 28px;
    border-radius: 20px;
    border: 1px solid #1d2d31;
    background: #0b1315;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    color: #e7eeec;
}
.hm-tile:hover, .hm-tile:focus-visible { border-color: #8a6a2a; color: #e7eeec; }
.hm-tile--wide { flex: 2 1 520px; }
.hm-tile--news { background: radial-gradient(400px 220px at 100% 0, rgba(217, 181, 98, .16), transparent 70%), #0b1315; }
.hm-tile--status { background: radial-gradient(260px 200px at 50% 110%, rgba(60, 201, 180, .2), transparent 70%), #0b1315; }
.hm-tile--status:hover, .hm-tile--status:focus-visible { border-color: #1d7a6e; }
.hm-tile--lb { background: radial-gradient(260px 200px at 50% 110%, rgba(217, 181, 98, .2), transparent 70%), #0b1315; }
.hm-tile--plain { min-height: 200px; }
.hm-tile--discord {
    min-height: 200px;
    gap: 20px;
    border-color: #14514a;
    background: radial-gradient(400px 220px at 0 100%, rgba(60, 201, 180, .22), transparent 70%), #0b1315;
}
.hm-tile--discord:hover, .hm-tile--discord:focus-visible { border-color: #3cc9b4; }

.hm-tile__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: .24em;
    text-transform: lowercase;
    color: #e3c47f;
}
.hm-tile__head i { font-size: 20px; color: #d9b562; }
.hm-tile--news .hm-tile__head { color: #3cc9b4; }
.hm-tile--news .hm-tile__head i { color: #e3c47f; }
.hm-tile--status .hm-tile__head, .hm-tile--discord .hm-tile__head { color: #a6ebdd; }
.hm-tile--status .hm-tile__head i, .hm-tile--discord .hm-tile__head i { color: #3cc9b4; }
.hm-tile--discord .hm-tile__head i { font-size: 24px; }

.hm-tile__body { display: flex; flex-direction: column; gap: 4px; }
.hm-tile__body--loose { gap: 8px; }
.hm-tile__headline {
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.1;
    overflow-wrap: break-word;
}
.hm-tile__headline--sm { font-size: clamp(22px, 2.6vw, 30px); }
.hm-tile__meta { font-size: 16px; font-style: italic; color: #a4b6b4; }
.hm-tile__note { font-size: 16px; color: #a4b6b4; }
.hm-tile__count {
    font-family: var(--b-display);
    font-weight: 900;
    font-size: 48px;
    line-height: 1;
    color: #3cc9b4;
}
.hm-tile__of { font-size: 24px; color: #1d7a6e; }
.hm-tile__name {
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    color: #f6ead0;
    overflow-wrap: break-word;
}
.hm-tile__version {
    font-family: var(--b-display);
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
    overflow-wrap: break-word;
}
.hm-tile__label {
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
}
.hm-tile__desc { max-width: 58ch; font-size: 16.5px; line-height: 1.55; color: #bfcecd; }

/* ── CMS bloky z 'home.blocks' (html/text/divider; jako legacy) ─────────── */
.hm-cms { font-size: 17.5px; line-height: 1.65; color: #cfdcda; overflow-wrap: break-word; }
.hm-cms__block > :first-child { margin-top: 0; }
.hm-cms__block > :last-child { margin-bottom: 0; }
.hm-cms :is(h1, h2, h3, h4) { margin: 0 0 .5em; color: #e7eeec; }
.hm-cms p { margin: 0 0 1em; }
.hm-cms a { color: #e3c47f; text-decoration: underline; text-underline-offset: 3px; }
.hm-cms a:hover { color: #f6ead0; }
.hm-cms img { height: auto; }

/* ── Čistá startovní čára ───────────────────────────────────────────────── */
.hm-fresh {
    position: relative;
    margin-top: clamp(88px, 10vw, 144px);
    padding: clamp(72px, 9vw, 120px) var(--b-pad-x);
    border-top: 1px solid #14201f;
    background: radial-gradient(900px 400px at 50% 100%, rgba(60, 201, 180, .22), transparent 70%);
}
.hm-fresh__grid {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: 40px clamp(40px, 6vw, 96px);
    align-items: end;
}
.hm-fresh__intro { display: flex; flex-direction: column; gap: 20px; }
.hm-fresh__kicker {
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: .32em;
    text-transform: lowercase;
    color: #a6ebdd;
}
.hm-fresh__title {
    margin: 0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(38px, 5.4vw, 76px);
    line-height: 1.02;
}
.hm-fresh__em { color: #d9b562; text-shadow: 0 0 30px rgba(217, 181, 98, .4); }
.hm-fresh__body { display: flex; flex-direction: column; gap: 22px; }
.hm-fresh__text { margin: 0; font-size: 19px; line-height: 1.65; color: #cfdcda; }
.hm-fresh__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hm-tag {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #1d2d31;
    font-size: 16px;
    font-variant: small-caps;
    letter-spacing: .1em;
    text-transform: lowercase;
}
.hm-tag--teal { border-color: #14514a; color: #a6ebdd; }
.hm-fresh__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.hm-fresh__join { padding: 15px 30px; }
.hm-fresh__login { padding: 14px 26px; }
.hm-fresh__line {
    max-width: 1320px;
    height: 2px;
    margin: 56px auto 0;
    background: linear-gradient(90deg, transparent, #3cc9b4 20%, #f6ead0 50%, #3cc9b4 80%, transparent);
    box-shadow: 0 0 24px 4px rgba(60, 201, 180, .5), 0 0 80px 10px rgba(217, 181, 98, .25);
}

/* ── Reduced motion: statické prstence/mlha, bez parallaxu ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .hm-emblem__mist, .hm-emblem__ring { animation: none; }
    .hm-hero__bg, .hm-emblem__logo { transition: none; }
    .hm-word--name .hm-word__fill::after { display: none; }
}