/* Šabat po gradovima (/sabat, /sabat/<grad>). Boje i fontovi sajta (shared.css), kartica kao "Danas je" na kalendaru,
   tablica kao tablica blagdana. Ispod 600px tablica postaje redovi: datum i vremena gore, paraša ispod. */
.sb-page { width:min(1100px,calc(100% - 64px)); margin:0 auto; padding:56px 0 80px; }
.sb-page h1 { margin:0 0 28px; font:500 clamp(34px,5vw,52px)/1.08 var(--serif); letter-spacing:-.025em; text-wrap:balance; }
.sb-page h2 { margin:0 0 14px; font:500 24px/1.2 var(--serif); }
.sb-page :is(a, button):focus-visible { outline:2px solid var(--wine); outline-offset:2px; }
.sb-small { margin:12px 0 0; color:var(--quiet); font-size:14px; line-height:1.55; }

/* Kartica "Ovaj Šabat" */
.sb-card { margin:0 0 56px; padding:24px 28px 22px; background:var(--cream); border-top:3px solid var(--wine); border-radius:2px; }
.sb-page .sb-kicker { margin:0 0 16px; color:var(--wine); font:700 13px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.sb-times { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 32px; }
.sb-time { display:flex; flex-direction:column; gap:2px; }
.sb-lbl { color:var(--quiet); font:italic 400 16px var(--serif); }
.sb-clock { color:var(--wine); font:500 60px/1.05 var(--serif); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.sb-day { margin-top:4px; font-size:16px; line-height:1.4; }
.sb-sun { color:var(--quiet); font-size:14px; }
.sb-meta { margin:20px 0 0; padding-top:14px; border-top:1px solid rgba(101,24,41,.18); font-size:16px; line-height:1.6; }
.sb-heb { font:500 17px var(--serif); }
.sb-ref { color:var(--quiet); font-size:15px; white-space:nowrap; }
.sb-read { margin-left:6px; color:var(--wine); font-weight:700; border-bottom:1px solid currentColor; white-space:nowrap; }

/* /sabat: rečenica pod naslovom, birač grada (samo sa skriptama), poveznica u kartici; na stranici grada "Postavi kao moj grad" */
.sb-calc { margin:-14px 0 24px; color:var(--quiet); font-size:16px; line-height:1.5; }
.sb-pick { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 14px; }
.sb-pick label { color:var(--quiet); font:italic 400 16px var(--serif); }
.sb-pick select { min-height:44px; padding:8px 36px 8px 12px; border:1px solid var(--wine); border-radius:2px; background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23651829' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; color:var(--ink); font:600 16px var(--sans); appearance:none; cursor:pointer; }
.sb-pick select:focus-visible { outline:2px solid var(--wine); outline-offset:2px; }
.sb-more { margin:14px 0 0; }
.sb-more a { color:var(--wine); font-size:15px; font-weight:700; border-bottom:1px solid currentColor; }
.sb-mine-wrap { margin:-40px 0 48px; }
.sb-mine { min-height:44px; padding:0; border:0; background:none; color:var(--wine); font:700 14px var(--sans); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.sb-mine[aria-pressed="true"] { color:var(--quiet); text-decoration:none; cursor:default; }
.sb-mine[aria-pressed="true"]::before { content:"\2713\00a0"; color:var(--wine); }

/* Tablica i bočni stupac */
.sb-layout { display:grid; gap:48px; }
@media (min-width:1001px) { .sb-layout { grid-template-columns:7fr 5fr; gap:56px; align-items:start; } }
.sb-table { width:100%; border-collapse:collapse; font-size:16px; }
.sb-table thead th { text-align:left; padding:10px 10px 10px 0; border-bottom:1px solid var(--ink); font:600 14px var(--sans); color:var(--quiet); vertical-align:bottom; }
.sb-table thead th span { display:block; font-weight:400; }
.sb-table tbody th, .sb-table td { padding:12px 10px 12px 0; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; line-height:1.4; }
.sb-table tbody th { font:500 17px/1.3 var(--serif); }
.sb-t { font-weight:600; font-variant-numeric:tabular-nums; }
.sb-p a { color:var(--wine); text-decoration:underline; text-underline-offset:3px; }
.sb-now { background:var(--paper-soft); }
/* Prvi stupac ima lijevi razmak u svakom retku, pa bordo crta istaknutog retka nikad ne dira datum, a stupac ostaje ravan. */
.sb-table :is(thead, tbody) th:first-child { padding-left:14px; }
.sb-table .sb-now th { box-shadow:inset 3px 0 0 var(--wine); }
.sb-local { margin:-44px 0 56px; color:var(--quiet); font-size:14px; }
.sb-when-date { margin-right:8px; color:var(--quiet); font-weight:400; font-size:14px; }
.sb-fest { margin-bottom:40px; }
.sb-fest ul { margin:0; padding:0; list-style:none; }
.sb-fest li { padding:10px 0 10px 14px; border-left:3px solid var(--wine); font-size:16px; line-height:1.55; }
.sb-fest li + li { margin-top:10px; }
.sb-about p:not(.sb-small) { margin:0; font:400 17px/1.65 var(--read); }
.sb-links { margin:18px 0 0; padding:0; list-style:none; }
.sb-links li + li { margin-top:8px; }
.sb-links a { color:var(--wine); font-size:15px; font-weight:700; border-bottom:1px solid currentColor; }

/* Ostali gradovi */
.sb-others { margin-top:72px; padding-top:28px; border-top:1px solid var(--rule); }
.sb-others-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 40px; }
.sb-other h3 { margin:0 0 6px; color:var(--quiet); font:700 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.sb-other ul { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; padding:0; list-style:none; }
.sb-other a { color:var(--wine); font-size:16px; text-decoration:underline; text-underline-offset:3px; }

/* /sabat: popis gradova */
.sb-lede { max-width:700px; margin:0 0 28px; font:400 19px/1.6 var(--read); }
.sb-list-date { margin:0 0 20px; color:var(--quiet); font:italic 400 17px var(--serif); }
.sb-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 40px; }
.sb-group h2 { margin-bottom:6px; }
.sb-cities { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.sb-cities a { display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:48px; padding:12px 0; border-bottom:1px solid var(--rule); }
.sb-city { font:500 19px var(--serif); }
.sb-when { color:var(--wine); font-weight:700; font-variant-numeric:tabular-nums; }
.sb-cities a:hover .sb-city { color:var(--wine); }
.sb-groups + .sb-small { margin-top:28px; }

@media (max-width:900px) {
  .sb-groups { grid-template-columns:1fr; }
  .sb-others-grid { grid-template-columns:1fr; }
}
@media (max-width:900px), (pointer:coarse) {
  .sb-links a, .sb-read { display:inline-block; padding:13px 0; margin-block:-13px; border-bottom:0; text-decoration:underline; text-underline-offset:4px; }
  .sb-links li + li { margin-top:20px; }
  .sb-other a { display:inline-flex; align-items:center; min-height:44px; }
}
@media (max-width:600px) {
  .sb-page { width:calc(100% - 32px); padding:36px 0 60px; }
  .sb-page h1 { margin-bottom:20px; }
  .sb-card { margin-bottom:44px; padding:18px 16px 16px; }
  .sb-times { gap:16px; }
  .sb-clock { font-size:44px; }
  .sb-day { font-size:15px; }
  .sb-read { margin-left:0; }
  .sb-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .sb-table, .sb-table tbody { display:block; width:100%; }
  .sb-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto auto; column-gap:16px; align-items:end; padding:10px 8px 10px 14px; border-bottom:1px solid var(--rule); }
  .sb-table tbody th, .sb-table td, .sb-table tbody th:first-child { padding:0; border-bottom:none; }
  .sb-table .sb-now th { box-shadow:none; }
  .sb-local { margin:-34px 0 44px; }
  .sb-mine-wrap { margin:-36px 0 36px; }
  .sb-calc { margin-top:-8px; }
  .sb-now { box-shadow:inset 3px 0 0 var(--wine); }
  .sb-t { text-align:right; font-size:17px; }
  .sb-t::before { content:attr(data-label); display:block; color:var(--quiet); font-size:12px; font-weight:400; }
  .sb-p { grid-column:1 / -1; margin-top:2px; color:var(--quiet); font-size:15px; }
}
/* Dodirni ciljevi: poveznica ispod kartice i paraše u tablici (veće područje dodira, isti razmak) */
@media (max-width:900px), (pointer:coarse) {
  .sb-more a, .sb-p a { display:inline-block; min-width:44px; padding:13px 0; margin-block:-13px; }
  .sb-more a { border-bottom:0; text-decoration:underline; text-underline-offset:4px; }
}

/* "Dodaj u svoj kalendar": gumb ispod kartice i mali prozor (dialog) s tri kalendara i adresom za kopiranje */
.sb-add-wrap { margin:-40px 0 48px; }
.sb-add { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1px solid var(--wine); border-radius:2px; color:var(--wine); font:700 15px var(--sans); }
.sb-add:hover { background:var(--wine); color:var(--paper); }
.sb-mine-wrap:not([hidden]) + #sb-add-slot .sb-add-wrap { margin-top:-36px; }
.sb-dialog { box-sizing:border-box; width:min(460px,calc(100% - 32px)); max-height:calc(100% - 32px); padding:24px 24px 18px; border:0; border-top:3px solid var(--wine); border-radius:2px; background:var(--paper); color:var(--ink); box-shadow:0 18px 50px rgba(41,39,42,.28); }
.sb-dialog::backdrop { background:rgba(41,39,42,.45); }
.sb-dialog h2 { margin:0 0 6px; font:500 24px/1.2 var(--serif); }
.sb-dialog-lede { margin:0 0 14px; color:var(--quiet); font-size:15px; line-height:1.5; }
.sb-add-list { margin:0 0 16px; padding:0; list-style:none; border-top:1px solid var(--rule); }
.sb-add-list a { display:flex; align-items:center; justify-content:space-between; min-height:48px; border-bottom:1px solid var(--rule); color:var(--wine); font:700 16px var(--sans); }
.sb-add-list a::after { content:"\2192"; }
.sb-copy label { display:block; margin-bottom:4px; color:var(--quiet); font:italic 400 15px var(--serif); }
.sb-copy-row { display:flex; gap:8px; }
.sb-copy-row input { flex:1 1 auto; min-width:0; min-height:44px; padding:8px 10px; border:1px solid var(--rule); border-radius:2px; background:var(--paper-soft); color:var(--ink); font:400 14px var(--sans); }
.sb-copy-btn, .sb-close { min-height:44px; padding:0 14px; border:1px solid var(--wine); border-radius:2px; background:var(--paper); color:var(--wine); font:700 14px var(--sans); cursor:pointer; white-space:nowrap; }
.sb-copy-btn:hover, .sb-close:hover { background:var(--wine); color:var(--paper); }
.sb-copied { min-height:1.4em; margin:6px 0 0; color:var(--ink); font-size:14px; }
.sb-dialog .sb-small { margin-top:4px; }
.sb-dialog form { display:flex; justify-content:flex-end; margin-top:14px; }
.sb-dialog :is(a, button, input):focus-visible { outline:2px solid var(--wine); outline-offset:2px; }
@media (max-width:600px) {
  .sb-add-wrap { margin:-30px 0 40px; }
  .sb-copy-row { flex-direction:column; }
}