/* ===== «…түсу» — 4 қадам, уақыт сызығы (template-parts/edu-admission-steps.php; page-edu-t-one/two/three.php) =====
   Компьютерде — шеңберлер бір көлденең сызықта (көктен алтынға), астында атауы, жиілігі, мерзімдері.
   ≤991px — тік уақыт сызығы: шеңбер сол жақта, мәтін оң жақта.
   h2/h3 өлшемдері !important — style.css тақырыптарға !important береді. */

.edu-steps { padding: 48px 0 56px; background: #fff; font-family: Merriweather, Georgia, serif; }
.edu-steps__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 36px; }
.edu-steps__title { margin: 0 !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #0A1628 !important; }
.edu-steps__kicker { order: 2; font: 700 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #64748b; }

/* Бағандар ортақ қатарларға байланады (subgrid): атау қанша жолға созылса да, жиілік пен мерзімдер бір деңгейде */
.edu-steps__list { --gap: 28px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--gap); row-gap: 0; margin: 0; padding: 0; list-style: none; }
/* Сызық бірінші шеңбердің ортасынан соңғысының ортасына дейін */
.edu-steps__list::before { content: ""; position: absolute; top: 27px; left: 29px; right: calc((100% - 3 * var(--gap)) / 4 - 29px); height: 4px; border-radius: 4px; background: linear-gradient(90deg, #0052A5 0%, #3b82c4 60%, #F5C46B 100%); }

.edu-step { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; margin: 0; padding: 0; list-style: none; }
.edu-step__top { grid-row: 1; } .edu-step__name { grid-row: 2; } .edu-step__freq { grid-row: 3; } .edu-step__rows { grid-row: 4; align-self: stretch; }
.edu-step__top { margin-bottom: 20px; }
.edu-step__num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 4px solid #0052A5; color: #0052A5; font: 800 18px/1 system-ui, -apple-system, "Segoe UI", sans-serif; transition: background .2s, color .2s; }
.edu-step:hover .edu-step__num { background: #0052A5; color: #fff; }
.edu-step--final .edu-step__num, .edu-step--final:hover .edu-step__num { background: linear-gradient(135deg, #f5c46b 0%, #e0a526 100%); border-color: transparent; color: #0A1628; }

.edu-step__name { margin: 0 0 8px !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #0A1628 !important; }
.edu-step__freq { justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font: 600 12.5px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #64748b; }
.edu-step__freq svg { width: 13px; height: 13px; flex-shrink: 0; }

.edu-step__rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Бағандағы жолдар қатар биіктігін толтырады — 4 бағанда мерзімдер блогы бірдей биік */
.edu-step__row { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 10px; background: #F1F6FD; font-size: 13.5px; line-height: 1.45; color: #0A1628; }
.edu-step__row svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: #0052A5; }
.edu-step__row--date { font-weight: 700; }
.edu-step--final .edu-step__row { background: #FFF4DC; }
.edu-step--final .edu-step__row svg { color: #b07a00; }
.edu-step__row--text { color: #475569; }
.edu-step__row--link a { color: #0052A5; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.edu-step__row--link a:hover { color: #003b78; }

@media (max-width: 991px) {
    .edu-steps { padding: 34px 0 40px; }
    .edu-steps__head { margin-bottom: 24px; }
    .edu-steps__title { font-size: 24px !important; }
    .edu-steps__list { grid-template-columns: 1fr; grid-template-rows: none; --gap: 26px; row-gap: var(--gap); padding-left: 0; }
    /* Тік сызық: әр қадамнан келесі шеңберге дейін (соңғы қадамнан әрі созылмайды) */
    .edu-steps__list::before { display: none; }
    .edu-step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; left: 22px; top: 24px; bottom: calc(-1 * var(--gap) - 24px); width: 4px; background: #0052A5; }
    .edu-step:nth-last-child(2)::after { background: linear-gradient(180deg, #0052A5 0%, #3b82c4 50%, #F5C46B 100%); }
    .edu-step { display: block; grid-row: auto; min-height: 48px; padding-left: 66px; }
    .edu-step__row { flex: 0 0 auto; }
    .edu-step__top { position: absolute; left: 0; top: 0; margin: 0; }
    .edu-step__num { width: 48px; height: 48px; border-width: 3px; font-size: 15px; }
    .edu-step__name { padding-top: 11px; font-size: 16.5px !important; }
}

/* Нашар көретіндерге арналған нұсқа */
html body .bvi-body[data-bvi-theme]:not(.bvi-no-styles) .edu-steps__list::before,
html body .bvi-body[data-bvi-theme]:not(.bvi-no-styles) .edu-step::after { background: var(--bvi-site-color) !important; }
html body .bvi-body[data-bvi-theme]:not(.bvi-no-styles) .edu-step__num { background: var(--bvi-site-bg) !important; border: 3px solid var(--bvi-site-color) !important; color: var(--bvi-site-color) !important; }
html body .bvi-body[data-bvi-theme]:not(.bvi-no-styles) .edu-step__row { background: none !important; border: 1px solid var(--bvi-site-color) !important; }
