/* india.sk – bez JavaScriptu, bez cudzích písiem */
:root {
  --tmava: #1f1a2e;
  --safran: #f29a2e;
  --odkaz: #9a4a00;        /* šafranová dosť tmavá na text na svetlom pozadí */
  --pozadie: #faf6f0;
  --text: #221c2b;
  --tlmeny: #5a5366;
  --ciara: #e6ddd0;
  --plocha: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pozadie: #16131f;
    --text: #ece6dc;
    --tlmeny: #b2aabd;
    --ciara: #2f2a3b;
    --plocha: #1e1a29;
    --odkaz: #f29a2e;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pozadie);
  color: var(--text);
  font: 1.0625rem/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.obal { max-width: 50rem; margin: 0 auto; padding: 0 1rem; }
a { color: var(--odkaz); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

.hlavicka { background: var(--tmava); color: #fff; padding: 1.1rem 0; }
.hlavicka .obal { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.logo { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.logo span { color: var(--safran); }
.slogan { margin: 0; color: #cfc8da; font-style: italic; }

main.obal { padding-top: 2rem; padding-bottom: 3rem; }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: 0 0 1rem; letter-spacing: -.02em; }
h2 { font-size: 1.45rem; line-height: 1.3; margin: 2.4rem 0 .7rem; }
p { margin: 0 0 1rem; }

.foto { margin: 1.25rem 0 1.5rem; }
.foto img { display: block; width: 100%; height: auto; border-radius: .75rem; background: var(--ciara); }
figcaption { font-size: .85rem; color: var(--tlmeny); margin-top: .35rem; }
section::after { content: ""; display: block; clear: both; }
@media (min-width: 40rem) {
  .foto.na-vysku { float: right; width: 18rem; margin: .4rem 0 1rem 1.5rem; }
}
@media (max-width: 39.99rem) {
  .foto.na-vysku img { max-height: 75vh; object-fit: cover; }
}

.obsah { background: var(--plocha); border: 1px solid var(--ciara); border-radius: .75rem; padding: 1rem 1.25rem; margin: 2rem 0 1rem; }
.obsah h2 { margin: 0 0 .4rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tlmeny); }
.obsah ol { margin: 0; padding-left: 1.3rem; }
section { scroll-margin-top: 1rem; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .9rem; }
.galeria figure { margin: 0; }
.galeria img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: .6rem; background: var(--ciara); }

.chyba { padding: 2rem 0 4rem; }
.paticka { border-top: 1px solid var(--ciara); color: var(--tlmeny); font-size: .85rem; padding: 1.25rem 0 2rem; }
.paticka p { margin: 0 0 .4rem; }
.paticka a { color: inherit; }

/* zápisník */
.upoutavka { margin-top: 2.5rem; background: var(--tmava); color: #fff; border-radius: .75rem; padding: 1.25rem 1.5rem; }
.upoutavka h2 { margin-top: 0; color: var(--safran); }
.upoutavka a.tlacidlo { display: inline-block; background: var(--safran); color: #1f1a2e; font-weight: 700; text-decoration: none; padding: .55rem 1rem; border-radius: .5rem; }
.drobky { font-size: .9rem; color: var(--tlmeny); margin-bottom: .5rem; }
.zapis img.vpravo, .zapis img.vlavo, .zapis img.stred { display: block; max-width: 100%; height: auto; border-radius: .6rem; margin: .4rem 0 1rem; }
@media (min-width: 40rem) {
  .zapis img.vpravo { float: right; max-width: 45%; margin: .3rem 0 1rem 1.5rem; }
  .zapis img.vlavo { float: left; max-width: 45%; margin: .3rem 1.5rem 1rem 0; }
}
.zapis hr { clear: both; border: 0; border-top: 1px solid var(--ciara); margin: 2rem 0; }
.galeria-dna { clear: both; }
.mriezka { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.mriezka figure { margin: 0; }
.mriezka img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .5rem; background: var(--ciara); }
.mriezka figure { scroll-margin-top: 5rem; }
/* prehliadač fotiek – len CSS (:target), bez JavaScriptu */
.prehliadac { display: none; position: fixed; inset: 0; z-index: 100; background: #0c0a12;
  place-items: center; padding: 3.5rem 3.5rem 1.5rem; }
.prehliadac:target { display: grid; }
.prehliadac .pozadie { position: absolute; inset: 0; }
.prehliadac figure { position: relative; margin: 0; text-align: center; pointer-events: none; }
.prehliadac img { display: block; height: auto; margin: 0 auto; border-radius: .4rem; background: #2a2533; }
.prehliadac img.na-sirku { width: min(100vw - 7rem, 50rem, (100vh - 9rem) * 1.5); }
.prehliadac img.na-vysku { width: min(100vw - 7rem, (100vh - 9rem) / 1.5); }
.prehliadac figcaption { color: #ece6dc; margin-top: .75rem; font-size: .95rem; line-height: 1.4; max-width: 50rem; }
.prehliadac .poradie { color: #b2aabd; white-space: nowrap; }
.prehliadac .sipka, .prehliadac .zavriet { position: absolute; z-index: 1; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 2rem; line-height: 1; text-decoration: none; }
.prehliadac .sipka:hover, .prehliadac .zavriet:hover, .prehliadac .sipka:focus-visible, .prehliadac .zavriet:focus-visible { background: var(--safran); color: #1f1a2e; }
.prehliadac .sipka { top: 50%; transform: translateY(-50%); }
.prehliadac .sipka.vlavo { left: .4rem; }
.prehliadac .sipka.vpravo { right: .4rem; }
.prehliadac .zavriet { top: .5rem; right: .5rem; }
@media (max-width: 40rem) {
  .prehliadac { padding: 3.5rem .5rem 4.5rem; }
  .prehliadac img.na-sirku, .prehliadac img.na-vysku { width: min(100vw - 1rem, (100vh - 12rem) * 1.5); }
  .prehliadac img.na-vysku { width: min(100vw - 1rem, (100vh - 12rem) / 1.5); }
  .prehliadac .sipka { top: auto; bottom: .75rem; transform: none; }
  .prehliadac .sipka.vlavo { left: calc(50% - 4rem); }
  .prehliadac .sipka.vpravo { right: calc(50% - 4rem); }
}
.listovanie { clear: both; display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--ciara); }
.listovanie a { max-width: 48%; }
.listovanie .dalej { text-align: right; margin-left: auto; }
.zapisnik-zoznam ol { columns: 2 16rem; }