/* =============================================================================
   bookfest.cz — stránka Kontakty
   Alternativní layout článku bookfest:kontakty
   (templates/bookfest/html/com_content/article/kontakty.php).
   Návrh: Claude Design „BookFest — Kontakty“, schváleno 2026-10-19.

   Jen tokeny z tokens.css. Akcent = město nejbližšího ročníku (.bf-city--
   na .bf-k); štítky území mají vlastní .bf-city-- přímo v obsahu.
   Rozvržení podle šířky hlavního sloupce (container bf-slot), ne okna.
   Zlatá (--bf-gold) jen jako linka, nikdy na text.
   ========================================================================== */

.bf-k { --bf-k-cols: repeat(12, minmax(0, 1fr)); }

/* Odkazy v obsahu — vlasové podtržení, barva textu; akcent jen při najetí. */
.bf-k-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--bf-hair);
  text-underline-offset: .22em;
  text-decoration-color: var(--bf-rule-strong);
  transition: color var(--bf-dur-1) linear, text-decoration-color var(--bf-dur-1) linear;
}
.bf-k-body a:hover,
.bf-k-body a:focus-visible { color: var(--bf-accent-ink); text-decoration-color: var(--bf-accent); }
.bf-k-body .bf-section--dark a { color: var(--bf-dark-text); text-decoration-color: var(--bf-dark-muted); }
.bf-k-body .bf-section--dark a:hover,
.bf-k-body .bf-section--dark a:focus-visible { color: var(--bf-paper-2); text-decoration-color: var(--bf-red-light); }

.bf-k-body ul { list-style: none; margin: 0; padding: 0; }
.bf-k-body :is(p, li) { hyphens: manual; }

/* ---------- Hlavička: řádek nad nadpisem, H1, perex ---------------------- */
.bf-k-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bf-sp-3);
  padding-block: var(--bf-sp-3) var(--bf-sp-6);
}
.bf-k-hero__intro { display: contents; }
.bf-k-hero__intro > .bf-eyebrow { grid-row: 1; }
.bf-k-hero__title {
  grid-row: 2;
  font-size: clamp(4.5rem, 21cqi, 13.25rem);
  line-height: var(--bf-lh-display);
}
.bf-k-hero__intro > * { margin: 0; max-inline-size: none; }
.bf-k-hero .bf-lead { font-style: italic; max-inline-size: 32rem; }

/* Tmavé pruhy přes celou šířku okna i nad 90rem — pozadí se protáhne stínem
   a ořízne clip-pathem jen do stran, takže nevznikne vodorovný posuvník. */
.bf-k .bf-section--dark {
  box-shadow: 0 0 0 100vmax var(--bf-dark-bg);
  clip-path: inset(0 -100vmax);
}

/* ---------- Pruh s hlavním e-mailem (tmavý) ------------------------------ */
.bf-k-mail {
  display: grid;
  gap: var(--bf-sp-3);
  padding-block: var(--bf-sp-5);
}
.bf-k-mail__lab p { margin: var(--bf-sp-2) 0 0; color: var(--bf-dark-muted); max-width: 30ch; }
.bf-section--dark .bf-k-mail__lab p { color: var(--bf-dark-muted); }
.bf-k-mail__email { margin: 0; }
.bf-k-mail__email a,
.bf-k-body .bf-k-mail__email a {
  font-family: var(--bf-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 7.6cqi, 4.25rem);
  line-height: var(--bf-lh-tight);
  letter-spacing: var(--bf-tr-display);
  color: var(--bf-dark-text);
  text-decoration: none;
  border-bottom: var(--bf-hair-2) solid var(--bf-red);
  padding-bottom: .1em;
  overflow-wrap: anywhere;
}
.bf-k-body .bf-k-mail__email a:hover,
.bf-k-body .bf-k-mail__email a:focus-visible { color: var(--bf-paper-2); border-bottom-color: var(--bf-red-light); }
.bf-k-mail__tel {
  margin: var(--bf-sp-2) 0 0;
  font-family: var(--bf-micro);
  font-size: var(--bf-fs-lead);
  font-variant-numeric: lining-nums tabular-nums;
}
.bf-k-body .bf-k-mail__tel a { text-decoration: none; }

/* ---------- Oddíl s marginálií (I.–III.) --------------------------------- */
.bf-k-sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bf-sp-3);
  padding-block: var(--bf-sp-6);
  border-top: var(--bf-hair) solid var(--bf-rule);
}
.bf-k-mail + .bf-k-sec,
.bf-k-sec.bf-section--dark + .bf-k-sec { border-top: 0; }
.bf-k-sec__num {
  margin: 0 0 var(--bf-sp-2);
  font-family: var(--bf-micro);
  font-weight: 600;
  font-size: var(--bf-fs-micro);
  letter-spacing: var(--bf-tr-micro);
  color: var(--bf-accent);
}
.bf-k-sec__margin h2 { margin-bottom: var(--bf-sp-2); }
.bf-k-sec__note { margin: 0; max-width: 26ch; font-size: var(--bf-fs-small); line-height: 1.55; color: var(--bf-muted); }
.bf-section--dark .bf-k-sec__num { color: var(--bf-red-light); }
.bf-section--dark .bf-k-sec__note { color: var(--bf-dark-muted); }

/* Tiráž pořadatele */
.bf-k-tir {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-top: var(--bf-hair-2) solid var(--bf-ink);
}
.bf-k-tir dt {
  padding-top: var(--bf-sp-2);
  font-family: var(--bf-micro);
  font-weight: 600;
  font-size: var(--bf-fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bf-muted);
}
.bf-k-tir dd {
  margin: 0;
  padding: var(--bf-sp-1) 0 var(--bf-sp-2);
  border-bottom: var(--bf-hair) solid var(--bf-rule);
  font-size: 1.125rem;
  line-height: var(--bf-lh-meta);
}

/* Lidé BookFestu */
.bf-k-ppl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--bf-hair-2) solid var(--bf-ink);
}
.bf-k-p {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--bf-sp-2);
  align-content: start;
  padding-block: var(--bf-sp-3);
  border-bottom: var(--bf-hair) solid var(--bf-rule);
}
.bf-k-mono {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  box-sizing: border-box;
  border: var(--bf-hair) solid var(--bf-ink);
  font-family: var(--bf-display);
  font-weight: 700;
  font-style: italic;
  font-size: 1.75rem;
  letter-spacing: -.02em;
  line-height: 1;
}
.bf-k-mono::after { content: ""; position: absolute; inset: 4px; border: var(--bf-hair) solid var(--bf-rule); }
.bf-k-p .bf-eyebrow { margin-bottom: var(--bf-sp-1); }
.bf-k-p h3 { margin: 0 0 var(--bf-sp-2); font-size: clamp(1.75rem, 3.4cqi, 2.5rem); line-height: var(--bf-lh-tight); }
.bf-k-p ul { font-size: var(--bf-fs-body); line-height: 1.75; }
.bf-k-p__quote { grid-column: 1 / -1; margin: var(--bf-sp-2) 0 0; font-style: italic; font-size: var(--bf-fs-lead); line-height: 1.55; color: var(--bf-muted); }
.bf-k-p--lead .bf-k-mono { color: var(--bf-accent); border-color: var(--bf-accent); }

/* Štítek území — barva města z vlastní .bf-city-- třídy, vždy i textem */
.bf-k-terr {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-sp-1);
  margin: 0 0 var(--bf-sp-2);
  padding: .375rem .625rem;
  border: var(--bf-hair) solid currentColor;
  font-family: var(--bf-micro);
  font-weight: 600;
  font-size: var(--bf-fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bf-accent);
}
.bf-k-terr::before { content: ""; inline-size: .5rem; block-size: .5rem; background: currentColor; }

/* Zakladatelé — kolofon na tmavém */
.bf-k-col { border-top: var(--bf-hair) solid var(--bf-gold); }
.bf-k-col__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bf-sp-1);
  padding-block: var(--bf-sp-3);
  border-bottom: var(--bf-hair) solid var(--bf-dark-rule);
}
.bf-k-col__row h3 { font-size: clamp(1.625rem, 3cqi, 2.375rem); line-height: var(--bf-lh-tight); }
.bf-k-col__house { margin: 0; font-style: italic; font-size: 1.3125rem; }
.bf-section--dark .bf-k-col__c { margin: 0; font-size: var(--bf-fs-small); line-height: 1.7; color: var(--bf-dark-muted); }

/* ---------- Nejbližší setkání (skládá šablona) --------------------------- */
.bf-k-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bf-sp-4);
  padding-block: var(--bf-sp-6) var(--bf-sp-3);
  border-top: var(--bf-hair) solid var(--bf-rule);
}
.bf-k-next__title {
  margin: var(--bf-sp-2) 0 var(--bf-sp-3);
  font-size: clamp(3rem, 8.4cqi, 5.75rem);
  line-height: .92;
}
.bf-k-next__title em { font-style: normal; color: var(--bf-accent); }
.bf-k-next__facts { display: flex; flex-wrap: wrap; gap: var(--bf-sp-2) var(--bf-sp-4); margin: 0; padding: 0; list-style: none; }
.bf-k-next__facts li {
  font-family: var(--bf-micro);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bf-k-next__r { display: flex; flex-direction: column; gap: var(--bf-sp-2); }
.bf-k-next__r .bf-btn { justify-content: space-between; min-block-size: 3.5rem; box-sizing: border-box; }

/* ---------- Široký sloupec ----------------------------------------------- */
@container bf-slot (min-width: 40rem) {
  .bf-k-tir { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: var(--bf-sp-3); }
  .bf-k-tir dt { padding-block: calc(var(--bf-sp-2) + .3rem) var(--bf-sp-2); border-bottom: var(--bf-hair) solid var(--bf-rule); }
  .bf-k-tir dd { padding-block: var(--bf-sp-2); font-size: 1.1875rem; }
  .bf-k-col__row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--bf-sp-3); align-items: baseline; }
}

@container bf-slot (min-width: 56rem) {
  .bf-k-hero,
  .bf-k-mail,
  .bf-k-sec,
  .bf-k-next { grid-template-columns: var(--bf-k-cols); column-gap: var(--bf-gap); }

  .bf-k-hero { padding-block: var(--bf-sp-6); row-gap: var(--bf-sp-3); }
  .bf-k-hero__intro > * { grid-column: 1 / -1; }
  .bf-k-hero__title { grid-column: 1 / 9; }
  .bf-k-hero__intro > .bf-lead { grid-row: 2; grid-column: 9 / 13; align-self: end; margin-bottom: .6rem; }
  /* Ořízka — tečkovaná linka u pravého okraje (jako u .bf-edge) */
  .bf-k-hero::after {
    content: "";
    position: absolute;
    inset-block: var(--bf-sp-6);
    inset-inline-end: calc(-1 * var(--bf-sp-2));
    inline-size: 7px;
    background-image: repeating-linear-gradient(to bottom, var(--bf-rule) 0 1px, transparent 1px 5px);
    pointer-events: none;
  }

  .bf-k-mail { padding-block: var(--bf-sp-6); align-items: end; }
  .bf-k-mail__lab { grid-column: 1 / 5; }
  .bf-k-mail__addr { grid-column: 5 / 13; justify-self: end; text-align: end; }
  .bf-k-mail__email a,
  .bf-k-body .bf-k-mail__email a { font-size: clamp(2.5rem, 4.6cqi, 4.25rem); white-space: nowrap; overflow-wrap: normal; }

  .bf-k-sec { padding-block: var(--bf-sp-7) var(--bf-sp-6); }
  .bf-k-sec__margin { grid-column: 1 / 4; }
  .bf-k-sec__body { grid-column: 4 / 13; }

  .bf-k-ppl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-k-p { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--bf-sp-3); padding: var(--bf-sp-4) var(--bf-sp-4) var(--bf-sp-4) 0; }
  .bf-k-p .bf-k-mono { inline-size: 4.5rem; block-size: 4.5rem; font-size: 2.125rem; }
  .bf-k-p--lead ~ .bf-k-p:nth-child(odd) { padding-inline: var(--bf-sp-4) 0; border-left: var(--bf-hair) solid var(--bf-rule); }
  .bf-k-p--lead { grid-column: 1 / -1; grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr); padding-inline-end: 0; }
  .bf-k-p--lead .bf-k-mono { inline-size: 6rem; block-size: 6rem; font-size: 2.875rem; }
  .bf-k-p--lead h3 { font-size: clamp(2.5rem, 4.4cqi, 3.75rem); }
  .bf-k-p--lead .bf-k-p__quote { grid-column: auto; align-self: end; margin: 0; }

  .bf-k-next { padding-block: var(--bf-sp-7) var(--bf-sp-4); align-items: end; }
  .bf-k-next__l { grid-column: 1 / 8; }
  .bf-k-next__r { grid-column: 9 / 13; }
}