/* NG — nový design NoGames (REQ-001, DES-001)
 *
 * Základ přebírá <style> z návrhu (sites/nogames/navrh/stranky/*.html). Vzhled je
 * zatím v inline stylech šablon; třídy ng-* tady upravují rozložení podle šířky.
 * Hranice jsou container queries na kontejneru „ng" jako v návrhu.
 *
 *   nad 1080 px    počítač, přesně podle návrhu
 *   720–1080 px    tablet drží rozložení počítače (Libor 8. 10.): menu zůstává
 *                  vidět, fotka vedle textu, sloupce se nerozpadají do jednoho
 *   pod 720 px     mobil podle návrhu, menu za hamburgerem
 *
 * Inline styly mají přednost před stylesheetem, proto !important u přepisů.
 */

/* ── Základ z návrhu ── */
body{margin:0}
a{color:#5BBDB4}a:hover{color:#FFF9E6}
.ng-skip{position:absolute;left:12px;top:-200px;z-index:10;background:#FFF9E6;color:#2F373B;padding:12px 18px;font-weight:600;text-decoration:none}
.ng-skip:focus{top:12px}
.ng-burger{display:none}
.ng-nav a[aria-current="page"]{color:#FFF9E6 !important;text-decoration:underline !important;text-underline-offset:6px}
@container ng (max-width: 1260px){.ng-hide-md{display:none !important}}
@container ng (max-width: 560px){.ng-hide-sm{display:none !important}}
.ng-form ::placeholder{color:#5F686D;opacity:1}
.ng-form input:focus-visible,.ng-form textarea:focus-visible,.ng-form button:focus-visible,.ng-form select:focus-visible{outline:3px solid #367D77;outline-offset:2px}
/* Výběr ve formuláři: vlastní šipka místo systémové (pole jinak vypadá jako ostatní) */
.ng-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%233A4348' stroke-width='1.6'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 16px center !important;padding-right:44px !important}

/* Jen pro čtečky obrazovky */
.ng-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Stránkování výpisů (reference na tmavém, blog na světlém pozadí) ── */
.ng-pager{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:16px}
.ng-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 14px;box-sizing:border-box;border:1px solid rgba(255,249,230,0.55);color:#FFF9E6;text-decoration:none}
.ng-pager .current{background:#5BBDB4;border-color:#5BBDB4;color:#2F373B;font-weight:600}
.ng-pager .dots{border-color:transparent}
.ng-pager--light .page-numbers{border-color:#3A4348;color:#3A4348}
.ng-pager--light .current{background:#3A4348;border-color:#3A4348;color:#FFF9E6}
.ng-pager--light .dots{border-color:transparent}

/* ── Text článků a referencí (obsah z editoru, bloky Gutenbergu) ── */
.ng-prose{font-size:18px;line-height:1.7;font-weight:300}
.ng-prose > *{margin-top:0;margin-bottom:0}
.ng-prose > * + *{margin-top:1.1em}
.ng-prose h2{margin-top:1.8em;font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:clamp(28px,2.6vw,36px);line-height:1.15}
.ng-prose h3{margin-top:1.6em;font-size:21px;font-weight:600;line-height:1.35}
.ng-prose h2 + *,.ng-prose h3 + *{margin-top:.6em}
.ng-prose a{color:#367D77;text-underline-offset:3px}
.ng-prose strong,.ng-prose b{font-weight:600}
.ng-prose ul,.ng-prose ol{padding-left:1.3em}
.ng-prose li + li{margin-top:.4em}
.ng-prose blockquote{margin-left:0;margin-right:0;padding-left:24px;border-left:3px solid #5BBDB4;font-family:'Libre Caslon Display',Georgia,serif;font-size:24px;line-height:1.4}
.ng-prose blockquote p{margin:0}
.ng-prose hr{border:0;border-top:1px solid rgba(58,67,72,0.2);margin-top:2em;margin-bottom:2em}
.ng-prose img,.ng-prose iframe,.ng-prose video{max-width:100%;height:auto}
.ng-prose iframe{aspect-ratio:16 / 9;width:100%}
.ng-prose figure{margin-left:0;margin-right:0}
.ng-prose figcaption{margin-top:8px;font-size:14px;color:#5F686D}
.ng-prose .has-large-font-size{font-size:22px;line-height:1.55}
.ng-prose .post-kicker{font-size:15px;line-height:1.5;color:#5F686D}
/* Tabulky (Zpracování osobních údajů): na úzkém displeji se posouvají vodorovně, ovladatelné klávesnicí */
.ng-prose .ng-table{overflow-x:auto}
.ng-prose .ng-table:focus-visible{outline:3px solid #367D77;outline-offset:2px}
.ng-prose table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px;line-height:1.5}
.ng-prose th,.ng-prose td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-top:1px solid rgba(58,67,72,0.2)}
.ng-prose th{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#367D77}

/* ── Hlavička na tabletu ── */

/* Větší tablet (od 1000 px): menu v jednom řádku, jen hustší */
@container ng (min-width: 1000px) and (max-width: 1080px) {
  .ng-headright, .ng-nav { column-gap: 18px !important; font-size: 14px !important; }
  .ng-navcta { padding: 10px 16px !important; }
}

/* Menší tablet: logo a tlačítko nahoře, odkazy v druhém řádku přes celou šířku */
@container ng (min-width: 720px) and (max-width: 999.98px) {
  .ng-headright { display: contents !important; }
  .ng-navcta { order: 1; margin-left: auto; }
  .ng-nav {
    order: 2; flex: 1 1 100%; justify-content: space-between;
    padding-top: 18px; border-top: 1px solid rgba(255,249,230,0.14);
  }
}

/* ── Obsah na tabletu: sloupce jako na počítači ── */
@container ng (min-width: 720px) and (max-width: 1080px) {
  .ng-hero-text { flex-basis: 320px !important; }
  .ng-hero-photo { flex-basis: 260px !important; }
  .ng-hero-ctas a:first-child { padding: 15px 22px !important; font-size: 16px !important; }
  .ng-hero-ctas a:last-child { padding: 14px 21px !important; font-size: 16px !important; }
  .ng-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 24px !important; }
  .ng-six { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 32px !important; }
  .ng-methods { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ng-steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
  .ng-ba-col { flex-basis: 200px !important; }  /* + 70 px padding a rámeček (content-box) */
  .ng-quotes, .ng-refs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ng-terms-list li > div:first-child { flex-basis: 150px !important; }  /* datum */
  .ng-terms-list li > div:nth-child(2) { flex-basis: 160px !important; } /* kurz a cena */
  .ng-about-photo { flex-basis: 240px !important; min-width: 200px !important; }
  .ng-about-text { flex-basis: 320px !important; }
  .ng-faq-head { flex-basis: 180px !important; }
  .ng-faq-list { flex-basis: 380px !important; }
  .ng-indiv { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
  .ng-fields { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
  .ng-checks, .ng-info { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ng-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ng-split-head { flex-basis: 200px !important; }
  .ng-split-body { flex-basis: 380px !important; }
}
@container ng (min-width: 900px) and (max-width: 1080px) {
  .ng-six { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ng-methods { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .ng-quotes, .ng-refs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ng-online-media { flex-basis: 360px !important; }
  .ng-online-text { flex-basis: 320px !important; }
  /* Podstránky: formulář a shrnutí vedle sebe, úvod s obrázkem vedle textu */
  .ng-form { flex-basis: 440px !important; }
  .ng-form + * { flex-basis: 300px !important; }
  .ng-intro-text { flex-basis: 380px !important; }
  .ng-intro-media { flex-basis: 340px !important; }
  .ng-intro-box { flex-basis: 320px !important; }
  .ng-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ── Patička ──
 * Sloupce podle návrhu: počítač pět, tablet čtyři (SEL do řádky s projekty), mobil dva.
 * Projekty bez nadpisu v jedné řádce pod sloupci (Libor 8. 10.). */
.ng-foot-c{display:block}

/* Menší počítač: pět sloupců v jednom řádku, SEL se nezalomí pod ostatní */
@container ng (1080px < width <= 1260px) {
  .ng-foot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 40px 32px !important; }
}

@container ng (max-width: 1080px) {
  .ng-foot-in { padding-top: 48px !important; }
  .ng-foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 32px 24px !important; }
  .ng-foot-proj { grid-column: 1 / 4 !important; grid-row: 2; align-self: center; }
  .ng-foot-sel { grid-column: 4; grid-row: 2; justify-self: end; }
  .ng-foot-sel a { margin-top: 10px !important; }
  .ng-foot-sel img { height: 44px !important; }
  .ng-foot-legal { margin-top: 36px !important; }
}

/* ── Mobil ── */
/* Patička na mobilu */
@container ng (max-width: 719.98px) {
  /* Logo s kontaktem přes celou šířku, Kurz vlevo, Individuální práce a Informace vpravo */
  .ng-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 24px !important; }
  .ng-foot-brand { grid-column: 1 / -1; grid-row: 1; }
  .ng-foot-kurz { grid-column: 1; grid-row: 2 / 4; }
  .ng-foot-indiv { grid-column: 2; grid-row: 2; }
  .ng-foot-info { grid-column: 2; grid-row: 3; }
  .ng-foot-proj { grid-column: 1 / -1 !important; grid-row: 4; }
  .ng-foot-sel { grid-column: 1 / -1; grid-row: 5; justify-self: start; }
}
@container ng (max-width: 719.98px) {
  .ng-pas { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "intro" "list" "quote" !important; }

  /* Menu za hamburgerem: logo a hamburger v řádku, rozbalené menu pod nimi */
  .ng-headright { display: contents !important; }
  .ng-nav, .ng-navcta { display: none !important; }
  .ng-burger { display: inline-flex !important; order: 1; }
  .ng-head.is-open .ng-nav {
    display: flex !important; order: 2; flex: 1 1 100%; flex-direction: column; align-items: stretch;
    gap: 0 !important; font-size: 18px; border-top: 1px solid rgba(255,249,230,0.14);
  }
  .ng-head.is-open .ng-nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,249,230,0.14); }
  .ng-head.is-open .ng-navcta {
    display: flex !important; order: 3; flex: 1 1 100%; justify-content: center;
    padding: 16px 20px !important; font-size: 17px;
  }
}