/* Course directory; shared Faral navigation is supplied by the home styles. */
.courses-page {
  --course-ink: #071b37;
  --course-muted: #66778a;
  --course-line: #dce5e3;
  --course-green: #1b8860;
  --course-card: #fff;
  --course-canvas: #f5f7f8;
  background: var(--course-canvas);
  color: var(--course-ink);
  line-height: 1.8;
}
.courses-page.dark {
  --course-ink: #edf7f2;
  --course-muted: #b1c3ce;
  --course-line: #2b4257;
  --course-card: #10283e;
  --course-canvas: #081a2c;
  background: var(--course-canvas);
}
.courses-page a:focus-visible, .courses-page button:focus-visible { outline: 3px solid #1b8860; outline-offset: 5px; }
.courses-page .nav { background: var(--course-card); border-bottom: 1px solid var(--course-line); }
.courses-page .language-veil { z-index: 10001; }
.courses-skip { position: fixed; top: -100px; inset-inline-start: 20px; z-index: 10000; padding: 12px 20px; background: var(--course-card); }
.courses-skip:focus { top: 10px; }
.courses-main { width: min(1200px, 90%); margin: auto; padding: 124px 0 0; }
.courses-intro { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 6%; padding: 32px 40px 36px; border-radius: 20px; background: #071b37; color: #fff; overflow: hidden; }
.courses-intro::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: #1b8860; }
.courses-back { display: flex; align-items: center; gap: 10px; width: fit-content; margin-bottom: 20px; font-size: 11px; color: #becdd7; text-decoration: none; }
.courses-back > span[aria-hidden] { color: #4b687c; }
.courses-eyebrow { font-size: 9px; letter-spacing: 2px; color: #96cbb7; margin: 0 0 10px; width: fit-content; }
.courses-intro h1 { margin: 0; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.65; letter-spacing: -1.2px; font-weight: 900; }
.courses-intro h1 em { font-style: normal; color: #60c59b; }
.intro-detail { padding-top: 22px; }
.intro-detail h2 { font-size: 20px; margin: 0 0 10px; font-weight: 700; }
.intro-detail > p { max-width: 400px; margin: 0; font-size: 16px; line-height: 2.1; color: #b8cbd6; }
.courses-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.courses-jump a { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border: 1px solid #355268; border-radius: 7px; background: #ffffff08; font-size: 13px; color: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
.courses-jump a:hover { border-color: #1b8860; background: #1b886030; }
.courses-jump a > span:last-child { color: #60c59b; font-size: 18px; line-height: 1; }
.courses-list { padding: 30px 0 24px; scroll-margin-top: 116px; }
.courses-list-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 22px; }
.courses-list-head p { margin: 0; font-size: 18px; font-weight: 800; }
.courses-list-head > span { font-size: 13px; color: var(--course-muted); }
.courses-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.course-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; margin: 0; scroll-margin-top: 116px; }
.course-group:not(:first-child) { margin-top: 18px; }
.course-group > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; min-width: 0; }
.course-group h2 { margin: 0; font-size: 25px; font-weight: 800; }
.course-group p { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; color: var(--course-muted); }
.group-line { flex: 1; height: 1px; background: var(--course-line); }
.course-ticket { grid-column: span 3; position: relative; min-width: 0; border: 1px solid var(--course-line); border-radius: 16px; background: var(--course-card); box-shadow: 0 4px 16px #071b3704; overflow: hidden; transition: transform .22s, border-color .22s, box-shadow .22s; }
.course-ticket.university { grid-column: span 3; }
.course-ticket:hover { transform: translateY(-3px); border-color: #1b886080; box-shadow: 0 10px 28px #071b370b; }
.ticket-content { padding: 22px 26px; border-top: 3px solid #1b8860; }
.ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ticket-day { display: flex; align-items: center; gap: 7px; color: var(--course-ink); font-size: 15px; font-weight: 700; }
.ticket-day::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1b8860; }
.ticket-level { color: #1b8860; background: #1b88600c; border: 1px solid #1b88601c; border-radius: 5px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.courses-page .ticket-time { margin: 23px 0 20px; }
.time-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(32px, .7fr) minmax(0, 1fr); align-items: center; gap: 14px; padding: 19px 20px; border: 1px solid var(--course-line); border-radius: 12px; background: linear-gradient(110deg, #1b886008, transparent 65%); }
.time-endpoint { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.time-endpoint small { font-size: 12px; font-weight: 500; line-height: 1.7; color: var(--course-muted); }
.courses-page .time-digits { display: block; width: fit-content; font-size: clamp(32px, 3vw, 43px); line-height: 1.35; font-weight: 650; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; letter-spacing: -.8px; color: var(--course-ink); }
.time-finish { align-items: flex-end; }
.time-finish .time-digits { color: #1b8860; }
.time-flow { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 15px; }
.time-duration { font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--course-muted); white-space: nowrap; }
.time-track { position: relative; display: block; width: 100%; height: 2px; background: linear-gradient(to left, #1b886025, #1b8860); }
.time-track::before, .time-track::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translateY(-50%); background: #1b8860; }
.time-track::before { inset-inline-start: 0; }.time-track::after { inset-inline-end: 0; box-shadow: 0 0 0 4px #1b886012; }
.course-ticket:hover .time-track::after { box-shadow: 0 0 0 6px #1b886018; }
.dark .time-finish .time-digits { color: #80dfb3; }
.advanced .time-range { background: #ffffff66; border-color: #bfd9ca; }
.dark .advanced .time-range { background: #ffffff08; border-color: #326756; }
.ticket-description { margin: 0 0 20px; font-size: 16px; color: var(--course-muted); line-height: 1.9; }
.ticket-format { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--course-ink); }
.format-mark { width: 7px; height: 7px; border-radius: 50%; background: #1b8860; box-shadow: 0 0 0 3px #1b88600c; }
.ticket-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 19px; padding: 0 15px; background: #1b886005; border: 1px solid var(--course-line); border-radius: 10px; }
.ticket-dates > div { padding: 12px 0; min-width: 0; }
.ticket-dates > div:nth-child(odd) { padding-inline-end: 12px; }
.ticket-dates > div:nth-child(even) { padding-inline-start: 15px; border-inline-start: 1px solid var(--course-line); text-align: left; }
.ticket-dates > div:nth-child(even) .deadline-countdown { margin-left: 0; margin-right: auto; }
.ticket-dates > div:nth-child(n+3) { border-top: 1px solid var(--course-line); }
.ticket-dates dt { margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--course-muted); }
.ticket-dates dd { margin: 0; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--course-ink); }
.deadline-countdown { display: block; width: fit-content; margin-top: 5px; padding: 2px 7px; border-radius: 4px; color: #14734f; background: #1b88600d; font-size: 11px; font-weight: 600; line-height: 1.8; }
.deadline-countdown[data-state="today"] { background: #fff0cf; color: #7e590c; }
.deadline-countdown[data-state="expired"] { color: var(--course-muted); background: var(--course-canvas); }
.dark .deadline-countdown[data-state="remaining"] { color: #80dfb3; background: #1b886022; }
.ticket-price { display: flex; flex-direction: column; gap: 3px; }
.price-offer { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 5px; }
.price-original { color: var(--course-muted); font-size: 14px; font-weight: 500; }
.price-discount { color: #14734f; background: #1b886010; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.price-current { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.price-current strong { font-size: 24px; line-height: 1.6; font-weight: 800; color: var(--course-ink); font-variant-numeric: tabular-nums; }
.price-unit { font-size: 12px; color: var(--course-muted); }
.dark .price-discount { color: #80dfb3; background: #1b886022; }
.ticket-action { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding-top: 17px; border-top: 1px solid var(--course-line); }
.ticket-register { display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: 142px; padding: 12px 28px; min-height: 48px; border-radius: 14px; border: 1px solid #ffffff24; background: #1b8860; color: #fff; font-size: 16px; font-weight: 800; line-height: 1.5; text-decoration: none; box-shadow: inset 0 1px 0 #ffffff20, 0 4px 12px #071b3712; transition: background .22s ease, transform .22s ease, box-shadow .22s ease; }
.ticket-register:focus-visible { outline: 3px solid #80dfb3; outline-offset: 4px; }
.ticket-register:active { transform: translateY(0); box-shadow: inset 0 2px 4px #071b3720; }
@media (hover: hover) { .ticket-register:hover { background: #209c70; transform: translateY(-2px); box-shadow: inset 0 1px 0 #ffffff25, 0 8px 20px #1b886030; } }
.ticket-register svg { width: 20px; height: 20px; flex-shrink: 0; }
.course-ticket.advanced { grid-column: 1 / -1; background: #eaf4ee; border-color: #bfd9ca; }
.advanced .ticket-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; border-top: 0; border-inline-start: 5px solid #1b8860; padding: 25px 28px; }
.advanced .ticket-top { grid-column: 1; justify-content: flex-start; gap: 14px; }
.advanced .ticket-time { grid-column: 1; margin-top: 10px; }
.advanced .ticket-description { grid-column: 1; margin-bottom: 0; }
.advanced .ticket-level { color: #fff; background: #1b8860; border-color: #1b8860; }
.advanced .ticket-format { grid-column: 1; margin-top: 16px; align-self: start; }
.advanced .ticket-dates { grid-column: 2; grid-row: 1 / 5; margin: 0; align-self: center; background: #ffffff55; border-color: #bfd9ca; }
.advanced .ticket-action { grid-column: 1 / -1; grid-row: 5; justify-content: space-between; border-top: 1px solid #bfd9ca; border-inline-start: 0; margin-top: 18px; padding: 16px 0 0; }
.dark .course-ticket.advanced { background: #103c35; border-color: #326756; }
.dark .advanced .ticket-action { border-color: #326756; }
.dark .advanced .ticket-dates { background: #ffffff06; border-color: #326756; }
.course-partners { display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: stretch; margin: 22px 0 0; padding: 18px 0; border-top: 1px solid var(--course-line); border-bottom: 1px solid var(--course-line); }
.course-partner { display: grid; grid-template-rows: 108px minmax(48px, 1fr); align-items: stretch; gap: 9px; padding: 0 20px; min-width: 0; text-decoration: none; cursor: pointer; transition: transform .25s ease; }
.course-partner + .course-partner { border-inline-start: 1px solid var(--course-line); }
.partner-image { position: relative; width: 100%; height: 108px; display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid transparent; border-radius: 9px; transition: border-color .25s ease, box-shadow .25s ease; }
.partner-image::after { content: "↗"; position: absolute; top: 7px; inset-inline-end: 7px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #1b886010; color: #1b8860; font-size: 17px; opacity: 0; transition: opacity .25s ease; }
.partner-image img { display: block; max-width: 100%; object-fit: contain; transition: transform .2s; }
.course-partner:is(:hover, :focus-visible) { transform: translateY(-5px); }
.course-partner:is(:hover, :focus-visible) .partner-image { border-color: #1b8860; box-shadow: 0 8px 22px #071b3714; }
.course-partner:is(:hover, :focus-visible) .partner-image::after { opacity: 1; }
.course-partner:is(:hover, :focus-visible) .partner-image img { transform: scale(1.04); }
.course-partner:is(:hover, :focus-visible) > span { color: #1b8860; }
.course-partner:active { transform: translateY(-1px); }
.course-partner > span { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; color: var(--course-ink); font-weight: 800; transition: color .25s ease; }
.courses-note { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 18px 20px; border: 1px solid var(--course-line); border-radius: 10px; }
.courses-note > span { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: #1b886010; color: #1b8860; font-size: 22px; }
.courses-note h2 { margin: 0 0 3px; font-size: 14px; }
.courses-note p { margin: 0; font-size: 13px; line-height: 2; color: var(--course-muted); }
.courses-footer { width: min(1200px, 90%); margin: auto; padding: 24px 0 28px; border-top: 1px solid var(--course-line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.courses-footer a { font-size: 12px; color: var(--course-ink); text-decoration: none; }
.courses-footer a:first-child { font-weight: 800; letter-spacing: 1px; }
.courses-footer p { font-size: 11px; color: var(--course-muted); margin: 0; }
.dark .ticket-level { color: #80dfb3; border-color: #386450; background: #1b886018; }
html[lang=en] .ticket-register svg { transform: scaleX(-1); }
@media (max-width: 1150px) {
  .courses-page .nav-links { gap: 22px; }
  .courses-page .nav-links a { font-size: 13px; }
  .ticket-content { padding: 22px 19px 17px; }
  .ticket-description { font-size: 15px; }
  .time-range { padding: 16px; gap: 10px; }
  .courses-page .time-digits { font-size: clamp(27px, 3.4vw, 35px); }
}
@media (max-width: 950px) {
  .courses-page .nav-links { gap: 15px; }
  .courses-page .nav-links a { font-size: 11px; }
  .courses-intro { gap: 28px; padding: 28px; }
  .courses-intro h1 { font-size: 36px; }
  .courses-jump { flex-direction: column; align-items: flex-start; }
  .course-ticket, .course-ticket.university { grid-column: span 3; }
  .course-ticket.advanced { grid-column: 1 / -1; }
  .advanced .ticket-content { column-gap: 25px; }
}
@media (max-width: 760px) {
  .courses-page .nav { height: 116px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 72px 44px; padding: 0 20px; align-items: center; }
  .courses-page .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .courses-page .nav-actions { grid-column: 2; grid-row: 1; }
  .courses-page .nav-links { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; gap: 12px; overflow-x: auto; min-width: 0; border-top: 1px solid var(--course-line); }
  .courses-page .nav-links a { font-size: 11px; padding: 9px 0; white-space: nowrap; }
  .courses-page .nav-cta span { display: none; }
  .courses-main { width: auto; margin-inline: 18px; padding-top: 138px; }
  .courses-intro { grid-template-columns: 1fr; gap: 18px; padding: 24px; border-radius: 14px; }
  .courses-back { margin-bottom: 15px; }
  .courses-intro h1 { font-size: 36px; }
  .intro-detail { padding-top: 0; }
  .intro-detail h2 { font-size: 17px; margin-bottom: 7px; }
  .intro-detail > p { max-width: none; font-size: 14px; }
  .courses-jump { flex-direction: row; align-items: stretch; margin-top: 18px; }
  .courses-jump a { font-size: 12px; gap: 8px; padding: 7px 10px; }
  .courses-list { padding-top: 24px; }
  .courses-list-head { align-items: flex-start; flex-direction: column; gap: 5px; margin-bottom: 20px; }
  .courses-list-head p { font-size: 17px; }
  .courses-list-head > span { font-size: 12px; }
  .course-group, .courses-list { scroll-margin-top: 135px; }
  .course-group { gap: 12px; }
  .course-group > div { gap: 12px; }
  .course-group h2 { font-size: 22px; }
  .course-group p { font-size: 12px; gap: 5px; }
  .courses-grid { grid-template-columns: 1fr; gap: 12px; }
  .course-ticket, .course-ticket.university, .course-ticket.advanced { grid-column: 1; }
  .ticket-content, .advanced .ticket-content { display: block; padding: 21px 22px 16px; }
  .courses-page .ticket-time { margin: 18px 0; }
  .time-range { padding: 16px 14px; gap: 10px; }
  .courses-page .time-digits { font-size: clamp(26px, 8vw, 38px); }
  .ticket-description { font-size: 14px; margin-bottom: 18px; }
  .advanced .ticket-description { margin-bottom: 18px; }
  .advanced .ticket-action { padding: 16px 0 0; border-inline-start: 0; border-top: 1px solid #bfd9ca; }
  .advanced .ticket-dates { margin: 0 0 18px; }
  .ticket-format { font-size: 12px; }
    .ticket-dates { padding-inline: 12px; }
  .ticket-dates dt { font-size: 11px; }
  .ticket-dates dd { font-size: 17px; }
  .ticket-top { gap: 12px; }
  .ticket-register { min-height: 44px; font-size: 14px; }
  .ticket-action, .advanced .ticket-action { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .ticket-price { align-items: flex-start; }
  .price-current strong { font-size: 23px; }
  .course-partners { grid-template-columns: 1fr 1.35fr 1fr; padding: 14px 0; margin-top: 18px; }
  .course-partner { grid-template-rows: 86px minmax(48px, 1fr); padding-inline: 8px; gap: 7px; }
  .partner-image { height: 86px; }
  .partner-faral img { width: 90px; height: 78px; }
  .partner-syntech img { width: 80px; height: 80px; }
  .course-partner > span { font-size: 12px; line-height: 1.8; font-weight: 800; }
  .courses-note { padding: 16px; align-items: flex-start; gap: 10px; }
  .courses-note p { font-size: 12px; }
  .courses-footer { width: auto; margin-inline: 18px; }
  .courses-footer p { display: none; }
}
@media (max-width: 380px) {
  .courses-page .nav { padding-inline: 14px; }
  .courses-page .brand img { width: 45px; height: 45px; }
  .courses-page .brand { font-size: 16px; }
  .courses-page .brand small { font-size: 6px; }
  .courses-page .nav-actions { gap: 6px; }
  .courses-page .language-toggle { width: 62px; }
  .courses-page .theme-toggle, .courses-page .nav-cta b { width: 32px; height: 32px; }
  .courses-intro { padding: 21px; }
  .courses-intro h1 { font-size: 29px; }
  .courses-jump a { font-size: 11px; padding: 6px 8px; }
  .course-group > div { gap: 8px; }
  .ticket-content, .advanced .ticket-content { padding-inline: 15px; }
  .time-range { padding-inline: 10px; gap: 8px; }
  .time-duration { font-size: 10px; }
  .ticket-dates { padding-inline: 10px; }
  .ticket-dates > div:nth-child(odd) { padding-inline-end: 8px; }
  .ticket-dates > div:nth-child(even) { padding-inline-start: 10px; }
  .ticket-dates dd { font-size: 16px; }
  .deadline-countdown { font-size: 10px; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.courses-page * { transition: none !important; animation: none !important; } }
@media print { .courses-page .nav, .courses-intro, .courses-note, .courses-footer, .courses-skip { display: none; }.courses-main { padding: 0; }.course-ticket { break-inside: avoid; box-shadow: none; }.courses-grid { grid-template-columns: 1fr 1fr; }.course-ticket, .course-ticket.university, .course-ticket.advanced { grid-column: auto; } }