/**
 * "Lead Gen with Claude" free workshop landing page. Arabic (RTL), blue
 * identity matching the event poster. Loaded after main.css; scoped to
 * .training-page. One goal: register through the Sender.net form.
 */

.training-page{ color:var(--color-ink); }
.training-page .tr-section{ padding-block:clamp(3rem,7vw,5rem); }
.training-page .tr-section--white{ background:var(--color-white); }
.training-page .tr-section--cream{ background:var(--color-cream); }
.training-page .tr-section--night{ background:radial-gradient(130% 120% at 80% 0%, #1f57c4 0%, #123a86 45%, #0d2456 100%); color:#fff; }
.training-page .tr-narrow{ max-width:860px; margin-inline:auto; }

.training-page .tr-eyebrow{ display:inline-block; font-weight:700; letter-spacing:.12em; font-size:.82rem; color:var(--color-blue); margin-block-end:.5rem; }
.training-page .tr-eyebrow--gold{ color:var(--color-gold); }
.training-page .tr-h2{ font-family:var(--font-display); font-weight:800; line-height:1.3; font-size:clamp(1.6rem,3.8vw,2.3rem); margin:0 0 .6em; text-wrap:balance; }
.training-page .tr-lead{ font-size:1.1rem; line-height:1.9; }

/* ---- Buttons ----------------------------------------------------------- */
.training-page .tr-btn{ display:inline-block; border-radius:999px; font-weight:800; text-align:center; padding:1rem 2.4rem; text-decoration:none; border:2px solid transparent; font-size:1.08rem; line-height:1.2; transition:transform .18s ease, background .18s ease; }
.training-page .tr-btn--cta{ background:var(--color-gold); color:#3a2b00; border-color:var(--color-gold); box-shadow:0 14px 30px -12px rgba(234,174,6,.85); }
.training-page .tr-btn--cta:hover{ transform:translateY(-2px); background:#f4bd1f; }

/* ---- Hero -------------------------------------------------------------- */
.training-page .tr-hero{ background:radial-gradient(130% 120% at 78% 0%, #2f6be0 0%, #1a49a8 42%, #0f2f74 100%); color:#fff; padding-block:clamp(3rem,7vw,5rem); }
.training-page .tr-hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.training-page .tr-live{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:800; letter-spacing:.06em; font-size:.82rem; padding:.35rem .9rem; border-radius:999px; }
.training-page .tr-live__dot{ width:9px; height:9px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 0 0 rgba(255,77,77,.7); animation:trPulse 1.6s infinite; }
@keyframes trPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,77,77,.7); } 70%{ box-shadow:0 0 0 10px rgba(255,77,77,0); } 100%{ box-shadow:0 0 0 0 rgba(255,77,77,0); } }
.training-page .tr-hero__eyebrow{ margin:1rem 0 .2rem; font-weight:700; letter-spacing:.14em; color:var(--color-gold); font-size:clamp(.75rem,1.5vw,.9rem); }
.training-page .tr-hero__title{ font-family:var(--font-display); font-weight:800; line-height:1.1; color:#fff; font-size:clamp(2rem,5vw,3.2rem); margin:.15em 0; letter-spacing:-.01em; }
.training-page .tr-hero__ar{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:clamp(1.25rem,2.8vw,1.75rem); line-height:1.5; margin:.2em 0 .6em; }
.training-page .tr-hero__ar strong{ color:var(--color-gold); }
.training-page .tr-hero__sub{ color:#D6E2FA; line-height:1.9; font-size:1.05rem; margin:0 0 1.2rem; }
.training-page .tr-facts{ list-style:none; margin:0 0 1.3rem; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
.training-page .tr-facts li{ display:flex; align-items:center; gap:.45rem; font-weight:700; color:#EAF1FF; }

/* Countdown */
.training-page .tr-countdown{ display:flex; gap:.6rem; margin-block:.2rem 1.4rem; }
.training-page .tr-countdown__block{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:.55rem .8rem; text-align:center; min-width:60px; }
.training-page .tr-countdown__num{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:#fff; font-variant-numeric:tabular-nums; }
.training-page .tr-countdown__unit{ font-size:.68rem; color:#B9CBEE; font-weight:700; }

/* Host cards in the hero */
.training-page .tr-hosts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,2vw,1.4rem); }
.training-page .tr-host{ margin:0; text-align:center; }
.training-page .tr-host__img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:18px; border:3px solid rgba(255,255,255,.5); box-shadow:0 24px 50px -24px rgba(0,0,0,.6); }
.training-page .tr-host figcaption{ display:flex; flex-direction:column; gap:.1rem; margin-top:.6rem; }
.training-page .tr-host__en{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:.95rem; letter-spacing:.02em; }
.training-page .tr-host__ar{ font-weight:800; color:var(--color-gold); font-size:1.05rem; }
.training-page .tr-host__role{ color:#C6D5F2; font-size:.8rem; line-height:1.5; }

/* ---- Callout ----------------------------------------------------------- */
.training-page .tr-callout{ background:#EAF1FF; border:1px solid #BBD1FF; border-inline-start:6px solid var(--color-blue); border-radius:18px; padding:clamp(1.5rem,4vw,2.2rem); }
.training-page .tr-callout .tr-h2{ color:var(--color-blue-deep); }
.training-page .tr-callout p{ line-height:1.9; margin:0 0 .9rem; }
.training-page .tr-callout p:last-child{ margin-bottom:0; }
.training-page .tr-callout strong{ color:var(--color-blue-deep); }

/* ---- What you'll learn ------------------------------------------------- */
.training-page .tr-learn{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.8rem; }
.training-page .tr-learn__item{ display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid var(--color-line); border-radius:16px; padding:1.2rem 1.4rem; border-inline-start:4px solid var(--color-blue); box-shadow:0 12px 30px -24px rgba(11,15,26,.5); }
.training-page .tr-learn__icon{ font-size:1.7rem; flex:none; line-height:1; }
.training-page .tr-learn__item strong{ display:block; color:var(--color-blue-deep); font-size:1.08rem; margin-bottom:.2rem; }
.training-page .tr-learn__item span{ color:var(--color-slate); line-height:1.7; }
@media (max-width:640px){ .training-page .tr-learn{ grid-template-columns:1fr; } }

/* ---- Who it's for ------------------------------------------------------ */
.training-page .tr-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.8rem; }
.training-page .tr-col{ background:#fff; border-radius:18px; padding:1.7rem; border:1px solid var(--color-line); }
.training-page .tr-col--yes{ border-top:4px solid #1f9d2e; }
.training-page .tr-col--no{ border-top:4px solid var(--color-danger); }
.training-page .tr-col h3{ margin:0 0 1rem; font-size:1.15rem; }
.training-page .tr-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.training-page .tr-col li{ padding-inline-start:1.8rem; position:relative; line-height:1.7; }
.training-page .tr-col--yes li::before{ content:"✓"; position:absolute; inset-inline-start:0; color:#1f9d2e; font-weight:800; }
.training-page .tr-col--no li::before{ content:"✕"; position:absolute; inset-inline-start:0; color:var(--color-danger); font-weight:800; }

/* ---- Hosts bios -------------------------------------------------------- */
.training-page .tr-bios{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:2rem; }
.training-page .tr-bio{ display:flex; gap:1.2rem; align-items:flex-start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:18px; padding:1.4rem; }
.training-page .tr-bio__img{ width:96px; height:120px; flex:none; object-fit:cover; border-radius:14px; border:2px solid rgba(255,255,255,.4); }
.training-page .tr-bio__name{ font-family:var(--font-display); font-weight:800; color:#fff; margin:0; font-size:1.2rem; }
.training-page .tr-bio__en{ display:block; color:var(--color-gold); font-weight:700; font-size:.85rem; margin-block:.1rem .5rem; }
.training-page .tr-bio__text{ color:#D6E2FA; line-height:1.8; margin:0; font-size:.95rem; }
@media (max-width:720px){ .training-page .tr-bios{ grid-template-columns:1fr; } }

/* ---- Register / Sender form ------------------------------------------- */
.training-page .tr-form{ max-width:560px; margin:1.6rem auto 0; background:#fff; border:1px solid var(--color-line); border-radius:20px; padding:clamp(1.3rem,3vw,2rem); box-shadow:0 24px 50px -32px rgba(11,15,26,.6); }
.training-page .tr-form__note{ color:var(--color-muted); font-size:.92rem; margin-top:1rem; }

@media (max-width:820px){
	.training-page .tr-hero__grid{ grid-template-columns:1fr; }
	.training-page .tr-cols{ grid-template-columns:1fr; }
	.training-page .tr-hosts{ max-width:420px; margin-inline:auto; }
}
@media (max-width:560px){
	.training-page .tr-hero__title{ font-size:1.7rem; overflow-wrap:break-word; }
	.training-page .tr-countdown{ flex-wrap:wrap; }
	.training-page .tr-countdown__block{ min-width:0; flex:1 1 22%; }
}
@media (prefers-reduced-motion: reduce){
	.training-page .tr-btn{ transition:none; }
	.training-page .tr-live__dot{ animation:none; }
}