/*!
 * catalog.css — the one design system every emitted page shares.
 *
 * Every value here is transcribed from the reviewed prototype
 * (`prototype/catalog-mockup.html`, published for review as the Hřiště Hrou Export
 * Catalogue artifact), which in turn sampled its palette and type off hristehrou.cz.
 * The prototype is authored in Tailwind; this file is the same design expressed as plain
 * CSS, because the bundle carries no build step and must open from `file://` at a booth
 * with no network (`AC-12`, `AC-22`).
 *
 * Why one shared file rather than a <style> block per page: the bundle emits 693 detail
 * pages and ~50 category pages. Inlining ~8 KB of chrome into each would add ~6 MB to a
 * bundle that has to survive booth wifi, and would make the three page emitters three
 * independent copies of one design that then drift. A rep browsing the catalogue fetches
 * this once.
 *
 * Referenced as `static/catalog.css` (relative) from the bundle-root landing page, so the
 * landing still works opened directly as a local file, and as `/static/catalog.css`
 * (absolute) from `/product/<code>/` and `/category/<slug>/`, which are nested and already
 * reference `/assets/...` absolutely for the same reason.
 *
 * Page-specific layout (the landing's tile-grid tracks, the detail page's two-column
 * split) stays in that page's own <style>. This file carries only what more than one
 * surface uses.
 *
 * Deliberately single-theme: this is a brand surface shown on a stand and on a customer's
 * laptop, and it must present the Hřiště Hrou palette identically to everyone. Every
 * colour is painted; nothing inherits from the viewer's theme.
 */

/* ---------------------------------------------------------------------------------------
 * Tokens. Sampled from hristehrou.cz via the prototype - do not "tidy" these to round hex
 * values, they are the brand's own.
 * ------------------------------------------------------------------------------------ */
:root{
  --ink:#232e31; --ink-soft:#5c666a; --ink-faint:#929292;
  --blue:#5a6e9e; --blue-deep:#41527a; --blue-wash:#eceff5;
  --red:#e6302d; --sage:#7d9471; --sage-wash:#eef2ea;
  --paper:#f2f2f2; --white:#ffffff; --hair:#dfe3e8;
  --font:"Alwyn New",Roboto,Arial,system-ui,sans-serif;
}

/* Alwyn New is the face hristehrou.cz serves, and it ships in the bundle (assets/brand/) -
 * no CDN, no Google Fonts request, so the page renders in the right typeface on a stand
 * with no uplink. All four weights the design uses are declared; a missing weight would
 * otherwise be synthesised by the browser and read as a different font. */
@font-face{font-family:"Alwyn New";src:url("/assets/brand/alwynnew-th.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Alwyn New";src:url("/assets/brand/alwynnew-rg.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alwyn New";src:url("/assets/brand/alwynnew-md.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Alwyn New";src:url("/assets/brand/alwynnew-bd.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

html{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:.875rem;line-height:1.45;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3{text-wrap:balance}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}
a{color:var(--blue)}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--ink-faint);
  text-transform:uppercase;margin:0}
.muted{color:var(--ink-soft)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------------------------------
 * Shell - the 1400px measure the prototype's header, main and footer all share, so the
 * wordmark, the hero and the footer address line up on one left edge.
 * ------------------------------------------------------------------------------------ */
.shell{max-width:1400px;margin:0 auto;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.shell{padding-left:1.5rem;padding-right:1.5rem}}

/* ---------------------------------------------------------------------------------------
 * Header. Sticky, white, one hairline - the wordmark, an optional search box and the
 * language toggle on a single 4rem row.
 * ------------------------------------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--hair)}
.site-header .shell{display:flex;align-items:center;gap:1rem;height:4rem}
.wordmark{display:block;flex:none;line-height:0}
.wordmark img{height:38px;width:auto;display:block}
@media(max-width:640px){.wordmark img{height:28px}}
.head-search{flex:1 1 auto;max-width:36rem;min-width:0}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:.25rem;font-size:.875rem;flex:none}
.nav-link{color:var(--ink-soft);text-decoration:none;padding:.25rem .5rem}
.nav-link:hover,.nav-link:focus-visible{color:var(--ink);text-decoration:underline}
.lang-toggle{display:flex;align-items:center;gap:.15rem}
.lang-toggle button,.lang-toggle a{background:none;border:0;font:inherit;cursor:pointer;
  padding:.25rem .5rem;color:var(--ink);text-decoration:none}
.lang-toggle .active,.lang-toggle [aria-current]{font-weight:700}
.lang-sep{color:var(--hair)}

/* Small screens: the header search drops to its own row rather than squeezing the
 * wordmark, which is the one element that must never shrink. */
@media(max-width:720px){
  .site-header .shell{flex-wrap:wrap;height:auto;padding-top:.6rem;padding-bottom:.6rem}
  .head-search{order:3;flex-basis:100%;max-width:none}
}

/* ---------------------------------------------------------------------------------------
 * Search field. Square, 2px ink border - the loudest element on the landing page, because
 * "type what you need in English" is the whole pitch.
 * ------------------------------------------------------------------------------------ */
.search-field{position:relative}
.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  width:1.25rem;height:1.25rem;color:var(--ink-faint);pointer-events:none}
.field{font-family:inherit;font-size:1.05rem;line-height:1.2;border:2px solid var(--ink);
  background:#fff;width:100%;padding:1.05rem 1.1rem 1.05rem 3.1rem;color:var(--ink);
  border-radius:0;-webkit-appearance:none;appearance:none}
.field::placeholder{color:var(--ink-faint);opacity:1}
.field::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-wash)}
.field-sm{padding:.6rem .8rem .6rem 2.5rem;font-size:.95rem;border-width:1.5px}
.field-plain{padding-left:.75rem}
.search-field--sm .search-icon{left:.75rem;width:1rem;height:1rem}

/* ---------------------------------------------------------------------------------------
 * Chips - the worked-example queries under the hero, and the active-filter pills on a
 * category page. Square, hairline, quiet until hovered.
 * ------------------------------------------------------------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chip{border:1px solid var(--hair);background:#fff;padding:.32rem .7rem;font:inherit;
  font-size:.85rem;line-height:1.35;color:var(--ink-soft);border-radius:0;cursor:pointer;
  text-decoration:none;display:inline-block;
  transition:background .12s,border-color .12s,color .12s}
.chip:hover,.chip:focus-visible{border-color:var(--blue);color:var(--blue)}

/* ---------------------------------------------------------------------------------------
 * The catalogue spread. Cells divided by hairlines on one shared field, rather than a grid
 * of individually shadowed cards - this is the single strongest visual signature of the
 * prototype and the reason the page reads as a printed catalogue rather than a web store.
 * ------------------------------------------------------------------------------------ */
.spread{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.plate{background:var(--white);position:relative;min-width:0;display:flex;
  flex-direction:column;text-align:left;color:inherit;text-decoration:none;font:inherit}
a.plate:hover .plate-photo img,a.plate:focus-visible .plate-photo img{transform:scale(1.04)}
.plate-photo{aspect-ratio:4/3;background:#fff;padding:.75rem;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.plate-photo img{max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .2s}
.plate-photo--tall{aspect-ratio:5/4}
.plate-photo-placeholder{font-size:1.9rem;color:var(--ink-faint)}
/* `display:block` spelled out because search.js builds these out of <span>s: a result card
   is an <a> and an <a> may not contain a <div>, so the plate body is phrasing markup that
   has to be told to lay out as blocks. */
.plate-body{display:block;padding:.25rem .875rem .875rem}
.plate-name{display:block;font-weight:600;line-height:1.15;font-size:.98rem}
.plate-alt{display:block;font-size:.82rem;margin-top:.125rem;color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plate-meta{margin-top:.375rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.plate-line{font-size:.7rem;font-weight:500;color:var(--blue);font-variant-numeric:tabular-nums}
.plate-age{font-size:.72rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------------------------
 * Facets - a category page's left rail. A row is either a link (navigating to another
 * category) or a toggle button (filtering the products already on this page); both wear
 * the same box so the rail reads as one control set.
 * ------------------------------------------------------------------------------------ */
.facet-block{margin-bottom:1.5rem}
.facet-block h3{margin:0 0 .5rem}
.facet{display:flex;align-items:baseline;gap:.55rem;width:100%;text-align:left;
  padding:.3rem 0;font:inherit;font-size:.92rem;color:var(--ink-soft);background:none;
  border:0;cursor:pointer;text-decoration:none}
.facet:hover{color:var(--blue)}
.facet[aria-pressed="true"],.facet[aria-current]{color:var(--ink);font-weight:700}
.facet .box{width:.85rem;height:.85rem;border:1.5px solid var(--hair);flex:none;
  position:relative;top:.12rem;background:#fff}
.facet[aria-pressed="true"] .box,.facet[aria-current] .box{background:var(--blue);
  border-color:var(--blue)}
.facet .facet-count{margin-left:auto;font-size:.8rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;padding-left:.5rem}
.facet-sub{padding-left:1.4rem;font-size:.85rem}

/* ---------------------------------------------------------------------------------------
 * Buttons.
 * ------------------------------------------------------------------------------------ */
.btn{font-family:inherit;font-size:.875rem;font-weight:700;padding:.85rem 1.4rem;
  border:0;border-radius:0;cursor:pointer;display:inline-block;text-decoration:none;
  text-align:center;transition:background .14s,color .14s,border-color .14s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--blue-deep);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--hair)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--ink)}
.link-quiet{font-size:.875rem;color:var(--ink-soft);text-decoration:underline;
  background:none;border:0;font-family:inherit;cursor:pointer;padding:0}
.link-quiet:hover{color:var(--ink)}

/* ---------------------------------------------------------------------------------------
 * Spec table - the detail page's dimensions/materials block.
 * ------------------------------------------------------------------------------------ */
.spec{margin:2rem 0 0;border-bottom:1px solid var(--hair)}
.spec dt{font-size:.78rem;letter-spacing:.06em;font-weight:700;color:var(--ink-faint);margin:0}
.spec dd{margin:0;font-size:.95rem;font-weight:500;font-variant-numeric:tabular-nums}
.spec dd ul{margin:0;padding:0;list-style:none;font-weight:400}
.spec dd li{padding:.05rem 0}
.spec-row{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.7rem 0;
  border-top:1px solid var(--hair)}
@media(max-width:640px){.spec-row{grid-template-columns:1fr;gap:.15rem}}
.spec-unavailable{color:var(--ink-soft);font-size:.92rem;margin:1.5rem 0 0}

/* ---------------------------------------------------------------------------------------
 * Downloads. Kept as the app's own multi-file list (a product can carry a CZ sheet, an EN
 * sheet and several DWGs) rather than the prototype's single "Download spec sheet" button -
 * the list is real information the prototype had no data for. Restyled to this system.
 * ------------------------------------------------------------------------------------ */
.files{margin-top:2rem}
.files h2{margin:0 0 .6rem}
.files ul{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--hair)}
.file-entry{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;
  border-top:1px solid var(--hair);font-size:.9rem}
.file-entry__type{font-size:.66rem;font-weight:700;letter-spacing:.04em;color:var(--white);
  background:var(--blue);padding:.18rem .42rem;flex:none;font-variant-numeric:tabular-nums}
.file-entry__type--dwg{background:var(--sage)}
.file-entry__name{flex:1;color:var(--ink);min-width:0}
.file-entry__link{font-weight:700;text-decoration:none;color:var(--blue);flex:none;
  padding:0 .2rem}
.file-entry__link:hover{color:var(--blue-deep)}
.file-entry__nolink{color:var(--ink-faint);font-size:.78rem;flex:none}

/* ---------------------------------------------------------------------------------------
 * Directory pages - the References and Ke stažení surfaces (B9/B10, APP-4). Shared here
 * rather than duplicated into `templates/references.html` and `templates/downloads.html`
 * for the reason at the top of this file: two surfaces wearing one design, and two copies
 * of it are two things that drift. Each page's own template still carries what only it has
 * - the media grid and lightbox on one, the file list's section layout on the other.
 *
 * `.back-link` is here because four surfaces now use it. `templates/detail.html` and
 * `build/pages/category.py`'s `_STYLE` still carry their own identical copies; those are
 * now redundant, and removing them belongs to whoever next edits those files rather than
 * to the item that noticed.
 * ------------------------------------------------------------------------------------ */
/* padding-top only, never the `padding` shorthand: these elements are also `.shell`s, and
 * the shorthand resets the shell's own left/right gutter to zero - which once put a page
 * title hard against the screen edge. */
.dir-page{padding-top:1.5rem;padding-bottom:3rem}
.back-link{display:inline-block;font-size:.875rem;color:var(--ink-soft);
  text-decoration:none;margin-bottom:1.25rem}
.back-link:hover{text-decoration:underline;color:var(--ink)}

/* The two directory pages are siblings, so each carries the pair and marks itself current -
 * a visitor who reached References from the navbar can get to Ke stažení without going home
 * first. A hairline underline rather than a pill: the sticky header above already owns the
 * site's one piece of chrome, and a second boxed control competes with it. */
.dir-nav{display:flex;gap:1.5rem;border-bottom:1px solid var(--hair);margin-bottom:2rem}
.dir-nav a{font-size:.95rem;font-weight:500;color:var(--ink-soft);text-decoration:none;
  padding:0 0 .6rem;margin-bottom:-1px;border-bottom:2px solid transparent}
.dir-nav a:hover{color:var(--ink)}
.dir-nav a[aria-current]{color:var(--ink);font-weight:700;border-bottom-color:var(--red)}

.dir-head{max-width:52rem;margin-bottom:2rem}
.dir-head h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.02;margin:.35rem 0 0}
.dir-head > p{color:var(--ink-soft);line-height:1.6;margin:1rem 0 0;max-width:56ch;
  font-size:1.05rem}
/* The counts sit under the lede rather than inside it, so the sentence stays a sentence a
 * translator can rearrange - and so the numbers line up as numbers. */
.dir-counts{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:.9rem 0 0;
  font-size:.9rem;color:var(--ink-soft)}
.dir-counts .num{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dir-counts .sep{color:var(--hair)}

/* ---------------------------------------------------------------------------------------
 * Footer.
 * ------------------------------------------------------------------------------------ */
.site-footer{border-top:1px solid var(--hair);margin-top:4rem;background:#fff}
.site-footer .shell{padding-top:2.5rem;padding-bottom:2.5rem;font-size:.875rem;
  color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;
  justify-content:space-between}
.build-id{font-size:.72rem;color:var(--ink-faint)}

/* ---------------------------------------------------------------------------------------
 * The lead gate. Shown once, on the first product a visitor opens - the prototype's
 * "Can we get in touch?" dialog.
 * ------------------------------------------------------------------------------------ */
dialog.gate{padding:0;background:transparent;border:0;max-width:32rem;width:92vw;
  color:var(--ink)}
dialog.gate::backdrop{background:rgba(35,46,49,.55)}
.gate-form{background:#fff;border:2px solid var(--blue);padding:1.75rem;text-align:left}
@media(min-width:640px){.gate-form{padding:2.25rem}}
.gate-form h2{font-size:1.7rem;font-weight:700;letter-spacing:-.025em;line-height:1.15;
  margin:0}
.gate-lede{margin:.5rem 0 0;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
.gate-fields{margin-top:1.5rem;display:grid;gap:.75rem}
.gate-fields label{display:grid;gap:.25rem}
.gate-consent{display:flex;gap:.625rem;align-items:flex-start;margin-top:.25rem;
  font-size:.85rem;line-height:1.35;color:var(--ink-soft)}
.gate-consent input{margin-top:.2rem;width:1rem;height:1rem;flex:none;accent-color:var(--blue)}
.gate-actions{margin-top:1.5rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}

/* ---------------------------------------------------------------------------------------
 * Motion. One entrance, and only for visitors who have not asked for less.
 * ------------------------------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}