/* ==========================================================================
   rolunk.css — a Rólunk oldal egyedi komponensei (intro split, statisztika-sáv,
   idővonal, vezető- és csapatkártyák). A base.css + subpage.css mellé töltődik.
   A közös chrome (.phero, .sec, .crumb, .btn, .cta, .contact-list stb.) ott él.
   ========================================================================== */

/* ---------- Intro split ---------- */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.intro .eyebrow{color:var(--o-red);display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.intro .eyebrow::before{content:"";width:28px;height:3px;background:var(--flame-h)}
.intro h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:1.1rem}
.intro p{color:#4f463d;line-height:1.65;margin-bottom:1rem;font-size:1.04rem}
.intro p strong{color:var(--ink)}
.intro-visual{position:relative;aspect-ratio:4/4.1}
.intro-visual .photo{position:absolute;border:1px solid var(--line)}
.iv1{width:70%;height:64%;top:0;right:0;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
.iv2{width:54%;height:46%;left:0;bottom:8%;z-index:2;box-shadow:0 24px 50px rgba(16,12,10,.25)}
.iv-badge{position:absolute;right:3%;bottom:2%;z-index:3;background:var(--flame-h);color:#1a0e00;width:124px;height:124px;border-radius:50%;display:grid;place-items:center;text-align:center;font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;line-height:.9;transform:rotate(-8deg);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.iv-badge b{font-size:1.7rem;display:block}
.iv-badge small{font-size:.6rem;letter-spacing:.08em;margin-top:.2em}

/* ---------- Statisztika-sáv ---------- */
.band{background:var(--ink-2);color:#fff}
.band .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08)}
.band .b{background:var(--ink-2);padding:2.4rem 1rem;text-align:center}
.band .b .n{font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;background:var(--flame);-webkit-background-clip:text;background-clip:text;color:transparent}
.band .b .l{font-family:'Saira Condensed',sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;color:#bdb0a2;margin-top:.4rem}

/* ---------- Idővonal ---------- */
.tl{background:var(--paper-2)}
.sec-head.center{text-align:center}
.sec-head.center p{margin-inline:auto}
.timeline{position:relative;display:grid;gap:1rem}
.timeline::before{content:"";position:absolute;left:calc(7rem + 11px);top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(180deg,var(--o-orange) 0 8px,transparent 8px 16px);opacity:.5}
.tl-row{display:grid;grid-template-columns:7rem 1fr;gap:2rem;align-items:start;position:relative}
.tl-row .yr{font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;font-size:1.9rem;color:var(--o-red);text-align:right;padding-top:.5rem}
.tl-row .dot{position:absolute;left:calc(7rem + 4px);top:1rem;width:16px;height:16px;border-radius:50%;background:var(--flame-h);box-shadow:0 0 0 4px var(--paper-2);z-index:2}
.tl-card{background:#fff;border:1px solid var(--line);padding:1.2rem 1.4rem;margin-left:1.5rem;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);transition:transform .2s,box-shadow .2s}
.tl-card:hover{transform:translateX(4px);box-shadow:0 14px 30px rgba(16,12,10,.12)}
.tl-card h4{font-size:1.3rem;margin-bottom:.25rem}
.tl-card .badge-first{display:inline-block;background:var(--o-red);color:#fff;font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.2em .7em;margin-left:.5rem;vertical-align:middle}
.tl-card p{color:#5a4f45;font-size:.95rem;line-height:1.5}

/* ---------- Csapat: vezető kártya ---------- */
.team-lead{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.team-lead::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 90% 20%,rgba(255,122,24,.18),transparent 55%)}
.team-lead .sec-head .eyebrow{color:var(--o-yellow)}
.team-lead .sec-head p{color:#bdb0a2}
.lead-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;background:var(--ink-2);border:1px solid rgba(255,255,255,.1);padding:2rem;clip-path:polygon(0 0,100% 0,100% 100%,24px 100%)}
.lead-card .pic{width:180px;height:180px;border-radius:50%;overflow:hidden;border:3px solid var(--o-orange);flex:0 0 auto;display:grid;place-items:center;background:var(--ink-3)}
.lead-card .info .role{font-family:'Saira Condensed',sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.1em;color:var(--o-yellow);font-size:.86rem;margin-bottom:.3rem}
.lead-card .info h3{font-size:2.4rem;margin-bottom:.6rem}
.lead-card .info p{color:#cdbfb2;line-height:1.55;max-width:54ch;margin-bottom:1rem}
.lead-card .contact{display:flex;gap:1.4rem;flex-wrap:wrap}
.lead-card .contact a{display:inline-flex;align-items:center;gap:.5em;color:#e9ddcf;font-size:.96rem}
.lead-card .contact a:hover{color:var(--o-yellow)}
.lead-card .contact .ic{width:18px;height:18px}
.lead-card .contact .ic svg{width:18px;height:18px;stroke:var(--o-orange);fill:none;stroke-width:2}

/* ---------- Csapat: rács ---------- */
.team{background:var(--paper)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.tm-card{background:#fff;border:1px solid var(--line);padding:1.6rem 1.3rem;text-align:center;position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s}
.tm-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(16,12,10,.13)}
.tm-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--flame-h);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.tm-card:hover::before{transform:scaleX(1)}
.tm-card .pic{width:118px;height:118px;border-radius:50%;overflow:hidden;margin:0 auto 1rem;border:3px solid var(--paper-2);transition:border-color .22s;display:grid;place-items:center;background:var(--paper-2)}
.tm-card:hover .pic{border-color:var(--o-orange)}
.tm-card h3{font-size:1.4rem;margin-bottom:.2rem}
.tm-card .role{font-family:'Saira Condensed',sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.08em;color:var(--o-red);font-size:.8rem;margin-bottom:.8rem}
.tm-card .skills{font-size:.85rem;color:var(--muted);line-height:1.5}
.tm-card .skills b{color:var(--ink);font-weight:600}

/* ---------- Csapattag fotó / avatar-helykitöltő ---------- */
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic .ph{display:grid;place-items:center}
.pic .ph svg{width:46%;height:46%;stroke:var(--muted);fill:none;stroke-width:1.6}
.lead-card .pic .ph svg{stroke:var(--o-orange)}

/* ---------- Reszponzív ---------- */
@media(max-width:1080px){
  .band .grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .intro-grid{grid-template-columns:1fr}
  .intro-visual{aspect-ratio:16/10;max-width:560px}
}
@media(max-width:860px){
  .lead-card{grid-template-columns:1fr;text-align:center;justify-items:center}
  .lead-card .contact{justify-content:center}
  .timeline::before{left:11px}
  .tl-row{grid-template-columns:1fr;gap:.3rem}
  .tl-row .yr{text-align:left;padding-left:2.2rem}
  .tl-row .dot{left:4px;top:.7rem}
  .tl-card{margin-left:2.2rem}
}
@media(max-width:560px){
  .band .grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
}