/* ==============================================================
 * lazarjovovic.com — training.css
 * Styles for the Training page. Loaded after site.css + page.css.
 * ============================================================== */

.training-page{padding:170px 0 60px}

/* ——— Hero ——— */
.trn-hero{margin-bottom:clamp(50px,8vw,100px);max-width:880px}
.trn-hero-text .kicker{margin-bottom:22px}
.trn-hero-text h1{font-family:var(--display);font-weight:500;font-size:clamp(2.5rem,5.4vw,4.4rem);letter-spacing:-.025em;line-height:1.0;margin-bottom:28px}
.trn-hero-text h1 em{font-style:italic;color:var(--accent)}
.trn-lead{color:var(--ink-soft);font-size:1.15rem;line-height:1.6;max-width:60ch;margin-bottom:34px}

/* ——— Sections ——— */
.trn-section{padding:clamp(50px,7vw,90px) 0;border-top:1px solid var(--line)}
.trn-section-head{margin-bottom:50px;max-width:760px}
.trn-section-head .kicker-sm,
.trn-block .kicker-sm{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.trn-section-head h2{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,3.6vw,2.8rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:18px}
.trn-section-lead{color:var(--ink-soft);font-size:1.08rem;line-height:1.6;max-width:62ch}

/* ——— Topics ——— */
.topics-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.topic-item{background:var(--paper);padding:clamp(26px,3vw,40px);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;transition:background .4s ease}
.topic-item:hover{background:var(--paper-2)}
.topic-item .ix{font-family:var(--mono);font-size:.8rem;color:var(--accent);padding-top:6px}
.topic-item h3{font-family:var(--display);font-size:1.3rem;font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.topic-item p{color:var(--ink-soft);font-size:.98rem;line-height:1.55}

/* ——— Formats + Levels ——— */
.trn-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,80px)}
.trn-block h2{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.015em;line-height:1.06;margin-bottom:22px}
.trn-block-lead{color:var(--ink-soft);font-size:1.05rem;line-height:1.6;margin-bottom:24px}
.trn-list{list-style:none}
.trn-list li{padding:18px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.trn-list li:first-child{border-top:none}
.trn-list strong{font-family:var(--display);font-size:1.2rem;font-weight:500;letter-spacing:-.01em}
.trn-list span{color:var(--ink-soft);font-size:.98rem}
.level-scale{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.level-chip{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;padding:8px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);position:relative}
.level-chip:not(:last-child)::after{content:"→";position:absolute;right:-16px;color:var(--accent);font-size:.8rem}

/* ——— Attendees ——— */
.attendee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.attendee{background:var(--paper);padding:clamp(22px,2.4vw,32px) clamp(20px,2vw,28px);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-size:clamp(1rem,1.5vw,1.2rem);font-weight:500;letter-spacing:-.01em;min-height:96px;transition:background .4s ease}
.attendee:hover{background:var(--paper-2)}

/* ——— CTA ——— */
.trn-cta{text-align:center;padding:clamp(70px,10vw,130px) 0 40px;border-top:1px solid var(--line);margin-top:clamp(50px,7vw,90px)}
.trn-cta h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:22px;max-width:20ch;margin-inline:auto}
.trn-cta h2 em{font-style:italic;color:var(--accent)}
.trn-cta p{color:var(--ink-soft);font-size:1.08rem;max-width:50ch;margin:0 auto 32px}

/* ——— Mobile ——— */
@media(max-width:880px){
    .training-page{padding:130px 0 40px}
    .topics-grid{grid-template-columns:1fr}
    .trn-two{grid-template-columns:1fr;gap:50px}
    .attendee-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
    .attendee-grid{grid-template-columns:1fr}
}