/* ==========================================================================
   Base — reset, typography, page scaffolding
   --------------------------------------------------------------------------
   Loaded second, straight after tokens.css. Everything here is either an
   element selector or one of the four layout primitives every page uses
   (.wrap, .section, .section-head, .grid), so it has to come before any
   file that expects to override it.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* For the jump links: landing somewhere without having seen the page move
     is disorienting, and the point of those links is to show that the page
     continues. The prefers-reduced-motion block below turns it back off. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  /* Long unbroken strings, e-mail addresses above all, must wrap rather
     than run out of their column and over the next one. The footer and the
     contact cards are narrow enough for
     l.klestilova@kvalitnipodzimzivota.cz to overflow on its own. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  margin: 0 0 .5em;
  font-weight: 800;
  letter-spacing: -.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); text-transform: uppercase; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  /* anywhere, not break-word: an e-mail or URL has no spaces to break at,
     and it must still fit a 13rem grid column. */
  overflow-wrap: anywhere;
}
a:hover { text-decoration-color: var(--gold-dark); }

img { max-width: 100%; height: auto; display: block; }

/* Visible focus is non-negotiable for keyboard and low-vision users. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: .75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.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;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* The designer's signature: an uppercase heading with a thin gold rule
   running to the right edge of the container. */
.section-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.section-head h1,
.section-head h2 { margin: 0; white-space: nowrap; }
/* A page's own title is an h1, for search engines and for anyone moving
   through the page by heading. It is set exactly like the section headings
   around it: the design has one heading style here, and the markup fix
   should not be visible. */
.section-head h1 { font-size: var(--fs-h2); text-transform: uppercase; }
.section-head::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--gold-rule);
}

.grid { display: grid; gap: 1.5rem; }
/* Without this a grid item will not shrink below its widest unbreakable
   content, which is how the footer e-mail pushed into its neighbour. */
.grid > * { min-width: 0; }
/* auto-fit on grid-2 and grid-3, auto-fill on grid-4, and the difference
   only ever shows when a row is not full: auto-fit collapses the empty
   tracks and hands the whole row to the items that exist, auto-fill keeps
   the tracks and leaves the gap.

   Which of those is right depends on what the grid holds, so it is set per
   class rather than site-wide:

   grid-2 is a pair of hand-written prose columns and grid-3 is mostly
   people and articles. Both want the stretch. Seven of the eleven grid-3
   blocks on /kontakty/ hold a single person, because most departments are
   one person, and a lone .person card pinned to a third of the width sits
   marooned at the left with its e-mail wrapped mid-domain.

   grid-4 is tiles, and there the stretch is actively wrong: /obchod/ with
   one product in a category rendered a 961px tile with a 959px-tall square
   photo, a screenful of white. .logo-wall has used auto-fill all along for
   the same reason. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

/* ==========================================================================
   Responsive — the global half
   --------------------------------------------------------------------------
   Each file now carries its own media queries next to the rules they bend.
   What is left here is what belongs to no single component: the type scale
   and the section heading, plus the two whole-document queries.
   ========================================================================== */

@media (max-width: 900px) {
  :root { --fs-h1: 2.125rem; --fs-h2: 1.625rem; }

  .section-head { flex-wrap: wrap; }
  .section-head h1,
  .section-head h2 { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
}