/* ERA26 "Poznaj naszych prelegentów" — ISOLATED stylesheet (P3: light + panel colour).

   SEPARATE file from css/style.css on purpose:
     1. css/style.css carries a parallel session's uncommitted work (the FV-invoice
        fields); a new file cannot collide with that WIP.
     2. This is a LIGHT (cream) band inside an otherwise dark navy site. Every colour
        below is an EXPLICIT hex, NOT a site --token, because the site's :root sets
        --ink:#fff etc. for its dark theme — inheriting those here would render dark
        text invisible on cream. Everything is scoped under .era-speakers so it also
        never leaks OUT onto the dark page.

   Layout = the chosen "P3": V3 tall portrait tiles, company LOGO instead of a name,
   and a colour-coded panel tag (gold = Panel I, teal = Panel II) that expands to the
   panel's full name on hover. */

.era-speakers{
  --erasp-cream:#f6f2ea; --erasp-navy:#0a2340; --erasp-gold:#a8791f; --erasp-goldbr:#c5a55a;
  --erasp-p1:#b8892b; --erasp-p2:#2f6f6a; --erasp-grey:#5b6472; --erasp-line:#e7dfd0;
  background:var(--erasp-cream);
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.6rem,5vw,4rem);
}
.era-speakers .erasp-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(1rem,4vw,28px); }
.era-speakers .erasp-eyebrow{ color:var(--erasp-gold); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.era-speakers .erasp-h2{ font-size:clamp(1.9rem,4.2vw,2.75rem); line-height:1.08; letter-spacing:-.01em; color:var(--erasp-navy); margin:.4rem 0 .45rem; text-wrap:balance; }
.era-speakers .erasp-lead{ color:var(--erasp-grey); max-width:44rem; font-size:1rem; line-height:1.55; margin:0 0 1.1rem; }
.era-speakers .erasp-legend{ display:flex; gap:20px; flex-wrap:wrap; margin:0 0 2rem; font-size:.82rem; color:var(--erasp-grey); }
.era-speakers .erasp-legend-item{ display:inline-flex; align-items:center; gap:8px; }
.era-speakers .erasp-dot{ width:11px; height:11px; border-radius:50%; flex:none; }

/* Flex + justify-content:center (not a fixed grid) so ANY speaker count stays balanced:
   the last row centres instead of leaving a left-weighted orphan (the count-dependent-CSS
   defect that bit 5->4->7 edits). Desktop locks 3 per row via a calc() basis; below 1000px
   cards flex 1-2 per row and centre; mobile is 1-up. */
.era-speakers .erasp-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.era-speakers .erasp-card{ flex:1 1 300px; max-width:420px; }
@media(min-width:1000px){ .era-speakers .erasp-card{ flex:0 1 calc((100% - 48px)/3); max-width:none; } }

.era-speakers .erasp-card{ background:#fff; border:1px solid var(--erasp-line); border-radius:12px; overflow:hidden; transition:box-shadow .25s ease, transform .25s ease; }
.era-speakers .erasp-card:hover{ box-shadow:0 14px 34px rgba(10,35,64,.14); transform:translateY(-3px); }

.era-speakers .erasp-pic{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#dfd8c9; }
.era-speakers .erasp-pic img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

.era-speakers .erasp-logochip{ position:absolute; top:12px; right:12px; background:#fff; border-radius:7px; padding:6px 9px; box-shadow:0 2px 8px rgba(0,0,0,.16); display:flex; align-items:center; }
.era-speakers .erasp-logochip img{ height:16px; width:auto; max-width:108px; display:block; }
/* Per-brand size bump: Newgate's mark is a thin N + light wordmark that reads
   smaller than the bolder wordmarks (Pekao/Aareal/PFR) at the shared 16px. */
.era-speakers .erasp-logochip img.erasp-logo-lg{ height:48px; max-width:200px; }
/* mBank's official mark is "mBank" white over 5 full-bleed colour bars (no transparent
   margin), so it reads as a colour block, not a wordmark — round its corners and give it a
   touch more height so it sits cleanly inside the white chip. */
.era-speakers .erasp-logochip img.erasp-logo-mbank{ height:18px; max-width:52px; border-radius:3px; }

.era-speakers .erasp-ptag{ position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.94); border-radius:20px; padding:6px 12px 6px 10px; font-weight:700; font-size:.78rem; box-shadow:0 2px 8px rgba(0,0,0,.16); max-width:calc(100% - 24px); }
.era-speakers .erasp-ptag .erasp-pdot{ width:10px; height:10px; border-radius:50%; flex:none; }
.era-speakers .erasp-ptag .erasp-pfull{ overflow:hidden; max-width:0; white-space:nowrap; opacity:0; transition:max-width .35s ease, opacity .25s ease; font-weight:600; color:var(--erasp-grey); }
.era-speakers .erasp-card:hover .erasp-ptag .erasp-pfull{ max-width:230px; opacity:1; margin-left:2px; }
.era-speakers .erasp-p1 .erasp-pdot{ background:var(--erasp-p1); } .era-speakers .erasp-p1 .erasp-plbl{ color:var(--erasp-p1); }
.era-speakers .erasp-p2 .erasp-pdot{ background:var(--erasp-p2); } .era-speakers .erasp-p2 .erasp-plbl{ color:var(--erasp-p2); }

.era-speakers .erasp-body{ padding:15px 18px 18px; }
.era-speakers .erasp-name{ font-weight:700; font-size:1.12rem; line-height:1.2; color:var(--erasp-navy); margin:0; }
.era-speakers .erasp-role{ font-size:.85rem; color:var(--erasp-grey); margin:.2rem 0 0; }

@media(max-width:560px){ .era-speakers .erasp-body{ padding:14px 16px 16px; } }