/* TechDX Core: Our Programs page (Figma 161:1468 / 417:2118). Loaded after pages.css; scope every rule with .tdx-page-body .tdx-programs-page…
   Fonts as Figma names them: Magistral Medium = 500, Bold = 700; Nexa Text Book = 300, Regular = 400; Inter Semi Bold = 600. */

/* ---------- Hero (161:1513 photo, 161:1514 overlay, 361:1051 glyph, 161:1515 title, 161:1517 copy) ----------
   1920 frame: the photo is 2087x1029 placed at (-107,-163) under a flat rgba(0,0,0,.7) overlay; the TDX X mark at x=814 y=84 (556x275);
   title Magistral Medium 55/73.3 at x=237 y=245 (863 wide), copy Nexa Book 25/35 at y=437 (740 wide); section 758 tall with the fixed
   80px header over its top, as the Figma menu (97px) is. */
.tdx-page-body .tdx-programs-page__hero { position: relative; overflow: hidden; min-height: 758px; background: #000; color: #fff; }
.tdx-page-body .tdx-programs-page__hero-photo { position: absolute; inset: 0; background: #000 url("../img/our-programs/hero-photo.webp") calc(50% - 24px) -163px / 2087px auto no-repeat; pointer-events: none; }
.tdx-page-body .tdx-programs-page__hero-photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.tdx-page-body .tdx-programs-page__hero-glyph { left: calc(50% - 146px); top: 84px; width: 556px; height: 275px; color: var(--tdx-bright); opacity: .35; }
.tdx-page-body .tdx-programs-page__hero-glyph path { stroke-width: 1; }
.tdx-page-body .tdx-programs-page__hero-inner { position: relative; max-width: 1494px; margin: 0 auto; padding: 245px 24px 216px; }
.tdx-page-body .tdx-programs-page__hero-title { max-width: 863px; font: 500 55px/73px var(--tdx-head); color: #fff; }
.tdx-page-body .tdx-programs-page__hero-br { display: none; }
.tdx-page-body .tdx-programs-page__hero-text { max-width: 740px; margin-top: 45px; font: 300 25px/35px var(--tdx-body); color: #fff; }

/* ---------- Shared ---------- */
.tdx-page-body .tdx-programs-page__subtitle { margin-top: 21px; font: 400 20px/30px var(--tdx-body); color: #000; text-align: center; }
.tdx-page-body .tdx-programs-page__subtitle--light { color: #fff; }
.tdx-page-body .tdx-programs-page__action { display: flex; justify-content: center; }
/* Download buttons (188:77 / 361:1071): 309x66, radius 8, Inter Semi Bold 16.7/28.8 white on #42AD60 / #F26608, shadow 0 .4 5 3 rgba(0,0,0,.1) */
.tdx-page-body .tdx-programs-page__download { width: 309px; height: 66px; padding: 0 12px; border-radius: 8px; font: 600 16.7px/29px var(--tdx-link); letter-spacing: 0; color: #fff; box-shadow: 0 0.4px 5px 3px rgba(0, 0, 0, .1); }
.tdx-page-body .tdx-programs-page__download .tdx-btn__icon { font-size: 16.7px; }
.tdx-page-body .tdx-programs-page__download--green { background: var(--tdx-green); }
.tdx-page-body .tdx-programs-page__download--orange { background: var(--tdx-orange); }
/* Stat rows (171:1734… / 188:133…): 70 tall, radius 8, shadow 0 3 3 2 rgba(0,0,0,.1); number Magistral Bold 36 centred in a 101px box, label Magistral Medium 20/30 */
.tdx-page-body .tdx-programs-page__stat, .tdx-page-body .tdx-programs-page__fact { display: flex; align-items: center; height: 70px; border-radius: 8px; box-shadow: 0 3px 3px 2px rgba(0, 0, 0, .1); }
.tdx-page-body .tdx-programs-page__stat-value, .tdx-page-body .tdx-programs-page__fact-value { flex: none; width: 101px; text-align: center; font: 700 36px/24px var(--tdx-head); }
.tdx-page-body .tdx-programs-page__stat-label, .tdx-page-body .tdx-programs-page__fact-label { font: 500 20px/30px var(--tdx-head); white-space: nowrap; }

/* ---------- Suite (161:1516 → 188:77) ----------
   Title 35/45 at y=854 (96 under the hero), subtitle Nexa Regular 20/30 +21, grey box 1170x378 (#EFEFEF, r14) +41: rows 430x70 at
   x+102 / y+59 (number box at x+18, label at x+137), copy Nexa Regular 18/30, 465 wide at x+625 / y+84. "Graduates…" Magistral Medium
   20/30, 62 under the box; role cards 212x147 (1px #DEDEDE, r12, gap 20) 64 below it with the 42px orange square (r5) 21px over the
   top edge, Magistral Medium 18/30 labels and the 79x6 #111 pill on the bottom edge; button 92 under the cards; 166 to the band. */
.tdx-page-body .tdx-programs-page__suite { background: #fff; padding: 96px 0 166px; }
.tdx-page-body .tdx-programs-page__box { display: grid; grid-template-columns: 430px 465px; column-gap: 93px; justify-content: start; max-width: 1170px; margin: 41px auto 0; padding: 59px 80px 67px 102px; background: #EFEFEF; border-radius: 14px; }
.tdx-page-body .tdx-programs-page__stats { display: flex; flex-direction: column; gap: 20px; /* Figma: 25 then 16 */ }
.tdx-page-body .tdx-programs-page__stat { padding: 0 6px 0 18px; background: #fff; }
.tdx-page-body .tdx-programs-page__stat-value { color: var(--tdx-green); }
.tdx-page-body .tdx-programs-page__stat-label { margin-left: 18px; color: #000; }
.tdx-page-body .tdx-programs-page__box-text { margin-top: 25px; font: 400 18px/30px var(--tdx-body); color: #000; }
.tdx-page-body .tdx-programs-page__roles-label { margin-top: 62px; font: 500 20px/30px var(--tdx-head); color: #000; text-align: center; }
.tdx-page-body .tdx-programs-page__roles { display: flex; justify-content: center; gap: 20px; max-width: 1140px; margin: 64px auto 0; }
.tdx-page-body .tdx-programs-page__role { position: relative; display: flex; align-items: center; justify-content: center; width: 212px; height: 147px; padding: 24px 10px; background: #fff; border: 1px solid #DEDEDE; border-radius: 12px; text-align: center; }
.tdx-page-body .tdx-programs-page__role-icon { position: absolute; left: 50%; top: -21px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: -21px; background: var(--tdx-orange); border-radius: 5px; }
.tdx-page-body .tdx-programs-page__role-icon svg { display: block; width: 25px; height: 25px; }
.tdx-page-body .tdx-programs-page__role-icon--icon-target svg { width: 31px; height: 31px; }
.tdx-page-body .tdx-programs-page__role-icon--icon-gear svg { width: 28px; height: 28px; }
.tdx-page-body .tdx-programs-page__role-name { max-width: 190px; font: 500 18px/30px var(--tdx-head); color: #000; }
/* Figma text boxes: 159 / 141 / 119 / 171 / 190 wide, so each label wraps on two lines */
.tdx-page-body .tdx-programs-page__role:nth-child(1) .tdx-programs-page__role-name { max-width: 160px; }
.tdx-page-body .tdx-programs-page__role:nth-child(2) .tdx-programs-page__role-name { max-width: 142px; }
.tdx-page-body .tdx-programs-page__role:nth-child(3) .tdx-programs-page__role-name { max-width: 120px; }
.tdx-page-body .tdx-programs-page__role:nth-child(4) .tdx-programs-page__role-name { max-width: 172px; }
.tdx-page-body .tdx-programs-page__role-bar { position: absolute; left: 50%; bottom: -3px; width: 79px; height: 6px; margin-left: -40px; background: #111; border-radius: 24px; }
.tdx-page-body .tdx-programs-page__suite .tdx-programs-page__action { margin-top: 92px; }

/* ---------- Dark band (Rectangle 49 188:80, grid 264:213, fade 264:215) ----------
   pages.css paints exam-band-bg.jpg into .tdx-dark::before; this page drops that. The Figma grid photo (opacity .16, baked into
   grid-floor.webp) is 2184x1456 at (-134,-170) from the band top, and Rectangle 60 fades it to black over the band's last 599px. */
.tdx-page-body .tdx-programs-page__dark { border-radius: 40px 40px 0 0; }
.tdx-page-body .tdx-programs-page__dark::before { display: none; }
.tdx-page-body .tdx-programs-page__dark::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1456px; pointer-events: none; background: url("../img/our-programs/grid-floor.webp") calc(50% - 42px) -170px / 2184px auto no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 857px, rgba(0, 0, 0, .9) 910px, transparent 1404px); mask-image: linear-gradient(180deg, #000 857px, rgba(0, 0, 0, .9) 910px, transparent 1404px); }
.tdx-page-body .tdx-programs-page__intro, .tdx-page-body .tdx-programs-page__help { position: relative; z-index: 1; }

/* ---------- Intro course (188:81 → 361:1071) ----------
   Title Magistral Medium 40/50 at 81 under the band top, subtitle Nexa Regular 20/30 +13; two columns 528 | 407 (gap 105, centred at
   960): copy Nexa Book 18/30 from +66, "Core Curriculum Topics:" Magistral Medium 20/30 +28, topics Nexa Book 20/50 with the 32px
   shield (x+0, text at x+58); stat rows 407x70 (1px white at .5, r8) from +74 with 23/27 gaps, numbers #6BF172 at x+31, labels at
   x+154; orange button 67 under the topics. */
.tdx-page-body .tdx-programs-page__intro { padding-top: 81px; }
.tdx-page-body .tdx-programs-page__title--intro { font-size: 40px; line-height: 50px; }
.tdx-page-body .tdx-programs-page__intro .tdx-programs-page__subtitle { margin-top: 13px; }
.tdx-page-body .tdx-programs-page__intro-grid { display: grid; grid-template-columns: 528px 407px; column-gap: 105px; justify-content: center; margin-top: 66px; }
.tdx-page-body .tdx-programs-page__intro-text { font: 300 18px/30px var(--tdx-body); color: #fff; }
.tdx-page-body .tdx-programs-page__topics-label { margin-top: 28px; font: 500 20px/30px var(--tdx-head); color: #fff; }
.tdx-page-body .tdx-programs-page__topics { display: flex; flex-direction: column; margin-top: 14px; }
.tdx-page-body .tdx-programs-page__topic { display: flex; align-items: flex-start; gap: 26px; min-height: 50px; font: 300 20px/50px var(--tdx-body); color: #fff; }
.tdx-page-body .tdx-programs-page__topic-icon { flex: none; width: 32px; height: 32px; margin-top: 7px; }
.tdx-page-body .tdx-programs-page__topic-icon svg { display: block; width: 32px; height: 32px; }
.tdx-page-body .tdx-programs-page__facts { display: flex; flex-direction: column; gap: 23px; margin-top: 8px; }
.tdx-page-body .tdx-programs-page__fact { padding: 0 6px 0 30px; background: transparent; border: 1px solid rgba(255, 255, 255, .5); }
.tdx-page-body .tdx-programs-page__fact + .tdx-programs-page__fact + .tdx-programs-page__fact { margin-top: 4px; /* Figma: 23 then 27 */ }
.tdx-page-body .tdx-programs-page__fact-value { color: var(--tdx-bright); }
.tdx-page-body .tdx-programs-page__fact-label { margin-left: 22px; color: #fff; }
.tdx-page-body .tdx-programs-page__action--intro { margin-top: 67px; }

/* ---------- Help (188:345, 188:346, 509:1072) ----------
   Title Magistral Medium 60/70 #6BF172 198 under the button, copy Nexa Regular 30/40 (1016 wide) +29, 283x68 button (rgba(0,0,0,.6),
   2px #F26608, r10, Magistral Medium 14.5 tracking .87) +117, 196 to the footer. */
.tdx-page-body .tdx-programs-page__help { padding: 198px 0 196px; text-align: center; }
.tdx-page-body .tdx-programs-page__help-title { font: 500 60px/70px var(--tdx-head); color: var(--tdx-bright); }
.tdx-page-body .tdx-programs-page__help-text { max-width: 1016px; margin: 29px auto 0; font: 400 30px/40px var(--tdx-body); color: #fff; }
.tdx-page-body .tdx-programs-page__action--help { margin-top: 117px; }
.tdx-page-body .tdx-programs-page__partner { width: 283px; min-width: 0; height: 68px; font-size: 14.5px; letter-spacing: .87px; box-shadow: 0 2px 13px 7px rgba(0, 0, 0, .35); }

/* ---------- Tablet ---------- */
@media (max-width: 1240px) {
    .tdx-page-body .tdx-programs-page__box { max-width: calc(100% - 48px); grid-template-columns: minmax(0, 430px) minmax(0, 1fr); column-gap: 48px; padding: 48px 48px 56px; }
    .tdx-page-body .tdx-programs-page__roles { flex-wrap: wrap; }
    .tdx-page-body .tdx-programs-page__intro-grid { grid-template-columns: minmax(0, 528px) minmax(0, 407px); column-gap: 48px; }
}
@media (max-width: 1000px) {
    .tdx-page-body .tdx-programs-page__hero-photo { background-position: calc(50% + 300px) -163px; }
    .tdx-page-body .tdx-programs-page__hero-glyph { display: none; }
    .tdx-page-body .tdx-programs-page__box { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
    .tdx-page-body .tdx-programs-page__box-text { margin-top: 0; }
    .tdx-page-body .tdx-programs-page__intro-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
    .tdx-page-body .tdx-programs-page__facts { max-width: 528px; }
    .tdx-page-body .tdx-programs-page__help-title { font-size: 50px; line-height: 60px; }
}

/* ---------- Mobile (417:2118, 440 frame) ---------- */
@media (max-width: 767px) {
    /* Hero (417:2121…): the photo (1750 wide) sits at (-1108,-41) under rgba(0,0,0,.83), the X mark at x=98 y=481 (270x133); title
       Magistral Bold 35/40 tracking 3.5 at y=128 ("A Program" / "for Every Cybersecurity Goal", 404 wide), copy Nexa Regular 18/25 at
       y=296 (390 wide); section 617 tall. */
    .tdx-page-body .tdx-programs-page__hero { min-height: 617px; }
    .tdx-page-body .tdx-programs-page__hero-photo { background-position: calc(50% - 453px) -41px; background-size: 1750px auto; }
    .tdx-page-body .tdx-programs-page__hero-photo::after { background: rgba(0, 0, 0, .83); }
    .tdx-page-body .tdx-programs-page__hero-glyph { display: block; left: 98px; top: auto; bottom: 3px; width: 270px; height: 133px; opacity: .6; }
    .tdx-page-body .tdx-programs-page__hero-inner { padding: 128px 13px 221px; text-align: center; }
    .tdx-page-body .tdx-programs-page__hero-title { max-width: 100%; font: 700 35px/40px var(--tdx-head); letter-spacing: 3.5px; }
    .tdx-page-body .tdx-programs-page__hero-br { display: inline; }
    .tdx-page-body .tdx-programs-page__hero-text { max-width: 100%; margin-top: 48px; padding: 0 10px; font-weight: 400; font-size: 18px; line-height: 25px; }

    /* Suite: title 28/38 at +48, subtitle Nexa Regular 18/26 +14, full-bleed box +49 (copy Nexa Regular 16/28 centred 385 wide, rows
       405x70 +43 with 25/15 gaps and labels Magistral Medium 18, 69 bottom), "Graduates" +41, cards 190x100 two per row (gap 10 / 18)
       + a full-width one, labels 18/26, button +54, 80 to the band. */
    .tdx-page-body .tdx-programs-page__suite { padding: 48px 0 80px; }
    .tdx-page-body .tdx-programs-page__suite .tdx-page__inner { padding: 0 18px; }
    .tdx-page-body .tdx-programs-page__suite .tdx-section__title { max-width: 314px; margin: 0 auto; /* Figma 417:2132: "Your Own Cyber / Academy Suite" */ }
    .tdx-page-body .tdx-programs-page__subtitle { margin-top: 14px; padding: 0; font-size: 18px; line-height: 26px; }
    .tdx-page-body .tdx-programs-page__box { display: flex; flex-direction: column-reverse; gap: 0; max-width: none; margin-top: 49px; padding: 35px 17px 69px; border-radius: 0; }
    .tdx-page-body .tdx-programs-page__box-text { margin: 0 auto; max-width: 385px; padding: 0; font-size: 16px; line-height: 28px; text-align: center; }
    .tdx-page-body .tdx-programs-page__stats { margin-top: 43px; }
    .tdx-page-body .tdx-programs-page__stat-label { margin-left: 15px; font-size: 18px; }
    .tdx-page-body .tdx-programs-page__roles-label { margin-top: 41px; }
    .tdx-page-body .tdx-programs-page__roles { flex-wrap: wrap; gap: 39px 10px; max-width: 390px; margin-top: 46px; }
    .tdx-page-body .tdx-programs-page__role { width: calc(50% - 5px); max-width: 190px; height: 100px; padding: 20px 8px 18px; }
    .tdx-page-body .tdx-programs-page__role:last-child { width: 100%; max-width: none; }
    .tdx-page-body .tdx-programs-page__role-name, .tdx-page-body .tdx-programs-page__role:nth-child(n) .tdx-programs-page__role-name { max-width: 176px; font-size: 18px; line-height: 26px; }
    .tdx-page-body .tdx-programs-page__role:nth-child(-n+3) .tdx-programs-page__role-name { max-width: 142px; }
    .tdx-page-body .tdx-programs-page__role:nth-child(5) .tdx-programs-page__role-name { max-width: 224px; }
    .tdx-page-body .tdx-programs-page__suite .tdx-programs-page__action { margin-top: 54px; }

    /* Band: the grid photo (opacity .10 → .625 of the baked .16) is 1920 wide at (-407, 218) from the band top, masked to 745…1488. */
    .tdx-page-body .tdx-programs-page__dark { border-radius: 24px 24px 0 0; }
    .tdx-page-body .tdx-programs-page__dark::after { top: 745px; height: 743px; opacity: .625; background-position: calc(50% - 60px) -527px; background-size: 1920px auto; -webkit-mask-image: linear-gradient(180deg, #000 330px, transparent 100%); mask-image: linear-gradient(180deg, #000 330px, transparent 100%); }

    /* Intro: title 28/38 +77, subtitle Nexa Book 18/26 +26, rows +26 (16 inset, gaps 23/27, number at x+31, label at x+154), copy
       Nexa Regular 16/28 centred +42, "Core Curriculum Topics:" +37 at x=34, topics Nexa Book 18/50 (text at x=92), button +73. */
    .tdx-page-body .tdx-programs-page__intro { padding-top: 77px; }
    .tdx-page-body .tdx-programs-page__intro .tdx-page__inner, .tdx-page-body .tdx-programs-page__help .tdx-page__inner { padding: 0 16px; }
    .tdx-page-body .tdx-programs-page__title--intro { max-width: 311px; margin: 0 auto; padding: 0; font-size: 28px; line-height: 38px; }
    .tdx-page-body .tdx-programs-page__intro .tdx-programs-page__subtitle { margin-top: 26px; padding: 0 9px; font-weight: 300; }
    .tdx-page-body .tdx-programs-page__intro-grid { display: flex; flex-direction: column; gap: 0; margin-top: 26px; }
    .tdx-page-body .tdx-programs-page__facts { order: -1; max-width: none; margin-top: 0; }
    .tdx-page-body .tdx-programs-page__intro-text { max-width: 385px; margin: 42px auto 0; font-weight: 400; font-size: 16px; line-height: 28px; text-align: center; }
    .tdx-page-body .tdx-programs-page__topics-label { margin-top: 37px; padding-left: 18px; }
    .tdx-page-body .tdx-programs-page__topics { margin-top: 14px; padding-left: 18px; }
    .tdx-page-body .tdx-programs-page__topic { font-size: 18px; line-height: 30px; padding: 10px 0; min-height: 50px; }
    .tdx-page-body .tdx-programs-page__topic-icon { margin-top: -1px; }
    .tdx-page-body .tdx-programs-page__action--intro { margin-top: 73px; }

    /* Help: title Magistral Medium 45/60 tracking 2.25 +88, copy Nexa Regular 25/35 +37, 284x69 button (Magistral Medium 19,
       tracking 1.14, r8) +81, 139 to the footer. */
    .tdx-page-body .tdx-programs-page__help { padding: 88px 0 139px; }
    .tdx-page-body .tdx-programs-page__help-title { font-size: 45px; line-height: 60px; letter-spacing: 2.25px; }
    .tdx-page-body .tdx-programs-page__help-text { margin-top: 37px; font-size: 25px; line-height: 35px; }
    .tdx-page-body .tdx-programs-page__action--help { margin-top: 81px; }
    .tdx-page-body .tdx-programs-page__partner { width: 284px; height: 69px; border-radius: 8px; font-size: 19px; letter-spacing: 1.14px; }
}
@media (max-width: 420px) {
    .tdx-page-body .tdx-programs-page__download { max-width: 100%; }
}