/* Rozloženie: tmavý úvod ako jeho štúdio a miniatúry kanála, potom svetlý papier na čítanie a vypĺňanie.
   Šesťuholník je zo stola v jeho podcastovom štúdiu, značí vybranú odpoveď a kroky. */
:root {
  color-scheme: light;
  --sadza: #16181c;      /* plsť v štúdiu */
  --sadza-2: #23262c;
  --med: #f5b921;        /* žltá z miniatúr a šesťuholníky stola */
  --med-tmavy: #8a6200;  /* med na svetlom podklade pre text */
  --papier: #f2f4f5;
  --biela: #ffffff;
  --text: #1b1e23;
  --text-2: #565c66;
  --linka: #cdd2d8;
  --cervena: #b3261e;
  --titul: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --telo: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --sest: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--text); font: 400 1.125rem/1.55 var(--telo); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; }
h1, h2, h3 { font-family: var(--titul); font-weight: 800; line-height: 1.02; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h2 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
h3 { font-size: clamp(1.8rem, 4.6vw, 2.3rem); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--med); outline-offset: 3px; }

.sirka { width: min(1120px, 100%); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* Úvod */
.uvod { background: var(--sadza); color: var(--biela); display: grid; }
.uvod-foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 35% 25%; }
.uvod-text { display: grid; gap: 18px; justify-items: start; padding: 28px max(20px, env(safe-area-inset-right, 0px)) 44px max(20px, env(safe-area-inset-left, 0px)); }
.meno { color: var(--med); font-weight: 700; font-size: 1.05rem; }
h1 { font-size: clamp(3.3rem, 15vw, 5.4rem); font-weight: 900; line-height: .95; }
.uvod-veta { font-size: 1.2rem; max-width: 34em; color: #dfe2e6; }

.tlacidlo { display: inline-block; background: var(--med); color: #16181c; font: 800 1.6rem/1 var(--titul); letter-spacing: .01em; padding: 18px 30px 19px; border: 0; border-radius: 4px; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.tlacidlo:hover { background: #ffc93c; transform: translateY(-1px); }
.tlacidlo:disabled { opacity: .6; cursor: progress; transform: none; }

@media (min-width: 900px) {
  .uvod { grid-template-columns: 1.08fr 1fr; align-items: center; }
  .uvod-foto, .uvod-foto img { height: 100%; }
  .uvod-foto img { aspect-ratio: auto; min-height: 560px; max-height: 760px; object-position: 32% 30%; }
  .uvod-text { padding: 48px max(40px, calc((100vw - 1120px) / 2)) 48px 52px; }
}

/* Povedzme si to rovno */
.rovno { padding-block: 64px 72px; display: grid; gap: 34px; }
.rovno-zoznam { display: grid; gap: 34px; }
.rovno-zoznam article { display: grid; gap: 10px; align-content: start; }
.rovno-zoznam p { max-width: 62ch; }
.rovno-zoznam a { color: var(--med-tmavy); font-weight: 700; justify-self: start; }
@media (min-width: 900px) {
  .rovno-zoznam { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
}

/* Kto sa ti ozve */
.pribeh { background: var(--biela); padding-block: 64px; }
.pribeh-mriezka { display: grid; gap: 34px; }
.pribeh figure { margin: 0; }
.pribeh figure img { width: 100%; max-height: 460px; object-fit: cover; object-position: 50% 45%; border-radius: 4px; }
.pribeh-text { display: grid; gap: 16px; min-width: 0; }
.pribeh-text p { max-width: 62ch; }
.pribeh-text h3 { margin-top: 18px; }
.kroky { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kroky li { display: flex; gap: 14px; align-items: center; }
.kroky li > span:last-child { min-width: 0; }
.sest { flex: none; display: inline-grid; place-items: center; width: 44px; height: 40px; background: var(--med); color: #16181c; font: 800 1.35rem/1 var(--titul); clip-path: var(--sest); }
@media (min-width: 900px) {
  .pribeh-mriezka { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: center; }
  .pribeh figure img { max-height: 640px; }
}

/* Dotazník */
.dotaznik { background: var(--sadza); padding-block: 64px 72px; }
.dotaznik-sirka { width: min(760px, 100%); margin-inline: auto; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.dotaznik-hlava { color: var(--biela); display: flex; gap: 18px; align-items: center; padding: 0 8px 28px; }
.dotaznik-hlava > div { min-width: 0; display: grid; gap: 8px; }
.dotaznik-hlava p { color: #dfe2e6; }
.tvar { flex: none; width: 92px; height: 86px; object-fit: cover; clip-path: var(--sest); }
form { background: var(--biela); border-radius: 6px; padding: 8px 20px 28px; }
.blok { border: 0; margin: 0; padding: 24px 0; border-bottom: 1px solid var(--linka); min-width: 0; }
legend { padding: 0; margin-bottom: 14px; font-weight: 700; font-size: 1.2rem; line-height: 1.3; float: left; width: 100%; }
legend + * { clear: both; }
legend small { font-weight: 400; color: var(--text-2); font-size: 1rem; margin-left: 4px; white-space: nowrap; }
legend label { display: block; }

.polia { display: grid; gap: 16px; }
.pole { display: grid; gap: 5px; min-width: 0; }
.pole label { font-weight: 600; font-size: 1rem; }
@media (min-width: 600px) { .polia { grid-template-columns: 1fr 1fr; } .cele { grid-column: 1 / -1; } }
input:not([type=radio]):not([type=checkbox]), select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--biela);
  border: 1.5px solid #9aa1aa; border-radius: 4px; padding: 12px 13px; min-height: 50px;
}
textarea { resize: vertical; display: block; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--med); outline-offset: 0; border-color: var(--text); }
::placeholder { color: #757b84; }

.volby { display: flex; flex-wrap: wrap; gap: 9px; }
.volba { position: relative; display: inline-flex; gap: 10px; align-items: center; min-height: 48px; padding: 9px 15px 9px 11px; border: 1.5px solid #9aa1aa; border-radius: 4px; cursor: pointer; line-height: 1.25; background: var(--biela); transition: background .12s, border-color .12s; }
.volba:hover { border-color: var(--text); }
.volba input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.znak { flex: none; width: 24px; height: 22px; background: #9aa1aa; clip-path: var(--sest); position: relative; }
.znak::after { content: ""; position: absolute; inset: 2px; background: var(--biela); clip-path: var(--sest); }
.volba:has(input:checked) { background: #fff4d2; border-color: var(--text); font-weight: 600; }
.volba:has(input:checked) .znak { background: var(--text); }
.volba:has(input:checked) .znak::after { background: var(--med); }
.volba:has(input:focus-visible) { outline: 3px solid var(--med); outline-offset: 2px; }

.suhlas { padding: 24px 0 18px; }
.volba-suhlas { display: flex; align-items: flex-start; border: 0; padding: 0; background: none !important; font-weight: 400 !important; min-height: 0; }
.volba-suhlas .znak { margin-top: 2px; }
.volba-suhlas a { position: relative; z-index: 1; color: var(--text); font-weight: 600; }

.tlacidlo-odoslat { width: 100%; font-size: 1.9rem; padding-block: 21px 22px; }
.neuplne legend, .neuplne .pole label.zle, .neuplne-text { color: var(--cervena); }
.blok.neuplne .volba { border-color: var(--cervena); }
input.zle, textarea.zle { border-color: var(--cervena) !important; }
.chyba-text { color: var(--cervena); font-size: 1rem; font-weight: 600; }
.chyba-box { background: #fdecea; color: #7c1b15; border-radius: 4px; padding: 12px 14px; margin-bottom: 14px; font-weight: 600; }
.skuska-box { background: #fff4d2; color: var(--text); border-radius: 4px; padding: 12px 14px; margin: 0 0 14px; font-weight: 600; }
.skryte { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hotovo { background: var(--biela); border-radius: 6px; padding: 34px 24px 38px; display: grid; gap: 14px; justify-items: start; outline: 0; }
.sest-velka { width: 66px; height: 60px; font-size: 2rem; }

/* Videá */
.videa { padding-block: 64px; display: grid; gap: 22px; }
.videa ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linka); }
.videa li a { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 15px 2px; border-bottom: 1px solid var(--linka); text-decoration: none; font-weight: 600; }
.videa li a span:first-child { min-width: 0; }
.videa li a:hover span:first-child { text-decoration: underline; }
.dlzka { flex: none; color: var(--text-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.kanal { color: var(--med-tmavy); font-weight: 700; justify-self: start; }

.pata { background: var(--sadza); color: #c6cad0; padding-block: 34px 40px; font-size: 1rem; }
.pata .sirka { display: grid; gap: 10px; }
.pata p { max-width: 74ch; }

/* Zásady */
.zasady { padding-block: 44px 64px; max-width: 760px; display: grid; gap: 14px; }
.zasady h1 { font-size: clamp(2.6rem, 9vw, 3.8rem); }
.zasady h2 { font-size: 1.9rem; margin-top: 18px; }
.zasady ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }