/* ============================================================
   URBANLIST SLIB — blok důvěry + dialog "Jak pracujeme"
   Spec: devnotes/editorial-detail/brief.md → Phase 5
   Partialy: catalogue/views/parts/urbanlist-slib.php (+ -modal.php)
   Načítají: detail projektu, /projekty, /pro-developery

   Materiál: teplý pískový tón = "náš slib" (nikde jinde se nepoužívá),
   amber jen v kroužcích s fajfkou. Literata = titulky, Inter = vše ostatní.
   Prefix .slib- (catalog.css už má vlastní .ed-card / .ed-link).
   ============================================================ */

.slib,
.slib-modal {
  --slib-warm: #f4f0e9;
  --slib-ink: #171717;
  --slib-text: #404040;
  --slib-accent-ink: #92400e;  /* amber-800 — odkaz slibu */
  --slib-hair: rgba(10, 10, 10, 0.09);
  --slib-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --slib-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

.slib-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.slib-title,
.slib-col-title {
  font-family: 'Literata', Georgia, serif;
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  color: var(--slib-ink);
  text-wrap: balance;
}

/* Položka (vzor Plum Promise): kroužek s fajfkou + jedna plynulá věta
   "<strong>Tučný úvod</strong> – text"; fajfka sedí na prvním řádku */
.slib-list { display: grid; }
.slib-item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: start;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--slib-text);
  text-wrap: pretty;
}
.slib-check { width: 1.25rem; height: 1.25rem; margin-top: 0.1875rem; }
.slib-item-title { font-weight: 600; color: var(--slib-ink); }

/* Odkaz slibu: tmavě jantarový (jediný jantarový text na webu, ladí s fajfkami) */
.slib-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--slib-accent-ink);
  text-decoration: underline;
  text-decoration-color: rgba(146, 64, 14, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.slib-link:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 3px; border-radius: 2px; }
.slib-link:active { text-decoration-color: currentColor; }

@media (min-width: 640px) {
  .slib-item { font-size: 0.9375rem; }
  .slib-check { margin-top: 0.125rem; }
  .slib-link { min-height: 2rem; font-size: 0.9375rem; }
}
@media (hover: hover) and (pointer: fine) {
  .slib-link:hover { color: #78350f; text-decoration-color: currentColor; }
}


/* ── COMPACT: seznam bez pozadí pod "Co nás zaujalo" ───────── */
/* Oddělený jen vzduchem (v #fakta nejsou žádné linky) — samostatnou
   jednotku z něj dělá nadpis v Literatě a jantarové fajfky */
.slib--compact { max-width: 46rem; margin-top: 3rem; } /* širší míra = položky na jeden řádek, jako Plum */
.slib--compact .slib-title { font-size: 1.375rem; line-height: 1.25; }
.slib--compact .slib-list { gap: 0.75rem; margin-top: 1rem; }
.slib--compact .slib-more { margin-top: 0.5rem; }

@media (min-width: 1024px) {
  .slib--compact { margin-top: 3.5rem; }
}


/* ── FULL: teplý box v šířce obsahu (vzor Plum Promise) ────── */
/* Nadpis nahoře, položky ve 3 sloupcích (3 + 2), odkaz vlevo dole.
   Tablet 2 sloupce, telefon 1 sloupec a box od kraje ke kraji. */
.slib-box {
  margin-inline: -1.5rem;
  padding: 3rem 1.5rem 2rem;
  background: var(--slib-warm);
}
.slib--full .slib-title {
  font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
  line-height: 1.15;
}
.slib-intro {
  max-width: 36rem;
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--slib-text);
  text-wrap: pretty;
}
.slib--full .slib-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.slib--full .slib-more { margin-top: 1.75rem; }

@media (min-width: 640px) {
  .slib-box {
    margin-inline: 0;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
    border-radius: 6px;
  }
  .slib--full .slib-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin-top: 2.25rem; }
  .slib--full .slib-more { margin-top: 2.5rem; }
}
@media (min-width: 1024px) {
  .slib--full .slib-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 3rem; }
  .slib--full .slib-item { max-width: 24rem; }
}

/* /projekty: box mezi poslední sekcí a patičkou */
.slib--framed { padding-bottom: 5rem; }

/* /pro-developery: stejná konvence jako bloky citátů (rounded-2xl, sekce py-6 / lg:py-8) */
.slib--pdev { padding-block: 1.5rem; }
.slib--pdev .slib-box { border-radius: 0; }
@media (min-width: 640px) {
  .slib--pdev .slib-box { border-radius: 1rem; }
}
@media (min-width: 1024px) {
  .slib--pdev { padding-block: 2rem; }
}


/* ── DIALOG "JAK PRACUJEME" ────────────────────────────────── */
html.slib-locked { overflow: hidden; scrollbar-gutter: stable; }

.slib-modal {
  width: min(72rem, calc(100% - 3rem));
  max-width: none;
  max-height: min(48rem, calc(100dvh - 3rem));
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--slib-ink);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.06), 0 32px 80px -24px rgba(10, 10, 10, 0.4);
  overflow: hidden;
  overscroll-behavior: contain;
}
.slib-modal[open] { display: flex; flex-direction: column; }

/* Pohyb (křivky z briefu): příchod 360 ms drawer, odchod 200 ms ease-out */
.slib-modal[open] {
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--slib-ease-out), transform 360ms var(--slib-ease-drawer);
}
@starting-style {
  .slib-modal[open] { opacity: 0; transform: translateY(0.75rem) scale(0.985); }
}
.slib-modal.is-closing {
  opacity: 0;
  transform: translateY(0.375rem) scale(0.99);
  transition: opacity 200ms var(--slib-ease-out), transform 200ms var(--slib-ease-out);
}
.slib-modal::backdrop {
  background: rgba(10, 10, 10, 0.36);
  opacity: 1;
  transition: opacity 300ms var(--slib-ease-out);
}
@starting-style {
  .slib-modal[open]::backdrop { opacity: 0; }
}
.slib-modal.is-closing::backdrop { opacity: 0; transition-duration: 200ms; }

.slib-modal-head {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem 1rem 2.5rem;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.slib-modal-head.is-scrolled { border-bottom-color: var(--slib-hair); }
.slib-modal-title { font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--slib-ink); }
.slib-grabber { display: none; }

.slib-close {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: inset 0 0 0 1px #e5e5e5;
  color: #525252;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--slib-ease-out);
}
.slib-close svg { width: 1.125rem; height: 1.125rem; }
.slib-close:active { transform: scale(0.97); }
.slib-close:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; }
.slib-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  transform: translate(-50%, -50%);
}
@media (pointer: fine) { .slib-close::after { display: none; } }
@media (hover: hover) and (pointer: fine) {
  .slib-close:hover { background: #f5f5f5; color: var(--slib-ink); }
}

.slib-modal-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.5rem 2.5rem 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.slib-col { padding-inline: 2rem; }
.slib-col:first-child { padding-left: 0; }
.slib-col:last-child { padding-right: 0; }
.slib-col + .slib-col { border-left: 1px solid var(--slib-hair); }

.slib-col-title { font-size: 1.625rem; line-height: 1.2; }
.slib-col-body { margin-top: 1.75rem; }

.slib-mi-list { display: grid; gap: 1.5rem; }
.slib-mi {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: 0.875rem;
  align-items: start;
}
.slib-mi-icon { width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; color: #262626; }
.slib-mi-title { display: block; font-size: 0.9375rem; font-weight: 500; line-height: 1.375rem; color: var(--slib-ink); }
.slib-mi-text { display: block; margin-top: 0.125rem; font-size: 0.9375rem; line-height: 1.5; color: var(--slib-text); text-wrap: pretty; }
.slib-col-text { font-size: 0.9375rem; line-height: 1.6; color: var(--slib-text); text-wrap: pretty; }
.slib-inquiry { margin-top: 1rem; }

/* Tablet: sloupce → řádky (nadpis vlevo | obsah vpravo), oddělené vodorovnou linkou */
@media (max-width: 1023px) {
  .slib-modal { width: min(44rem, calc(100% - 3rem)); }
  .slib-modal-body { grid-template-columns: minmax(0, 1fr); padding-top: 0.5rem; }
  .slib-col {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: 2rem;
    padding: 2rem 0;
  }
  .slib-col:first-child { padding-top: 1rem; }
  .slib-col:last-child { padding-bottom: 0; }
  .slib-col + .slib-col { border-left: 0; border-top: 1px solid var(--slib-hair); }
  .slib-col-body { margin-top: 0.25rem; }
}

/* Telefon: bottom sheet přes celou výšku, sloupce pod sebou, vlastní scroll */
@media (max-width: 639px) {
  .slib-modal {
    width: 100%;
    height: calc(100dvh - 0.75rem);
    max-height: calc(100dvh - 0.75rem);
    margin: auto 0 0;
    border-radius: 8px 8px 0 0;
  }
  .slib-modal[open] { transition: opacity 200ms var(--slib-ease-out), transform 360ms var(--slib-ease-drawer); }
  @starting-style {
    .slib-modal[open] { opacity: 1; transform: translateY(100%); }
  }
  .slib-modal.is-closing { opacity: 1; transform: translateY(100%); transition: transform 240ms var(--slib-ease-out); }

  .slib-modal-head {
    padding: 1.25rem 1rem 0.75rem 1.5rem;
    touch-action: none;
    cursor: grab;
  }
  .slib-grabber {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    display: block;
    width: 2.25rem;
    height: 0.25rem;
    border-radius: 999px;
    background: #d4d4d4;
    transform: translateX(-50%);
  }
  .slib-modal-title { font-size: 1rem; }
  .slib-close { width: 2.5rem; height: 2.5rem; }
  .slib-close svg { width: 1.25rem; height: 1.25rem; }

  .slib-modal-body { padding: 0 1.5rem calc(2.5rem + env(safe-area-inset-bottom)); }
  .slib-col { display: block; padding: 2rem 0; }
  .slib-col:first-child { padding-top: 1rem; }
  .slib-col-title { font-size: 1.5rem; }
  .slib-col-body { margin-top: 1.25rem; }
  .slib-mi-title,
  .slib-mi-text,
  .slib-col-text { font-size: 1rem; }
}

/* Reduced motion: jen prolnutí, žádný posun ani zvětšení */
@media (prefers-reduced-motion: reduce) {
  .slib-modal[open],
  .slib-modal.is-closing { transform: none; transition: opacity 150ms linear; }
  @starting-style {
    .slib-modal[open] { opacity: 0; transform: none; }
  }
  .slib-modal.is-closing { opacity: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .slib-modal::backdrop { background: rgba(10, 10, 10, 0.6); }
}