/* ==========================================================================
   Sjednocená patička — Plošiny Blažek / Přeříznu cokoliv
   --------------------------------------------------------------------------
   Stejný layout, typografie i rozestupy na obou webech. Jediný rozdíl mezi
   kopiemi tohoto souboru je blok "AKCENT WEBU" hned pod tímhle komentářem.

   Načítá se jako POSLEDNÍ stylesheet, takže přebíjí starší pravidla patičky
   ze základních stylů i z mobile-hardening (odtud ty micro-velikosti okolo
   0,5 rem, kvůli kterým byla patička na mobilu nečitelná).

   Počítadlo návštěv se tady jenom styluje — třídy .site-footer-visit*,
   id #visit-count ani skripty, které je plní, se nemění.

   Rozvržení:
     [ firma            ]   [ kontakty ]
     ------------------------------------  (vlásková linka)
     [ návštěvnost      ]   [ podpis UNDO ]
   Na mobilu se vše skládá pod sebe a centruje.
   ========================================================================== */

.site-footer {
  /* --- AKCENT WEBU (jediný rozdíl mezi kopiemi souboru) ------------------ */
  --sf-accent: #f6be35;              /* plošiny: jantarová */
  /* ---------------------------------------------------------------------- */
  --sf-text: #fcf9f8;
  --sf-muted: rgba(252, 249, 248, 0.62);
  --sf-faint: rgba(252, 249, 248, 0.42);
  --sf-hairline: rgba(252, 249, 248, 0.12);
  --sf-gutter: clamp(1.15rem, 4vw, 2.5rem);
}

/* --- kontejner ----------------------------------------------------------- */

.site-footer .site-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* starší styly tu měly pevné řádky (44px), po kterých se obsah překrýval */
  grid-template-rows: auto;
  grid-template-areas:
    "brand links"
    "rule  rule"
    "meta  sign";
  align-items: center;
  gap: 1rem 2rem;
  width: min(80rem, 100%);
  max-width: 80rem;
  min-height: 0;
  margin: 0 auto;
  padding: 2rem var(--sf-gutter) 1.25rem;
}

/* Dělicí linka je vlastní řádek mřížky přes obě buňky — jedna linka přes
   celou šířku, nezávislá na tom, jak vysoký je obsah pod ní. */
.site-footer .site-footer-inner::before {
  content: "";
  grid-area: rule;
  justify-self: stretch;
  width: 100%;
  height: 1px;
  background: var(--sf-hairline);
}

.site-footer .site-footer-company {
  grid-area: brand;
  min-width: 0;
  max-width: none;
}

.site-footer .site-footer-contact {
  grid-area: links;
}

.site-footer .site-footer-middle {
  grid-area: meta;
}

.site-footer .site-footer-undo {
  grid-area: sign;
}

/* --- firma --------------------------------------------------------------- */

.site-footer .site-footer-company-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin: 0;
  color: var(--sf-muted);
  font-family: "Work Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.45;
}

.site-footer .site-footer-company-strong {
  color: var(--sf-text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  /* Váhy volíme tak, aby existovaly na obou webech: Work Sans 400/500/700,
     Space Grotesk 400/700. Jinak jeden web dosadí nejbližší řez a patičky
     se rozejdou v tučnosti. */
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

.site-footer .site-footer-company-meta {
  display: block;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: normal;
}

/* --- kontakty ------------------------------------------------------------ */

.site-footer .site-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}

.site-footer .site-footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-block-size: 0;
  max-width: 100%;
  color: var(--sf-text);
  font-family: "Work Sans", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer .site-footer-contact-link:hover,
.site-footer .site-footer-contact-link:focus-visible {
  color: var(--sf-accent);
}

.site-footer .site-footer-contact-link .material-symbols-outlined {
  flex: none;
  color: var(--sf-accent);
  font-size: 1.05rem;
  font-variation-settings: "FILL" 1;
}

/* --- spodní pás: návštěvnost + podpis ------------------------------------ */

.site-footer .site-footer-middle,
.site-footer .site-footer-undo {
  min-height: 0;
  padding: 0;
  border: 0;
}

.site-footer .site-footer-middle {
  display: flex;
  /* Plošiny to měly ve sloupci a počítadlo pak sedělo na střed */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem 1rem;
  width: 100%;
}

.site-footer .site-footer-visit {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.site-footer .site-footer-visit-inner {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  color: var(--sf-faint);
  font-family: "Work Sans", sans-serif;
}

.site-footer .site-footer-visit-icon {
  color: var(--sf-accent);
  font-size: 0.95rem;
  font-variation-settings: "FILL" 0, "wght" 500;
  opacity: 0.75;
}

.site-footer .site-footer-visit-label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.site-footer .site-footer-visit-value {
  margin-left: 0.1rem;
  color: var(--sf-accent);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.site-footer .site-footer-visit-value--muted {
  color: rgba(252, 249, 248, 0.35);
  font-weight: 600;
}

/* zbytky staršího uspořádání, které by se do nového pásu pletly */
.site-footer .site-footer-utility-link,
.site-footer .site-footer-legal {
  padding: 0;
  border: 0;
}

/* --- podpis UNDO Collective ---------------------------------------------- */

.site-footer .site-footer-undo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.site-footer .site-footer-undo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--sf-faint);
  font-family: "Work Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.45;
  text-align: right;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.site-footer .site-footer-undo-link:hover,
.site-footer .site-footer-undo-link:focus-visible {
  color: var(--sf-text);
}

/* Kostka je značkový útvar: mřížka 3×3, vždycky čtverec a vždycky barevná.
   Stojí vpravo od textu. Rozměr drží data-strana v undo-signature (18px =
   tři buňky po šesti); tohle je jen záloha, než skript kostku přestaví.
   Rozestup dlaždic při najetí obstarává mosaic-hover.js z brand packu,
   proto tu kostka nemá vlastní transform — pral by se s ním. */
.site-footer .site-footer-undo-cube {
  display: block;
  flex: none;
  align-self: center;
  /* k mezeře mřížky (0,4rem) ještě kousek navíc, ať kostka nelepí na tečku */
  margin-left: 0.2rem;
  /* 0.68rem písma → 12px, tedy nejbližší násobek tří. Skript si stranu
     dopočítá z reálné velikosti fontu a přepíše ji inline; tohle platí,
     než se stihne spustit. */
  width: 12px;
  height: 12px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.site-footer .site-footer-undo-cube svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site-footer .site-footer-undo-link:hover .site-footer-undo-cube,
.site-footer .site-footer-undo-link:focus-visible .site-footer-undo-cube {
  opacity: 1;
}

/* Jeden řádek, ne dva — text je pak stejně vysoký jako kostka vedle něj.
   Na úzkém displeji se smí zalomit, ale drží zarovnání ke kostce. */
.site-footer .site-footer-undo-text {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 0.4rem;
}

.site-footer .site-footer-undo-sep {
  color: rgba(252, 249, 248, 0.22);
}

/* Copyright se odlišuje jen barvou — jiná velikost na jednom řádku vypadá
   jako překlep. */
.site-footer .site-footer-undo-copy {
  color: rgba(252, 249, 248, 0.3);
  letter-spacing: 0.03em;
}

.site-footer .site-footer-undo-link:hover .site-footer-undo-copy,
.site-footer .site-footer-undo-link:focus-visible .site-footer-undo-copy {
  color: var(--sf-muted);
}

/* Podstránky počítadlo nemají — aby spodní pás nebyl z poloviny prázdný,
   podpis se v tom případě postaví na střed. Prohlížeč bez :has() ho nechá
   vpravo, což je pořád v pořádku. */
.site-footer .site-footer-inner:not(:has(.site-footer-middle)) .site-footer-undo {
  grid-column: 1 / -1;
  justify-content: center;
}

/* --- tablet -------------------------------------------------------------- */

@media (max-width: 900px) {
  .site-footer .site-footer-inner {
    gap: 1rem 1.25rem;
    padding: 1.7rem var(--sf-gutter) 1.15rem;
  }

  .site-footer .site-footer-company-strong {
    font-size: 0.9rem;
  }

  .site-footer .site-footer-contact-link {
    font-size: 0.82rem;
  }
}

/* --- mobil: jeden sloupec, všechno na střed ------------------------------ */

@media (max-width: 767px) {
  .site-footer .site-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "brand"
      "links"
      "rule"
      "meta"
      "sign";
    justify-items: center;
    gap: 0.9rem;
    padding: 1.6rem var(--sf-gutter) 1.2rem;
    text-align: center;
  }

  .site-footer .site-footer-company,
  .site-footer .site-footer-contact,
  .site-footer .site-footer-middle,
  .site-footer .site-footer-undo {
    width: 100%;
    justify-self: center;
  }

  .site-footer .site-footer-company-text {
    align-items: center;
    gap: 0.25rem;
    font-size: 0.74rem;
  }

  .site-footer .site-footer-company-strong {
    font-size: 0.88rem;
  }

  .site-footer .site-footer-company-meta {
    font-size: 0.7rem;
  }

  .site-footer .site-footer-contact {
    align-items: center;
    gap: 0.15rem;
  }

  .site-footer .site-footer-contact-link {
    justify-content: center;
    gap: 0.5rem;
    min-block-size: 44px;
    font-size: 0.84rem;
  }

  .site-footer .site-footer-middle,
  .site-footer .site-footer-undo {
    justify-content: center;
  }

  .site-footer .site-footer-visit-inner {
    justify-content: center;
  }

  .site-footer .site-footer-undo-link {
    gap: 0.5rem;
    /* o kousek menší, ať se celý řádek vejde i na úzký displej a nelepí
       se na okraje */
    font-size: 0.62rem;
    /* text lícuje ke kostce, ta stojí vpravo */
    text-align: right;
  }

}

@media (prefers-reduced-motion: reduce) {
  /* Rozestup dlaždic si vypíná mosaic-hover.js sám. */
  .site-footer .site-footer-undo-link,
  .site-footer .site-footer-undo-cube,
  .site-footer .site-footer-contact-link {
    transition: none;
  }
}