/* GORJE-065: the club's jubilee books, read by chapters. Tokens from izvor/sistem.css, nothing restyled there.
   Layout: one reading column (66ch); on wide screens a sticky contents column on the left and a margin on the
   right for portraits and book page numbers (Tufte-style floats with a negative margin). */

.knjiga-stran { padding-bottom: var(--med-razdelki); }

/* ---- book page ---- */
.knjiga-glava { padding-block: 2rem 3rem; display: grid; gap: 2rem; }
.knjiga-uvod { display: grid; gap: 2rem; align-items: center; }
.knjiga-naslovnica { width: min(18.75rem, 70vw); height: auto; border-radius: var(--r-polje); box-shadow: var(--senca-dvig); }
.knjiga-besedilo { display: grid; gap: 1rem; justify-items: start; max-width: 62ch; }
.knjiga-besedilo .t-2xl { font-weight: 400; color: var(--jezero); }
.knjiga-besedilo .t-lg { color: var(--noc); }
.knjiga-nadaljuj a { font-weight: 600; color: var(--jezero); text-decoration: underline; text-underline-offset: 3px; }
@container (min-width: 56.25rem) {
  .knjiga-glava { padding-block: 3rem 4.5rem; }
  .knjiga-uvod { grid-template-columns: 22.5rem minmax(0, 1fr); gap: 4rem; }
  .knjiga-naslovnica { width: 100%; }
}

.knjiga-kazalo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--crta); }
.kazalo-vrsta { border-bottom: 1px solid var(--crta); }
.kazalo-vrsta > a, .kazalo-vrsta--kmalu { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; grid-template-areas: "st naslov pu" "st meta pu"; column-gap: 1rem; row-gap: 2px; padding: 1.125rem 0; align-items: baseline; }
.kazalo-vrsta .st { grid-area: st; font-family: var(--f-glas); font-weight: 700; font-size: 2.125rem; line-height: 1; color: var(--jezero); }
.kazalo-naslov { grid-area: naslov; }
.kazalo-meta { grid-area: meta; color: var(--megla); }
.kazalo-meta a { color: var(--jezero); text-decoration: underline; text-underline-offset: 3px; }
.kazalo-vrsta .pu { grid-area: pu; align-self: center; transition: translate calc(var(--cas-odziv) * var(--k)) var(--ease-out); }
.kazalo-vrsta--kmalu .st, .kazalo-vrsta--kmalu .kazalo-naslov { color: var(--megla); }
.kazalo-vrsta--kmalu .kazalo-naslov { font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .kazalo-vrsta > a:hover .kazalo-naslov { color: var(--jezero); }
  .kazalo-vrsta > a:hover .pu { translate: 0.25rem 0; }
}
@container (min-width: 48rem) { .kazalo-vrsta .st { font-size: 2.75rem; } .kazalo-vrsta > a, .kazalo-vrsta--kmalu { grid-template-columns: 5rem minmax(0, 1fr) auto; } }

.podporniki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@container (min-width: 40rem) { .podporniki { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 64rem) { .podporniki { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.podpornik { margin: 0; }
.podpornik img { aspect-ratio: 360 / 518; object-fit: cover; background: var(--bela); }

.kolofon { display: grid; gap: 0; margin: 0; max-width: 51.25rem; border-top: 1px solid var(--crta); }
.kolofon div { display: grid; gap: 2px 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--crta); }
.kolofon dt { font-size: var(--t-sm); color: var(--megla); }
.kolofon dd { margin: 0; }
@container (min-width: 40rem) { .kolofon div { grid-template-columns: 13.75rem minmax(0, 1fr); } }

/* ---- chapter ---- */
.knjiga-napredek { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--glava-h)); z-index: 20; height: 3px; margin-bottom: -3px; pointer-events: none; }
.knjiga-napredek span { display: block; height: 100%; background: var(--jezero); transform-origin: 0 50%; transform: scaleX(0); }

.poglavje-glava { padding-block: 2rem 2.5rem; display: grid; gap: 0.75rem; justify-items: start; }
.poglavje-st { font-family: var(--f-glas); font-weight: 700; font-size: clamp(6rem, 16vw, 10.5rem); line-height: .8; color: var(--jezero); margin-top: 1rem; letter-spacing: -.02em; }
.poglavje-glava h1 { max-width: 18ch; }
.poglavje-meta { color: var(--megla); max-width: 62ch; }
.poglavje-gumbi { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
@container (min-width: 48rem) { .poglavje-glava { padding-block: 3rem 3.5rem; } }

.poglavje-mreza { display: grid; justify-content: center; grid-template-columns: minmax(0, 42.5rem); }
.poglavje-kazalo { margin-bottom: 2.5rem; }
.kazalo-odpri { border-block: 1px solid var(--crta); padding: 0.75rem 0; }
.kazalo-odpri summary { cursor: pointer; font-weight: 600; list-style-position: outside; }
.kazalo-odpri ol { list-style: none; margin: 0.75rem 0 0.25rem; padding: 0; display: grid; gap: 2px; }
.kazalo-odpri a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.5rem; padding: 0.375rem 0; font-size: var(--t-sm); line-height: 1.35; color: var(--megla); transition: color calc(var(--cas-odziv) * var(--k)) ease; }
.kazalo-odpri a .st { font-variant-numeric: tabular-nums; }
.kazalo-odpri a.brez-st { grid-template-columns: minmax(0, 1fr); }
.kazalo-odpri .kazalo-h3 a { padding: 3px 0; font-size: var(--t-xs); }
.kazalo-odpri a[aria-current="true"] { color: var(--noc); font-weight: 600; }
.kazalo-odpri a[aria-current="true"] .st { color: var(--jezero); }
@media (hover: hover) and (pointer: fine) { .kazalo-odpri a:hover { color: var(--noc); } }
.poglavje-leta { display: none; }

/* reading text */
.poglavje-besedilo { font-size: 1.125rem; line-height: 1.7; color: var(--noc); }
.poglavje-besedilo p { margin: 0 0 1.05em; }
.poglavje-besedilo p, .poglavje-besedilo li { hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.obdobje { scroll-margin-top: calc(var(--glava-h) + 1.5rem); }
.obdobje + .obdobje { margin-top: 4.5rem; }
.obdobje::after { content: ""; display: table; clear: both; }
.obdobje-naslov { font-size: clamp(1.625rem, 3.4vw, 2.125rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 400; text-wrap: balance; margin: 0 0 1.5rem; }
.obdobje-naslov .st, .podnaslov .st, .sosed .st, .kazalo-odpri .st { color: var(--jezero); font-weight: 600; }
.obdobje-naslov .st { display: block; font-family: var(--f-glas); font-weight: 700; font-size: .72em; letter-spacing: 0; margin-bottom: 0.25rem; }
.podnaslov { font-size: var(--t-xl); line-height: 1.25; letter-spacing: -.02em; font-weight: 600; margin: 2.5rem 0 0.75rem; scroll-margin-top: calc(var(--glava-h) + 1.5rem); text-wrap: balance; }
.obdobje > p:first-of-type::first-letter { font-family: var(--f-glas); font-weight: 700; float: left; font-size: 4.1em; line-height: .82; margin: .08em .08em 0 0; color: var(--jezero); }
.knjiga-seznam { margin: 0 0 1.05em; padding-left: 1.4em; display: grid; gap: 0.375rem; }
.knjiga-seznam li::marker { color: var(--jezero); font-weight: 700; }
ul.knjiga-seznam { list-style: square; }

/* the author's signature under an address (chapter 2, 12) */
.poglavje-besedilo .avtor { font-size: var(--t-sm); line-height: 1.5; color: var(--megla); font-style: italic; text-align: right; margin: -.2em 0 2em; clear: both; }
/* a person heading the book runs into the first sentence («Martin Pazlar je …») */
.vpeljava { font-weight: 600; color: var(--noc); }

/* results from the book (chapter 5): a table from a tablet up, cards on a phone */
.knjiga-tabela { margin: 0.5rem 0 2rem; clear: both; font-size: var(--t-sm); line-height: 1.4; }
.knjiga-tabela table { width: 100%; border-collapse: collapse; }
.knjiga-tabela th { text-align: left; font-weight: 600; color: var(--megla); font-size: var(--t-xs); letter-spacing: .02em; padding: 0 0.75rem 0.5rem 0; border-bottom: 1px solid var(--crta); }
.knjiga-tabela td { padding: 0.625rem 0.75rem 0.625rem 0; border-bottom: 1px solid var(--crta); vertical-align: top; }
.knjiga-tabela td:last-child, .knjiga-tabela th:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.knjiga-tabela td.enako { color: transparent; }
@container (max-width: 39.9375rem) {
  .knjiga-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .knjiga-tabela table, .knjiga-tabela tbody, .knjiga-tabela tr, .knjiga-tabela td { display: block; }
  .knjiga-tabela tr { padding: 0.75rem 1rem; margin-bottom: 0.625rem; border-radius: var(--r-polje); background: var(--bela); box-shadow: var(--senca-kartica); }
  .knjiga-tabela td, .knjiga-tabela td:last-child { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; padding: 3px 0; border: 0; text-align: left; white-space: normal; font-weight: 400; }
  .knjiga-tabela td::before { content: attr(data-oznaka); color: var(--megla); font-size: var(--t-xs); font-weight: 400; padding-top: 2px; }
  .knjiga-tabela td.enako { color: inherit; }
  .knjiga-tabela td:last-child { font-weight: 600; }
}

.citat { margin: 3rem 0; padding: 1.25rem 0 0; border: 0; position: relative; clear: both; }
.citat::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 3px; border-radius: 2px; background: var(--jezero); }
.citat p { font-size: clamp(1.4375rem, 2.8vw, 1.875rem); line-height: 1.28; letter-spacing: -.02em; font-weight: 400; margin: 0 0 0.75rem; hyphens: manual; text-wrap: balance; }
.citat footer { font-size: var(--t-sm); color: var(--megla); }

/* book page numbers: small marks, in the margin on wide screens */
.poglavje-besedilo .stran-oznaka { margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.75rem; font-size: var(--t-xs); color: var(--megla); clear: right; }
.stran-oznaka::after { content: ""; flex: 1; height: 1px; background: var(--crta); }
.stran-oznaka a { font-weight: 600; letter-spacing: .02em; color: var(--megla); padding: 0.375rem 0; transition: color calc(var(--cas-odziv) * var(--k)) ease; }
@media (hover: hover) and (pointer: fine) { .stran-oznaka a:hover { color: var(--jezero); } }

/* photos */
.foto { margin: 0.5rem 0 1.75rem; }
.foto-gumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-polje); -webkit-tap-highlight-color: transparent; }
.foto img { display: block; width: 100%; height: auto; border-radius: var(--r-polje); background: var(--led); }
.foto figcaption { margin-top: 0.625rem; font-size: var(--t-sm); line-height: 1.45; color: var(--megla); hyphens: auto; }
.foto--siroka { clear: both; }
.foto--ob-robu { float: right; clear: right; width: 40%; margin: 0.375rem 0 1rem 1.25rem; }
.foto--ob-robu figcaption { font-size: var(--t-xs); }
@container (max-width: 34.9375rem) { .foto--ob-robu { width: 34%; margin-left: 1rem; } }
.foto-gumb:focus-visible { outline: 3px solid var(--fokus-temno); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .foto-gumb img { transition: filter calc(var(--cas-odziv) * var(--k)) ease; }
  .foto-gumb:hover img { filter: brightness(1.04) contrast(1.02); }
}
/* appears once when scrolled to (knjige.js adds .caka only below the fold and only with motion on) */
.foto.caka img { clip-path: inset(10% 0 0 0 round 0.75rem); opacity: 0; }
.foto img { transition: clip-path calc(560ms * var(--k)) var(--ease-out), opacity calc(420ms * var(--k)) var(--ease-out); }

@container (min-width: 47.5rem) { .poglavje-besedilo { font-size: 1.1875rem; } }

/* wide: text + margin */
@container (min-width: 73.75rem) {
  .poglavje-mreza { grid-template-columns: minmax(0, 42.5rem) 13.75rem; column-gap: 3rem; }
  .poglavje-besedilo { grid-column: 1; }
  .foto--ob-robu { width: 13.75rem; margin: 0.25rem -16.75rem 1.25rem 0; }
  .foto--siroka { margin-right: -16.75rem; }
  .poglavje-besedilo .stran-oznaka { float: right; clear: right; width: 13.75rem; margin: 0 -16.75rem 0.5rem 0; height: 1.5rem; }
  .stran-oznaka::after { display: none; }
  .stran-oznaka a { padding: 2px 0; }
  .citat { margin-right: -7.5rem; }
}

/* widest: contents column on the left with the decade */
@container (min-width: 85rem) {
  .poglavje-mreza { grid-template-columns: 12.5rem minmax(0, 42.5rem) 13.75rem; justify-content: space-between; }
  .poglavje-kazalo { grid-column: 1; grid-row: 1; margin: 0; position: sticky; top: calc(var(--glava-h) + 2rem); align-self: start; max-height: calc(100vh - var(--glava-h) - 3rem); overflow: auto; }
  .poglavje-besedilo { grid-column: 2; grid-row: 1; }
  .kazalo-odpri { border: 0; padding: 0; }
  .kazalo-odpri summary { display: none; }
  .kazalo-odpri ol { margin: 0; }
  .poglavje-leta { display: block; font-family: var(--f-glas); font-weight: 700; font-size: 2.75rem; line-height: .95; color: var(--noc); min-height: 2em; margin-bottom: 1.25rem; transition: opacity calc(200ms * var(--k)) var(--ease-out), filter calc(200ms * var(--k)) var(--ease-out), translate calc(200ms * var(--k)) var(--ease-out); }
  .poglavje-leta.menja { opacity: 0; filter: blur(4px); translate: 0 calc(0.375rem * var(--gib)); }
}

/* neighbours at the end */
.poglavje-sosedi { display: grid; gap: 1rem; padding-block: 4.5rem var(--med-razdelki); }
@container (min-width: 48rem) { .poglavje-sosedi { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.sosed { display: grid; align-content: start; gap: 0.5rem; padding: 1.5rem; border-radius: var(--r-kartica); background: var(--bela); box-shadow: var(--senca-kartica); height: 100%; transition: box-shadow calc(var(--cas-odziv) * var(--k)) ease; }
.sosed--nasl { text-align: right; justify-items: end; }
.sosed--kmalu { background: transparent; box-shadow: inset 0 0 0 1px var(--crta); }
.sosed--kmalu .t-xl { color: var(--megla); }
.sosed--kmalu a { margin-top: auto; color: var(--jezero); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a.sosed:hover { box-shadow: var(--senca-dvig); } }

/* ---- photo window ---- */
.okno-foto { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 3.5rem 1rem 1.5rem; border: 0; background: rgba(14, 26, 35, .94); color: var(--bela); overflow: hidden; }
.okno-foto::backdrop { background: transparent; }
.okno-foto[open] { display: grid; place-items: center; }
.okno-foto-slika { margin: 0; display: grid; justify-items: center; gap: 0.875rem; max-width: min(75rem, 100%); }
.okno-foto-slika img { max-width: 100%; max-height: calc(100dvh - 11.875rem); width: auto; height: auto; background: rgba(255, 255, 255, .06); border-radius: var(--r-polje); transform-origin: 0 0; }
.okno-foto-slika figcaption { max-width: 72ch; font-size: var(--t-sm); line-height: 1.5; color: rgba(255, 255, 255, .86); text-align: center; text-wrap: pretty; }
.okno-foto-slika figcaption a { color: var(--ivje); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.okno-foto-gumb { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: var(--r-gumb); background: rgba(255, 255, 255, .1); color: var(--bela); cursor: pointer; transition: background-color calc(var(--cas-odziv) * var(--k)) ease, scale calc(var(--cas-pritisk) * var(--k)) var(--ease-out); }
.okno-foto-gumb:active { scale: .96; }
.okno-foto-gumb:focus-visible { outline: 3px solid var(--fokus-temno); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .okno-foto-gumb:hover { background: rgba(255, 255, 255, .2); } }
.okno-foto-zapri { top: 0.75rem; right: 0.75rem; }
.okno-foto-prej, .okno-foto-nasl { top: 50%; translate: 0 -50%; }
.okno-foto-prej { left: 0.75rem; }
.okno-foto-nasl { right: 0.75rem; }
.okno-foto-gumb[hidden] { display: none; }
@container (max-width: 40rem) {
  .okno-foto-prej, .okno-foto-nasl { top: auto; bottom: 1rem; translate: none; }
  .okno-foto { padding-bottom: 5rem; }
}

/* a photo that is half the column wide in the book: beside the text from a tablet up */
@container (min-width: 47.5rem) {
  .foto--polovica { float: right; clear: right; width: 50%; margin: 0.375rem 0 1rem 1.75rem; }
}
@container (min-width: 73.75rem) {
  .foto--polovica { width: 21.25rem; }
}

/* ---- GORJE-070: «Iz knjige 90 let» - only what 100 let does not have ---- */
.izbor-uvod { display: grid; gap: 1.5rem; align-items: start; }
.izbor-uvod > div { display: grid; gap: 0.75rem; justify-items: start; }
.izbor-uvod .t-lg { max-width: 62ch; color: var(--noc); }
.izbor-naslovnica { width: min(9.375rem, 40vw); border: 1px solid var(--crta); box-shadow: var(--senca-kartica); }
@container (min-width: 56.25rem) {
  .izbor-uvod { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 3.5rem; }
  .izbor-naslovnica { width: 100%; margin-top: 1.5rem; }
}
/* a line written by the site (not book text): quieter, no drop cap */
.poglavje-besedilo .uvod-urednistva { font-size: var(--t-base); line-height: 1.55; color: var(--megla); max-width: 56ch; }
.obdobje > p.uvod-urednistva::first-letter { float: none; font: inherit; color: inherit; margin: 0; }
/* the parts both books share: a ruled list of links into 100 let, like the book contents */
.povezava-100 { display: grid; gap: 0.25rem; justify-items: start; padding: 1.125rem 0; border-top: 1px solid var(--crta); }
.povezava-100:last-of-type { border-bottom: 1px solid var(--crta); margin-bottom: 1.05em; }
.poglavje-besedilo .povezava-100 p { margin: 0; }
.povezava-100-naslov { font-size: var(--t-xl); line-height: 1.25; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
.povezava-100-meta, .povezava-100-kje { color: var(--megla); }
.povezava-100-meta a { color: var(--megla); text-decoration: underline; text-underline-offset: 3px; }
.povezava-100-kje { margin-top: 0.375rem !important; }
.povezava-100-cilj { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; font-weight: 600; color: var(--jezero); line-height: 1.3; }
.povezava-100-cilj .pu { flex: none; transition: translate calc(var(--cas-odziv) * var(--k)) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .povezava-100-cilj:hover span { text-decoration: underline; text-underline-offset: 3px; }
  .povezava-100-cilj:hover .pu { translate: 0.25rem 0; }
  .povezava-100-meta a:hover { color: var(--jezero); }
}
/* a footnote of the book */
.poglavje-besedilo .opomba-knjige { font-size: var(--t-sm); line-height: 1.5; color: var(--megla); }
/* Matjaž Poklukar's drawings sit on white paper in the book */
.foto--risba img { background: var(--bela); }
@container (max-width: 73.6875rem) { .foto--ob-robu.foto--risba { width: 28%; } }
.izbor-kolofon > p { color: var(--megla); font-size: var(--t-base); }
.obdobje.izbor-kolofon > p::first-letter { float: none; font: inherit; color: inherit; margin: 0; }
/* two photos of one page side by side */
.foto-par { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin: 0.5rem 0 1.75rem; }
.foto-par .foto { float: none; width: auto; margin: 0; }
/* every 2011 section keeps its drawing and photos: a sub-heading starts below the floats of the one before */
.poglavje--izbor .podnaslov { clear: both; padding-top: 0.5rem; }