/* =============================================================================
   SZERKESZTŐI NYITÓOLDAL (#41) — a /kviz/{slug} indítóoldal „A" terve.
   KÜLÖN KOMPONENSFÁJL: a kviz.css a 200 soros korláton állt (DESIGN 2.), és ezek a
   szabályok CSAK ezen az egy lapon kellenek. A közös hero-alap (sötét felület, cím,
   tény-chipek) marad a kviz.css-ben — itt csak a szerkesztői változat többlete van.
   Tokeneket nem definiálunk újra: mind a site.css :root blokkjából jön.
   ============================================================================= */

/* --- Hero: szerkesztői változat -------------------------------------------- */
.gm-kviz-hero--szerkesztoi {
    text-align: left;
    padding: 3.25rem 2rem 2.75rem;
}

/* Ferde szalag a kitöltés „árcédulájával”. A dőlés apró (−1.5°): elég, hogy kilógjon a
   rácsból, de nem annyi, hogy olvashatatlanná tegye a feliratot. */
.gm-kviz-hero__szalag {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: .4rem 1.1rem;
    background: var(--gm-red);
    color: var(--gm-white);
    border-radius: var(--gm-radius-xs);
    transform: rotate(-1.5deg);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gm-kviz-hero--szerkesztoi .gm-kviz-hero__cim {
    max-width: 24ch;
}

/* A felütés a hero VEZÉRSZÖVEGE: nagyobb és világosabb, mint a készlet-leírás. */
.gm-kviz-hero__felutes {
    max-width: 52ch;
    margin: 0 0 1rem;
    font-size: clamp(1.02rem, 2.1vw, 1.2rem);
    line-height: 1.6;
    opacity: .94;
}

.gm-kviz-hero--szerkesztoi .gm-kviz-hero__leiras {
    max-width: 52ch;
    margin: 0 0 1.5rem;
    font-size: .95rem;
    opacity: .74;
}

.gm-kviz-hero--szerkesztoi .gm-kviz-hero__tenyek {
    justify-content: flex-start;
    margin-bottom: 2rem;
}

/* CTA-sor: EGY hangsúlyos gomb, mellette szöveges másodlagos út. */
.gm-kviz-hero__cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
}
.gm-kviz-hero__cta form {
    margin: 0;
}
.gm-kviz-hero__masodlagos {
    color: var(--gm-white);
    font-weight: 700;
    font-size: .95rem;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding-bottom: 2px;
}
.gm-kviz-hero__masodlagos:hover {
    border-bottom-color: var(--gm-red);
    text-decoration: none;
}

@media (max-width: 640px) {
    .gm-kviz-hero--szerkesztoi { padding: 2.25rem 1.35rem 2rem; }
    .gm-kviz-hero__cta { align-items: stretch; flex-direction: column; gap: 1rem; }
    .gm-kviz-hero__cta .btn-gm { width: 100%; }
    .gm-kviz-hero__masodlagos { align-self: center; }
}

/* --- Bizonyíték-sáv --------------------------------------------------------
   Világos sáv a sötét hero alatt. A nézet CSAK akkor rendereli, ha van megmutatható
   statisztika — küszöb alatt a sáv nem létezik, nem pedig nullákat mutat. */
.gm-kviz-bizonyitek {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 3.5rem;
    margin: -1.5rem 0 2.5rem;
    padding: 1.5rem 1.75rem;
    background: var(--gm-light);
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius-md);
}
.gm-kviz-bizonyitek__tetel {
    margin: 0;
    text-align: center;
}
.gm-kviz-bizonyitek__ertek {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--gm-red);
    line-height: 1.1;
}
.gm-kviz-bizonyitek__ertek small { font-size: 1.1rem; }
.gm-kviz-bizonyitek__cimke {
    display: block;
    margin-top: .2rem;
    color: var(--gm-grey);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- „Mit kapsz” blokk ----------------------------------------------------- */
.gm-kviz-kapsz {
    margin-bottom: 2rem;
    /* Lapon belüli ugrás célpontja: a fejléc ne takarja el a cím tetejét. */
    scroll-margin-top: 1.5rem;
}
.gm-kviz-kapsz__cim {
    margin: 0 0 1.25rem;
    font-size: 1.35rem;
    text-align: center;
}
.gm-kviz-kapsz__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gm-kviz-kapsz__kartya h3 {
    margin: 0 0 .6rem;
    font-size: 1.05rem;
}
.gm-kviz-kapsz__kartya p {
    margin: 0;
    color: var(--gm-grey);
    font-size: .95rem;
    line-height: 1.6;
}

@media (max-width: 880px) {
    .gm-kviz-kapsz__grid { grid-template-columns: 1fr; }
}