/* ===========================================================
   MOLINO DE HUELMA (molinodehuelma.cz) · SDÍLENÉ STYLY
   Komponenty, které používá každá stránka webu.
   Hodnoty (barvy, fonty, rozestupy) bydlí v tokens.css — tenhle
   soubor je jen bere přes var(--…), nikdy nepíše barvu natvrdo.

   Stavebnice projektu: STAVEBNICE-molinodehuelma.md
   Nezakládej další soubor se styly. Chybí komponenta? Přidej ji sem
   jako další oddíl, ne do nového souboru.
   =========================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-text); font-size: var(--text-zaklad); line-height: var(--text-radek);
       color: var(--text); background: var(--pozadi); }
h1, h2, h3 { font-family: var(--font-nadpis); line-height: 1.15; font-weight: 700; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin-top: var(--mezera-3); max-width: var(--sirka-text); }
.wrap { max-width: var(--sirka-obsah); margin: 0 auto; padding: 0 var(--mezera-4); }
.sekce { padding: var(--mezera-8) 0; }
.sekce--terakota { background: var(--barva-terracotta); }
.sekce--seda { background: var(--pozadi-sekce); }
.sekce--uhel { background: var(--barva-uhel); color: var(--text-na-tmavem); }
.sekce--uhel h2, .sekce--uhel h3 { color: var(--bila); }
.stred { text-align: center; }
.stred p { margin-left: auto; margin-right: auto; }

/* Hlavička */
.hlavicka { display: flex; align-items: center; justify-content: space-between;
            padding: var(--mezera-3) var(--mezera-4); background: var(--pozadi);
            border-bottom: 1px solid var(--oddelovac); flex-wrap: wrap; gap: var(--mezera-3); }
.hlavicka img { height: 76px; width: auto; display: block; }
.menu { display: flex; gap: var(--mezera-5); list-style: none; align-items: center; flex-wrap: wrap; }
.menu a { color: var(--text-tlumeny); text-decoration: none; }
.menu a:hover { color: var(--text); }

/* Tlačítka */
.btn { display: inline-block; padding: 17px 40px; border-radius: var(--zaobleni-tlacitko);
       font-size: 18px; text-decoration: none; border: 1px solid transparent; cursor: pointer;
       font-family: var(--font-text); font-weight: 500; }
.btn--prim { background: var(--barva-akcent); color: var(--bila); }
.btn--prim:hover { background: var(--barva-akcent-hover); }
.btn--sec { background: transparent; border-color: var(--barva-uhel); color: var(--barva-uhel); }
.sekce--uhel .btn--sec { border-color: var(--text-na-tmavem); color: var(--text-na-tmavem); }
/* Na uhlové sekci zelená splývá — primární tlačítko dostane terakotové pozadí a tmavý text. */
.sekce--uhel .btn--prim { background: var(--barva-terracotta); color: var(--barva-uhel); }
.sekce--uhel .btn--prim:hover { background: var(--barva-terracotta-tmava); }

/* Hero */
.hero { position: relative; min-height: 560px; display: flex; align-items: center;
        background: linear-gradient(rgba(33,41,52,.6), rgba(33,41,52,.45)),
                    url('grafika/fotky/haj-panorama-01.jpg');
        background-size: cover; background-position: center 65%; }
.hero .wrap { padding-top: var(--mezera-8); padding-bottom: var(--mezera-8); }
.hero .znacka { color: var(--barva-terracotta); font-family: var(--font-nadpis);
                letter-spacing: .06em; text-transform: uppercase; font-size: 17px; font-weight: 700; }
.hero h1 { color: var(--bila); max-width: 15ch; margin-top: var(--mezera-2); }
.hero p { color: var(--bila); font-size: var(--perex); }
.hero .btn { margin-top: var(--mezera-5); }

.foto { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--zaobleni-karta); }
.foto-cela-sirka { width: 100%; display: block; border-radius: var(--zaobleni-karta); }
.foto-placeholder { background: repeating-linear-gradient(45deg,
    rgba(33,41,52,.06), rgba(33,41,52,.06) 12px, rgba(33,41,52,.12) 12px, rgba(33,41,52,.12) 24px);
    border: 1px dashed var(--barva-uhel); border-radius: var(--zaobleni-karta);
    display: flex; align-items: center; justify-content: center; text-align: center;
    color: var(--text-tlumeny); font-size: var(--drobny); padding: var(--mezera-5); min-height: 220px; }

.mrizka { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mezera-5); margin-top: var(--mezera-6); }
.karta { background: var(--pozadi-karta); border-radius: var(--zaobleni-karta);
         box-shadow: var(--stin-karta); padding: var(--mezera-5); }
.karta h3 { margin-bottom: var(--mezera-2); }
.karta p { margin-top: var(--mezera-2); }

.produkty { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mezera-5); margin-top: var(--mezera-6); }
.produkt { background: var(--pozadi-karta); border-radius: var(--zaobleni-karta); box-shadow: var(--stin-karta); overflow: hidden; }
.produkt .foto-produkt { height: 220px; display: flex; align-items: center; justify-content: center;
                         background: var(--pozadi-sekce); padding: var(--mezera-4); }
.produkt .foto-produkt img { max-height: 100%; max-width: 100%; object-fit: contain; }
.produkt .obsah { padding: var(--mezera-4); }
.produkt .znacka-brzy { display: inline-block; background: var(--barva-terracotta); color: var(--barva-uhel);
                        font-size: var(--drobny); padding: 3px 10px; border-radius: 999px; margin-bottom: var(--mezera-2); }
.cena-note { color: var(--text-tlumeny); font-size: var(--drobny); margin-top: var(--mezera-3); }

.dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mezera-6); align-items: center; margin-top: var(--mezera-4); }
.dvojice img { border-radius: var(--zaobleni-karta); }

.najdete-karta { background: var(--pozadi-karta); border-radius: var(--zaobleni-karta); box-shadow: var(--stin-karta);
                 padding: var(--mezera-5); margin-top: var(--mezera-5); border-left: 4px solid var(--barva-akcent); }

/* Patička */
.paticka { background: var(--barva-uhel); color: var(--text-na-tmavem); padding: var(--mezera-7) 0 var(--mezera-5); }
.paticka .sloupce { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mezera-6); }
.paticka h3 { color: var(--bila); font-size: var(--h3); margin-bottom: var(--mezera-3); }
.paticka a { color: var(--text-na-tmavem); }
.paticka ul { list-style: none; }
.paticka li { margin-bottom: var(--mezera-2); }
.paticka .copyright { margin-top: var(--mezera-6); font-size: var(--drobny); opacity: .8; }
.paticka .velkoobchod { display: block; margin-top: var(--mezera-3); opacity: .8; }

/* Formulář (Kontakt) */
.formular { max-width: var(--sirka-text); margin: var(--mezera-6) auto 0; text-align: left; }
.formular .pole { margin-bottom: var(--mezera-4); }
.formular label { display: block; font-size: var(--drobny); margin-bottom: var(--mezera-1); color: var(--text-na-tmavem); opacity: .85; }
.formular input, .formular textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--zaobleni-tlacitko); border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); color: var(--text-na-tmavem); font-family: var(--font-text); font-size: 16px;
}
.formular input::placeholder, .formular textarea::placeholder { color: var(--text-na-tmavem); opacity: .5; }
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--barva-terracotta); border-color: transparent; }
.formular textarea { min-height: 120px; resize: vertical; }
.formular .btn--prim { border: none; }

/* Přehled prvků (prvky.html) — ukázkové bloky */
.ukazka-box { border: 1px solid var(--oddelovac); border-radius: var(--zaobleni-karta);
              padding: var(--mezera-5); margin-bottom: var(--mezera-6); }
.ukazka-box .popisek { font-size: var(--drobny); color: var(--text-tlumeny); margin-top: var(--mezera-3);
                        padding-top: var(--mezera-3); border-top: 1px solid var(--oddelovac); }
.ukazka-box .popisek strong { color: var(--text); }

@media (max-width: 820px) {
  .mrizka, .produkty, .dvojice, .paticka .sloupce { grid-template-columns: 1fr; }
  .hero { background-position: center 40%; }
}

@media (max-width: 640px) {
  .hlavicka { flex-direction: column; align-items: flex-start; }
  .menu { width: 100%; gap: var(--mezera-4); }
  .menu li:last-child { width: 100%; margin-top: var(--mezera-2); }
  .menu li:last-child .btn { display: block; width: 100%; text-align: center; }
}