/* Naslovnica: traka „Danas u kinu”, filtri kao tipke, plakat bez slike, plavi okvir za kontakt. */
body.page-home .hero-stage { height: clamp(340px, 46vh, 460px); }

.home-today { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius-lg); background: var(--pou-blue-soft); color: var(--pou-ink); }
.home-today-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pou-blue); }
.home-today-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pou-accent); }
.home-today ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.home-today li a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--pou-surface); font-size: 14px; }
.home-today li a:hover { color: var(--pou-blue); box-shadow: inset 0 0 0 1px var(--pou-blue); }
.home-today time { font-family: var(--font-head); font-size: 17px; font-weight: 800; }
.home-today small { color: var(--pou-muted); font-size: 12px; }
.home-today-all { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--pou-blue); white-space: nowrap; }

.home-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.home-chips fieldset { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--pou-line); border-radius: var(--radius-pill); background: var(--pou-surface); }
.home-chips legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.home-chip { position: relative; cursor: pointer; }
.home-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.home-chip span { display: block; white-space: nowrap; padding: 9px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--pou-muted); }
.home-chip input:checked + span { background: var(--pou-primary); color: var(--pou-primary-ink); }
.home-chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--pou-blue) 50%, transparent); }

body.page-home .poster-placeholder { display: grid; place-items: center; height: 100%; padding: 20px; background: linear-gradient(160deg, var(--pou-blue-soft), color-mix(in srgb, var(--pou-blue) 35%, var(--pou-blue-soft))); color: var(--pou-ink); font-family: var(--font-head); font-size: 22px; font-weight: 750; letter-spacing: -.5px; text-align: center; }

body.page-home .newsletter { background: var(--pou-blue-soft); }
body.page-home .newsletter h2 { color: var(--pou-ink); }

@media (max-width: 800px) {
  .home-today { padding: 12px; }
  .home-today-all { margin-left: 0; }
  .home-chips fieldset { width: 100%; }
  .home-chip { flex: 1; text-align: center; }
  .home-chip span { padding: 9px 8px; }
}

/* ---- Redizajn (studeni 2026.): obrazovanje, novosti, Kino klub, o učilištu ---- */
.page-home .h-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-6); margin-bottom: var(--sp-5); }
.page-home .h-head h2 { max-width: 18ch; font: 700 clamp(30px, 4vw, 46px)/1.05 var(--font-head); letter-spacing: -1.4px; }
.page-home .h-head-lead { max-width: 44ch; color: var(--pou-muted); font-size: var(--fs-lg); line-height: 1.55; }

/* obrazovanje */
.h-edu { padding: clamp(56px, 8vw, 96px) 0; background: var(--pou-soft); }
.h-edu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.h-course { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 200px; padding: var(--sp-5); border: 1px solid var(--pou-line); border-radius: var(--radius-lg); background: var(--pou-surface); color: var(--pou-ink); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.h-course:hover { border-color: var(--pou-blue); box-shadow: var(--shadow-2); transform: translateY(-2px); color: var(--pou-ink); }
.h-course:focus-visible { outline: 3px solid var(--pou-focus); outline-offset: 2px; }
.h-course-sector { color: var(--pou-blue); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.h-course h3 { font: 700 var(--fs-xl)/1.2 var(--font-head); letter-spacing: -.4px; }
.h-course-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--pou-muted); font-size: var(--fs-sm); }
.h-course-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); font-weight: 700; font-size: var(--fs-sm); }
.h-course-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.h-course-arrow { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--pou-blue-soft); color: var(--pou-blue); font-size: 18px; transition: background .15s, color .15s; }
.h-course:hover .h-course-arrow { background: var(--pou-blue); color: var(--pou-on-strong); }
.h-course-all { background: var(--pou-blue); border-color: var(--pou-blue); color: var(--pou-on-strong); }
.h-course-all:hover { color: var(--pou-on-strong); }
.h-course-all .h-course-sector, .h-course-all .h-course-meta { color: color-mix(in srgb, var(--pou-on-strong) 78%, transparent); }
.h-course-all .h-course-arrow { background: color-mix(in srgb, var(--pou-on-strong) 18%, transparent); color: var(--pou-on-strong); }
.h-empty { grid-column: span 2; padding: var(--sp-5); color: var(--pou-muted); }
.h-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: var(--sp-4); margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg); background: var(--pou-surface); border: 1px solid var(--pou-line); list-style: none; counter-reset: none; }
.h-steps li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--pou-muted); }
.h-steps b { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--pou-blue-soft); color: var(--pou-blue); font: 800 15px/1 var(--font-head); }
.h-steps strong { display: block; color: var(--pou-ink); font-size: var(--fs-md); }
.h-steps-cta { display: flex !important; flex-wrap: wrap; gap: var(--sp-2) !important; justify-content: flex-end; }

/* novosti */
.h-news { padding-block: clamp(56px, 8vw, 96px); }
.h-news-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-4); }
.h-news-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--pou-line); border-radius: var(--radius-lg); background: var(--pou-surface); }
.h-news-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--pou-soft); }
.h-news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.h-news-card:hover .h-news-img img { transform: scale(1.03); }
.h-news-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.h-news-body time { color: var(--pou-blue); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.h-news-body h3 { font: 700 var(--fs-lg)/1.25 var(--font-head); }
.h-news-card.is-lead h3 { font-size: var(--fs-xl); }
.h-news-body h3 a { color: var(--pou-ink); text-decoration: none; }
.h-news-body h3 a::after { content: ''; position: absolute; inset: 0; }
.h-news-card { position: relative; }
.h-news-card:hover h3 a { color: var(--pou-blue); text-decoration: underline; text-underline-offset: 3px; }
.h-news-body p { color: var(--pou-muted); font-size: var(--fs-sm); line-height: 1.6; }

/* Kino klub */
.h-club { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0; background: radial-gradient(120% 140% at 85% 20%, #1d4f8f 0%, #0f2a4f 45%, #0a1a33 100%); color: #f3f7fc; }
.h-club::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgb(255 255 255 / .035) 46px 47px); pointer-events: none; }
.h-club-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(32px, 6vw, 80px); }
.h-club .eyebrow { color: #8fbaf0; }
.h-club h2 { margin-top: var(--sp-3); color: #fff; font: 700 clamp(36px, 5vw, 60px)/1.02 var(--font-head); letter-spacing: -2px; }
.h-club h2 em { font-style: normal; color: #8fbaf0; }
.h-club-copy > p:not(.eyebrow):not(.h-club-actions) { max-width: 46ch; margin-top: var(--sp-4); color: #c9d7ea; font-size: var(--fs-lg); line-height: 1.6; }
.h-club-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.page-home .h-club .btn-primary { background: #fff; border-color: #fff; color: #0f2a4f; }
.page-home .h-club .btn-primary:hover { background: #dbe8f8; border-color: #dbe8f8; }
.page-home .h-club .btn-ghost { color: #fff; border-color: rgb(255 255 255 / .35); }
.page-home .h-club .btn-ghost:hover { background: rgb(255 255 255 / .1); }
.h-ticket { display: grid; grid-template-columns: 1fr auto; max-width: 440px; justify-self: center; width: 100%; filter: drop-shadow(0 24px 40px rgb(0 0 0 / .35)); transform: rotate(-4deg); transition: transform .4s; }
.h-club:hover .h-ticket { transform: rotate(-1deg) translateY(-4px); }
.h-ticket-main, .h-ticket-stub { --notch: radial-gradient(circle at 0 50%, transparent 14px, #000 15px); background: linear-gradient(150deg, #f7fbff, #dbe8f8); color: #0f2a4f; }
.h-ticket-main { display: flex; flex-direction: column; gap: var(--sp-3); padding: 28px 28px 24px; border-radius: 18px 0 0 18px; -webkit-mask: radial-gradient(circle at 100% 50%, transparent 14px, #000 15px); mask: radial-gradient(circle at 100% 50%, transparent 14px, #000 15px); }
.h-ticket-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--primary); }
.h-ticket-main strong { font: 800 clamp(48px, 6vw, 72px)/.9 var(--font-head); letter-spacing: -2.5px; }
.h-ticket-line { padding-top: var(--sp-3); border-top: 1px dashed #9db8da; font-size: var(--fs-sm); font-weight: 600; }
.h-ticket-stub { display: grid; align-content: center; justify-items: center; gap: 2px; min-width: 96px; padding: 20px 16px; border-left: 2px dashed #9db8da; border-radius: 0 18px 18px 0; -webkit-mask: radial-gradient(circle at 0 50%, transparent 14px, #000 15px); mask: radial-gradient(circle at 0 50%, transparent 14px, #000 15px); }
.h-ticket-stub span { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--primary); }
.h-ticket-stub b { margin-bottom: 8px; font: 800 30px/1 var(--font-head); }
@media (prefers-reduced-motion: reduce) { .h-ticket, .h-club:hover .h-ticket, .h-course, .h-news-img img { transition: none; transform: none; } }

/* o učilištu */
.h-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(56px, 8vw, 96px); }
.h-about-head h2 { margin: var(--sp-3) 0 var(--sp-4); font: 700 clamp(30px, 4vw, 46px)/1.05 var(--font-head); letter-spacing: -1.4px; }
.h-about-head p:not(.eyebrow) { margin-bottom: var(--sp-4); color: var(--pou-muted); font-size: var(--fs-lg); line-height: 1.6; }
.h-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.h-pillars a { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; padding: var(--sp-5); border: 1px solid var(--pou-line); border-radius: var(--radius-lg); background: var(--pou-surface); color: var(--pou-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.h-pillars a:hover { border-color: var(--pou-blue); box-shadow: var(--shadow-1); color: var(--pou-ink); }
.h-pillar-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--sp-2); border-radius: 12px; background: var(--pou-blue-soft); color: var(--pou-blue); font-size: 18px; }
.h-pillars strong { font: 800 clamp(30px, 3.4vw, 42px)/1 var(--font-head); letter-spacing: -1px; color: var(--pou-blue); }
.h-pillars a > span:last-child { color: var(--pou-muted); font-size: var(--fs-sm); line-height: 1.4; }

@media (max-width: 1000px) {
  .h-edu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-steps { grid-template-columns: 1fr; }
  .h-steps-cta { justify-content: flex-start; }
  .h-news-grid { grid-template-columns: 1fr 1fr; }
  .h-news-card.is-lead { grid-column: 1 / -1; }
  .h-about, .h-club-inner { grid-template-columns: 1fr; }
  .h-ticket { max-width: 380px; }
}
@media (max-width: 620px) {
  .h-edu-grid, .h-news-grid, .h-pillars { grid-template-columns: 1fr; }
  .h-course { min-height: 0; padding: var(--sp-4); }
  .h-empty { grid-column: auto; }
  .h-pillars a { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: var(--sp-4); }
  .h-pillar-icon { display: none; }
  .h-steps { padding: var(--sp-4); }
  .h-steps-cta .btn { flex: 1; }
}

/* ── Tri puta (kino, kazalište, obrazovanje): kartice u bojama programskih linija ── */
.home-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.home-path { --path-tint: var(--subtle); --path-mark: var(--primary); position: relative; display: flex; align-items: center; gap: var(--space-4); min-height: 112px; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.home-path::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 100%; height: 4px; background: var(--path-mark); }
.home-path--kino { --path-tint: var(--cat-kino); --path-mark: var(--mark-sky); }
.home-path--kazaliste { --path-tint: var(--cat-kazaliste); --path-mark: var(--mark-coral); }
.home-path--obrazovanje { --path-tint: var(--cat-obrazovanje); --path-mark: var(--mark-mint); }
.home-path__icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--path-tint); color: var(--ink); }
.home-path svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.home-path__icon svg { width: 26px; height: 26px; }
.home-path__text { display: grid; gap: 2px; min-width: 0; }
.home-path__kicker { color: var(--ink-muted); font: 700 12px/16px var(--font-text); letter-spacing: .08em; text-transform: uppercase; }
.home-path strong { font: 650 20px/26px var(--font-display); letter-spacing: -.3px; }
.home-path small { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.home-path__arrow { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-full); color: var(--ink); transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.home-path__arrow svg { width: 18px; height: 18px; }
.home-path:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--ink); }
.home-path:hover .home-path__arrow { background: var(--primary); border-color: var(--primary); color: var(--on-primary); transform: translateX(2px); }
.home-path:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 980px) {
  .home-paths { grid-template-columns: 1fr; gap: var(--space-3); }
  .home-path { min-height: 0; padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .home-path, .home-path__arrow { transition: none; } .home-path:hover, .home-path:hover .home-path__arrow { transform: none; } }

/* Svjetla tema v2: obojeni dijelovi početne (tamna tema ostaje kakva je) */
html:not([data-theme="dark"]) body.page-home {
  background:
    radial-gradient(42% 520px at 6% 0, color-mix(in srgb, var(--mark-sky) 38%, transparent), transparent 70%),
    radial-gradient(36% 460px at 96% 40px, color-mix(in srgb, var(--mark-coral) 26%, transparent), transparent 70%),
    radial-gradient(30% 360px at 55% 0, color-mix(in srgb, var(--mark-yellow) 30%, transparent), transparent 70%),
    var(--bg) no-repeat;
}
html:not([data-theme="dark"]) .home-today { background: var(--surface); box-shadow: inset 4px 0 0 var(--mark-sky), var(--shadow-sm); }
html:not([data-theme="dark"]) .page-home .program-section { background: var(--surface); border-block: 1px solid var(--line); }
html:not([data-theme="dark"]) .h-edu { background: linear-gradient(180deg, var(--cat-obrazovanje), color-mix(in srgb, var(--cat-obrazovanje) 35%, var(--bg))); }
html:not([data-theme="dark"]) .h-edu .education-feature { background: var(--surface); }