/* ==========================================================
   utilities.css — pomocné třídy pro pralesy.cz
   ----------------------------------------------------------
   Slouží k rychlé úpravě layoutu, typografie a spacingu
   ========================================================== */

/* === TEXT ALIGN === */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* === FONT WEIGHT === */
.fw-light    { font-weight: 300; }
.fw-normal   { font-weight: 400; }
.fw-medium   { font-weight: 500; }
.fw-bold     { font-weight: 700; }

/* === FONT SIZE === */
.text-xs { font-size: 0.8rem; }
.text-sm { font-size: 0.9rem; }
.text-md { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.35rem; }
.text-xxl { font-size: 1.75rem; }

/* === COLOR HELPERS === */
.text-muted { color: var(--muted); }
.text-accent { color: var(--acc); }
.text-dark { color: var(--fg); }
.bg-light { background: var(--bg-alt); }
.bg-white { background: #fff; }

/* === DISPLAY === */
.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-inline { display: inline; }
.d-none   { display: none; }

.flex-wrap { flex-wrap: wrap; }
.flex-col  { flex-direction: column; }
.flex-center { justify-content: center; align-items: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

/* === SPACING (MARGIN / PADDING) === */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }

.pb-1 { padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }

.px-1 { padding-inline: 0.5rem; }
.px-2 { padding-inline: 1rem; }
.py-1 { padding-block: 0.5rem; }
.py-2 { padding-block: 1rem; }

/* === WIDTH / HEIGHT === */
.w-100 { width: 100%; }
.w-50  { width: 50%; }
.h-100 { height: 100%; }

/* === LAYOUT CONTAINERS === */
.container-narrow {
  width: min(100%, 800px);
  margin-inline: auto;
  padding-inline: 1rem;
}
.container-wide {
  width: min(100%, 1400px);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* === BORDER / LINES === */
.border { border: 1px solid #ddd; }
.border-top { border-top: 1px solid #ddd; }
.border-bottom { border-bottom: 1px solid #ddd; }
.border-none { border: none; }

/* === SHADOWS === */
.shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.shadow-md { box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.shadow-none { box-shadow: none; }

/* === POSITIONING === */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }

/* === Z-INDEX === */
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }

/* === RESPONSIVE HELPERS === */
@media (max-width: 900px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}
@media (min-width: 901px) {
  .hide-desktop { display: none !important; }
}

/* === SCROLL / OVERFLOW === */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* === CURSOR === */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* === TRANSITIONS === */
.transition { transition: all 0.2s ease; }

/* === ANIMACE (jednoduché fade / slide) === */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.slide-up {
  opacity: 0;
  transform: translateY(10px);
  animation: slideUp 0.6s ease forwards;
}
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}