/* A modell bio-resze a chat oldal aljan (bio-chat-oldalba, design D2). 2026-10-21-ig a bio kulon oldal volt
   (views/bio.jade, ugyanezekkel a stilusokkal, inline). A style.css-hez nem nyulunk - az minden mas oldalt is
   erintene -, ezert a bio-resz a sajat stilusait hozza, az oldal meglevo szineivel. Mobilon es desktopon
   ugyanaz a HTML, a megjelenes innen alkalmazkodik. A szakaszcimek H3-ak (a fejlec H2). */
/* A tartalom kozepre igazitva, mint a tobbi oldalon: a .redboxcontainer */
/* inline-block es 750px szeles, a kozepre igazitast a szulo vegzi. */
#bio { text-align: center; }
/* A .redboxcontainer alapbol inline-block es 750px: szeles kepernyon ketto elfer
   egymas mellett, ezert a morzsamenu es a fotos doboz egy sorba sodrodott.
   A bio oldalon minden doboz sajat sorba kerul, kozepre igazitva. */
#bio .redboxcontainer { display: block; margin-left: auto; margin-right: auto; }
#bio .bio-inner { padding: 10px; text-align: left; }
/* 2026-10-21 ota (bio-foto-16-9): a foto a doboz teljes szelessegeben, 16:9-ben, alatta a Details. */
#bio .bio-top { display: block; }
#bio .bio-photo { position: relative; min-width: 0; line-height: 0; margin-bottom: 10px; }
#bio .bio-photo img { width: 100%; max-width: 100%; height: auto; display: block;
    border: 1px solid #400000; }
/* Az alapertelmezett kep 170x128 - NEM nagyitjuk a foto helyere (elmosodna),
   sajat meretben, kozepre. (hianyzo-profilkep) */
/* A fix 170px kell: "width: auto" mellett a bongeszo a kep megerkezeseig nem tudja
   a meretet, es a hely nem foglalhato le (bio-cls). Keskeny kepernyon a max-width
   ennel is kisebbre engedi, az arany a width/height attributumbol jon. */
/* A 16:9-es kep es a 4:3-as tartalek is 16:9-ben, kozeprol vagva (a tartaleknal felul-alul ~25% esik le). */
#bio .bio-photo img:not(.bio-photo-alap) { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; }
#bio .bio-photo img.bio-photo-alap { width: 170px; margin: 0 auto; }
#bio .bio-photo .bio-rating-overlay { position: absolute; right: 6px; bottom: 6px;
    line-height: 14px; text-align: right; font-size: 11px; font-weight: bold;
    color: #fff; text-shadow: 1px 1px 2px #000; }
#bio .bio-side { min-width: 0; }
#bio .bio-side-head { background: linear-gradient(#940000, #650101);
    border-top: 1px solid #400000; border-bottom: 1px solid #fe3e3d;
    border-right: 1px solid #fe3e3d; border-left: 1px solid #400000;
    font-size: 12px; font-variant: small-caps; font-weight: bold;
    text-align: center; padding: 4px 8px; color: #fff; }
#bio .bio-side-body { background: #7c0201; border: 1px solid #400000;
    border-top: 0; padding: 8px; }
#bio .bio-fact { font-size: 11px; padding: 3px 2px; border-bottom: 1px solid #8f1512; }
#bio .bio-fact:last-child { border-bottom: 0; }
#bio .bio-fact b { color: #fff; font-variant: small-caps; }
#bio .bio-fact span { color: #fc0; font-weight: bold; }
/* A szakaszcimek FEHEREK. A sarga szin az oldalon a "kattinthato" jelentest viszi:
   a willingness es az appearance elemei linkek, ezert sargak; ami kozuluk nem link,
   az halvany rozsaszin (modell-tulajdonsag-linkek). A profil dobozban a sarga ertekek maradnak, ott kontrasztot adnak. */
#bio h3 { font-size: 13px; font-style: italic; font-weight: bold; color: #fff;
    margin: 14px 0 5px 6px; }
#bio .bio-text { background: #7c0201; border: 1px solid #b02a28; padding: 8px 10px;
    font-size: 11px; line-height: 1.5; }
#bio .bio-cells { display: flex; flex-wrap: wrap; gap: 2px; }
#bio .bio-cell { flex: 1 1 110px; min-width: 0; }
#bio .bio-cell .k { background: #5e0100; border: 1px solid #400000; padding: 4px 6px;
    font-size: 10px; font-weight: bold; text-align: center; }
#bio .bio-cell .v { background: #7c0201; border: 1px solid #400000; border-top: 0;
    padding: 4px 6px; font-size: 10px; text-align: center; min-height: 14px; }
/* Racs, nem flex-wrap: a flex-wrap soronkent ujraosztja a helyet, ezert a 4 elemes
   sor 25%-os, a 3 elemes 33%-os oszlopokat kapott, es az elemek nem alltak egymas ala.
   A grid oszlopai vegig azonosak maradnak. */
#bio .bio-will { background: #7c0201; border: 1px solid #b02a28; padding: 8px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2px 6px; }
#bio .bio-will div { min-width: 0; padding: 1px 4px; overflow-wrap: break-word;
    font-size: 10px; font-weight: bold; color: #fc0; }
/* A link a meglevo sargat viseli, ramutataskor alahuzva; ami nem link (nincs ra
   listaoldal a modell kategoriajaban), az halvany rozsaszin - ugyanaz a ket szin,
   mint a chat oldal willingness-dobozaban (modell-tulajdonsag-linkek, D4). */
#bio .bio-will a { color: #fc0; text-decoration: none; }
#bio .bio-will a:hover { color: #fc0; text-decoration: underline; }
#bio .bio-will div.bio-nolink { color: #f0c0c0; }
#bio .bio-cta { display: inline-block; margin-top: 8px; padding: 7px 12px;
    background: linear-gradient(#fc0, #e0a500); color: #500000; font-size: 11px;
    font-weight: bold; text-decoration: none; border: 1px solid #400000; }
#bio .bio-note { font-size: 10px; color: #e8b4b4; margin-top: 8px; font-style: italic; }
/* A mert online ido grafikonja: 24 oszlop a doboz szelessegeben, mobilon is (helpers/online-ido-nezet.js).
   A kiszolgalt HTML UTC-orak szerint all; a public/js/online-ido.js a latogato idozonajara forgatja. */
#bio .bio-orak-cim { font-size: 11px; color: #ffffff; margin: 8px 2px 4px; }
#bio .bio-orak { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end;
    height: 60px; padding: 0 2px; }
#bio .bio-orak i { display: block; background: #fc0; min-height: 2px; }
#bio .bio-orak-tengely { display: flex; justify-content: space-between; font-size: 9px; color: #e8b4b4; padding: 2px 2px 0; }
#bio .bio-orak-megj { font-size: 9px; color: #e8b4b4; margin: 4px 2px 8px; }
/* A Details 768 px felett ket oszlopban (bio-foto-16-9, D3): egy sor nem torik ketté, a grafikon, a lábjegyzet es a gomb
   a teljes szelessegben. 767 px alatt egy oszlop marad. */
@media (min-width: 768px) {
    #bio .bio-side-body { column-count: 2; column-gap: 16px; }
    #bio .bio-fact { break-inside: avoid; }
    #bio .bio-orak-cim, #bio .bio-orak, #bio .bio-orak-tengely, #bio .bio-orak-megj, #bio .bio-cta, #bio .bio-note { column-span: all; }
}
@media (max-width: 767px) {
    #bio .bio-top { display: block; }
    #bio .bio-photo { margin-bottom: 10px; }
    #bio .bio-cell { flex-basis: calc(50% - 2px); }
    #bio .bio-will { grid-template-columns: repeat(2, 1fr); }
    /* Telefonon a linket ujjal kell eltalalni: legalabb 24 keppont magas sor (WCAG 2.2
       minimalis celmeret); minden elem ugyanazt kapja, hogy a racs sorai egyenletesek. */
    #bio .bio-will div { line-height: 24px; }
    #bio .bio-will a { display: block; min-height: 24px; }
}