/* Curriculum tables (osnovne, master, doktorske studije). Load after site.css, only on those pages.
   Every header and body cell that belongs to a semester carries data-sem="N" (or "5 6" when it spans
   two semesters). Below 56rem a native radio group shows one study year at a time; whole cells are
   hidden, so rowspans and colspans stay exactly as authored. API: see DESIGN.md, "Curriculum table". */

.curriculum { display: grid; gap: var(--space-5); }
.cur-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); list-style: none; padding: 0; font-size: var(--step--1); color: var(--color-text-muted); }
.legend li { display: flex; align-items: center; gap: 0.5rem; }
/* Below 30rem the legend is a two-column grid, so a wrapped item lines up instead of trailing alone. */
@media (max-width: 29.99rem) { .legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); } }
.swatch { flex: none; width: 1.125rem; height: 0.8125rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs); background: var(--color-surface); }
.swatch--elective { background: var(--color-surface-tint); border-color: var(--steel-300); }
.swatch--static { background: radial-gradient(circle, var(--slate-300) 0.7px, transparent 1px) 0 0 / 4px 4px, var(--n-25); border-color: var(--slate-300); }
.swatch--final { background: repeating-linear-gradient(135deg, var(--n-0) 0 3px, var(--n-300) 3px 4px); }

/* Year switch: hidden on wide screens, a segmented control below 56rem */
.year-switch { display: none; }

.cur-scroll { position: relative; }
.cur-scroll:focus-visible { outline-offset: 4px; }

.cur-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--step--1); line-height: 1.3; border-bottom: 1px solid var(--color-border-strong); }
.cur-table caption { caption-side: top; }
.cur-table thead th {
  position: sticky; z-index: 2; background: var(--color-bg); text-align: left; vertical-align: bottom; padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border); font-weight: var(--weight-regular);
}
.cur-table thead tr:first-child th { top: var(--header-h); height: 2.25rem; }
.cur-table thead tr:nth-child(2) th { top: calc(var(--header-h) + 2.25rem); height: 2.75rem; border-bottom-color: var(--color-border-strong); }
/* Row 1 (ruler label, study years) paints above row 2: at the table's end the stuck rows close up and
   row 2 slides under the year labels, and a ruler label widened by user text spacing stays on top. */
.cur-table thead tr:first-child th { z-index: 3; }
.cur-table .th-ruler {
  width: 3.5rem; padding: 0 var(--space-3) 0.6rem 0; text-align: right;
  font: var(--weight-medium) var(--step--2)/1.2 var(--font-text); letter-spacing: 0.02em; color: var(--color-text-muted);
  border-bottom-color: var(--color-border-strong);
}
.cur-table .th-year { font: var(--weight-medium) var(--step--2)/1 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-accent); border-right: 1px solid var(--color-border); vertical-align: middle; }
.cur-table .th-sem { font: var(--weight-medium) 0.9375rem/1 var(--font-display); letter-spacing: -0.01em; color: var(--color-text); border-right: 1px solid var(--color-border); padding-bottom: 0.7rem; }
.cur-table .th-sem span { font: var(--weight-regular) var(--step--2)/1 var(--font-text); color: var(--color-text-muted); margin-left: 0.25rem; }
/* The EN hours ruler is labelled "Weekly Classes" (the source text), two words wider than "Čas ned.". */
.cur-table:not(.cur-table--credits):lang(en) .th-ruler { width: 4rem; }

/* Ruler column: an hour scale, a minor tick per row, a major steel tick every five */
.cur-table tbody tr { height: 1.625rem; }
.cur-table tbody th {
  position: relative; padding: 0 var(--space-4) 0 0; text-align: right; vertical-align: middle;
  font: var(--weight-regular) 0.75rem/1 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle); border-right: 1px solid var(--color-border-strong);
}
.cur-table tbody th::after { content: ""; position: absolute; right: 0; top: 0; width: 4px; height: 1px; background: var(--color-border-strong); }
.cur-table tbody th.major { color: var(--color-text); }
.cur-table tbody th.major::after { width: 9px; background: var(--color-accent-brand); }
.cur-table tbody tr:last-child th { box-shadow: inset 0 -1px 0 var(--color-border-strong); }

/* Credit ruler (doctoral): each row is labelled with its own ESPB value and takes its content's
   height (3.25rem at least), so the ruler states values, not proportions. */
.cur-table--credits tbody tr { height: 3.25rem; }
.cur-table--credits tbody th { vertical-align: top; padding-top: 0.55rem; color: var(--color-text); font-weight: var(--weight-medium); }
.cur-table--credits tbody th::after { width: 9px; background: var(--color-accent-brand); }

/* Cells */
/* Each cell draws its top and right edge; the ruler draws the left edge, the table the bottom. */
.c { vertical-align: top; padding: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); border-right: 1px solid var(--color-border); transition: background-color var(--dur-1) var(--ease-out); }
.c > a, .c > .c-static { display: grid; align-content: start; gap: 0.3rem; padding: 0.7rem 0.75rem 0.75rem; color: var(--color-text); text-decoration: none; overflow-wrap: break-word; }
.c > a + a, .c > a + .c-static, .c > .c-static + a { border-top: 1px dashed var(--color-border-strong); }
.c > a { -webkit-hyphens: auto; hyphens: auto; }
/* Balanced, so a short last word or numeral ("Mašinski materijali 1") never ends up alone on a line. */
.c > a:not(:has(.c-name)), .c-name { font-weight: var(--weight-medium); text-wrap: balance; }
.c > a:not(:has(.c-name)), .c-name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-1) var(--ease-out); }
.c > a:hover:not(:has(.c-name)), .c > a:hover .c-name { text-decoration-color: var(--steel-400); }
.c-code { display: flex; align-items: center; gap: 0.35rem; font: var(--weight-regular) 0.75rem/1.2 var(--font-mono); color: var(--color-text-muted); letter-spacing: 0.02em; }
.c-code .i-ext { width: 0.7rem; height: 0.7rem; opacity: 0; transform: translate(-2px, 2px); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out-quint); }
.c > a:hover .c-code .i-ext, .c > a:focus-visible .c-code .i-ext { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .c-code .i-ext { transform: none; } }
.c:hover { background: var(--color-surface-hover); }
.c > a:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm); }

/* Department elective position: tinted, links to its row in the electives table */
.c--elective { background: var(--color-surface-tint); }
.c--elective:hover, .c--elective.is-linked { background: var(--steel-100); }
.c--elective > a { gap: 0.2rem; }
.c-kind { font: var(--weight-medium) 0.6875rem/1.2 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-accent); }
.c-pos { font: var(--weight-medium) 1rem/1.2 var(--font-mono); letter-spacing: 0; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.c--elective .c-kind, .c--elective .c-pos { text-decoration: none; }
.c-options { display: none; margin-top: 0.35rem; font-weight: var(--weight-medium); color: var(--color-text); }
.c-options > span { display: block; }
.c-options > span + span::before { content: "ili"; display: block; margin: 0.2rem 0; font: var(--weight-regular) 0.6875rem/1.4 var(--font-mono); color: var(--color-text-muted); }
:lang(en) .c-options > span + span::before { content: "or"; }
.c-hint { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-size: 0.75rem; color: var(--color-text-muted); }
@media (min-width: 56rem) {
  .c-options { display: block; }
  .c-hint { display: none; }
}

/* Non-linked blocks (research credits, project idea): a fine dot screen, distinct from the flat
   steel tint of electives; the final thesis keeps the diagonal hatch. */
.c--static, .c--static:hover { background: radial-gradient(circle, var(--n-300) 0.8px, transparent 1.1px) 0 0 / 7px 7px, var(--n-25); }
.c--static > .c-static, .c--final > .c-static { font-weight: var(--weight-medium); }
.c--final { background: repeating-linear-gradient(135deg, var(--n-0) 0 7px, var(--n-100) 7px 8px); }
.c--final:hover { background: repeating-linear-gradient(135deg, var(--n-25) 0 7px, var(--n-200) 7px 8px); }
.c-meta { font: var(--weight-regular) 0.75rem/1.3 var(--font-mono); color: var(--color-text-muted); }

/* Electives table (two columns, never reflows) */
.el-table { width: 100%; border-collapse: collapse; }
.el-table thead th { padding: 0 var(--space-4) var(--space-4) 0; text-align: left; font: var(--weight-medium) var(--step--2)/1.2 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-strong); }
.el-table tbody tr { border-bottom: 1px solid var(--color-border); scroll-margin-top: calc(var(--header-h) + 6rem); transition: background-color var(--dur-3) var(--ease-out); }
.el-table tbody tr:target, .el-table tbody tr.is-linked { background: var(--color-surface-tint); }
.el-table td, .el-table tbody th { padding: var(--space-4) var(--space-4) var(--space-4) 0; vertical-align: top; text-align: left; font-weight: inherit; }
.el-table td:last-child { padding-right: 0; }
.el-table .pos { width: 32%; }
.el-code { display: block; font: var(--weight-medium) var(--step-1)/1.1 var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--color-text); transition: color var(--dur-2) var(--ease-out); }
.el-table tr:target .el-code, .el-table tr.is-linked .el-code { color: var(--color-accent); }
.el-sem { display: block; margin-top: 0.4rem; font-size: var(--step--1); color: var(--color-text-muted); }
.el-courses { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
/* Only the course name is underlined; the catalogue number line under it is not. */
.el-courses a { color: var(--color-text); font-weight: var(--weight-medium); text-decoration: none; }
.el-courses a:not(:has(.c-name)), .el-courses .c-name { text-decoration: underline; text-decoration-color: var(--steel-300); text-underline-offset: 0.2em; }
.el-courses a:hover { color: var(--color-accent); }
.el-courses a:hover:not(:has(.c-name)), .el-courses a:hover .c-name { text-decoration-color: currentColor; }
.el-courses .c-code { margin-top: 0.15rem; }
.el-courses .c-code .i-ext { opacity: 1; transform: none; }
.el-or { display: block; margin: 0.15rem 0; font: var(--weight-regular) 0.75rem/1.4 var(--font-mono); color: var(--color-text-muted); }
@media (min-width: 48rem) { .el-table .pos { width: 14rem; } }

/* Below 56rem: one study year at a time (needs :has); otherwise a scrollable table */
@media (max-width: 55.99rem) {
  @supports selector(:has(*)) {
    .year-switch {
      --n: 2; --i: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
      width: 100%; margin: 0; padding: 3px; min-width: 0;
      border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface);
    }
    .year-switch:has(label:nth-of-type(3)) { --n: 3; }
    .year-switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .year-switch::before {
      content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: var(--radius-sm);
      background: var(--steel-700); transform: translateX(calc(var(--i) * 100%)); transition: transform var(--dur-3) var(--ease-out-quint);
    }
    .year-switch:has(input[value="2"]:checked) { --i: 1; }
    .year-switch:has(input[value="3"]:checked) { --i: 2; }
    .year-switch input { position: absolute; opacity: 0; pointer-events: none; }
    .year-switch label { position: relative; z-index: 1; display: grid; place-items: center; min-height: 2.75rem; font: var(--weight-medium) 0.9375rem/1 var(--font-text); color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: color var(--dur-2) var(--ease-out); }
    .year-switch input:checked + label { color: var(--color-on-accent); }
    .year-switch input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

    .curriculum:has(.year-switch input[value="1"]:checked) .cur-table [data-sem]:not([data-sem~="1"], [data-sem~="2"]),
    .curriculum:has(.year-switch input[value="2"]:checked) .cur-table [data-sem]:not([data-sem~="3"], [data-sem~="4"]),
    .curriculum:has(.year-switch input[value="3"]:checked) .cur-table [data-sem]:not([data-sem~="5"], [data-sem~="6"]) { display: none; }
    .cur-table .th-ruler { width: 3rem; }
    .cur-table:not(.cur-table--credits):lang(en) .th-ruler { width: 3.75rem; }
    .curriculum[data-switched] .c { animation: cell-in var(--dur-3) var(--ease-out) both; }
  }
  @supports not selector(:has(*)) {
    .cur-scroll {
      overflow-x: auto; overscroll-behavior-x: contain;
      background:
        linear-gradient(to right, var(--color-bg) 30%, rgb(255 255 255 / 0)) left / 2rem 100% no-repeat local,
        linear-gradient(to left, var(--color-bg) 30%, rgb(255 255 255 / 0)) right / 2rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--ink-a16), transparent) left / 0.75rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--ink-a16), transparent) right / 0.75rem 100% no-repeat scroll;
    }
    .cur-table { min-width: 48rem; }
    .cur-table thead th { position: static; }
  }
}
@keyframes cell-in { from { opacity: 0.2; transform: translateY(6px); } }

@media print {
  .cur-table thead th { position: static; }
  .c--elective, .c--static { background: #fff; }
}