/* ==========================================================================
   dokumentace.css — Documentation / API Page Specific Styles
   API feature cards (kf-grid), API notice banner, code block syntax
   highlighting, form row layout, and page-specific responsive overrides.
   ========================================================================== */

/* ===== API FEATURE CARDS ===== */
.kf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.kf-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 2rem 1.5rem; transition: all .35s var(--ease-out-expo); position: relative;
}
.kf-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .04), 0 24px 64px rgba(0, 0, 0, .07);
  border-color: transparent;
}
.kf-card-ico {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem;
}
.kf-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .5rem; }
.kf-card p { font-size: .88rem; color: var(--gray-500); line-height: 1.6; }

/* ===== API NOTICE ===== */
.api-notice {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 2.5rem 3rem;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.api-notice-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: #FFF7D6; color: #B8960A;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.api-notice-content h3 {
  font-size: 1.15rem; font-weight: 800; margin-bottom: .6rem; color: var(--gray-900);
}
.api-notice-content p {
  font-size: .95rem; color: var(--gray-500); line-height: 1.7; margin-bottom: .4rem;
}
.api-notice-content p:last-child { margin-bottom: 0; }

/* ===== API FORM ===== */
.api-form { display: flex; flex-direction: column; gap: 1.2rem; }

/* Form card max-width override for dokumentace */
.dokumentace-form .form-card { max-width: 620px; margin: 0 auto; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

/* ===== CODE BLOCK ===== */
.code-block {
  background: var(--dark);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  max-width: 760px;
  margin: 0 auto;
  overflow-x: auto;
  position: relative;
}
.code-block-header {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.2rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.code-block-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.code-block-dot:nth-child(1) { background: #FF5F56; }
.code-block-dot:nth-child(2) { background: #FFBD2E; }
.code-block-dot:nth-child(3) { background: #27C93F; }
.code-block-label {
  font-family: var(--font-head); font-size: .7rem; font-weight: 700;
  color: rgba(255, 255, 255, .4); text-transform: uppercase; letter-spacing: 1.5px;
  margin-left: auto;
}
.code-block pre {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .85rem; line-height: 1.8; color: rgba(255, 255, 255, .85);
  margin: 0; white-space: pre;
}
.code-block .code-comment { color: rgba(255, 255, 255, .35); }
.code-block .code-method { color: #1A9BFC; font-weight: 700; }
.code-block .code-url { color: var(--accent); }
.code-block .code-header { color: #8DD4FC; }
.code-block .code-key { color: #FEC80E; }
.code-block .code-string { color: #27C93F; }
.code-block .code-number { color: var(--orange); }

/* ===== RESPONSIVE — DOKUMENTACE ===== */
@media (max-width: 1024px) {
  .kf-grid { grid-template-columns: repeat(2, 1fr); }
  .api-notice { flex-direction: column; padding: 2rem; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kf-grid { grid-template-columns: 1fr; }
  .code-block { padding: 1.5rem; }
}