Responzivita & Media Queries

/* ✅ MOBILE-FIRST (min-width) */
/* Základní = pro mobil */
.card { flex-direction: column; }
.sidebar { display: none; }
.grid { grid-template-columns: 1fr; }

/* Přidáváme pro větší */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card { flex-direction: row; }
  .sidebar { display: block; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ❌ DESKTOP-FIRST (max-width) */
/* Základní = pro desktop */
.grid { grid-template-columns: repeat(3, 1fr); }
.sidebar { display: block; }

/* Přepisujeme pro menší */
@media (max-width: 1023px) {
  .sidebar { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .grid { grid-template-columns: 1fr; }
}

/* Základní breakpointy (Tailwind-inspired) */
/* xs: < 640px  — žádný breakpoint (default) */
/* sm: ≥ 640px */
@media (min-width: 640px)  { }
/* md: ≥ 768px */
@media (min-width: 768px)  { }
/* lg: ≥ 1024px */
@media (min-width: 1024px) { }
/* xl: ≥ 1280px */
@media (min-width: 1280px) { }

/* Kombinace podmínek */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Pouze tablet */
}
@media (min-width: 768px), print {
  /* Tablet nebo tisk (čárka = OR) */
}
@media not (min-width: 1024px) {
  /* Negace (ne desktop) */
}

/* Orientace */
@media (orientation: landscape) {
  .hero { min-height: 50vh; }
}

/* Touch vs myš */
@media (hover: none) {
  /* Zařízení bez myši (mobil) */
  .hover-menu { display: none; }
  .touch-menu { display: block; }
}
@media (hover: hover) {
  /* Zařízení s myší */
  .btn:hover { background: #1d4ed8; }
}

/* Preference */
@media (prefers-color-scheme: dark) {
  :root { --bg: #0a0a0f; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}
@media (prefers-contrast: more) {
  :root { --border: #000; }
}

/* Tisk */
@media print {
  .nav, .footer, .sidebar { display: none; }
  body { font-size: 12pt; color: #000; }
  a::after { content: " (" attr(href) ")"; }
  @page { margin: 2cm; }
}

/* CSS proměnné s breakpointy */
:root { --cols: 1; }
@media (min-width: 640px) { :root { --cols: 2; } }
@media (min-width: 1024px) { :root { --cols: 3; } }
.grid {
  grid-template-columns: repeat(var(--cols), 1fr);
}

1. Rodič: container-type: inline-size;
2. Dítě: @container (min-width: 400px) { ... }

/* 1. Definice kontejneru */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* 2. Stylování dle kontejneru */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card-img {
    width: 40%;
    flex-shrink: 0;
  }
}

@container card (min-width: 600px) {
  .card { gap: 2rem; }
  .card-title { font-size: 1.5rem; }
}

/* Bez pojmenování */
.sidebar { container-type: inline-size; }

@container (min-width: 300px) {
  .widget { /* Reaguje na sidebar šířku */ }
}

/* Container query + grid */
.products {
  container-type: inline-size;
}
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@container (min-width: 500px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container (min-width: 800px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Logické operátory */
@container (min-width: 400px) and
           (max-width: 700px) {
  .card { /* Jen v tomto rozmezí */ }
}

/* Container Units (cqw, cqh...) */
.responsive-text {
  font-size: clamp(1rem, 4cqw, 2rem);
  /* 4% šířky kontejneru, min 1rem, max 2rem */
}

/* Hero sekce — mobilní fix */
.hero {
  /* Starý způsob — problém na mobilu */
  min-height: 100vh;

  /* ✅ Moderní — dvh */
  min-height: 100dvh;

  /* ✅ Konzervativní — svh */
  min-height: 100svh;

  /* Fallback pro starší prohlížeče */
  min-height: 100vh;
  min-height: 100dvh;
}

/* Full viewport overlay */
.modal-backdrop {
  position: fixed;
  inset: 0;
  /* inset: 0 = top:0 right:0 bottom:0 left:0 */
  /* Nepotřebuje vh */
}

/* Fluid typografie s vw */
.display-title {
  font-size: clamp(2rem, 8vw, 6rem);
}

/* Čtverec z viewport */
.vp-square {
  width: 50vmin;
  height: 50vmin; /* = 50% menší strany */
}

/* Full width bez scrollbaru */
.full-width {
  width: 100%;   /* ✅ správně */
  /* width: 100vw; ❌ může způsobit scroll */
}

/* Breakpoint bez media query */
.responsive-font {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
}

/* Container jednotky */
.container { container-type: inline-size; }
.title {
  font-size: clamp(1rem, 5cqw, 2rem);
}

<!-- srcset + sizes -->
<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg  400w,
    hero-800.jpg  800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w
  "
  sizes="
    (max-width: 640px)  100vw,
    (max-width: 1024px) 80vw,
    1200px
  "
  alt="Hero obrázek"
  width="1200" height="600"
  loading="eager"
  decoding="async"
>

<!-- picture: formáty + fallback -->
<picture>
  <source type="image/avif"
    srcset="img.avif 1x, img@2x.avif 2x">
  <source type="image/webp"
    srcset="img.webp 1x, img@2x.webp 2x">
  <img src="img.jpg"
    srcset="img@2x.jpg 2x"
    alt="Popis"
    width="800" height="600"
    loading="lazy">
</picture>

<!-- Art direction: jiný ořez -->
<picture>
  <source media="(max-width: 640px)"
    srcset="hero-mobile.jpg">
  <source media="(max-width: 1024px)"
    srcset="hero-tablet.jpg">
  <img src="hero-desktop.jpg"
    alt="Hero" width="1440" height="600">
</picture>

/* CSS: responzivní obrázky */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0f;
    --text: #f3f4f6;
  }
}

/* Animace */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Vyšší kontrast */
@media (prefers-contrast: more) {
  :root {
    --border: #000000;
    --text: #000000;
    --bg: #ffffff;
  }
  .btn { border: 2px solid currentColor; }
}

/* Datová úspora (nenačítat velké obrázky) */
@media (prefers-reduced-data: reduce) {
  .hero-bg { background-image: none; }
  .video-autoplay { display: none; }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
  .custom-checkbox {
    forced-color-adjust: none;
    /* Použijte vlastní barvy i v HC */
  }
  .btn {
    border: 2px solid ButtonText;
  }
}

/* Průhlednost */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    backdrop-filter: none;
    background: rgba(255,255,255,0.95);
  }
}