/* Podstránky: Súkromie a ukážky (sukromie.html), 404. Spoločné štýly v jazyku návrhu. [F2-Funkcie]
   Hlavička a pätička používajú tie isté triedy ako úvodná stránka (base.css, sections.css, responsive.css). */

/* ---------- úvodná dlaždica ---------- */
.pg-hero{grid-column:1/-1;min-height:23.75rem;padding:3.5rem;background:var(--og);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;--focus:#fff}
.pg-hero .ring{position:absolute;right:-8.125rem;top:-11.25rem;width:35rem;height:35rem;border-radius:50%;border:5.25rem solid rgba(255,255,255,.14)}
.pg-hero .ring2{position:absolute;right:20rem;bottom:-14rem;width:20rem;height:20rem;border-radius:50%;background:rgba(255,255,255,.1)}
.pg-hero .kick{color:var(--ink);align-self:flex-start;position:relative}
.pg-hero h1{font:800 5.25rem/.97 var(--f-display);letter-spacing:-.047em;max-width:56rem;position:relative}
.pg-hero p{font:500 1.25rem/1.45 var(--f-body);max-width:40rem;margin-top:1.375rem;color:rgba(255,255,255,.94);position:relative}
.pg-hero .btn{margin-top:2rem;align-self:flex-start;position:relative;box-shadow:0 1rem 2.125rem rgba(120,30,0,.25)}
.pg-hero .btn svg{width:1.125rem;height:1.125rem}

/* ---------- obsahové dlaždice ---------- */
.pg-grid{margin-top:1rem}
.pt{padding:2.25rem 2.25rem 2.5rem;--focus:currentColor}
.pt h2{font:800 2.25rem/1.02 var(--f-display);letter-spacing:-.035em;margin-bottom:1.125rem}
.pt h3{font:700 1rem var(--f-body);margin:1.5rem 0 .75rem}
.pt p{font:500 1.0625rem/1.55 var(--f-body);max-width:40rem}
.pt p+p{margin-top:.75rem}
.pt a:not(.ml){text-decoration:underline;text-decoration-thickness:.0625rem;text-underline-offset:.1875rem}
.pt a:not(.ml):hover{text-decoration-thickness:.125rem}
.pt .q{margin-top:1.125rem;padding:1rem 1.125rem;border-radius:1rem;background:rgba(27,20,16,.08);font-weight:600}
.pt .ic{width:3.25rem;height:3.25rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;background:rgba(27,20,16,.08)}
.pt .ic svg{width:1.5rem;height:1.5rem}
.pt.dk .ic,.pt.dk .q{background:rgba(255,246,236,.1)}
.pt.dk p{color:#e9dccf}
.pt .ml{display:inline-flex;align-items:center;gap:.625rem;margin-top:1.25rem;padding:.875rem 1.125rem;border-radius:.875rem;background:var(--ink);color:#fff;font:600 1rem var(--f-body)}
.pt .ml svg{width:1.125rem;height:1.125rem;color:var(--or)}

/* šírky dlaždíc sukromie.html (F4): s = 4, m = 6, l = 8 stĺpcov z 12 */
.pt--s{grid-column:span 4}
.pt--m{grid-column:span 6}
.pt--l{grid-column:span 8}
.pt.bl{--focus:#fff}

/* „Keď nám napíšete“: krátke otázky a odpovede */
.facts{display:grid;gap:.875rem;max-width:44rem}
.facts div{display:grid;grid-template-columns:10.5rem 1fr;gap:1rem;padding-top:.875rem;border-top:1px solid rgba(28,42,5,.18)}
.facts div:first-child{padding-top:0;border-top:0}
.facts dt{font:700 1.0625rem/1.55 var(--f-body)}
.facts dd{font:500 1.0625rem/1.55 var(--f-body)}

.pg-valid{margin:1.5rem 0 0 .25rem;font:500 1rem var(--f-body);color:var(--mut)}

/* písma: každé meno vo vlastnom písme */
.fonts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.fonts li{padding:1rem 1.125rem;border-radius:1rem;background:rgba(255,246,236,.08);font:500 .875rem/1.4 var(--f-body);color:var(--mut-dk)}
.fonts b{display:block;color:var(--cr);margin-bottom:.25rem;font-weight:400}
.fonts .f-d{font:800 1.5rem/1.1 var(--f-display);letter-spacing:-.03em}
.fonts .f-b{font:600 1.375rem/1.15 var(--f-body)}
.fonts .f-h{font:700 1.75rem/1 var(--f-hand)}

/* ---------- 404 ---------- */
.pg-404{min-height:34rem}
.pg-404 .code{position:relative;font:800 11rem/.8 var(--f-display);letter-spacing:-.06em;color:rgba(255,255,255,.28);margin-bottom:1.5rem}

/* ---------- tablet a mobil (iba obsah podstránok; hlavičku a pätičku rieši responsive.css) ---------- */
@media (max-width:1199.98px){
  .pt--m{grid-column:span 6}
  .pt--s,.pt--l{grid-column:1/-1}
  .pg-hero h1{font-size:4rem}
}
@media (max-width:719.98px){
  .pg-grid,.pg-top{grid-template-columns:1fr}
  .pt--s,.pt--m,.pt--l,.pg-hero{grid-column:1/-1}
  .facts div{grid-template-columns:1fr;gap:.25rem}
  .pg-hero{min-height:0;padding:2.5rem 1.5rem 2rem}
  .pg-hero h1{font-size:2.75rem;line-height:1}
  .pg-hero p{font-size:1.0625rem}
  .pg-hero .ring{width:20rem;height:20rem;border-width:3.25rem;right:-7rem;top:-8rem}
  .pg-hero .btn{width:100%;justify-content:center}
  .pg-404 .code{font-size:7rem}
  .pt{padding:1.75rem 1.5rem 2rem}
  .pt h2{font-size:1.875rem}
  .fonts{grid-template-columns:1fr}
}