/* FORSPEC training: /training/ and /training/<slug>/. Owned by chat 09. Phone first.
   Course photos fill their frame (.tc-img: 160 px on phone, cover, no band). */
.tr{padding-top:73px;--edge:var(--line);--edge2:rgba(255,255,255,.34);--mono:"JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace}
.tr p{margin:0}
.tr h1.cond span,.tr h2.cond span{color:var(--redT)}
.tr h2.cond{font-size:clamp(28px,3.6vw,48px);margin:0 0 14px}
.tr h3{font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:18px 0 8px}
.tr :is(a,summary):focus-visible{outline:2px solid var(--redT);outline-offset:2px}
.trCrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:14px 0;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.trCrumbs a{padding:6px 0}.trCrumbs a:hover{color:var(--text)}.trCrumbs b{color:var(--text)}

/* ---------- index: top */
.trTop{padding-block:16px 20px;background:radial-gradient(ellipse at 90% -40%,rgba(221,36,43,.26),transparent 55%)}
.trTop h1{font-size:clamp(38px,6vw,88px);margin:10px 0 12px;max-width:17ch}
.trTop .lead{max-width:680px}
.trStats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:16px 0 0;padding:0;border:1px solid var(--edge2)}
.trStats li{padding:10px 8px;border-right:1px solid var(--edge);min-width:0}.trStats li:last-child{border-right:0}
.trStats b{display:block;font:800 20px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;font-stretch:68%;text-transform:uppercase;white-space:nowrap}
.trStats span{display:block;margin-top:3px;font:400 13px/1.2 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;color:var(--dim)}

/* ---------- course cards */
.trGroup{padding-block:22px 6px;border-top:1px solid var(--line)}
.trGroup h2.cond{font-size:clamp(24px,3vw,40px);margin-bottom:10px}
.trList{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.trCard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--edge);color:var(--text);min-width:0}
.trCard:hover{border-color:var(--text)}
.tc-img{position:relative;display:block;height:160px;overflow:hidden;background:#0f1923}
.tc-img img{display:block;width:100%;height:100%;object-fit:cover}
.tc-img em{position:absolute;left:8px;top:8px;padding:5px 8px;background:var(--red);color:#fff;font:700 12px/1 var(--mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.trTxt{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;min-width:0}
.trTxt b{font:800 21px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;font-stretch:68%;text-transform:uppercase}
.trTxt small{font:400 14px/1.3 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;color:var(--dim)}
.trTxt i{font:700 12px/1.2 var(--mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin-top:4px}

/* ---------- course page: first screen */
.trHero{display:grid;gap:12px;padding-block:12px 22px}
.trHero h1{font-size:clamp(34px,5vw,76px);margin:8px 0 10px}
.trHero h1 span{display:block}
.trHero .lead{font-size:16px}
.trHero .tc-img{height:170px;border:1px solid var(--edge)}
.trFacts{display:grid;margin:0;border-top:1px solid var(--edge2)}
.trFacts div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;padding:8px 0;border-bottom:1px solid var(--edge);align-items:baseline}
.trFacts dt{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.trFacts dd{margin:0;font:600 15px/1.3 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;overflow-wrap:anywhere}
.trBtns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:14px}
.trBtns.stack{grid-template-columns:minmax(0,1fr);margin-top:2px}
.trBtns .btn{padding-inline:6px;font-size:13px;letter-spacing:0;gap:6px;white-space:nowrap}

/* ---------- sections */
.trSec{padding-block:26px 28px;border-top:1px solid var(--line)}
.trSec.two{display:grid;gap:24px}
.trSec.two>div{padding:16px;background:var(--panel);border:1px solid var(--edge)}
.trP{font-size:16px;color:var(--dim);max-width:70ch}
.trTicks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.trTicks li{position:relative;padding-left:28px;font-size:16px;line-height:1.35;max-width:70ch}
.trTicks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--redT);font-weight:800}
.trChips{display:flex;flex-wrap:wrap;gap:6px}
.trChips i{font:700 12px/1.2 var(--mono);font-style:normal;letter-spacing:.03em;padding:7px 9px;border:1px solid var(--edge2);color:var(--text)}
.trSteps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:s}
.trSteps li{position:relative;padding:12px 12px 12px 54px;background:var(--panel);border:1px solid var(--edge);font-size:15px;line-height:1.4;color:var(--dim);counter-increment:s}
.trSteps li::before{content:counter(s);position:absolute;left:12px;top:12px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font:700 15px var(--mono)}
.trSteps b{display:block;color:var(--text);font-size:16px}
.trRig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:14px}
.trRig .tc-img{height:auto;aspect-ratio:3/4}
.trNext{max-width:76ch;padding:12px 14px;border-left:3px solid var(--red);background:var(--panel);font-size:16px}
.trNext b{font-stretch:68%;text-transform:uppercase;margin-right:4px}
.trSess{max-width:76ch;list-style:none;margin:10px 0 14px;padding:0;border-top:1px solid var(--edge)}
.trSess li{padding:10px 0;border-bottom:1px solid var(--edge);font-size:15px;color:var(--dim)}
.trRows{display:grid;gap:6px}
.trRow{display:grid;grid-template-columns:70px minmax(0,1fr) 18px;gap:10px;align-items:center;min-height:60px;padding:8px 10px 8px 8px;border:1px solid var(--edge);background:var(--panel)}
.trRow:hover{border-color:var(--text)}
.trRow .k{display:flex;align-items:center;justify-content:center;height:36px;font:700 12px/1 var(--mono);letter-spacing:0;text-transform:uppercase;border:1px solid var(--edge2)}
.trRow b{display:block;font:700 16px/1.2 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;overflow-wrap:anywhere}
.trRow small{display:block;margin-top:2px;font:400 13px/1.3 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;color:var(--dim)}
.trRow i{font-style:normal;color:var(--redT)}
.trAll{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:10px;border:1.5px solid var(--text);font:700 13px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.trAll:hover{background:var(--text);color:#000}
.trQs{border-top:1px solid var(--edge2)}
.trQ{border-bottom:1px solid var(--edge)}
.trQ summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:54px;padding:8px 0;font:700 17px/1.25 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,sans-serif;cursor:pointer;list-style:none}
.trQ summary::-webkit-details-marker{display:none}
.trQ summary::after{content:"+";flex:none;font:400 24px/1 var(--mono);color:var(--redT)}
.trQ[open] summary::after{content:"−"}
.trQ p{padding:0 0 16px;color:var(--dim);font-size:16px;max-width:72ch}

@media (min-width:768px){
  .trList{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tc-img{height:200px}
  .trStats{max-width:560px}.trStats b{font-size:26px}
  .trSteps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trRig{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .trSec.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .trRows{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .trBtns,.trBtns.stack{display:inline-grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);justify-self:start}.trBtns .btn{padding-inline:22px;font-size:14px}
  .trTicks{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}.trSec.two .trTicks{grid-template-columns:minmax(0,1fr)}
  .trTicks li{font-size:17px}
  .trAll{max-width:300px}
  .trList.two{max-width:820px}
}
@media (min-width:900px){
  .trHero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head lead" "btns lead" "facts facts";grid-template-rows:auto 1fr auto;column-gap:40px;row-gap:16px;align-items:start;padding-block:20px 40px}
  .trHead{grid-area:head}.trLead{grid-area:lead}.trFacts{grid-area:facts}.trHero .trBtns{grid-area:btns;display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);max-width:380px;justify-self:stretch;align-self:start}
  .trLead{align-self:stretch;position:relative;min-height:340px}
  .trFacts{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;border-top:0}.trFacts div{grid-template-columns:minmax(0,1fr);gap:2px;border-top:1px solid var(--edge2);border-bottom:0;padding:10px 0}
  .trHero .tc-img{position:absolute;inset:0;height:auto}
  .trHero .lead{font-size:18px}
  .trList{grid-template-columns:repeat(3,minmax(0,1fr))}.trList.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trSec,.trGroup,.trTop,.trHero,.trCrumbs{max-width:1500px;margin-inline:auto}
}

.trNote{max-width:76ch;margin-top:10px !important;font-size:15px;color:var(--dim)}
.trNote a{color:var(--text);text-decoration:underline;text-decoration-color:var(--redT);text-underline-offset:3px;display:inline-block;padding:10px 0}
.tc-img img.top{object-position:50% 0}
.trQ p a{color:var(--text);text-decoration:underline;text-decoration-color:var(--redT);text-underline-offset:3px;display:inline-block;padding:10px 0}
.trFullTag{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 14px;border:1.5px dashed var(--edge2);color:var(--text);font:700 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.trPast{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge2);max-width:820px}
.trPast li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--edge);font-size:15px}
.trPast b{grid-row:1/3;font:700 13px var(--mono);letter-spacing:.02em;color:var(--text)}
.trPast a{font-weight:700;text-decoration:underline;text-decoration-color:var(--redT);text-underline-offset:3px;padding:6px 0}
.trPast span{color:var(--dim)}
.trSess b{color:var(--text)}
@media (min-width:768px){.trPast li{grid-template-columns:120px minmax(0,1fr) minmax(0,1fr)}.trPast b{grid-row:auto}}