/* =============================================================================
   GILL & MURRY — köríves MÉRŐÓRA (kitöltési átlag).
   ÖNÁLLÓ KOMPONENSFÁJL: két oldal használja (nyitóoldal és eredményoldal), a kviz.css pedig
   már a 200 soros korlát közelében jár (DESIGN 2., ARCHITECTURE 11.).
   Tokeneket nem definiálunk újra: mind a site.css :root blokkjából jön.
   Új szín és színátmenet NINCS — az ív --gm-red, a skála --gm-border, a jelölés --gm-grey.
   ============================================================================= */

.gm-meroora {
    margin: 1.5rem 0 0;
    text-align: center;
}

/* Az SVG és a nagy szám EGYMÁSRA rétegezve: a szám a félkör nyitott alsó részébe kerül.
   Rácsot használunk, nem abszolút pozíciót — így a szám mérete nem tudja szétrúgni a rajzot. */
.gm-meroora__rajz {
    display: grid;
    max-width: 280px;
    margin: 0 auto;
}
.gm-meroora__rajz > * {
    grid-area: 1 / 1;
}
.gm-meroora__rajz svg {
    width: 100%;
    height: auto;
    display: block;
}

.gm-meroora__skala {
    fill: none;
    stroke: var(--gm-border);
    stroke-linecap: round;
}
.gm-meroora__iv {
    fill: none;
    stroke: var(--gm-red);
    stroke-linecap: round;
}
/* Az átlag vonása: jól látszik, de MÁSODLAGOS — a hangsúly a látogató saját eredményén van. */
.gm-meroora__jeloles {
    fill: none;
    stroke: var(--gm-grey);
    stroke-width: 3;
    stroke-linecap: round;
}

.gm-meroora__ertek {
    align-self: end;
    justify-self: center;
    margin: 0 0 .25rem;
    line-height: 1.1;
}
.gm-meroora__ertek strong {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--gm-ink);
}
.gm-meroora__jel {
    font-size: 1rem;
    font-weight: 700;
    margin-left: .1rem;
}
.gm-meroora__ertek-cimke {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gm-grey);
}

.gm-meroora__alairas {
    margin: .5rem auto 0;
    max-width: 30rem;
    font-size: .9rem;
    color: var(--gm-grey);
}
.gm-meroora__alairas strong {
    color: var(--gm-ink);
}
.gm-meroora__alap {
    display: block;
    margin-top: .25rem;
    font-size: .82rem;
}

/* --- Eredményoldali változat: önálló kártya a Gill-ajánlás fölött ---------- */
.gm-kviz-mezony {
    margin-bottom: 2.5rem;
    text-align: center;
}
.gm-kviz-mezony__cim {
    margin: 0;
    font-size: 1.2rem;
}

/* A nyitóoldal készlet-rácsa. A site.css `.gm-kartyak-grid`-je FIX 3 oszlop — egyetlen
   készletnél az harmad szélességű csempét adna, amiben a cím és a gomb csúnyán tördelődik,
   a mérőóra hasábja mellett pedig végképp nincs hely. Az auto-fit annyi oszlopot nyit,
   amennyi ténylegesen elfér: egy készletnél teljes szélesség, többnél magától tördel.
   A site.css-t szándékosan nem módosítjuk — az a szerződés-app változatlan másolata. */
.gm-kviz-keszlet-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* --- A csempék SORBAN ÉS OSZLOPBAN IS ZÁRJANAK ----------------------------- */
/* GILL UI elvárásrendszer 12.: „a keretek sorban és oszlopban is ugyanazokon a
   határokon zárnak". A rács egyforma magasra húzza a kártyákat (grid stretch), a
   tartalom viszont FELÜLRE tapadt, ezért a gomb pontosan annyival csúszott lejjebb,
   ahány sorba a cím tört: egy kétsoros és egy egysoros cím mellett a két gomb nem
   állt egy vonalban. Két egymást erősítő szabály rendezi:

     1. a cím két sornyi helyet KAP (akkor is, ha egy sorba fér) → a „15 kérdés ·
        kb. 7 perc" sor is egy vonalban fut végig a soron;
     2. a gomb a kártya ALJÁRA van kötve (margin-top: auto) → ha a cím mégis három
        sorba törne egy keskeny hasábban, a gombok akkor is egy vonalban maradnak.

   A 2. pont önmagában is elég lenne a gombokhoz, de az 1. nélkül a meta-sor
   ugrálna; az 1. önmagában pedig törékeny, mert a sortörés a hasábszélességtől függ. */
.gm-kviz-csempe {
    display: flex;
    flex-direction: column;
}
.gm-kviz-csempe__torzs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* A min-height a SORMAGASSÁG kétszerese, tehát pontosan két sor — se több, se kevesebb. */
.gm-kviz-csempe__cim {
    line-height: 1.3;
    min-height: calc(2 * 1.3em);
}
.gm-kviz-csempe__torzs .btn-gm {
    margin-top: auto;
}

/* --- Nyitóoldali változat: a kvíz MELLETT, jobb oldalon -------------------- */
/* A csempe két hasábra bomlik. A mérőóra hasábja RÖGZÍTETT szélességű, a törzs
   pedig felveszi a maradékot — így a hosszabb kvíz-cím nem nyomja össze a rajzot. */
.gm-kviz-csempe--merooras {
    display: flex;
    /* A csempe alapértelmezése függőleges (ld. fent); itt VISSZAÁLLÍTJUK vízszintesre,
       hogy a mérőóra a szöveg MELLÉ kerüljön. A mobil töréspont ezt később újra
       függőlegesre fordítja. */
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}
.gm-kviz-csempe--merooras .gm-kviz-csempe__torzs {
    /* Az align-items: center a mérőórát függőlegesen középre teszi — a törzsnek
       viszont a TELJES kártyamagasságot ki kell töltenie, különben a gomb
       margin-top: auto-ja nem a kártya aljáig told. */
    align-self: stretch;
}
.gm-kviz-csempe__torzs {
    min-width: 0;   /* enélkül a hosszú cím kifeszítené a hasábot */
}
.gm-kviz-csempe__meroora {
    flex: 0 0 200px;
    padding-left: 1.5rem;
    border-left: 1px solid var(--gm-border);
}
.gm-kviz-csempe .gm-meroora {
    margin: 0;
}
.gm-kviz-csempe .gm-meroora__rajz {
    max-width: 180px;
}
.gm-kviz-csempe .gm-meroora__ertek strong {
    font-size: 1.7rem;
}

/* Mobilon egymás alá: 200px-es hasáb mellett a szöveg olvashatatlanul keskeny lenne.
   Az elválasztó vonal ilyenkor függőlegesből vízszintesbe fordul. */
@media (max-width: 640px) {
    .gm-kviz-csempe--merooras {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }
    .gm-kviz-csempe__meroora {
        flex: 1 1 auto;
        padding-left: 0;
        padding-top: 1.25rem;
        border-left: 0;
        border-top: 1px solid var(--gm-border);
    }
}