/* ==========================================================================
   Hrdinové Zlínského kraje — 1:1 static rebuild
   Design tokens extracted verbatim from the original WordPress/Bricks
   database (wp_options: bricks_color_palette, bricks_theme_styles,
   bricks_breakpoints, bricks_global_classes). Not guessed from screenshots.
   ========================================================================== */

@font-face {
  font-family: 'Crimson Pro';
  src: url('../fonts/CrimsonPro-VariableFont_wght.woff2') format('woff2-variations'),
       url('../fonts/CrimsonPro-VariableFont_wght.woff2') format('woff2');
  /* Pinned to 400, exactly as the original's @font-face is: the weight axis is
     then only reachable through font-variation-settings (which Bricks uses for
     headings/buttons), while a plain font-weight:700 — <strong>, <b> — falls back
     to synthetic bold at the regular's metrics. Declaring the real 200-900 range
     here makes every <strong> render wider than the live site. */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crimson Pro';
  src: url('../fonts/CrimsonPro-Italic-VariableFont_wght.woff2') format('woff2-variations'),
       url('../fonts/CrimsonPro-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-primary: #252525;    /* Primary */
  --color-body: #404040;       /* Body */
  --color-grey: #808080;       /* Grey */
  --color-light-grey: #b2b2b2; /* Light Grey */
  --color-bg: #f6f3ee;         /* Background */
  --color-hover: #8e8157;      /* Hover */
  --font-body: 'Crimson Pro', serif;
}

/* 1rem = 10px, matching the original theme's rem scale */
html { font-size: 62.5%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.7; /* Bricks core default (frontend.min.css) — theme_style overrides size/color/family but not this */
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 2.4rem;
  line-height: 1.25em;
  font-weight: 400;
  font-variation-settings: 'wght' 700;
  margin: 0 0 0.3rem;
}

h1 { font-size: 4rem; text-align: center; font-variation-settings: 'wght' 900; margin: 0; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
.pull-quote > p:last-of-type { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-hover); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--color-bg); padding: 0.5rem 1rem; }

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

.container {
  width: 100%;
  max-width: 116rem;
  margin: 0 auto;
  padding: 0 3rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 2.2rem;
  line-height: 1em;
  text-align: center;
  font-variation-settings: 'wght' 700;
  color: var(--color-primary);
  background: transparent;
  border: none;
  padding: 0;
  transition: color 0.3s, background-color 0.3s;
}
.btn:hover { color: var(--color-hover); }
.btn--filled {
  color: var(--color-bg);
  background: var(--color-primary);
  padding: 1.1rem 2.2rem;
}
.btn--filled:hover { background: var(--color-hover); color: var(--color-bg); }

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  border-bottom: 3px solid var(--color-primary);
  transition: border-color 0.3s;
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 0;
  padding-bottom: 0;
}
.site-header__logo {
  font-size: 3.2rem;
  line-height: 1em;
  font-variation-settings: 'wght' 900;
  color: var(--color-primary);
}
.site-header__logo:hover { color: var(--color-primary); }
.site-header:has(.site-nav a:hover) { border-color: var(--color-hover); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-left: 3rem;
  margin-bottom: 0.1rem;
}
.site-nav a {
  display: flex;
  font-size: 2.2rem;
  line-height: 1.25em;
  color: var(--color-primary);
  transition: color 0.3s;
}
.site-nav a:hover, .site-nav a.is-active { color: var(--color-hover); }

/* ---------- Mobile menu (≤478px, the original's last breakpoint) ---------- */
.nav-toggle {
  display: none;
  position: relative;
  flex: none; /* the logo shrinks to fit next to it, never the burger itself */
  width: 2rem;
  height: 1.6rem;
  margin-bottom: 0.2rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-primary);
}
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 2rem;
  height: 2px;
  background: currentColor;
  transition: top 0.2s, opacity 0.2s, transform 0.2s, background-color 0.2s;
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7px; }
.nav-toggle__bar:nth-child(3) { top: 14px; }
/* Open: the outer bars cross into an X and everything turns light against the panel. */
.nav-toggle[aria-expanded="true"] { color: var(--color-bg); z-index: 1000; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 8px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 8px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 23.4rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
  color: #fff;
}
.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(38, 38, 38, 0.95);
}
.mobile-menu ul { position: relative; margin: 0; padding: 0; list-style: none; }
.mobile-menu a {
  display: block;
  padding: 0 3rem;
  font-size: 2.4rem;
  line-height: 6rem;
  color: #fff;
}
.mobile-menu a:hover { color: var(--color-hover); }
.mobile-menu.is-open { visibility: visible; opacity: 1; }
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.25);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
}
.mobile-menu-overlay.is-open { visibility: visible; opacity: 1; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 3px solid var(--color-primary);
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem 4rem;
  padding: 1rem 3rem 3rem;
}
.footer-copy {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.footer-copy__text { text-transform: uppercase; }
.footer-copy a { display: inline-flex; }
/* Footer's Instagram text is its own element in the source (not the shared
   "amrvnw" global class used on the homepage hero) and is regular weight,
   not bold. */
.footer-instagram .instagram-link__text { font-variation-settings: 'wght' 400; }

/* ---------- Instagram link (site-wide reusable) ---------- */
.instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-primary);
  font-size: 2.2rem;
  line-height: 1em;
  position: relative;
  transition: color 0.3s, fill 0.3s;
}
.instagram-link:hover { color: var(--color-hover); fill: var(--color-hover); }
.instagram-link:hover .instagram-link__text { transform: translateX(-0.3rem); }
.instagram-link__text {
  font-size: 2.2rem;
  font-variation-settings: 'wght' 700;
  transition: transform 0.3s;
}
.instagram-link__icon { width: 1.8rem; height: auto; order: -1; }

/* ---------- Hero (homepage) ---------- */
.hero {
  padding: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* The original's hero container is a full-viewport grid with its cells centred.
     On desktop the portrait columns fill that height themselves; below 767px they
     are hidden, and without the min-height the banner would collapse to its own
     height and sit at the top of the page instead of the middle. */
  min-height: 100svh;
  align-items: center;
  width: 100%;
}
.hero-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 3rem;
  padding: 3rem;
  min-width: 36.1rem;
}
.hero-banner h1 {
  font-size: clamp(4.8rem, 1.364vw + 4.364rem, 6rem);
  text-align: center;
}
.hero-divider {
  width: 100%;
  margin: 0;
  height: 3px;
  background: var(--color-primary);
  border: none;
}
.hero-excerpt {
  font-size: 2.4rem;
  text-align: center;
  margin: 0;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2rem;
}
.hero-actions .btn--filled { width: 30rem; }
.hero-actions__secondary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 4rem;
  row-gap: 2rem;
}

.headshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* 3 equal-height rows filling the column — no leftover gap */
  overflow: hidden;
  height: 100svh;
}
/* Bricks source has order:-1 on this specific grid — puts the banner column
   visually in the middle even though it's second in the DOM. */
#headshot-col-a { order: -1; }
.headshot {
  display: block;
  overflow: hidden;
  height: 100%;
}
.headshot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
  transition: 0.6s;
}
.headshot:hover img { transform: scale(1.1); transform-origin: top center; }

/* ---------- Generic page header (O projektu, Seznam, detail) ---------- */
.page {
  margin-top: 6rem;
  margin-bottom: 10rem;
}
.page .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5rem;
}
/* Seznam osobností's container has no row-gap in the original (unlike
   o-projektu/detail, which do use 50px) — each element carries its own
   small top margin instead, so h1/search/filter sit close together. The
   one deliberate gap is right before the grid, separating it from the
   search/filter controls above. */
.page--list .container { row-gap: 0; }
.prose {
  width: 100%;
  max-width: 58ch;
  padding: 0;
}
.prose h2 { text-wrap: balance; }
/* One bio (rudolf-malicek) ends with an empty <h2> the editor left behind. The
   live site gives exactly that heading a 1.2em top margin — no other heading on
   the page has one — and it is real trailing space under the last paragraph. */
.prose h2:empty { margin-top: 1.2em; }
.prose a { color: inherit; transition: color 0.3s; }
.detail-container .prose a { color: var(--color-primary); font-variation-settings: 'wght' 550; }
.prose a:hover { color: var(--color-hover); }
.prose img { margin: 0; height: auto; }
/* WordPress' own image alignment classes, as they compute on the live site. */
.prose img.alignleft { float: left; margin: 0.5em 1em 0.5em 0; }
.prose img.alignright { float: right; margin: 0.5em 0 0.5em 1em; }
.prose img.aligncenter { margin: 0.5em auto; }
/* WordPress' separator block: a hairline rule, not the UA's inset groove. */
.prose hr { margin: 1.8rem 0; border: 0; border-top: 1px solid #dddedf; }
/* Fallback for any blockquote that isn't the quote+attribution pull quote
   below — none exist in the current content, but re-extraction could add one. */
.prose blockquote:not(.pull-quote__text) {
  margin: 3rem 0;
  padding-left: 2rem;
  border-left: 3px solid var(--color-primary);
  font-style: italic;
}
.prose blockquote p { margin: 0; }

/* ---------- Pull quote (Bricks component `oumrvl` on /o-projektu) ----------
   Values taken verbatim from the original's inline element CSS: the block is
   position:relative so the two 40px quote marks can hang 80px outside the
   text column, and they drop back into the flow on mobile. */
.pull-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2rem;
  max-width: 58ch;
  margin: 5rem 0;
}
.pull-quote__mark {
  position: absolute;
  width: 4rem;
  height: auto;
  fill: var(--color-light-grey);
}
.pull-quote__mark--open { top: 0; left: -8rem; }
.pull-quote__mark--close {
  right: -8rem;
  bottom: 5.7rem;
  transform: rotateY(180deg) rotateX(180deg);
}
.pull-quote__text {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 3rem;
  font-style: italic;
  font-variation-settings: 'wght' 300;
  color: var(--color-grey);
  text-align: center;
}
.pull-quote__author {
  font-size: 2.2rem;
  font-variation-settings: 'wght' 700;
  color: var(--color-body);
  text-align: center;
}

/* ---------- Seznam osobností (list) ---------- */
/* The dark background + 2px border live on the *form*; the input sits on top
   of it with its own light background and no border, so the only dark part
   visible is the 60x40 button strip holding the magnifier. Hovering anywhere
   on the form turns that strip gold. Sizes are verbatim from the original
   (`#brxe-uvvjrf` in post-159.min.css + Bricks' .bricks-search-form core). */
.list-search {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 3rem;
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  transition: background-color 0.3s;
}
.list-search:hover { background: var(--color-hover); }
.list-search input {
  font-family: inherit;
  font-size: inherit;
  color: var(--color-body);
  background: var(--color-bg);
  border: none;
  outline: none;
  line-height: 4rem;
  padding: 0 2rem;
  width: auto;
  max-width: 100%;
}
.list-search input::placeholder { color: var(--color-grey); }
.list-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 4rem;
  padding: 0;
  background: transparent;
  border: none;
}
.list-search svg { width: 2rem; height: 4rem; fill: var(--color-bg); }

.list-filter-label {
  color: var(--color-grey);
  margin-top: 3rem;
  display: block;
}
.list-filter-divider {
  width: 47.5rem;
  max-width: 100%;
  height: 2px;
  background: var(--color-primary);
  border: none;
  margin: 0;
}
/* Bricks' isotope filter row: inline-block items with 20px side padding (so
   40px between adjacent labels) and a 30px bottom margin that doubles as the
   gap before the grid — the grid itself only gets 5px of top margin. */
.district-filter {
  width: 100%; /* so text-align actually positions the row (the container is a centering flex column) */
  text-align: center;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.district-filter button {
  display: inline-block;
  text-align: inherit;
  background: none;
  border: none;
  padding: 0 2rem;
  margin-bottom: 3rem;
  font-size: 2.2rem;
  line-height: 1em;
  color: var(--color-primary);
  transition: color 0.3s;
}
.district-filter button:hover { color: var(--color-hover); }
.district-filter button.is-active { color: var(--color-hover); }

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem; /* Bricks --gutter: 30px */
  width: 100%;
  list-style: none;
  padding: 0;
  /* The filter row's own 30px bottom margin does the separating above; the
     30px below mirrors the original's isotope items, which carry a 30px bottom
     margin on the last row too (a CSS grid's gap would not). */
  margin: 0 0 3rem;
}
/* Filter/search transition — the original uses Isotope.js for an animated
   fade+reflow; this is a dependency-free approximation: fade+shrink in place,
   then (via JS, after the transition ends) collapse the grid cell so the
   remaining cards reflow into the freed space. */
.post-card--hidden { opacity: 0; transform: scale(0.85); pointer-events: none; }

/* Card = dark 12px frame around a square portrait, name below it in off-white
   uppercase (permanently visible). Frame goes gold on hover. Matches
   `#brxe-tprdgv .bricks-layout-inner` / `.content-wrapper` on the live site. */
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-primary);
  padding: 1.2rem;
  line-height: 1.6;
  overflow: hidden;
  word-spacing: 0.1rem;
  transition: background-color 0.3s, opacity 0.3s ease, transform 0.3s ease;
}
.post-card:hover,
.post-card:focus-within { background: var(--color-hover); }
.post-card__image { display: block; }
.post-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 0%;
}
.post-card__content {
  margin-top: 1rem;
  text-align: center;
}
/* Font size/weight come from the global h2 (2.4rem, wght 700) — the original
   only overrides colour and text-transform on this field. */
.post-card__content h2 {
  color: var(--color-bg);
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}
.post-card__content a { color: inherit; }
.list-empty { text-align: center; color: var(--color-grey); grid-column: 1 / -1; }

/* ---------- Osobnost detail ---------- */
.detail-container { position: relative; }
.detail-back-link__icon { display: block; width: 1.8rem; height: 1.8rem; }
.detail-back-link {
  position: absolute;
  top: 0;
  left: 3rem;
  padding: 1.1rem 2.2rem;
  font-variation-settings: 'wght' 400;
}
.detail-town { margin: -3rem 0 0; text-align: center; font-size: 2.4rem; line-height: 1em; width: 100%; }
.detail-dates {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  column-gap: 1.5rem;
  margin-top: -3.5rem;
  font-size: 2.4rem;
  line-height: 1em;
}
.detail-dates p { margin: 0; }
.detail-photo {
  width: 100%;
  max-width: 58ch;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 0%;
  border: 12px solid var(--color-primary);
}
.detail-back-btn { margin-top: 0; }

.post-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 3rem;
}
.post-navigation a {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: color 0.3s;
}
.post-navigation a:hover { color: var(--color-hover); }
.post-navigation__arrow { display: block; width: 1.8rem; height: 1.8rem; color: var(--color-primary); }
.post-navigation img {
  flex: none;
  width: 6rem; height: 6rem;
  object-fit: cover;
  border: 3px solid var(--color-primary);
  transition: border-color 0.3s;
}
.post-navigation a:hover img { border-color: var(--color-hover); }
.post-navigation__text { display: block; overflow: hidden; }
.post-navigation__label { display: inline; }
.post-navigation__title { display: block; }
.post-navigation__label { color: var(--color-grey); font-size: 1.8rem; font-weight: 400; }
.post-navigation__title {
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 2.4rem;
  font-variation-settings: 'wght' 400;
  line-height: 1.25em;
}
.post-navigation--next { margin-left: auto; text-align: right; }
.post-navigation--next a { flex-direction: row-reverse; }
.post-navigation--next .post-navigation__text { text-align: right; }

/* ==========================================================================
   Breakpoints — widths taken verbatim from bricks_breakpoints
   ========================================================================== */
@media (max-width: 991px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .headshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .headshot-grid > *:nth-last-child(-n+3) { display: none; }
  .site-header .container { flex-direction: column; align-items: center; row-gap: 0.5rem; }
  .site-nav { margin-left: -3rem; }
  .posts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid > .headshot-grid-col { order: -1; }
  .headshot-grid { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr; height: auto; display: none; }
  .site-footer .container { flex-direction: column; }
  .site-footer .footer-instagram { order: -1; }
  /* Quote marks stop hanging outside the column and rejoin the flow. */
  .pull-quote__mark { position: static; }
  .pull-quote__mark--close { margin-top: 1rem; }
  .list-filter-label { align-self: flex-start; margin-left: 1rem; }
  .list-filter-divider { align-self: flex-start; }
  .district-filter { text-align: left; }
  .district-filter button { padding: 0 1rem; margin-bottom: 1.5rem; }
}

@media (max-width: 478px) {
  .site-header .container {
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 3rem;
    justify-content: space-between;
    align-items: center;
  }
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .posts-grid { grid-template-columns: 1fr; }
  .detail-back-link { display: none; }
  .post-navigation { flex-wrap: wrap; gap: 3rem; }
  .post-navigation > div { width: 100%; }
  .post-navigation--prev a { justify-content: flex-start; }
  .post-navigation--next { text-align: left; }
  .post-navigation--next a { justify-content: flex-end; }
  .post-navigation--next .post-navigation__text { text-align: left; }
}